Hi Thomas – The equations in section 2.2 don't render properly in Chrome 50 (64-bit) on Windows 10 (64-bit). They flash into existence for a second or less, then disappear. MathJax should work fine with Chrome, so I'm stumped by this one.

Section 2.6 is similarly broken in Chrome, except that part of Definition 1 displays. The e term is gone, so it just displays "log = z".

I just checked on my phone, and it's the same behavior. Chrome 50 on Android 6.01 briefly displays the equations, but once I scrolled past them and then back up to them, they were gone.

The ref element as mentioned in http://thomaspark.me/2015/01/pubcss-formatting-academic-publications-in-html-css/ is not a valid HTML element. Such element exists in neither http://developers.whatwg.org nor http://www.w3.org/TR/html5/ nor http://www.w3.org/TR/html51/

You cannot call it HTML if it is not HTML.

It would be nice to have LNCS as well 😄

As the MathJax blog post has stated, the CDN will be closing: April 30, 2017. They have/will provide alternate CDN's for people to use as stated in the above blogpost.

For some reason the authors are spread across two pages when printing in Chrome in this example.

https://thomaspark.co/project/pubcss/demo/acm-sig-sample-web-theme.html

Maybe this is the intended behavior but I am not really sure. Also the abstract appears rather far down the page for some reason. I am trying to establish how to change the page break behavior but I am not sure yet.

If the citation/footnote is too close to the margin, the floating box gets trimmed like shown below. This was captured on Google's Chrome Version 54.0.2840.71 (64-bit) for Linux.

From: http://thomaspark.co/project/pubcss/demo/acm-sig-sample-web-theme.html

The footnote element as mentioned in http://thomaspark.me/2015/01/pubcss-formatting-academic-publications-in-html-css/ is not a valid HTML element. Such element exists in neither http://developers.whatwg.org nor http://www.w3.org/TR/html5/ nor http://www.w3.org/TR/html51/

You might take some ideas from the HTML footnote syntax that Pandoc outputs:

<p>This is a reference to a note<a href="#fn1" class="footnoteRef" id="fnref1"><sup>1</sup></a></p>

<section class="footnotes">
    <hr />
    <ol>
        <li id="fn1"><p>This is a note<a href="#fnref1">↩</a></p></li>
    </ol>
</section>

which is incidentally similar to MultiMarkdown's:

<p>This is a reference to a note<a href="#fn:1" id="fnref:1" title="see footnote" class="footnote">[1]</a></p>

<div class="footnotes">
    <hr />
    <ol>
        <li id="fn:1"><p>This is a note <a href="#fnref:1" title="return to article" class="reversefootnote">&#160;&#8617;</a></p></li>
    </ol>
</div>

I, for one, prefer Pandoc's, since Multimarkdown's requires escaping the colon character in CSS selectors I also find Multimarkdown's use of brackets wrapping the reference an arbitrary aesthetic decision (not that Pandoc's decision to wrap it in a superscript is any less arbitrary, but at least I can CSS-style that away).

With the industry moving away from LESS and closer to Sass (Bootstrap v4 coming out in Sass), it looks like the industry heavyweights are placing their bets on Sass.

I'd be interested in issuing a PR for release 0.3.0 with the following.

1. Porting code from LESS to Sass
2. Implementing a build system (Grunt, Gulp, etc)
   • Reduce vendor-prefixes with autoprefixer
3. Publishing pubcss in the bower package registry.

🚀

prince: css/pubcss-ieee.css:166: warning: missing ':' for pseudo-element '::footnote-call'
prince: css/pubcss-ieee.css:171: warning: missing ':' for pseudo-element '::footnote-marker'
prince: css/pubcss-ieee.css:177: warning: parse error in page declaration at 'escape('
prince: css/pubcss-ieee.css:387: warning: missing ':' for pseudo-element '::footnote-call'

Hi Thomas – The three-column author layout in the ACM sample breaks in Firefox desktop (FF 46 on Windows 10). Authors Tobin and Thorvald have their institutional and contact info one column over from their names, as you can see in this screenshot on Imgur.

It displays correctly in Chrome 50 on Windows 10, and mostly correct in Chrome 50 on Android 6 and Firefox 46 on Android 6. In both Android cases, the e-mail addresses either get truncated (Chrome) or overlap becoming a bolded mishmash (Firefox), but authors and their info stay together in the correct columns.

By the way, the page dimensions in the first paragraph of the ACM sample should use the double prime character to look best (and to be semantically correct), e.g. 7″ instead of 7". (The glyph is U+2033).

https://github.com/thomaspark/pubcss/blob/master/dist/acm-sig/templates/ieee-sample.pdf
https://github.com/thomaspark/pubcss/blob/master/dist/acm-sig/templates/acm-sigchi-ea-sample.pdf
https://github.com/thomaspark/pubcss/blob/master/dist/acm-sig/templates/acm-sigchi-sample.pdf

As mentioned in #1 (comment), PubCSS' use of cite to link to bibliographical citations is not valid HTML.

My field is economics and I'd love to use HTML instead of MS Word. I'm not currently sure of any style rule differences between ACM, IEEE, APA, and AEA.

I'd be happy to PR if we can identify the necessary rules. Happy to close if:

1. We can show ACM or IEEE already satisfies APA and/or AEA
2. The intent of this repo is not to support outside of ACM/IEEE

related: https://academia.stackexchange.com/questions/135221/does-apa-style-satisfy-aea-style-requirements

The idea of having it in css is to allow referencing the css from the repo without the need to download it.

If the template wraps each section explicitly in a <section> tag, and uses h1, h2, etc + section > section > … to indicate the depth of nesting, then it's possible to avoid all the .counter-skip classes by only applying the numbering to headings inside section elements.

Here's an example: master...hubgit:explicit-sections

The article layout basically looks like this:

<article>
  <header>
    <h1>Article Title</h1>
    <div>…</div>
  </header>

  <section>
    <h2>Section heading</h2>
    <p>…</p>
  </section>

  <section>
    <h2>Section heading</h2>
    <p>…</p>

    <section>
      <h3>Subsection heading</h3>
      <p>…</p>
    </section>

    <section>
      <h3>Subsection heading</h3>
      <p>…</p>
    </section>
  </section>

  <footer>
    <div>…</div>
  </footer>
</article>

You recommend using prince for your html to pdf conversion but, that is a paid service and, for non-commercial adds a watermark. Have you considered wkhtml? It's free, in every test I've don't it seems flawless and it's in the debian repository which makes it easy on linux.

I figure we could make a gulp build, and run puppeteer (headless chrome) to export the PDF's? Thoughts?

https://github.com/GoogleChrome/puppeteer has an example of creating a PDF from a page:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});

  await browser.close();
})();

Addtional docs: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagepdfoptions

Hello,

I need to create my own css, because I need to use a different (and quite obscure) standard than what you have. It is not a problem for me to setup the styles accordingly, but I can't get even your unmodified code to compile. When I first tried to run sass, it returned:

Error: Invalid CSS after "escape": expected selector, was "("@")footnotes"
        on line 2 of pubcss/src/objects/_footnotes.scss, in `footnotes'
        from line 11 of pubcss/src/objects/_page.scss
        from line 25 of pubcss/src/_manifest.scss
        from line 5 of styles/pubcss-gjsm.scss
  Use --trace for backtrace.

I looked into the source and tried to replace the escape function with the unquote function, which throws this error:

Error: Invalid CSS after "": expected selector, was "@footnotes"
        on line 2 of pubcss/src/objects/_footnotes.scss, in `footnotes'
        from line 11 of pubcss/src/objects/_page.scss
        from line 25 of pubcss/src/_manifest.scss
        from line 5 of styles/pubcss-gjsm.scss
  Use --trace for backtrace.

I suspect this might be because I don't use Gulp, which I would like to avoid, because from what I understand it is used just for automatic reloading of the css in a browser, which I have my own tools for and don't really need for this project.

Or does this have something to do with Price?

Is there a way I could quickly patch/fix this without too much pain?

Thank you very much,
GS