Indent headings and paragraphs

[WEelCh]

( Following is for “export to PDF” but if its applied for editing/view mode it would be ok too )

I want to indent all headers and following paragraphs based on the header level
(for example:)

h1 Heading
paragraph
  h2 Heading
  paragraph
  paragraph
      h4 Heading
      paragraph
    h3 Heading
    paragraph

Sadly (as far as I know) CSS-classes cannot easily be used in this case (=obsidian).
(It would be a pain to manually apply)

My current solution (crafted from tutorials, stackoverflow and this forum);

h6,
h6 ~ *{
  margin-left: 100px;
}

h5,
h5 ~ *:not(h6,h6 ~ *){
  margin-left:  80px;
}

h4,
h4 ~ *:not(h6,h6 ~ *):not(h5,h5 ~ *){
  margin-left:  60px;
}

h3,
h3 ~ *:not(h6,h6 ~ *):not(h5,h5 ~ *):not(h4,h4 ~ *){
  margin-left:  40px;
}

h2,
h2 ~ *:not(h6,h6 ~ *):not(h5,h5 ~ *):not(h4,h4 ~ *):not(h3,h3 ~ *){
  margin-left:  20px;
}

h1,
h1 ~ *:not(h6,h6 ~ *):not(h5,h5 ~ *):not(h4,h4 ~ *):not(h3,h3 ~ *):not(h2,h2 ~ *){
  margin-left:  0px;
}

The problem with this:
It only kinda works, because it indents correctly as long as there isnt a higher level heading after a lower level heading
(for example: this is what my code would wrongly produce)

h1
  h2
    h3
    h2 <- Error

I do know why my code does not work, but sadly i do not really know how to fix it

---

One of my already discarded solutions was

.HyperMD-header-1 ~ .cm-line, /* Editing View */
.el-h1 ~ * /* Reading View */
{
    text-indent: 1.5em;
}

.HyperMD-header-2 ~ .cm-line, /* Editing View */
.el-h2 ~ * /* Reading View */
{
    text-indent: 3em;
}

.HyperMD-header-3 ~ .cm-line, /* Editing View */
.el-h3 ~ * /* Reading View */
{
    text-indent: 4.5em;
}

.HyperMD-header-4 ~ .cm-line, /* Editing View */
.el-h4 ~ * /* Reading View */
{
    text-indent: 6em;
}

.HyperMD-header-5 ~ .cm-line, /* Editing View */
.el-h5 ~ * /* Reading View */
{
    text-indent: 7.5em;
}

But this only worked in obsidians editing view, and i could not figure out what exactly the code does sooo… i discarded it
(idk eventually it helps)

---

I really appreciate any help, thank you!

[franksisco]

Same thing I am interested in and same problems.
Please someone help us!

[holroy]

In the answer below from Stack Overflow, they suggest how to do this, and it seems to work, and this can be adapted to Obsidian.

Indent content based on headings

As it stands it should mostly work, at least in reading mode, but if you want it applied in live preview you need to add matching selectors for the headings from live preview. This can get somewhat repetetive and confusing, but you asked for it…