Spacing between list items

Custom CSS & Theme Design
1

What I’m trying to do

I’m trying to write a CSS snippet that increases the spacing between items in a list (both numbered lists and bullet-point lists). I find them very close to eachother and very hard to read when I have multiple lines in a single number/bullet-point. The snippet should increase the spacing after the last row of one list item’s content, so it’s separated from the next row (which is the first row of the next list item)

Here’s a screenshot from my phone, where the orange marks show which two rows I’d like to have separated a bit more.

Screenshot_20231223_143633
Screenshot_20231223_143633984×2136 162 KB

Things I have tried

I searched around on this forum and on Reddit, but I didn’t find the solution.

I’m not very experienced in doing CSS for Obsidian, so I’d appreciate a lot if someone could show me how I could make this snippet.

Also, where should I look for info if I wanna learn about making a snippet on my own in the future?

2

OK, try using the below Obsidian Snippet:

:root {
	--list-item-spacing: 1em;
}
/* reading mode */
:is(ul, ol) li {
	margin-bottom: var(--list-item-spacing);
	&:last-child {
		margin-bottom: unset;
	}
}

/* edit mode */
.markdown-source-view.mod-cm6 .cm-contentContainer > .cm-content .cm-line.HyperMD-list-line {
	margin-bottom: var(--list-item-spacing) !important;
	&:last-child {
		margin-bottom: unset !important;
	}
}

And you change the “1em” item spacing to whatever value you like for the spacing.

On my end it works as expected, but I don’t have any themes to conflict with this code.

3

That’s it, thank you very much! <3

1 Like
6

Although it is the solution for my request, I just discovered that it’s the cause of a bug I was having for some time:

When the snippet is applied, the text cursor can no longer be used with the mouse to select the text indented under a bullet point, it just refuses to select anything inbetween and snaps to the first or last character of the indented text. When I try to move the cursor with arrow keys, it jumps over that indented block of text. “home” and “end” keys also cannot work correctly.

7

Just a guess, but try changing the second section to this to see if it helps any. Changing margins in the editor (the margin-bottom part) can lead to some funky results. It’s better to use padding there. Adjusting margins in reading view/mode is fine.

/* edit mode */
.markdown-source-view.mod-cm6 .cm-contentContainer > .cm-content .cm-line.HyperMD-list-line {
    padding-bottom: var(--list-item-spacing) !important;
    &:last-child {
        padding-bottom: unset !important;
    }
}
2 Likes
8

Yeah, that eliminated the issue. :slight_smile:
Thank you!

1 Like
9

@woofy31 I meant to post this earlier but forgot. I know you know your stuff (:raised_hands:), but I thought you might find it interesting if you haven’t seen it.

From Licat:

The editor measures and predicts where elements are located on the page so that when you scroll around, parts of the page that’s out of view can be removed to keep the editor performant. Using margins completely breaks the ability for the editor to do that because margins don’t behave predictably due to the margin collapse algorithm

Source: Discord #theme-dev channel.

1 Like
10

That is indeed interesting, will keep that in mind for the future - although I haven’t had any editor performance issues while using margins in my own CSS snippets (except when I & others have used the Minimal theme, which apparently isn’t “minimal” anymore)

Yet I wonder how many Obsidian theme creators know about this and how many of them have used margins in their themes :sweat_smile: Heck, now I understand why certain public CSS snippets make Obsidian choke :eyes:

Honestly, that part should really be stated in the Obsidian theme creation docs for all theme creators & CSS snippet writers to be aware of:

P.S. I remember that CSS Flex & Grid layouts don’t suffer from the collapsing margin problem :eyes:

1 Like
11

Fair enough!

You can submit errors, omissions, or suggestions to add to the documentation here. (I think this covers the regular help documentation and developer documentation.)

1 Like
12

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.