How to indent the body text according to the header?

Help
1

How to indent the body text according to the headers(changing css)?
Like this :
immagine

2

I loved your idea and created a css snippet to do this.
I have made it so that it shows in the editing and the reading view.

Screenshots:

Reading View:
image

Editing View:
image

headings-indent.css (562 Bytes)

This script works with the default theme and tested it also on the Prism theme.

1 Like
3

Ty for the answer. But I have some problems. I have used your snippet in obsidian(0.13.33) with default theme. Don’t give me your result.
Reading view.

immagine
immagine801Ă—294 26.6 KB

Editing view.
immagine
immagine702Ă—282 27 KB

4

You’re completely right, I didn’t know text-indent only pushes the first line to the left.
This made my life easier though, also the “!important”'s were causing issues.

I’ve made a new snippet and added a bunch of comments so you know what things you should change for your own layout since this will not work for every theme out of the box.
So you’ll def need to change some values to make it perfect. The comments should help you with that.

Screenshots:

image
image941Ă—787 9.8 KB

image
image937Ă—814 27.9 KB

headings-indent2.css (3.5 KB)

I’m not a CSS pro, it’s also been quite some time I’ve been using css, hence the fixes. Hopefully everything works out now :slight_smile:

Edit: I found a bug, I’m fixing it right now

Current bug I’m trying to fix:

image
image955Ă—756 29.7 KB

image
image948Ă—810 27.2 KB

5

I resolve in Editing View, but in Reading View don’t work. How to solve this?
I tried to set !important in all line with ; (!important;) but dont solve the problem in Reading View.
You use Live preview?
I’m using default theme and css snippet.

6

I’m having issues, been trying all afternoon and I keep getting bugs.
The “~” selector takes every element after it, which causes issues. I can’t find a selector that selects from element to element.

This is the best I could do, I think a js script would be needed to put all the divs after a heading until the next heading into a new div so the css could be resolved more easily…

Unfortunately I haven’t made any plugins yet.
I might give it another go some other day.

headings-indent2.css (4.5 KB)
(It’s full of bugs, wouldn’t use it, perhaps you can find someone who can fix it from here)

1 Like
7

Ty kenjibailly.

For Other, see this post for the solution that apply correctly this snippet:

1 Like
8

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