Github repository:
On how I arrived at this point:
At first I simply want a CSS snippet for sidenotes. After googling I found three ways of implementations:
- callout block hack
- code block hack
- footnote hack
They all are not so “markdown-native” way. The footnote hack only works in the Live Preview mode. The callout hack cannot align the sidenote to its anchor.
Then I found Tufte CSS, which is simply <span class=xxxx></span>, a markdown-native semantic-transparent way, instead of hacks from features designed for other purposes. The downside is that inline markdown won’t render between HTML tags (except in the Reading mode). Works great for pure texts though.
But then, since Tufte designed the sidenote’s width to be 50% of the main document. In obsidian, when ‘Readable Line Length’ option is on, expanding either left- or right-panel would make the 50%-width sidenote incomplete in the visible area.
Instead of hardcoding a certain smaller suitable width value, I wrote this Sidenote Auto-Adjust Module which decides the width upon the dimension of the visible area. If possible, make it 50%. As the window’s width shrinks, at some point switch to 50% x 75%. Later on, 50% x 50%, which is extremely narrow for a sidenote. If the available spaces are smaller than that, switch to the “intrusive” layout.
Besides the Tufte <span> style, I later accepted the callout hack and make it Tufte-like. Then I also embraced the callout skeuomorphic “stickynote”-like fashion and designed syntaxes for them. Then I thought, maybe I should refactor it, so there comes the Module + the styles.
The Module.css and the style.css can be merged into one file, if you don’t mind the keyword conflict between my sidenote styles and the styles written by other people.
At last, I also made it compatible with the Minimal theme (and its ‘wide’, ‘max’ helper-classes), and introduced the ‘leftsided’ / ‘rightsided’ feature, and created templates for quick insert.