CODEWITHSUNDEEP
htmlcssmarkdown
pythonian 23
pythonian 23

Reputation: 395

Indent everything after h1, h2, etc. before the next, one, while stacking the indents, with CSS

I have a markdown file that I compile to an HTML file. However, when I do, it is unclear which paragraph belongs to which title. I would like to give the contents that come after a small nudge to the right, and have it move more to the right if there is a subheading after the first one.

# H1
## H2
text
## H2


h1 ~ *, h2 ~ *, h3 ~ *, h4 ~ *, h5 ~ *, h6 ~ * {
    text-indent: 16px;
}
<h1>H1</h1>
<h2>H2</h2>
<p>text</p>
<h2>H2</h2>

Expected output:

H1

 H2

  text

 H2

Actual output:

H1

H2

text

H2

Upvotes: 0

Views: 939

Answers (1)

isherwood
isherwood

Reputation: 61083

I think all you really want is each progressively lower heading indented the same amount, and the paragraphs indented with respect to whatever heading they fall after. We'll use the subsequent sibling combinator (~) for that, as you did, which only selects siblings after the selector.

For standard readability all headings of the same level should be indented the same amount. Paragraphs are probably less important in that regard. I'm assuming that you'll adhere to proper document structure and not place an H3 immediately after an H1, for example.

Here I've defined a CSS variable using a custom property* so that the indent factor can be updated at just one place and calculated for each rule. I've opted to use rem units for size consistent scaling across element types, but you could certainly use em units for variable indentation, or simply px.

:root {
  --indent-unit: 1rem;
}

h2 {
  text-indent: calc(var(--indent-unit) * 1);
}

h2~p,
h3 {
  text-indent: calc(var(--indent-unit) * 2);
}

h3~p,
h4 {
  text-indent: calc(var(--indent-unit) * 3);
}

h4~p,
h5 {
  text-indent: calc(var(--indent-unit) * 4);
}
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<p>Paragraph.</p>
<p>Paragraph.</p>

<h3>Heading Level 3</h3>
<p>Paragraph.</p>
<p>Paragraph.</p>

<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<p>Paragraph.</p>
<p>Paragraph.</p>

*Internet Explorer not supported, but we don't care.

Upvotes: 3

Related Questions