Custom list indent width with indentation guides

Feature archive
1

I’d like live preview (and source view) to present nested list indented at least as deeply as reading view, preferably providing a setting for both that can be set to any custom amount. All this, while preserving indentation lines, that have been recently added to the core app.

There have been numerous requests for this, this one being the most recent I found. However these all broke eventually. The answer accepted to this last one was a flawed hack that became more obsolete with v0.14.

Even if this doesn’t make it into core, I’d be relieved to have a workable, up to date custom CSS snippet that addresses all the concerns listed above.

2

The best I could do is switch to tabs from spaces as indents, set tab size to 8, and tweak reading view with a little CSS to align. Not customizable, but wide enough indents that more or less align in both views.

ul {
  padding-left: 2em;
}

That said I’d still like this issue properly addressed. This and other edge cases (like the broken two spaces) make all the indent options superfluous, as none of them work predictably other than tabs.

3

This is basically resolved in v0.16.
There’s a variable in app.css now called --list-indent that affects all views, that can be modified in snippets. You still need to use tabs for it to work properly, but that is another issue. The snippet above is not needed, and the tab size settings seems to affect only code blocks and the like.

4

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

6

I am very new to obsidian. I am trying desperately to change the default bullet point indentations (I would like to increase them despite using a proportional font) –

Based on your comment I created a .css snippet -

/* Adjust list item indentation */
:root {
    --list-indent: 15em; /* Adjust this value to control the indentation */
}

/* Apply the list item indentation */
.markdown-preview-view ul,
.markdown-preview-view ol {
    margin-left: var(--list-indent);
}

But it doesn’t seem to do anything… is this still a way to make it work, or am I doing it wrong? Any help would be greatly appreciated!

7

Obsidian devs recommend that you style by first trying to override existing variables defined on the top of the app.css file. In this case:

body {
  --list-indent: 3em;
}

These variables are more likely to be supported later than custom selectors. See more here: