CSS Live Preview for Alignment

[MauriceMossIT]

First, search the help docs and this forum. Maybe your question has been answered! The debugging steps can help, too. Still stuck? Delete this line and proceed.

What I’m trying to do

I am trying to align text left/center/right with CSS. Reading view works 100% but Live Preview aligns while losing the markdown formatting.

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

Test Note:
<span class="right-align">test **bold**</span>

Reading has “test” in bold with right alignment. Live Preview has "test **bold**" with right alignment. I would like both views to work appropriately.

Things I have tried

I tried inspecting the DOM and testing a few things such as .markdown-source-view or .markdown-source-view.mod-cm6, but I’ve had no luck.

I don’t understand why the DOM for source-view keeps “bold” in the , but Reading/preview-view correctly formats it.

Can anyone provide a solution here as well as any suggestions on better understanding how CSS works with Live Preview? From other posts, it seems that depending on what is being edited, the Class chosen in CSS will need to change.

[ariehen]

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.

Markdown inside raw HTML not rendered correctly

This has been asked other times. We don’t support markdown in html blocks and html blocks bust not contain empty lines.

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:

Obsidian CSS Quick Guide

Obsidian CSS Quick Guide Hi friends! CSS in Obsidian can be confusing to get into, so this is a guide to get you started with information on the tools, methods, and some background knowledge! Let’s get started by looking at how you can look behind the curtain of Obsidian’s visuals. The Developer Console Obsidian is technically like a website. As such, you can view the source like any other browser. While you are inside the Obsidian window, you can press ctrl+shift+i to bring up the develope…

[MauriceMossIT]

Thanks for the information and the guide. I am new to Obsidian and have very limited CSS and HTML experience.

To confirm, the Markdown rendering is only an issue with Live Preview or could it sometimes be an issue in Reading view as well when CSS is applied using HTML tags?

[ariehen]

In this case, the markdown I tried seems to be working in reading view:

source mode (not live preview):

reading mode/view:

I think it’s only a Live Preview limitation, but as markdown inside HTML tags isn’t officially supported (as far as I know), I don’t think it would be considered a bug if you do come across a situation where is doesn’t work.

Think of it this way: you’re using a Markdown editor to avoid having all that HTML mixed in with your text. Like I mentioned above, there are times that call for it, but I’d use it sparingly. Some folks are the opposite though and have span classes everywhere coloring different sections for emphasis, specialized notes, etc.