A CSS stylesheet for exporting org-mode files

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.