Sidenotes

Sidenotes are created with the <small role=note> element. Sidenotes are supplemental notes or comments placed in the margins of a page, typically alongside the main text. They provide additional information, context, or commentary related to the adjacent text.

The width of a sidenote is set using the --sidenote-width variable (which defaults to 20ch). On smaller screens, the notes will be floated inside the main text.

By default, sidenotes will be placed in the inline-end side on larger screens and floated to inline-end on small screens. Sidenotes will respect both the [dir=rtl|ltr] attribute and writing-mode CSS property. To switch sides apply the .flip class.

This page has a few sidenotes which are implemented using markup similar to the example below.

<small role=note>
	This is the first sidenote.
	By default it will float to the the inline-end side.
	The default value for <code>--sidenote-width</code> is <code>20ch</code>.
</small>
<aside role=note class="ok bg color flip" style="--sidenote-width:40ch;">
    <p>
	This is the second sidenote.
    <p>
	It will float to the inline-start side due to the <code>.flip</code> class.
	Since I wanted to change the width of the sidenote, I set the <code>--sidenote-width</code> variable to <code>40ch</code>.
</aside>

What follows now is some lorem ipsum so that we can demonstrate the sidenotes. You can adjust the viewport width in order to see how the sidenotes will display on mobile screens.

The Dude abides. That rug really tied the room together, did it not? This aggression will not stand, man. Mark it zero! This is not 'Nam, this is bowling; there are rules. Careful, man, there's a beverage here. That's just, like, your opinion, man.

My thinking about this case, which has been, like, a lot of ins and outs, a lot of what-have-yous. The bums will always lose. Obviously you're not a golfer. You human paraquat! Am I wrong? Am I wrong? Over the line! Donny, you're out of your element! You want a toe? I can get you a toe, believe me. There are ways, Dude. You don't have to do that, you know. I had a rough night and I hate the Eagles. What in God's name are you blathering about?

I am the Walrus. Or was it, Karl Hungus? A lot of strands in ol' Duder's head. Don't be fatuous, Jeffrey. Strong men also cry. Strong men also cry. Yes, but I was talking about the Dude. We're talking about unchecked aggression here. Has the whole world gone crazy?

You're out of your element, Donnie. Well, that's just, like, your opinion, man. Is this your homework, Larry? Wave of the future, Dude. One hundred percent electronic. Stay out of Malibu, deadbeat! Look, man, I've got a date. Yeah, well, you know, the Dude abides.