A CSS stylesheet for exporting org-mode files

Published on abr. 30, 2018

I have been writing a big document using org-mode, exporting it to HTML and using the browser to generate a PDF from it. It looks pretty nice, similar to what I achieved with Word on an earlier version, and faster to write. It just requires a CSS file to define the proper style.

/*
 * CSS for org-mode document. Save with name style.css and include with
 * #+HTML_HEAD: <link rel="stylesheet" type="text/css" href="style.css" />
 * It should be placed on the same directory as the HTML that is exported.
 *
 * Print options
 */

@page {
    margin: 2.54cm;
    size: A4;
    /* Page numbers, does not really work on most browsers. */
    @bottom-right {
        padding-right: 20px;
        content: "Page " counter(page);
    }
}

@media print {
    body {
        font-size: 11pt;
    }
    h2, h3, h4, h5 {
        page-break-after: avoid;
    }
    #table-of-contents {
        /* Page break after table of contents */
        page-break-after: always;
        margin-top: 2em;
        line-height: 1.5em;
        width: 80%;
        height: 40%;
        margin: auto auto;
    }
    #table-of-contents > h2 {
        text-align: center;
        margin-top: 4em;
    }
    .figure {
        /* Figure stays together with caption */
        page-break-inside: avoid;
    }
}

/*
 * For ordinary browsing
 */
@media screen {
    footer {
        display: none;
    }
    body {
        font-size: 12pt;
        margin-left: 2em;
        margin-right: 2em;
        max-width: 50em;
    }
    #table-of-contents {
        margin-top: 2em;
    }
}

/*
 * Common format
 */
body {
    font-family: Calibri;
    line-height: 1.2;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 6pt;
}

h2 {
    font-size: 1.3;
    text-transform: uppercase;
}

h1 {
    font-size: 1.6;
    font-variant: small-caps;
}

p {
    text-align: justify;
}

.figure > p {
    font-style: italic;
}

a:link, a:visited {
    text-decoration: none;
}

th.org-left {
    text-align: left;
}

/* Mark external links with an icon. */
a[href^="http://"]:after,
a[href^="https://"]:after {
    content: '\2021'; /*'\1F5D7';*/
    font-style: roman;
}

A sample file would be:

#+TITLE: Sample org file
#+STARTUP: inlineimages
#+LANGUAGE: es
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="style.css" />

* First heading
* Second heading
** Subheading 1
** Subheading 2

#+caption: Some fancy figure
#+attr_html: :width 50%
[[./some-figure.png]]

The file can be simply exported using Ctrl-c Ctrl-e and then pressing 'h' followed by 'o' (HTML and Open in browser). Afterwards, printing can be done from the browser.

Edit: an example with output PDF is attached to this page.

Hope this is useful for you.

Juan José García Ripoll

Senior scientist

IFF-CSIC

[En español]

A CSS stylesheet for exporting org-mode files