Live Preview: improve vertical alignment of multiple paragraphs in lists

Context thread: Multiple paragraphs in list item - #3 by CawlinTeffid

I’d like to have lists where each item has multiple paragraphs. This works in CommonMark but I can’t get it to be aligned in Live Preview.

1

Here’s the source I used for the above: gist:a557089197dc7a7265756c7fd4c49ae2 · GitHub

4 Likes

The lines are aligned in reader mode. The editor is much more tricky to get it right essentially because it is a text editor that is faking some aspects of reader expirience.

If you care about perfect alignment in editor, you may have better luck using a monospace font.

So, we agree that it’s a bug, just a low priority?

This is complicated. From the user POV, this is a bug.
From the dev POV, this is not a bug (as unexpected behavior).
This is the nature of a plain text editor enhanced to fake aspects of preview.
Unfortunately this aspect is hard to fake or even impossible.

I am gonna move this to Feature Requests.

I understand, thank you.

It’s even worse with tabs. You have to up the tab size setting to 8 for them to even kind of match. But that indents code blocks way too much.

image

With tab size set to 8
image

I’ve had indent problems for a while now, and I thought they were fixed:

Is this also fixed in 0.16.3 @WhiteNoise?

1 Like

I don’t think this is like this. If you use shift-enter in a bullet list line, it will create a new line and add the appropriate number of tabs (or spaces if you use them) + 2 spaces. Try in the sandbox vault.
The new paragraph will be perfectly aligned in source mode with a monospace font.
There is a very slight misalignment in LP and this is what this FR is about.

I’ve never used the Shit + Enter hotkey in over 2 years of using Obsidian, and I would have a hard time remembering to do it in the future. If I don’t use this feature, the tab is way too small (and inconsistent), which is not a behaviour I am used to in any other editor and makes it hard to edit my notes in VSCode for example. 1 tab with no spaces is valid markdown and renders fine in live preview. Don’t make me have to use special hotkeys for basic indentation to work.
Also, I really don’t want to mix tabs and spaces - and as long as Obsidian has other issues with indenting with spaces (aligning edit and reading view, using 2 spaces), this solution necessarily mixes them for me.

As I said in my previous message, Shift-Enter works with spaces only too. That is, it adds the appropriate number of spaces + 2, to compensate for - . So if you open the document in a code editor with monospace font, it will be aligned.

If you want obsidian to behave like a code editor, I suggest you stick with source mode with a monospace font.

If want obsidian to behave exactly like Reader, I am sorry but that’s never truly going to happen because Live Preview is still a code editor faking some aspects of post processed markdown.

To your first point, I know the hotkey works with spaces, but spaces have other drawbacks in Obsidian, and I prefer not to use them. There’s no way to customize how deep they indent, and to make them align with reading view without messing up other things. I also linked the issue with 2 spaces. Regardless, you can use tabs in Obsidian, so you should be able to here. And again, I don’t want to have to use the hotkey for this, or mix tabs and spaces.

I know the difficulties between modes, in a way this is a request to fake processed markdown better in preview. Or at least offer some consistency or transparency as to why the tab size setting only affects tabs outside of lists or code or quotes, and why this instance doesn’t count as part of a list.

I still don’t understand why we got Live-Preview mode instead of a WYSIWYG mode (like typora) as advertised years ago.

Not sure I understand. Would you expand on the differences between these?

On typora you have a full wysiwyg, on obsidian you have reading mode and live-preview, the latter is just a source mode that badly emulates the reading mode. What typira/notion do instead is merging edit and live preview.
On typora for example you don’t need to customise CSS for both reading and live-preview, while on obsidian you have to create two separate snippets for just one modification.
And anyway, live-preview is very bad and eveytime I switch from reading and live I lost my flow and where I was located on the note.

Understood! Thanks :slight_smile: