Known problems - aerix-nl/nota GitHub Wiki

Nota is young, experimental, and built on a still developing tech stack. There are still quite some shortcomings and bugs (none that aren't likely to be fixed in the near future). That said, we've been able to use Nota in production environments already. If you take care to test your setup, verify the results and can live with some workarounds, you should be fine. Consider the current version a showcase of the potential of this tech stack and the future of Nota. Here's some things to take into account:

No clickable hyperlinks

Even though WebKit supports this, due to a bug in QtWebKit which PhantomJS builts on the current output PDFs have no clickable links. This has quite some [pressing attention](https://www.bountysource.com/issues/303463 -suggestion-include-hyperlink-action-in-pdf-output-for-hyperlinks-in- webpage/backers), so it's likely to be fixed soon, but no fix committed yet. For now we recommend making links that have the URL as the text so users can copy-paste that.

Hyperlink length expansion

It seems that as an attempt to compensate for the lack of links, PhantomJS takes the href value of a link and suffixes it to the link's inner HTML, rendering a link like <a href="www.somewhere.com">link</a> into <a href="somewhere.com">link (www.somewhere.com)</a>. This also causes a flow expansion that breaks 1:1 correspondence of screen to print output, and can even break layouts when context flow it lightly fitted. To prevent this, for now Nota subsitutes all <a> tags with <span class="hyperlink"> tags with equal inner HTML. For identical styling, we recommend a selector like a, span.hyperlink in your template CSS.

Selectable text

It seems PhantomJS only generates PDFs with selectable text on Linux due to a bug. For now we recommend setting up Nota on a Linux server, or using Vagran to run Nota in a Linux virtualization on MacOSX or Windows. Needs checking if solved in PhantomJS 2.

Custom fonts

Due to a bug in PhantomJS, the loading of webfonts (even if they're locally hosted) seems broken. For now you'll have to install the fonts on the system itself. This works for MacOSX and Windows. Though on Linux PhantomJS should query to font from Freedesktop.org's Fontconfig, I've been unable to get this to work. Installing a font should be possible by converting the font files to Type1, placing them in /usr/share/fonts/type1, rebuilding the font cache. It's recommended to use fc-cache -fv to force it and print the verbose output so you can check whether it picked up the new fonts and indexed it. Check that your font is now recognized with fc-match. Despite all these signs of the font being available, I've been unable to get PhantomJS to pick up new fonts on Linux. Check out this guide for more details of how it should be possible. Needs verification from other Linux users if indeed broken, and also needs checking if solved in PhantomJS 2.

Font weights being ignored

It seems PhantomJS only supports use of 'normal' and 'bold' values in the CSS font-weight attribute. As a result thin fonts will be rendered with normal weight. Needs checking if reproducible.

Color definitions revert to black

It looks like all use of color in the CSS (for text/borders/backgrounds etc.) is lost and reverted to black upon rendering. This can be worked around for the while by adding the !important keyword after all the color declaration, e.g. like this h1 { color: red !important }. Note that this only works for elements where the selector directly applies. Subelements who would normally inherit a color definition still revert back to black. More research needed on why and other solutions.

Paper size and zoom factor

It looks like when rendering with PhantomJS 1.9.x the page receives a zoom factor of about 1.068, causing the content flow to run longer than what is seen when rendered in the web browser. This is likely to be fixed, or at least allow for a compensating counter zoomfactor in PhantomJS 2 according to this bug. But at the time of writing PhantomJS 2 has an even larger zoom factor, and a broken zoomfactor setter. For now we recommend either creating extra space for content flow or making a CSS stylesheet for print, with a smaller font size to counter this.

Styling page header and footer

It's possible to render page numbers on your page by setting Nota.setDocumentHeader and Nota.setDocumentFooter with { content: "<Handlebars.JS HTML template>", height: "x", width: "y" } (width is optional). See an example here. The variables pageNum and numPages are available in the template for formatting page numbers. Both seem to be rendered as new separate pages during capturetime, which are then inserted in the template, so no styling or scripting of the original template is accessible. Limitation of PhantomJS.