One of the first things I learned about professional writing is that it’s best to remove all unnecessary words. Problem is that that can make a text rather dry. Sometimes I feel some background info or a joke is just too good to leave out. Sidenotes are a nice solution to not muddy an article and still leave some richness in there for the curious reader who’s not in a hurry. The problem is that the sidenotes package increases the sidenote counter at the end, so the referencees are only set up after the sidenote already ended. Implementing sidenotes on the web isn’t entirely straightforward though. Semantically, sidenotes are like footnotes, but visually they’re not. Markdown, tasks, pictures, colors, folders included. Keep your notes organised, personalised and always at your fingertips. It shows and hides on the side of your monitor to manage your notes distraction-free. The best choice of semantic elements may depend on the kind of content of the sidenotes. A beautiful note taking app with superpowers. My previous post about sidenotes, discusses what HTML elements I consider eligible and which I have chosen for what reasons. After writing that post I’ve learned a few things. Also some commenters kindly showed how I could improve the implementation. Now available without JavaScript! What my sidenotes do In this post I want show you my new and improved approach. My sidenotes (sidenote: By the way, here’s an example of an actual sidenote. For this, you can train your own AI models that fit your specific documents. Transkribus enables you to automatically recognise text, layout, and structure in your documents with the power of AI. A word or a span of words that it refers to.It’s using the same techniques that I present below. Transkribus is an AI platform that supports your work with historical documents. On viewports not wide enough for margins to show sidenotes, the sidenote content should be hidden by default.The implementation has meets the following requirements: The example sidenote above shows exactly what I mean with that. Reader modes and apps like Pocket and RSS readers should show sidenote content in a typographically acceptable way.The elements should not cause auto-closing of their parent tag.The sidenote content may contain clickable elements that can receive keyboard focus.The sidenote content may contain span elements such as and.The content of the sidenote should have a similarly valid HTML tag.The span that the sidenote refers to should have a proper semantic HTML element.A click/tap on the words referring to it should make the content visible. That means at the very least that I can’t rely on website’s CSS to place and style the elements correctly. The sidenote content should be read by screen readers, in a flow that makes sense. That likely means the two parts should be be placed together. That means that the visibility of the sidenote’s content for narrow viewports is toggled with a checkbox. I’m using different semantic elements than Tufte CSS though.
0 Comments
Leave a Reply. |