I like to add responsive sidenotes to my blog posts. Responsive as in: hidden on small viewports, visible in the margin on wide viewports.
When hidden on small screens, a visible element ('link') is needed indicating there's more to read. My solution for this so far is:
<p>Some sentence with
<span class="sidenote" onclick="this.classList.toggle('active');">
underlined text
<span class="sidenote__content">
Sidenote content
</span>
</span>, which is clickable on small viewports.</p>
(with added line breaks for readability)
With CSS I add asterisks to both the underlined text and the sidenote content to visually connect them on large screens.
The problems with this solution are that the sidenote__content
correct display depends on CSS. It's shown in readers like Pocket, with:
- The sidenote content showing up mid sentence without any visual cues
- No space between the underlined text and the sidenote content.
I'm hoping that there's a more semantic solution than simple spans. <aside>
and <section>
can't be used as they're block elements and can automatically close the parent's p element.
A solution could be to separate the sidenote content from the link. However I'd prefer to keep the set of sidenote and its link as one set or pair, so they can be inserted as such into posts. Splitting them up would require javascript logic to match links with their content and can cause maintenance issues when one half of the set is missing.
href
point to the sidenote'sid
is probably the most portable semantic solution. Another approach would be to store the sidenote as adata-*
attribute on thespan
wrapping the underlined text, and then use CSS pseudo elements to conditionally display that content inline. That may not be as portable though.<small>
element seems to be the best candidate for the sidenote content. Using<small>
doesn't solve the mid sentence visibility of the content though. I think you're right about having to split up the parts.<aside>
element, which you've already ruled out, followed by the<details>
element which is, for the same reason, ruled out. For some reason I inherently dislike the<small>
, but I think that's from my days back during the time of table-layouts and then moving to semantics;<small>
feels - unjustly - like a step backwards. Nice question! :)