![]() MDN says it was made for representing side comments and small print. It has a title attribute, so the content is also shown on mouse hover.įor the sidenote content I use the element. With tabindex="0" and some CSS, the thing behaves just like a button. I used to think a must refer to an, but that’s actually seems to be not true. That idea came from Roman Komarov who uses it for this purpose too. Then there’s the inline phrase that gets the asterisk, or let’s call it a label. ) to keep the required JavaScript simple. I wrap the whole thing in a span, mainly (sidenote: As a nice side effect, on large screens, where the sidenote appears next to the body text, both asterisks get hover styling when one either the content or the inline span has the mouse cursor over it. My solution for now is a combination of HTML, CSS and JavaScript. In an earlier version of this post, I wrote I use a, but a reader’s comment had something better! My solution for semantic sidenotes The tag would be perfect for it, but buttons are hidden by Safari and Firefox’s reader modes, leaving a gap in the sentence. On small screens the phrase is clickable and toggles the visibility of the sidenote. An simple is commonly used for footnotes, but because I’m not sending the user to another place in the document, that feels off. I need an HTML tag for the span of words to which the sidenote refers: the phrase with the asterisk in the main text. It can’t contain markup like links either. Worse, the meaning (or title as it’s called) can only appear on mouse hover and can’t be styled. Unfortunately, it’s meant for abbreviations only. ![]() It’s even closer to a solution, because it can be placed inline. And Jekyll doesn’t handle it well, but there’s probably a workaround for that.įinally there’s the abbr element. As you can see, this causes the words following the sidenote to appear in a new paragraph. Browsers automatically add a close tag for that paragraph. Here’s what happens whenSorry, this is hard to follow with the line breaks. That means that it shouldn’t be placed inside paragraph. The element comes close to what I need it has two parts, like my sidenotes: Details The definition element could be abused for sidenotes, but my sidenotes are usually not about definitions of words. It doesn’t just have different styling than a sidenote, it’s semantically different. That also rules out the HTML element.Īsides are meant for, quoting MDN web docs: “a portion of a document whose content is only indirectly related to the document’s main content”.Īn aside doesn’t require the context of the main article to make sense. Moreover, most of my sidenotes make no sense without the context of the sentence they refer to. That requires one click to go there and another to go back to the article. They don’t appear in the margin, but below the text. Let’s first get footnotes 1 out of the way. Here are some options that I considered, with help from answers on my StackOverflow question. That likely means the two parts should be be placed together.Įlements that don’t work For sidenote content The sidenote content should be read by screen readers, in a flow that makes sense.That means at the very least that I can’t rely on website’s CSS to place and style the elements correctly. ![]()
0 Comments
Leave a Reply. |