5 ms·

Though they are linked, see e.g. http://rhythmus.be/md2indd/#fn2 http://rhythmus.be/md2indd/#fn2 — it’s Pandoc after all, which creates those ;-) The wide marg

Though they are linked, see e.g. http://rhythmus.be/md2indd/#fn2 http://rhythmus.be/md2indd/#fn2 — it’s Pandoc after all, which creates those ;-) The wide margins are due to typography best practices, which dictates between ~50 and 70 characters on a line. One could of course blow up font-size, as is in fashion, since Medium. But then there are too few lines above the fold. But you’re entirely correct as regards marginal notes. Unfortunately, they’re not trivially implemented, since you’d need to swap end-notes to side-notes relative to the viewport, cq. media query breakpoint, but while that involves DOM manipulation, it cannot be done with CSS alone. Let alone dealing with collision detection for stacking longer footnotes vertically…

munificent 11y ago
I implemented this in my online book[1] and it wasn't too bad. Try resizing the window to see. The entirety of the JS (not including jQuery) is: $(document).ready(function() { $(window).resize(refreshAsides); // Since we may not have the height correct for the images, adjust the asides // too when an image is loaded. $('img').load(function() { refreshAsides(); }); // On the off chance the browser supports the new font loader API, use it. if (document.fontloader) { document.fontloader.notifyWhenFontsReady(function() { refreshAsides(); }); } // Lame. Just do another refresh after a second when the font is *probably* // loaded to hack around the fact that the metrics changed a bit. window.setTimeout(refreshAsides, 200); refreshAsides(); }); function refreshAsides() { // Don't position them if they're inline. if ($(document).width() < 800) return; // Vertically position the asides next to the span they annotate. $("aside").each(function() { var aside = $(this); // Find the span the aside should be anchored next to. var name = aside.attr("name"); var span = $("span[name='" + name + "']"); if (span == null) { window.console.log("Could not find span for '" + name + "'"); return; } aside.offset({top: span.position().top - 3}); }); } In my book, the asides are positioned very precisely next to certain lines. If you don't need that level of precision, a pure CSS solution is possible, I think. Overlapping footnotes could be a problem, but to me that's a case where trying to completely separate design from content is a bad idea. Design should optimize for the actual prose you have and not all possible copy you might write. Likewise, it's often worth tweaking copy a bit to make it look better with your design. In a couple of cases with my book, I tweaked or rearranged asides to avoid them overlapping. [1]: http://gameprogrammingpatterns.com/introduction.html http://gameprogrammingpatterns.com/introduction.html
- Scarbutt 11y ago
  Nice book, what did you use to create the HTML from the Markdown? Or did you do some CSS fiddling?
  - munificent 11y ago
    A very simple cobbled together Python script: https://github.com/munificent/game-programming-patterns/blob/master/script/format.py https://github.com/munificent/game-programming-patterns/blob...
- Arnavion 11y ago
  > // On the off chance the browser supports the new font loader API, use it. > if (document.fontloader) { > document.fontloader.notifyWhenFontsReady(function() { FYI it's `document.fonts.ready()` promise now.
dredmorbius 11y ago
ORLY? http://codepen.io/dredmorbius/pen/OVmKZX http://codepen.io/dredmorbius/pen/OVmKZX https://m.imgur.com/a/TXpis https://m.imgur.com/a/TXpis

munificent 11y ago

I implemented this in my online book[1] and it wasn't too bad. Try resizing the window to see. The entirety of the JS (not including jQuery) is: $(document).ready(function() { $(window).resize(refreshAsides); // Since we may not have the height correct for the images, adjust the asides // too when an image is loaded. $('img').load(function() { refreshAsides(); }); // On the off chance the browser supports the new font loader API, use it. if (document.fontloader) { document.fontloader.notifyWhenFontsReady(function() { refreshAsides(); }); } // Lame. Just do another refresh after a second when the font is *probably* // loaded to hack around the fact that the metrics changed a bit. window.setTimeout(refreshAsides, 200); refreshAsides(); }); function refreshAsides() { // Don't position them if they're inline. if ($(document).width() < 800) return; // Vertically position the asides next to the span they annotate. $("aside").each(function() { var aside = $(this); // Find the span the aside should be anchored next to. var name = aside.attr("name"); var span = $("span[name='" + name + "']"); if (span == null) { window.console.log("Could not find span for '" + name + "'"); return; } aside.offset({top: span.position().top - 3}); }); } In my book, the asides are positioned very precisely next to certain lines. If you don't need that level of precision, a pure CSS solution is possible, I think. Overlapping footnotes could be a problem, but to me that's a case where trying to completely separate design from content is a bad idea. Design should optimize for the actual prose you have and not all possible copy you might write. Likewise, it's often worth tweaking copy a bit to make it look better with your design. In a couple of cases with my book, I tweaked or rearranged asides to avoid them overlapping. [1]: http://gameprogrammingpatterns.com/introduction.html http://gameprogrammingpatterns.com/introduction.html

Scarbutt 11y ago
Nice book, what did you use to create the HTML from the Markdown? Or did you do some CSS fiddling?
- munificent 11y ago
  A very simple cobbled together Python script: https://github.com/munificent/game-programming-patterns/blob/master/script/format.py https://github.com/munificent/game-programming-patterns/blob...
Arnavion 11y ago
> // On the off chance the browser supports the new font loader API, use it. > if (document.fontloader) { > document.fontloader.notifyWhenFontsReady(function() { FYI it's `document.fonts.ready()` promise now.

dredmorbius 11y ago

ORLY? http://codepen.io/dredmorbius/pen/OVmKZX http://codepen.io/dredmorbius/pen/OVmKZX https://m.imgur.com/a/TXpis https://m.imgur.com/a/TXpis