PubCSS: Formatting Academic Publications in HTML & CSS

You have two choices when it comes to formatting academic papers for conferences and journals: Microsoft Word and LaTeX.

Word is familiar and easy for anyone to pick up. But the WYSIWYG interface that makes it so easy also makes it easy to create inconsistent, amateur-looking documents that are tough to maintain and fine-tune. On top of this, you get a file format that isn’t friendly to revision control, diminishing collaboration through a system like GitHub.

LaTeX is powerful and produces beautiful documents, but requires installing a hefty toolchain, learning a new syntax, and familiarizing yourself with its powerful abstractions. This is a significant front-end investment, one that may not pay off. In my experience, there’s usually at least one author who hasn’t made that investment, and so the team falls back to Word anyway.

PubCSS is an exploration of HTML and CSS as a third option. It’s a library of stylesheets and templates for formatting academic papers. Perhaps HTML and CSS can hit the sweet spot between the ease of Word and the efficiency LaTeX. Like LaTeX, HTML is a markup language, but one that a lot more people have experience with. CSS has proven its worth for styling fluid layouts, and with CSS3 modules around the corner, things can only improve for print.

Output

So how’s PubCSS’s output look? Pretty darn good. Here’s a sample page for the ACM SIG proceedings. Note that most of the layout, typography, and numbering is handled by a single stylesheet.

acm-sig-sample-latex

You can compare the actual PDF output for the following formats:

A bonus of using HTML is that with a few lines of CSS targeting @media screen, you’ve got yourself a web version of the paper.

Web Paper

You can also add niceties like responsive design, reference tooltips, and image lightboxes to create an interactive web paper that feels at home on the web.

Web Paper Theme

Quick Start

Using PubCSS is simple:

  1. Create an HTML file, or modify one of the templates, to add your content
  2. Link your HTML to a pub.css stylesheet
  3. Build a PDF from the HTML using Prince with the command
    prince input.html output.pdf

You can grab the templates and stylesheets from the GitHub repo. ACM and IEEE formats are available so far. The only dependency is Prince, which is free for non-commercial use.

Documentation

OK, it’s not quite that simple. You still have to mark up your content. Here’s what the markup for a typical paper looks like. The main components are outlined below.

Sections are automatically numbered by PubCSS. Just follow this pattern.

<p>
<h1>Section Header</h1>
<section>
  <h2>Subsection Header</h2>
  <p>Lorem ipsum</p>
</section>
</p>

Figures and tables are similarly numbered if you include a caption.

<table>
  <tr><td>1</td><td>2<td></tr>
  <caption>Example Table</caption>
</table>

<figure>
  <img src="graph.png">
  <figcaption>Example Figure</figcaption>
</figure>

References are also numbered. Don’t forget to assign them unique IDs.

<cite id="nicole">Nicole. 2015. Title of paper. <em>Journal</em>, 4(3), 1-10.</cite>

Citations to the references make use of these IDs.

<a href="#nicole"></a>

Sections, tables, and figures can also be referenced by adding a class.

<a href="#intro" class="section"></a>
<a href="#example-table" class="table"></a>
<a href="#example-figure" class="figure"></a>

Equations are also numbered. MathML is well-supported by Prince. For the web, you’ll need MathJax to render MathML properly in Chrome and Internet Explorer.

<div class="equation">
  <math xmlns="http://www.w3.org/1998/Math/MathML">
    <mi>E</mi>
    <mo>=</mo>
    <mi>m</mi>
    <msup>
      <mi>c</mi>
      <mn>2</mn>
    </msup>
  </math>
</div>

Footnotes are made within the body text, and are automatically moved to the bottom of the current page.

<p>This is text.<span class="footnote">And this is a footnote.</span></p>

Smart quotes can be used in lieu of straight quotes by enclosing the text like so. You can nest quotes within quotes.

<q>To be or not be.</q>

Utility classes are also available to modify layout and counter behavior.

  • col-2 divide the element into 2 columns
  • col-3 divide the element into 3 columns
  • col-4 divide the element into 4 columns
  • col-span span all of the columns of parent
  • col-break-before force column break before element
  • col-break-after force column break after element
  • page-break-before force page break before element
  • page-break-after force page break after element
  • counter-skip do not count this header
  • counter-reset reset counter to 0

For customization, one of the major advantages of PubCSS is that you can use CSS. All of the usual rules apply.

The architecture of PubCSS is similar to Bootswatch — a set of LESS files used to generate CSS for the current themes and to bootstrap new ones. If you want to make more extensive changes, or create a new theme, you’ll want to dig into the LESS source. The most common changes can be made through variables.less, such as toggling page numbers and setting counter styles.

Notes

PubCSS is meant to be proof-of-concept, a demonstration of HTML and CSS as viable alternative for formatting academic papers. Note that these templates are not officially sanctioned by ACM or IEEE. Unless a venue requires only the PDF output, they’ll also be expecting the source in the form of LaTeX files or a Word document.

Among the limitations of PubCSS are that citations in APA or MLA style (Park, 2015) are possible but clumsier than their counterpart [1]. You also lose the magic of BibTeX for reference management, though on the bright side, all of your content is localized to a single file. Finally, when debugging PDF output, you really come to miss the developer tools available in web browsers today.

For the interactive web paper, I used JavaScript and hard-coded HTML to achieve many of the interactive effects. But once browsers start supporting CSS3 properties like target-counter and target-content, as Prince already does, it’ll be possible to implement most of these effects with only CSS — that is, outputting both print and fully interactive web versions with a single pub.css file. How cool.

Finally, get in touch if you have a request for another publication format. I’d love to hear from you if you’re interested in using PubCSS.

24 comments Write a comment

Leave a Reply