0

HTML output from org-mode would be a lot easier to read if the headings were incrementally indented. Yet when I process the file

#+HTML_HEAD_EXTRA: <style> pre.src { background-color: #202020; color: seashell; body { margin-left: 220px; width: 750px; } h1 { margin-left: -25%;} h2 { margin-left: -20%;} h3 { margin-left: -15%;} h4 { margin-left:-10%;} h5,h6 { margin-left: -5%; }  }</style>

* Title
** Section
*** Subsection
** Section
*** Subsection
*** Subsection

indenting, as is common, the body by a certain amount and then pulling the headings backwards, I get an unindented output

CSS indentation is ineffective

even though the HTML exporter does indeed use HTML h2, h3, h4 headings.

How do I get the org HTML exporter to indent headings?

Sam
  • 317
  • 1
  • 11

1 Answers1

1

This is a CSS question (most formatting questions in HTML are CSS questions) and your CSS is syntactically suspect. Try this:

#+HTML_HEAD_EXTRA: <style> pre.src { background-color: #202020; color: seashell;}  body { margin-left: 220px; width: 750px; } h1 { margin-left: -25%;} h2 { margin-left: -20%;} h3 { margin-left: -15%;} h4 { margin-left:-10%;} h5,h6 { margin-left: -5%; }</style>

* Title
** Section
*** Subsection
** Section
*** Subsection
*** Subsection

But if the CSS string becomes this long, it's better to use a CSS style file, say style1.css:

pre.src {
    background-color: #202020;
    color: seashell;
}

body { margin-left: 220px; width: 750px; }
h1 { margin-left: -25%;}
h2 { margin-left: -20%;}
h3 { margin-left: -15%;}
h4 { margin-left:-10%;}
h5,h6 { margin-left: -5%; }

and then use it in the Org mode file (and from there to the HTML file):

#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="style1.css" />

* Title
** Section
*** Subsection
** Section
*** Subsection
*** Subsection

Having a separate file that you can format carefully also helps with the syntax.

NickD
  • 27,023
  • 3
  • 23
  • 42