Obsidian Formatting Different Compared To Text Editors (VSCode, Zed, TextEdit)

[boogerbuttcheeks]

Below is a screenshot with Obsidian on the left and a text editor (Zed) on the right. The text pasted is exactly the same, but Obsidian’s formatting is inconsistent and ugly.

What I’m trying to do

Align text correctly in editing mode.

Things I have tried

I searched for topics on editor alignment and formatting in Obsidian and didn’t find any useful things. I am using a Prettier plugin for Obsidian which is how I discovered this issue.

I ran the format command within Obsidian and the file formatted to what you see above. This confused me, so I tested copying the Obsidian text in to other text editors like Zed, VSCode, and TextEdit. The text editors all display the text as aligned; it’s only Obsidian that looks wonky.

Note that the spots where you see misalignment on Obsidian are not extra spaces or characters. I’m using the Berkeley Mono font in the screenshot, but I just went and tested with SF Mono (and a few other monospace fonts) and the result is the same.

EDIT: I also experimented with turning some settings on and off. Turning off readable line lengths helped but haven’t found a complete solution.

[Dale]

I know you said it’s not extra spaces or characters, but have you actually counted all the characters before some of the pipes? (All of them, not just the spaces)

Just to be sure.

[boogerbuttcheeks]

I counted two lines. They had the same number of characters but are misaligned.

I notice that even if I try adding and removing spaces manually the text is still slightly off.

In those two screenshots there’s a single space of difference but the pipe can’t be aligned.

Here’s some of the text I’m using if it helps to debug.

# ZSH aliases

| Shortcut    | Description                                               |
| ----------- | --------------------------------------------------------- |
| `..`        | Go up a directory                                         |
| `icloud`    | Go to iCloud directory                                    |
| `@`         | Go to @trevor directory                                   |
| `vault`     | Go to Obsidian vault                                      |
| `desk`      | Go to Desktop                                             |

[boogerbuttcheeks]

A possible solution was provided by AlexanderP79 on Reddit: changing “Default editing mode” from Source code to Live Preview.

This fixes the problem with Obsidian looking ugly—I prefer Source code mode, so a solution would still be nice.

[boogerbuttcheeks]

PM_Me_Capacitors on Reddit suggested the inline code blocks are a smaller font size than the rest of the text in the table. They’re correct. In source mode, the inline code block is 13.3px and the table text is 15.2px. In reading mode, the inline code block is 14px and the table text is 16px.

I’m not sure why this is happening since I have font size set to 16px. I disabled the Minimal theme so it doesn’t interfere, although the font size setting is also set to 16px.

I can understand having different font sizes when viewing the note in reading mode but having different font sizes in source mode is odd imo.

[boogerbuttcheeks]

Solved with this CSS snippet:

.markdown-source-view {
  font-size: 13px;
}

.markdown-source-view .cm-inline-code {
  font-size: 13px !important;
}

And if you are using the Minimal theme, install the Minimal Theme Settings plugin and set Text font size to the same value as the CSS snippet.

Thanks everyone!

[boogerbuttcheeks]

Updated snippet:

.markdown-source-view .cm-inline-code {
	font-size: var(--font-text-size) !important;
}

.cm-s-obsidian .HyperMD-table-row {
	font-size: var(--font-text-size);
}

[kepano]

This will be fixed in 1.8.2