CSS Live Preview for Alignment

Custom CSS & Theme Design
2

The issue here isn’t the CSS or selector being used. The Markdown formatting isn’t going to render if it’s in HTML tags (in Live Preview mode).

If you search the forum you’ll find many examples. Here’s one.

I personally try to keep as much HTML out of my notes as I can, but sometimes it’s called for. You could try separating out the CSS for regular weight and bold, but the <span> tags aren’t going to display on the same line next to each other, so that’s probably not what you want.

<span class="right-align">test</span><span class="right-align-b">bold</span>

.right-align {
display: block;
text-align: right; 
}

.right-align-b {
display: block;
text-align: right;
font-weight: 700;
}

If you want to left/center/right align the entire document, you could do that with a cssclass, and then all markdown formatting will work fine.

For individual sections of a note to be right aligned, an option might be putting the content in a right aligned custom callout. That could work.

Here’s a great Obsidian CSS guide if you haven’t seen it yet:

1 Like