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: https://frozenlock.files.wordpress.com/2012/10/wpid-toc.png

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.

https://frozenlock.files.wordpress.com/2012/10/wpid-toc2.png

Such a simple change, and yet a tremendous impact!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: