thomaspark / pubcss Goto Github PK
View Code? Open in Web Editor NEWFormat academic publications in HTML & CSS
Home Page: http://thomaspark.co/2015/01/pubcss-formatting-academic-publications-in-html-css/
License: MIT License
Format academic publications in HTML & CSS
Home Page: http://thomaspark.co/2015/01/pubcss-formatting-academic-publications-in-html-css/
License: MIT License
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.
The idea of having it in css is to allow referencing the css from the repo without the need to download it.
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:
related: https://academia.stackexchange.com/questions/135221/does-apa-style-satisfy-aea-style-requirements
As mentioned in #1 (comment), PubCSS' use of cite
to link to bibliographical citations is not valid HTML.
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.
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
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>
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.
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"> ↩</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).
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'
It would be nice to have LNCS as well 😄
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
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).
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.
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.
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.
🚀
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.