
Show HN: ReLaXed – High-quality PDFs using web technologies - zulko
https://github.com/RelaxedJS/ReLaXed
======
leephillips
The examples lack hyphenation, which partly explains the too-variable
interword spacing. Is this because Chrome still fails to support hyphenation,
unlike, for example, Firefox?

There are other subtle defects, which make these PDFs pretty good, but not
high quality.

Here is a brief discussion of some of the shortcomings of web typography, and
why we still need to use TeX if we want the most beautiful and easiest to read
results:

[https://lwn.net/Articles/662053/](https://lwn.net/Articles/662053/)

All that aside, this is impressive and should be useful to many people.

~~~
zulko
Hyphenation can be tuned via CSS but I have never been happy with it:

[https://www.w3schools.com/cssref/css3_pr_word-
break.asp](https://www.w3schools.com/cssref/css3_pr_word-break.asp)

From what I remember LaTeX has better algorithms, both in how to distribute
words between lines, and in knowing where in a word it is ok to cut.

~~~
taeric
For anyone that wants to have a good read, try reading the TeX-book's section
on hyphenation. Tons of fun that goes over some of the difficulties.

As a fun trivia, think where to hyphenate the word record. In all forms.

~~~
ximeng
[http://www.ctex.org/documents/shredder/src/texbook.pdf](http://www.ctex.org/documents/shredder/src/texbook.pdf)

Page 449

------
kaycebasques
When I saw "... using web technologies" I was curious if it uses Puppeteer.
package.json confirms that is indeed the case.

[https://github.com/GoogleChrome/puppeteer](https://github.com/GoogleChrome/puppeteer)

(I work for Chrome DevTools team, creators of Puppeteer)

~~~
mrskitch
I was wondering the same as it’s a common use-case for the project I run
(browserless.io). Seems to be a big demand for sane PDF rendering and
generation.

Been pretty interesting seeing webtech handle these kinds of problems

------
Ecco
How would that compare to, say, an HTML template + wkhtmltopdf?

Also I feel like the biggest gripe with generating (long) PDFs from HTML are
things such as page numbering, orphans and widows, semantically correct word-
wrapping, page margins, etc...

Chrome does a decent job but is nowhere close to what LaTeX can do.

~~~
zulko
I have gathered some comparisons in this wiki page:

[https://github.com/RelaxedJS/ReLaXed/wiki/ReLaXed-vs-
other-s...](https://github.com/RelaxedJS/ReLaXed/wiki/ReLaXed-vs-other-
solutions)

It is open to contributions, so any thoughts welcome. In a nutshell, all your
points are valid. Chrome is one of the best browsers, but still behind LaTeX
in some aspects. But which will evolve faster in the future ?

~~~
netheril96
> But which will evolve faster in the future ?

Are you comparing Chrome and LaTeX? Chrome is certainly evolving faster
overall, but features related to PDF printing have not changed much, or any at
all.

------
omnimus
Oh how much i would love to have good way how to generate print quality PDFs.
The real problem is not hyphenation but how lines are composed. If you want
even lines in type set to block then there is probably only Adobe Indesign and
LaTeX anything else uses "single line composer" i dont know the algorythm but
Latex and Indesign are only ones which take multiple lines into considiration.
Latex is sort of Okay but the algorythm in Indesign is still highly superior.
I suspect that is some Adobe secret sauce. Pity because you cant run indesign
on server, you have it open and use "extendscript" their version of old
ECMAScript 3 :(

~~~
kccqzy
Adobe's secret sauce is largely implemented in the microtype package in LaTeX
world (character protrusion for optical margin alignment and font expansion
for more even interword spacing and less hyphenation). Also the technology
didn't originate at Adobe; Adobe purchased the technology from URW who
developed the hz-program that was the real pioneer for those micro-typographic
adjustments.

~~~
omnimus
Microtype package is pretty great. I want latex to work for me - maybe i am
missing something but it always bothered me that i have to mix content with
styling. I guess it is great when you are writing something yours and you work
on styling and content at the same time. Most of my uscases are unfortunately
feeding some text input and spitting pdf.

------
che371291
Seems kind of neat. But for my purposes I will still use Markdown to PDF using
pandoc etc.

What really upsets me... the typography still looks shit compared to LaTeX...
MS Word / LibreOffice can do better. Would rather stick with plaintext again.

~~~
kevin_thibedeau
FOP is the only TeX alternative that can get close to it on basic typography
in a FOSS implementation. I had a toolchain that ran ReST -> Docbook -> XSL-
FOP -> PDF but the hard drive it was on bit the dust and I haven't gotten
around to recreating it. Still much more pleasant than wrestling with LaTeX's
rigid predetermined layouts. The result was nice and didn't have the crusty
PDF LaTeX appearance.

~~~
blattimwind
Well there are a bunch other engines out there, but it just so happens they
all eat tex or something very close to it (context).

Five or six years or so ago I used reportlab (in Python) to generate some PDF
reports (using the flowables API); it does kinda work but layout is more
complicated than in tex and output quality is several notches down.

As far as appearance goes, you can make tex look like almost anything, even
with fairly low effort.

------
thangalin
How does this improve upon Pandoc?

[https://i.imgur.com/tMkMjNV.png](https://i.imgur.com/tMkMjNV.png)

In the image, ConTeXt generates PDFs. The EA box represents HTML documentation
exported from Enterprise Architect, but could be any structured document that
pandoc can parse. The source repository contains various themes for the final
PDF.

Using ConTeXt offers several compelling features, such as: citations, cross-
references, and ability to produce EBPUBs.

~~~
baby
I'm not sure I understand the image, but to my knowledge you can't just do any
html -> pdf with pandoc.

~~~
maxerickson
I have no idea how well it works, but pandoc supports html as an input format
(if I understand right, it supports most/all input->output pairs).

~~~
omnimus
I believe they generate Latex fromh html and pdf from latex.

------
deleterofworlds
This is neat, but perhaps switching the final typesetting engine from
chromium's PDF printer to LaTex (via Pandoc maybe) would make it more useful.
You'd get more control over things like page numbering and TOCs, plus good
justification/microtypography, which is important to most publishers.

------
nateroling
Related, why doesn't anyone ever mention [Apache
FOP]([https://xmlgraphics.apache.org/fop/](https://xmlgraphics.apache.org/fop/))
for this kind of thing? I've had great success with it.

------
killercup
Waiting to see an example with footnotes and auto references ;)

~~~
sebazzz
That will probably be difficult because Chrome just "prints" a PDF. Therefore
headers, footers, footnotes, and page numbering is a difficult issue to solve.

~~~
alexwebb2
FYI, Puppeteer does indeed support header and footer templates when printing
to PDF:

[https://github.com/GoogleChrome/puppeteer/blob/v1.3.0/docs/a...](https://github.com/GoogleChrome/puppeteer/blob/v1.3.0/docs/api.md#pagepdfoptions)

------
nmca
This looks nice - as a regular latex user, I'd say it (latex) sits roughly
between excruciating agony and the actual worst thing in the world.

So the beginnings of an alternative looks great!

------
foobaw
How do we pronounce this? Re-LACKED?

~~~
fmntf
Probably. People is abusing the X letter (do they know that it is not
pronounced anymore as "ki" in modern greek?).

~~~
Mediterraneo10
> Do they know that it is not pronounced anymore as "ki" in modern greek?

They may know that, but it is irrelevant. English lacks the phoneme /x/ and
the usual substitution in assimilating foreign words (or the letter-play that
Donald Knuth started with TeX) is the closest unvoiced velar that English has:
/k/. See how most English speakers pronounce the name of J. S. Bach as [bak],
with only a small number of pedants saying [bax]. Or, outside of Scotland,
_Loch Ness_ is usually [lɔk], not [lɔx].

------
felixfbecker
All I want is a system that gets the basic right and is version-controllable
in git (plain text source code). Latex is just ridiculously complex and
inconsistent. Even after years of using it, I have to google how to do most
things every time. I would prefer a simple PDF generator that uses pug/HTML
(which I know by heart) any day.

------
agussell
[https://github.com/bramstein/typeset](https://github.com/bramstein/typeset)

This is an implementation of the line breaking algorithm used in TeX in
Javascript. It would be nice to add to obtain better typographic results with
justified text.

------
Wehrdo
Looks like the perfect solution to my resume. The latest iteration is in
HTML/CSS, because it allowed me to easily get the exact layout I wanted (so
painful in LaTeX...), but getting a consistent PDF was a challenge.

------
Klasiaster
I produce all my PDFs with pandoc's markdown and in-line html: letters, slides
and papers with citations. Depending on whether I need mathjax I use
wkhtmltopdf or chromium (JS-based hypens with Hyphenopoly) or just
[http://weasyprint.org/](http://weasyprint.org/) if no JS is involved.

This pug language seems to be a good alternative to intermixed markdown+html.

------
buildbuildbuild
I find Markdown most natural for writing because I do not have to worry about
formatting or syntax.

Currently I deliver ~2 PDF reports per week using Ulysses or MacDown for
content creation (distraction-free writing), and then typesetting everything
into InDesign.

Thank you for creating this tool, I will try it next week.

The ability to render Markdown to Pug as an "Import Markdown" feature would be
key for many people to adopt this.

~~~
zulko
Inline markdown and external markdown files are both supported. Have a look at
the "Book" example. Every chapter is in its own Markdown file. Most of the
other examples have parts where I simply switch to markdown.

I am also a big markdown user and I have found that for writing reports all
day long markdown clearly wins over Pug, in particular with tools like

[https://atom.io/packages/markdown-preview-
enhanced](https://atom.io/packages/markdown-preview-enhanced)

But the day where you need to produce a super-nice report with a bit of custom
layout, Pug/SCSS is awesome.

~~~
buildbuildbuild
Completely missed that. Thanks, will try.

------
deedubaya
Really beautiful stuff!

I'm in the process of launching BreezyPDF.com which can generate equally as
wonderful PDFs from the HTML/JS/CSS you're already using.

Here's a demo of turning a complex dashboard into a PDF:
[https://ruby.demo.breezypdf.com](https://ruby.demo.breezypdf.com)

------
williamscales
How does this compare with Prince?

~~~
evilduck
For one, everything here appears to be free and open source. Prince is pretty
costly to run as a small endeavor and last I knew their pricing model wasn't
very kind to horizontal scaling.

~~~
zrail
DocRaptor is PrinceXML as a service with reasonable pricing.

[https://docraptor.com](https://docraptor.com)

~~~
exhilaration
DocRaptor is great. We used it for generating invoices for several years until
our volume justified buying Prince and running it locally.

------
jakear
Not sure if this is related to the format of the PDF somehow, but my computer
completely froze when trying to open the Alice pdf in the GitHub viewer. This
is on Safari, Chrome was fine.

~~~
jakear
Upon further inspection, the GitHub renderer works fine on PDF's much larger
[1], and the native Safari PDF viewer opens these PDF's fine. I suspect there
is something the GitHub renderer, your pdf generator, and Safari's js engine
disagree on.

[1]:
[https://github.com/mynane/PDF/blob/master/Docker%20——%20从入门到...](https://github.com/mynane/PDF/blob/master/Docker%20——%20从入门到实践%20-%20v1.0.pdf)

------
lkurusa
Interesting project! Can this be used to potentially include JavaScript in
resulting PDF files and use them to animate images in the PDF?

This would be useful for some presentations I think.

~~~
zulko
You can include Javascript in the pages, but it won't be animated in the end.

Maybe you would be interested by this project to make slideshows with
Pug/SCSS/Vue.JS. There you can make plenty of animations:

[https://zulko.github.io/eaglejs-demo/#/](https://zulko.github.io/eaglejs-
demo/#/)

~~~
lkurusa
Thank you! That is a brilliant suggestion indeed.

------
pritambaral
Given that some of the usecases are to print books, and that this internally
uses HTML and CSS< would there be an officially supported way to publish
ePubs?

~~~
zulko
ReLaXed really focuses on PDFs right now (to keep the initial focus small) but
it produces an HTML file as a byproduct. From what I understand there is not
far from an HTML file to an Epub.

This being said, the primary goal of this library is to enable to make
documents with complex or fancy layouts. Epubs generally have a simple
structure (chapter/section/paragraph) and can be written using for instance
Markdown:

[https://pandoc.org/epub.html](https://pandoc.org/epub.html)

------
wyas
Very cool. Could standard Latex mathmode be used here?

~~~
zulko
Mathjax notation is supported:

[https://www.mathjax.org/](https://www.mathjax.org/)

See some basic use in ReLaXed in the "paper" or "slideshow" examples, or here
for a basic documentation:

[https://github.com/RelaxedJS/ReLaXed/wiki/Features#equations](https://github.com/RelaxedJS/ReLaXed/wiki/Features#equations)

------
czechdeveloper
Looks awesome. Can it use CMYK colors? That is killer feature for print
centers.

------
baby
Does it support things like mathjax? This is a really important question to
me.

~~~
aidangarza
According to this example in their repo, it does indeed support mathjax:
[https://github.com/RelaxedJS/ReLaXed-
examples/blob/master/ex...](https://github.com/RelaxedJS/ReLaXed-
examples/blob/master/examples/slides/slides.pdf)

