Does anybody know of a snippet that could make the headers nest / indent like comment threads do on Reddit? Terrible MSPaint representation below
As far as I know, this is extremely hard if not impossible to do. This is because the documents are laid out linearly; not nested. In other words the content underneath a header is not actually nested inside that header in the html. So styling the whole “block” underneath a specific header can’t happen since that “block” does not actually exist.
You can style lists to work like this (they are nested) and then use line breaks (Shift+Enter) to write paragraphs in each list item which can kind-of emulate this, however this is obviously less than optimal excepting for specific scenarios.
Might be possible with use of the general sibling combinator. Might not be possible in Live Preview because Live Preview is funky.
How does Obsidian achieve the collapse-everything feature then? I don’t know anything at all about programming so sorry if that’s dumb, but it seems like collapse everything is kinda sorta “nesting” the things under a header?
They just “fake” it with code. It uses javascript and some mildly complex logic to figure out which elements must be underneath each header. Then they just have to hide or show those elements when a header is collapsed. This is all through code, not CSS.
CSS cannot use the same complex logic as JS can, and it can only work within the bounds of the HTML it is given. Additionally, even if you could select the correct elements to style, to be able to style them in that manner they would need to be in a container together (because if they weren’t then you wouldn’t be able to set styles that “surround” the whole level). It’s possible you could create seperate selectors for elements at each level and set a different style on each level to try and emulate a nesting look. But you would likely run into spacing issues between each line and between embedded content, and probably a bunch of other issues I am not thinking of.
The main problems are:
- it would have to be very hacky
- and very complicated
- it probably wouldn’t work in live preivew (only in reading mode)
- it probably wouldn’t work for certain types of content in notes
- it might not be possible
Either way I don’t think anyone has written anything like this, so you would have to try and set it up yourself or find someone interested in trying. I don’t want to discourage you trying, because you never succeed if you don’t try. In the end it might be possible.
1 Like
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.