PubCSS

PubCSS is a library of CSS stylesheets and HTML templates for formatting academic publications for print and the web.

Currently, the following formats are supported:

• ACM SIG Proceedings
• ACM SIGCHI Conference Papers
• ACM SIGCHI Extended Abstracts
• IEEE Conference Proceedings

Check out sample output here.

Quick Start

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

The only dependency is Prince, which is free for non-commercial use.

Reference

Sections

Sections and subsections are automatically numbered by following this pattern.

<h1>Section Header</h1> <!--This is The Biggest tag in Html-->
<section>                <!--This is The Section tag in Html-->
  <h2>Subsection Header</h2>
  <p>Lorem ipsum</p> <!--This is The Paragraph tag in Html-->
</section>

Tables and Figures

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

<table> <!--This is The Table tag in Html-->
  <tr><td>1</td><td>2</td></tr>    <!--td is the table data tag and tr is a table row tag in Html-->
  <caption>Example Table</caption>  <!--This is The Caption tag in Html-->
<table>

<figure>    <!--This is The Figure tag in Html-->
  <img src="graph.png">    <!--This is The Image tag in Html-->
  <figcaption>Example Figure</figcaption>  <!--This is The Figure-Caption tag in Html-->
</figure>

References and Citations

References are also numbered. Be sure to assign them unique IDs.

<cite id="nicole">Nicole. 2015. Title of paper. <em>Journal</em>, 4(3), 1-10.</cite> <!--This is The Cite tag in Html-->

Citations to the references make use of these IDs.

<a href="#nicole"></a> <!--This is The Anchor/Inline tag in Html-->

Multiple citations can be made in one set of brackets.

<span class="cites"><a href="#beeker"></a><a href="#jackie"></a><a href="#kiwi"></a></span>  <!--This is The Span/Inline tag in Html-->

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

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"> <!--This is The Division tag in Html-->
  <math xmlns="http://www.w3.org/1998/Math/MathML">
    <mi>E</mi> <!--This is The Math-input tag in Html-->
    <mo>=</mo> <!--This is The Math-Outpt tag in Html-->
    <mi>m</mi>
    <msup>
      <mi>c</mi>
      <mn>2</mn>
    </msup>
  </math>
</div>

Footnotes

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

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

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

Customization

One of the major advantages of PubCSS is that you can use CSS to customize the style. All of the usual rules apply.

To 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. The rest can be included in custom.less.