![]() It’s possible to watch for changes in the DOM, but I don’t think that can detect when an iframe has resized because it’s finished loading, which is what was causing this specific problem.įootnotes are converted to margin notes once the page finishes loading, and then the browser asynchronously loads the iframe containing the tweet, which throws everything out of alignment. I had a theory that the embedded tweets were causing content to move around in the article, which meant that I’d need to recompute the position of the footnotes after they’d finished loading. I found that the above alignment strategy mostly worked well, except for articles that had embedded tweets. Most of the time, my paragraphs should be short enough that it’s not disconcerting to have a margin note slightly above its in-text reference. In the end, I decided to align the margin notes to the top of the containing paragraph, not to the top of the actual footnote. they're always represented in pixels with the `px` suffix. offsetHeight + // margins for this footnote. Offset + // height of this footnote, including paddingįootnote. ![]() footnote // Set this so that the next element doesn't clobber this oneīottomOfLastElem = // calculated offset for this footnote Set this on the container so footnotes position relative to the With Javascript, move the footnotes from the bottom of the page, and put them next to their in-text links in the DOM. Absolute Positioning?Īt first, I thought I’d try absolute positioning. I’m still not sure why I made that decision! It took about an hour to get the initial idea sorta working, and then another five (□) to get it polished and working consistently. Well, yes, I agree, but… well, maybe it’s not that hard? And maybe it would look cool? This idea kinda stuck with me, and then on Saturday morning, I decided to give it a shot. There’s a good reason for that: making sidenotes responsive is not easy. you might have noticed that I don’t use sidenotes on this blog. They’re unobtrusive but close enough to the text to not break coherence… I personally enjoy sidenotes – some call them marginalia – very much. Why Margin Notes?Ī couple of weeks ago, I read an essay expounding the virtues of footnotes, in which Veit Heller writes: There will be an awful lot of footnotes in this article because of (a) unbridled enthusiasm for a cool feature I just shipped (b) I need a test suite for pathological cases. □ If you’re reading this on a computer, you’ll probably be able to see them in this article if you maximise your browser window, and if you still can’t see them, you can try zooming out! If you’re on a mobile or an HTML5-compliant smart fridge ( whyyyyy), there’s probably no hope for you, so here’s a video of the effect in action: This website now uses margin notes instead of footnotes if your browser window is wide enough 1.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |