Don't fold over horizontal rule line break

Heading fold should stop at horizontal rule

Currently heading fold will fold until the next heading with the same level.
However when a page has a horizontal rule ---, it’s a clear indication that this is a logical break between text, therefore fold should stop at this line. Not every time I use a --- the following section need to have a header with the same level as the previous headers.

# H1
Fold with H1
## H2
Fold with H1
---
## Another H2
This should not be folded with H1 above.

Alternative: Consider horizontal rule also as a fold marker, with priority bigger than H1 header. This way one can fold the entire --- section regardless of what header is used inside.

26 Likes

+1 I use the horizontal rule as a divider between major sections in the doc in exactly this way. It provides a visual distinction especially when looking at a long list of collapsed H1s or H2s etc.

4 Likes

+1 for this. The divider should be visible at all times. It tells a visual thinker like me where the first point ends and where the next starts. Please!!!

1 Like

Aye. A plus one from me, too. =)

1 Like

+1

As a workaround, I’m using:

<br><br><br>
# 
---

(line breaks for visual distinction;
empty level one header for fold break;
horizontal rule)

+1 for this

This is one of my few complaints with Obsidian. Is there a potential work around with plugins or CSS that somebody more advanced than I could share?

Found an easy workaround, though I’m sure this could be accomplished automatically with CSS or scripts.

Templater note:

# <br>
---

Create a hotkey for the Templater note (in my case: CTRL+L).

4 Likes

+1 for me too, im looking for it since beginning.

I strongly support this feature request. It’s come up pretty regularly on the Discord, so a lot of folks feel the same way.

1 Like

In the meantime, this is a great workaround. Thank you!

BTW, I use *** instead of --- for drawing separator lines. It avoids issues with double hyphens autocorrecting to em dashes, and you don’t need a blank line between it and a block of text above it.

Thanks for all the convo in this thread so far! I’m still hoping we get a formal option to “escape” a header hierarchy, but in the meantime I’ve got a fix that works well enough for me.

I’ve basically turned my H1 into a way to “end” a header section. To do this I add:

# `

I can then put <hr> after it and it won’t get collapsed into the above section.

This is a modification of the <br> suggestion above as that was making spacing weird for me. This approach basically just makes the H1 markdown disappear so it’s a blank H1 line.

To further polish things, I’ve combined this with the following CSS snippet to improve the spacing above and below the <hr>. This isn’t necessary, but since I don’t ever use H1 I didn’t mind changing things.

.HyperMD-header-1 {
	font-size: 14px !important;
	padding-top: 0px !important;
}

Success! I knew there had to be a better way than what I posted above.

The below CSS snippet makes it easy to turn a divider into a header (protecting it from folding), doesn’t introduce any additional characters or html into the note, and leaves everything working normally except when # is added to the line immediately above your ---:

/* 
Hide and resize H1 style when it has a hr divider line immediately after.
*/

.HyperMD-header-1:has(+ .hr) {
    opacity: 0;
    font-size: 1px;
}

.cm-active.HyperMD-header-1:has(+ .hr) {
    opacity: 100;
    font-size: var(--h1-size);
}

The snippet is pretty simple! Here’s how to use it after installing:

  1. Add # to the line before your divider line (---)
  2. That’s it!

What the snippet is doing: It’s basically restyling your H1 (#) when it’s immediately followed by a --- on the next line (which Obsidian automatically adds a hr class to). Thanks to the CSS has:() modifier it’ll only restyle your H1 if it sees an hr class after.

The H1 line will then become 1px (so the spacing around the divider looks good) and the visible markdown will disappear without needing to do anything else to it. To keep things user friendly, the H1 line will display normally when it’s the active line so it’s easy to adjust or delete the markdown whenever needed.

If you want the same thing to happen with H2-6, here’s the CSS for that (I personally always use H2 for my divider lines as H1 is reserved for my note title):

/* 
Hide and resize header styles when there's a hr divider line immediately after.
*/

.HyperMD-header-1:has(+ .hr) {
    opacity: 0;
    font-size: 1px;
}

.cm-active.HyperMD-header-1:has(+ .hr) {
    opacity: 100;
    font-size: var(--h1-size);
}

.HyperMD-header-2:has(+ .hr) {
    opacity: 0;
    font-size: 1px;
}

.cm-active.HyperMD-header-2:has(+ .hr) {
    opacity: 100;
    font-size: var(--h2-size);
}

.HyperMD-header-3:has(+ .hr) {
    opacity: 0;
    font-size: 1px;
}

.cm-active.HyperMD-header-3:has(+ .hr) {
    opacity: 100;
    font-size: var(--h3-size);
}

.HyperMD-header-4:has(+ .hr) {
    opacity: 0;
    font-size: 1px;
}

.cm-active.HyperMD-header-4:has(+ .hr) {
    opacity: 100;
    font-size: var(--h4-size);
}

.HyperMD-header-5:has(+ .hr) {
    opacity: 0;
    font-size: 1px;
}

.cm-active.HyperMD-header-5:has(+ .hr) {
    opacity: 100;
    font-size: var(--h5-size);
}

.HyperMD-header-6:has(+ .hr) {
    opacity: 0;
    font-size: 1px;
}

.cm-active.HyperMD-header-6:has(+ .hr) {
    opacity: 100;
    font-size: var(--h6-size);
}

Hope somebody finds this helpful! I love Obsidian snippets.

1 Like