#1

Hi,

New Obsidian user here. I’d like to have lists where each item has multiple paragraphs. This works in CommonMark but I can’t get it to work in Obsidian. Does anyone know how?

Thanks for your help,
Ram Rachum.

#2

Hi @cool-RR , I think the issue in your example is that you’re using only two spaces to indent your list.

I tried your example in Obsidian using four spaces and it worked for me.

#3

I think it is working, but the paragraphs aren’t styled like other paragraphs (I guess unintentionally).

  1. View > Toggle Developer Tools.
  2. Click the arrow-in-a-box icon at the top-left of that sidebar.
  3. Hover/click bim — it’s marked up as a paragraph.

EDIT: I think it’s a theme problem — the paragraphs render correctly in the Help vault (in Obsidian 13.23 — I haven’t updated to the recent 13.30 versions). In the California Coast theme that I use, they have no space between them.

Live Preview: improve vertical alignment of multiple paragraphs in lists
#4

@Craig I tried to indent with 4 spaces as you suggest, but it’s still not aligned right:

1

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

#5

@CawlinTeffid I’m not sure you’re right. I hovered over bim and got this:

2
21023×134 56 KB

There’s no paragraph here, right?

Also, I’m using the default Obsidian theme.

#6

Oh, I think I see now, thanks for the screenshot. I think you’re saying that the “bim” in this example isn’t lined up vertically with the “baz” two lines above it when using Live Preview. I didn’t notice it because I don’t usually use Live Preview. I recommend reporting this as a bug.

#7

Huh. Maybe newer Obsidian is doing something different. (Or maybe I haven’t reproduced your markup correctly; I indented by 2 spaces, then 4, then 6).

Screen Shot 2022-03-11 at 12.29.26
Screen Shot 2022-03-11 at 12.29.261744×612 116 KB

#8

I think @cool-RR 's problem only appears in Live Preview mode. In your screenshot above it looks like you’re in reading mode.

#9

Ah, right.

In Live Preview, it looks like not even standalone paragraphs are marked up as paragraphs.

The alignment of the list-item paragraph in the editing pane is a little off, but that’s not surprising with a proportional font. If it were monospaced I think it would look properly aligned.

#10

Indeed, the problem only happens in Live Preview. Reported as a bug here: Multiple paragraphs in list item don't align well in Live Preview

#11

I don’t think it’s a real bug, tho. Try pasting your markup into a plain text editor like Notepad or Textedit. With the font preference set to a proportional one like Arial or Helvetica, you should see the same problem. With it set to a monospace font like Consolas or Menlo, it should line up.

The variable size of the characters makes it hard to align things vertically unless they’re at a tab stop. In this case, a space is narrower than a dash; so the 2 spaces that start the second paragraph take less room than the dash and space that start the list item, which makes the text of the second paragraph starts a little farther to the left than that of the list item.

If you don’t mind using a monospace font, you could use a CSS snippet to set your Live preview font to one.

#12

@CawlinTeffid I do think it’s a bug, and I don’t want a monospace font. The spaces are semantic, in the same way that a blockquote is determined by spaces.

#13

It’s just how proportional fonts work — the varied width of the characters prevents the kind of alignment you’re asking for. You can see this here in the forum: paste your example into the text box and see that it’s misaligned in the writing area. Wrap it in backticks to mark it as code, which changes the font to fixed-width in the preview area, and see the correct alignment.

That’s one of the reasons programmers usually use fixed-width fonts. Note that the Commonmark example you linked to is set in a fixed-width font.

Your options are:

  • Use a fixed-width font.
  • Check your work in Reading Mode.
  • Possibly you could impose some kind of margin or alignment with a CSS snippet?

There are at least 3 workarounds that will not produce perfect alignment but might make it close enough to relieve your distress:

  • Use a proportional font with spaces closer to the average character size.
  • Use a custom version of a proportional font, copying a larger space from another font into it.
  • Use the Quattro font from the makers of iA Writer, which is in between monospaced and proportional (it has 4 character widths).
#14

@CawlinTeffid: You’re correct in understanding the difference between monospace and variable width, but wrong on the conclusion.

I modified the CommonMark example to use the variable-width Arial font, and it’s perfectly aligned:

Untitled-1

I added the red line for illustration.

The “bim” should be indented by a controlled amount, not with spaces. Then it doesn’t matter which kind of font you use.

Of course, I will not use monospace for my writing as it looks terrible. It’s great for code and logs.

#15

Thanks for your help anyway.

#16

OK, I think I’m getting muddled by Live Preview’s hybrid nature. Sorry for the noise!