Css-powered outline-like mode

Feature requests
1

TLDR: implement the HTML object model in a way that enables the creation of a custom CSS to present a note with an outliner look with headings (as top-level items) and list items (as deeper level items) indented. We already have fold functionality, line move functionality, indent/unindent functionality, it’s only a display mode we lack.

I personally like outliners for a structured view of information and used Dynalist before coming to Obsidian (for tables, native links, offline MD storage, embedding, etc).
I have seen info on developers trying to integrate as many outliner features as possible without breaking the main point of Obsidian and I’d like to suggest a possible way of implementing a more structured outliner-like look for those interested (actually, enabling to define it in CSS).

Currently, we have indentations for lists in editor mode hardcoded in HTML file, different width on different list levels.
If content lines of lists were classified by depth, there would be a way to make natural indentations of preferred width and more robust connecting lines between points (current ways to make lines I found and use has breaks on multiline list items).
Also, it seems natural for me to use headings as topmost levels of lists for my outline-like note. If the same approach (classify content lines following heading by heading class) were applied, it would be possible to make headers a top levels of lists with appropriate indentations. And - viola - we got outlined list in our document, which could be viewed in outlined or traditional style based on selected CSS.

I see two way of implementing it:

  • make per-line classes h1-content, h2-content, …, list1-content, list2-content etc, it seems to be easier to implement, but limit list depth and makes it harder for CSS developer to handle situations like h1-content + list2-content on same line
  • make multi-line containers for headings and list level, with tree-like embedded structure, like h1-content multiline container includes h2 line and then h2-content multiline container, which includes list1-content container and so on.
  • maybe another way to do it

Any thoughts?

6 Likes
2

I would also love to see better visual/display support of outlines in both edit/source and preview mode! It would be great to have something like (but a bit more subtle):

- some idea
| - some more details
| | - details on the further details
| - some other more details
- some other idea
| - some more details on some other idea

Outlining may not be the main point of obsidian, but it is a common use, and it’s good to keep outlines integrated with PKM.

The following CSS roughly achieves what I was suggesting (must use tabs for indentation in source view)

/*Bullet list relationship lines*/
.cm-hmd-list-indent .cm-tab, ul ul { position: relative; }
.cm-hmd-list-indent .cm-tab::before, ul ul::before {
 content:'';
 border-left: 1px solid #424958;
 position: absolute;
}
.cm-hmd-list-indent .cm-tab::before { left: 0; top: -5px; bottom: -4px; 
}
ul ul::before { left: -11px; top: 0; bottom: 0; 
}

From here and @ryanjamurphy

3

Related feature requests:

Vertical guidelines for indentation:

Unified treatment of outlines/hierarchies based on headers, indented lists, (…):

Outlines in general

2 Likes
4

To be considered: As mentioned in original post, wrapped/multiline item interrupts indentation guides.
As a side effect, this allows to distinguish multiline item from list of separate lines.
How to effectively visually distinguish these when not breaking vertical lines?

In editor, all vertical lines are broken which is bad. But in preview, only the deepest indentation guide is interrupted, which I is good solution IMHO.
image
The CSS used for screenshot is from here.

5

i am looking for a css code to color my outline lists based on the level of indentation. does anyone have a solution?