I explored this specific problem and found native Obsidian comments to be best for this for me. I almost never use them in writing, and since they don’t show up in live preview, it makes them perfect for hiding things in plain sight.
And with a little CSS magic, I got this:
.workspace-leaf-content {
container-type: inline-size;
container-name: editor-layout;
}
@container editor-layout (min-width: 800px) {
.markdown-source-view.mod-cm6.is-readable-line-width.is-live-preview .cm-line:not(.HyperMD-codeblock):has(.cm-comment) {
position: absolute;
right: 1rem;
transform: translateY(-50%);
width: calc((100cqw - var(--file-line-width) - var(--ribbon-width) - 13rem) / 2);
font-size: 0.85em;
line-height: 1.4;
color: var(--text-muted);
font-style: italic;
box-sizing: border-box;
opacity: 0.5;
transition: opacity 0.2s ease-in-out;
}
.markdown-source-view.mod-cm6.is-readable-line-width.is-live-preview .cm-line:not(.HyperMD-codeblock):has(.cm-comment):hover {
opacity: 1;
}
.is-live-preview .cm-comment-start,
.is-live-preview .cm-comment-end {
display: none;
}
.cm-active.cm-line .cm-comment-start,
.cm-active.cm-line .cm-comment-end {
display: inline !important;
color: var(--text-faint);
}
}
I use this as “floating comments,” for when I want to add extra commentary to a piece of personal writing (I use footnotes [inline, mostly] instead for external pieces as that enforces greater and cleaner separation between my thoughts and that of the author).
For sidenotes, I decided to go the callout route. I also don’t really use those in my notes. So, they’re perfect for when I really want something to stand out by popping them to the side. The syntax is a little messy, but I couldn’t think of anything simpler:
.workspace-leaf-content {
container-type: inline-size;
container-name: editor-layout;
}
/*SIDENOTES*/
@container editor-layout (min-width: 800px) {
.markdown-source-view.mod-cm6.is-readable-line-width.is-live-preview .cm-callout:has([data-callout^="sn"]),
.markdown-rendered.is-readable-line-width .callout[data-callout^="sn"] {
position: absolute !important;
transform: translateY(-55%);
width: calc((100cqw - var(--file-line-width) - var(--ribbon-width) - 15rem) / 2);
margin: 0;
font-size: 0.85em;
box-shadow: none;
box-sizing: border-box;
color: var(--text-muted);
/* font-style: italic; */
z-index: 10;
opacity: 1;
}
.cm-callout:has([data-callout^="sn"]) .edit-block-button {
display: none !important;
}
.cm-callout:has([data-callout^="sn"]:not([data-callout^="sn-r"]):not([data-callout^="sn-l"])) .callout-title,
.markdown-rendered .callout[data-callout^="sn"]:not([data-callout^="sn-r"]):not([data-callout^="sn-l"]) .callout-title {
display: none !important;
}
.markdown-source-view.mod-cm6.is-readable-line-width.is-live-preview .cm-callout:has([data-callout^="sn-r"]),
.markdown-rendered.is-readable-line-width .callout[data-callout^="sn-r"] {
right: 1rem;
left: auto;
}
.markdown-source-view.mod-cm6.is-readable-line-width.is-live-preview .cm-callout:has([data-callout^="sn-l"]),
.markdown-rendered.is-readable-line-width .callout[data-callout^="sn-l"] {
left: 1rem;
right: auto;
}
.markdown-source-view.mod-cm6.is-readable-line-width.is-live-preview .cm-callout:has([data-callout^="sn"]:not([data-callout^="sn-r"]):not([data-callout^="sn-l"])),
.markdown-rendered.is-readable-line-width .callout[data-callout^="sn"]:not([data-callout^="sn-r"]):not([data-callout^="sn-l"]) {
font-style: italic;
left: 1rem;
right: auto;
}
.markdown-source-view.mod-cm6.is-readable-line-width.is-live-preview .cm-callout:has([data-callout^="sn-i-r"]),
.markdown-rendered.is-readable-line-width .callout[data-callout^="sn-i-r"] {
font-style: italic;
right: 1rem;
left: auto;
}
.markdown-source-view.mod-cm6.is-readable-line-width.is-live-preview .cm-callout:has([data-callout^="sn-il"]),
.markdown-rendered.is-readable-line-width .callout[data-callout^="sn-il"] {
font-style: italic;
left: 1rem;
right: auto;
}
}
/*FLOATING COMMENTS*/
@container editor-layout (min-width: 800px) {
.markdown-source-view.mod-cm6.is-readable-line-width.is-live-preview .cm-line:not(.HyperMD-codeblock):has(.cm-comment) {
position: absolute;
right: 1rem;
transform: translateY(-50%);
width: calc((100cqw - var(--file-line-width) - var(--ribbon-width) - 13rem) / 2);
font-size: 0.85em;
line-height: 1.4;
color: var(--text-muted);
font-style: italic;
box-sizing: border-box;
opacity: 0.5;
transition: opacity 0.2s ease-in-out;
}
.markdown-source-view.mod-cm6.is-readable-line-width.is-live-preview .cm-line:not(.HyperMD-codeblock):has(.cm-comment):hover {
opacity: 1;
}
.is-live-preview .cm-comment-start,
.is-live-preview .cm-comment-end {
display: none;
}
.cm-active.cm-line .cm-comment-start,
.cm-active.cm-line .cm-comment-end {
display: inline !important;
color: var(--text-faint);
}
}
Not perfect, but it works. Perhaps this could be an answer/approach to this.
Edit: screenshots?
