Beautiful PDF documents with web
technologies
We tend to prefer mark-up languages (Markdown, LaTeX, etc.) to interfaced document editors like MS
Of ce or Google Docs, because they make it easier to quickly write documents with consistent style.
However, Markdown is limited to the title/sections/paragraphs structure, and LaTeX has obscure
syntax and errors that also make it dif cult to go off the beaten tracks. This report introduces ReLaXed,
a solution using Pug and SCSS for document de nition and Google Chrome for rendering.
A sidebar will always make your document look nicer !
Web technologies have never looked so good
Plenty of CSS frameworks will make sure your documents will look clean and modern. Javascript
frameworks can plot schemas, highlight code, or render maths equations the same way LaTeX does.
Millions of people (and growing) are now uent in these technologies. Shorthand languages like Pug
and SCSS are nally making it fun to write HTML and CSS. (Headless) web browsers can easily turn all
these technologies into PDF, on any platform.
As an illustration, it took just one line to import the Semantic UI framework and style this document.
Now look at this gorgeous table (don't pay attention to the content, it's place-holder)
Feature Framework Notes
Mathematical equations MathJax Totally working
Plots Vegalite Needs testing
Simple installation NPM Problematic
Flowcharts Mermaid.js Beautifully working
Table 1: There is not much to say about this table but hey this is a caption. Captions are cool.
Here is another cool component provided by Semantic UI:
Give it a try !
The ReLaXed homepage is at github.com/RelaxedJS/ReLaXed
Page 1 / 2
Next we will have a look at some differences
A 100 between ReLaXed and other frameworks.
80
60 ReLaXed vs other solutions
b
40
Here are a few highlights of what you may win, or
20 lose, using ReLaXed instead of another solution. This
0
section is of course open to contributions.
A
O
a
Let us start with Markdown. This widely supported
B
language (Github, NPM, etc.) became very popular
mermaid
due to its simple and friendly syntax close to plain
svg
text. Markdown also has cool editors and extensions.
A sidebar will always make your document look nicer !
vega-lite html Chrome pdf One example is markdown-preview-enhanced
pug which can render plots, owcharts, and equations.
ReLaXed has been specially extended so that it could
Figure 1: Examples of graphics generated by web
support plot, owchart, and equations (using the
frameworks. This also demonstrates gure composition
into panels - suck it, markdown ! A. Graph de ned as a
same underlying libraries as markdown-preview-
JSON and transformed to SVG using Vega-lite and enhanced), as illustrated in Figure 1. In addition,
Chrome. B. Graph generated using Mermaid and ReLaXed allows you to write any kind of layout with
Chrome.
boxes, sidebars, etc. HTML elements are more fun to
write with Pug (in markdown, HTML elements must
be written in plain HTML). You can de ne macros, use conditionals and loops, use computed
expressions using Javascript , and ReLaXed supports (S)CSS which is pretty cool. Last but not least,
you can write parts in markdown if you want to . Yep, that was an emoji. Cost us one line of code, to
import Emoji CSS as a stylesheet.
Now what about LaTeX ? Sure, LaTeX is wide-spread in academic and publishing communities, where
it's typography and layout optimizations, and its bibliography management tool are very appreciated.
But LaTeX is also known for its cryptic errors, its complex advanced syntax which not many make the
effort to learn, and as a consequence not many LaTeX venture on the creative side with their own
themes and layouts.
Certainly the letter and paragraph spacings won't be as nice in ReLaXed (but Google Chrome is still
doing a very good job), but the syntax, clear error messages, etc. will certainly make you happier.
ReLaXed is also possibly faster to render big documents (not entirely sure though ).
Page 2 / 2
