Leveraging the Org Mode Structure with CSS

Org-mode is an incredible tool for editing text. May it be for HTML, Latex, doc, or even plain text format.

I’ve already told that I use it to edit this blog, but I also use it for almost every text file I have to do. For example, all my readme on Github are in .org. (Even if they don’t support the org format very well. Screw Markown, org-mode is superior!)

Without any surprises, I also use it if I have to write long texts for my commercial solution BACnet Help. I can write thousands of words without having to think once about any HTML tags (DIV, SPAN, BR…). This is all handled automatically when exporting to HTML.

This is all very unsurprising for any Org-mode user. However while inspecting a page in the Chromium browser, I noticed how an Org-mode document is so well structured when exported to HTML.

Let ‘s take the Table of Contents as an example. You get it for free, with all the links and anchors. But the more important part is how the TOC is made: with successive stages of <UL> and <LI>. The structure itself is giving information. With it, we can easily determine what is a subset of a section, and what is a subset of that subset.

Here is how the plain TOC looks:

Now let’s leverage the <UL> and <LI> structure with a pinch of CSS.

 #text-table-of-contents ul > li > ul {
    margin-left: 0.5em;
    border-left: 1px dotted #779898;
    border-bottom-left-radius: 1em;
    padding: 0.5em;
 }

If you don’t read CSS, just know this: We select the element identified by “text-table-of-contents”, find any children that’s an unlisted list (<UL>), inside a list item (<LI>), inside another unlisted list. Then we apply some simple decorations to those.

Such a simple change, and yet a tremendous impact!