Outline formatting is misleading/misaligned when only some nodes have children (heading indentation)

[Merged from “Bug reports”/“Wrong indent for same level titles in outline view”]

Steps to reproduce

Type

## section-1
### sub-section
## section-2
## section-3
### sub-section

Expected result

Same level title should have the same indent

Actual result

image
image

Environment

  • Operating system: Win11 Home Edition
  • Debug info:
SYSTEM INFO:
	Obsidian version: v1.1.9
	Installer version: v0.15.8
	Operating system: Windows 10 Home China 10.0.22000
	Login status: not logged in
	Insider build toggle: off
	Live preview: on
	Legacy editor: off
	Base theme: dark
	Community theme: none
	Snippets enabled: 0
	Restricted mode: off
1 Like

Are there any plans to change this in future updates, or does this post’s relocation to FR imply it was intentional and here to stay?

In my opinion, the outline has lost some of its value as a quick reference.

In theory, left-justifying the text of #H1 with the dropdown arrow of #H2 seems reasonable as you’re aligning the first character of each row, but that discounts the effects of visual perception. The text chunks are perceptually grouped because they share similar qualities (shape, spacing, color, etc) and those groups are interpreted as vertical lines… lines which are no longer straight, which doesn’t accurately convey the hierarchy.

2 Likes

The devs use a narrow definition of “bug”. There’s no guarantee this will be addressed, or addressed soon, but if they rejected the idea it would be closed, archived, or moved to Help.

+1 for confusing outline.

Yes, I would like for this outline layout to be less confusing.

This has been hurting my brain recently. I made a mockup to show a potential solution:

I really hope this can be fixed BEFORE Obsidian Publish is updated to match the new v1.0 default theme - I foresee this being very confusing to my readers.


Current situation:

Problems with current situation:

  • Ccc (h3) should be on same level as Eee, Ggg, and Iii, but instead, Ccc’s arrow icon is aligned with those headings, which IMO is very visually confusing:

  • Slicing it another way: Bbb, Eee, Fff, Ggg, Hhh, and Iii are all almost aligned, even though they are a mix of h2 and h3. Meanwhile, Ccc, another h3, is way out on its own (and it’s almost aligned with Ddd, an h4…):

Solution:

  • Move the arrow icon to the right side, make the indent levels wider overall, and align them by their first character:

3 Likes

I was just about to post about this issue.
As others have said, it is terribly confusing.

Yes, please fix this before Feb 23, so the same bug doesn’t get incorporated into the new Publish theme. :pray:

1 Like

I’d also love to see this changed - it’s very confusing.

Great suggested fix.

Use case or problem

I recently started to use Obsidian as a university note-taking tool. What I always did with other tools was to use the index of each document as a unique source of truth, and rely on its hierarchical structure to describe its content.

My mental representation of the documents is often related to this structure. Just by looking at the index, I can quickly understand the content and quickly find information. This also helps me indirectly with memorization.

I’m struggling to have the same experience with obsidian since I found the current index Layout very confusing.

Up to now, if a heading is composed of some sub-headings, a small arrow appears on its left to represent if these sub-headings are currently hidden or visible in the index.

This arrow forces the text to be shifted to the right, making the parent heading aligned with the sub-headings. Visually, this introduces a lot of friction when iItry to scan the index.

Here’s a visual example of obsidian compared to Microsoft Word

Word image

Obsidian image

Here we can see how “Appendix A” is shifted, making it seems like a sub-heading of “Conclusion”, at the same level as “Objectives, Approach…”.

Proposed solution

Take the same approach as Microsoft Word, and align the headings.

3 Likes

By Index, do you mean the File Explorer or the Outline?

Either way, FWIW, this is controlled by CSS. Different themes might be better for your preferences.

This is the same as Outline formatting is misleading/misaligned when only some nodes have children (heading indentation)

And I strongly agree, having an accurate visual representation of the document hierarchy is crucial for cognition. This bug adds tremendous cognitive load. I am trying not to become a pest about it, but personally this bug has been quite devastating. I look at the outline 100+ times per day, so it really adds up.

I have sometimes been using this plugin as a workaround, but it has other issues, and also can’t be opened on a per-pane basis. GitHub - guopenghui/obsidian-quiet-outline: Improving experience of outline in Obsidian

2 Likes

He’s referring to the outline. I’ve tried several different 3rd party themes in hopes that one would fix this, but none of them override the current design. Also, I politely but firmly dispute that this is a matter of preference. It goes against all design principles related to hierarchy, and against the psychology of visual perception.

1 Like

Sentiment linked to the relevant bug report. I’m merging this thread into it.

It looks like it won’t be fixed soon, so I’m about to ask the CSS wizards in the Obsidian Discord’s #appearance channel for a snippet to fix it.

3 Likes

+1 to this.
As long as I’ve been using the obsidian outline, my brain never adjusts to the weird indenting

Just now I had a "Oh did I accidentally make this a level 2 heading? That’s weird. Oh, right, it’s that weird indenting issue.

image

I’d love a CSS solution if anyone figures it out

OK I got it! …with a little help from ChatGPT (I just gave it a couple examples of the divs and told it what I wanted it to do)

compare the result to the screenshot in my previous reply

image

The solution I went with is to move the collapse icon to the left, and to not move anything else

The snippet:

/* for outline and tags */
.mod-collapsible .collapse-icon {
  margin-left: -16px; /* adjust as needed */
}

/* for files and folders */
.nav-folder .collapse-icon {
  margin-left: -16px;
}

I found the margin of -16px looks exact for me.

Edit, better screenshots:

Before

After

6 Likes

This is a great solution. THANK YOU.

That snippet alone is already 95% production-ready. The spacing/margins just need a little extra polishing by a designer to make it 100%.

:eyes:

1 Like

But only the

.mod-collapsible .collapse-icon {
  margin-left: -20px; /* adjust as needed */
}

part was needed. And tweaking the value

5 Likes

That is wild.