13 ms·

Laying Out a Print Book with CSS

349 points by yojo 4y ago

beej71 4y ago
I'm pleased to see it come this far. I still need footnotes, table of contents, and indexing, but maybe someday.
- stakhanov 4y ago
  Weasyprint does support all of these things actually, including footnotes. A table of contents would use references to CSS counters, and if you generate the input-HTML for weasyprint from pandoc, then pandoc can actually generate those for you. The only nontrivial thing on your list would be an index, assuming you would want to autogenerate it the way latex does, but even that seems kind of doable with a little bit of custom hacking. Pandoc can also do bibliographies through citeproc/csl. So pandoc+weasyprint is absolutely a practicable tech stack these days for science publishing, assuming you don't need latex-math and are not targeting any of those publishing outlets that give you a word template and latex style and force you to use it.
nayuki 4y ago
Excellent work. This is good time to remind web front-end developers that you don't need to click a link to bring up a "printable" version of a page. You can make every HTML page print-compatible through stylesheet rules wrapped in @media print { ... } or <link rel="stylesheet" href="my.css" media="print">.
madduci 4y ago
Interesting read, I find asciidoctor pdf and its theming guide extremely good to obtain nice results for books and articles, customizing it with CSS, fonts and more
- pixelfarmer 4y ago
  Asciidoctor PDF works as long as you are ok with what you could call the general "template" it uses. You can modify details within that, but if you want to change it, other approaches are required. Last time I had to deal with it I went with DocBook5 and then used a conversion to LaTeX to "break out". I agree with the asciidoctor guys about not offering more flexibility with that "template"; they have other things to focus on and it works well for cases where no specific layout is required.
- senthilnayagam 4y ago
  I like asciidoctor because it is a text file and easy to version control, I have written couple of books with it and made into pdf, but I am still looking for actively maintained themes, so for self publishing and KDP, I am using pandoc and bunch of tools to convert it into various formats(docbook, md, docx etc). My current workflow is convert into docx which is imported in kindle create and optimise it with kindle previewer.
- KodingKitty 4y ago
  I have written several books. I used Markdown for the first one. Then someone recommended AsciiDoc and AsciiDoctor. It was a much better experience compared to Markdown. Sure, not for pixel perfect tweaking. Still enough parameters to play with. Easy to create PDFs and EPUBs.
Brajeshwar 4y ago
I love reading printed books and blog posts. For those interested, a starting point for printable CSS is Gutenberg[1]. This has been my go-to for the print media in CSS. I believe I stopped looking for another one with my lack of deeper involvement in development of styles. I'm also guilty of picking Baskerville as the default classic look to printable font-family and even had resorted to it for screen. Besides the tools mentioned in the article (Vellum and Atticus), Ulysses also has a good option for print-ready output. 1. https://github.com/BafS/Gutenberg https://github.com/BafS/Gutenberg
jopsen 4y ago
If the objective was not spend on design software, why not use latex?
- sondr3 4y ago
  Wouldn't surprise me if it was easier for the author to hack this together in CSS since he already knows it quite well compared to learning LaTeX. I love LaTeX, but the learning curve is more like a cliff.
  - lelanthran 4y ago
    > Wouldn't surprise me if it was easier for the author to hack this together in CSS since he already knows it quite well compared to learning LaTeX. I love LaTeX, but the learning curve is more like a cliff. Yeah, agree, but a work of fiction doesn't usually have tables, figures, references, equations, etc which can be painful in LaTeX. It does have kerning, ligatures, orphan/widow management, runs/ladder management, page numbering, chapter numbering, margins (larger closer to the spine), rules, struts, etc that all come for free without the author having to know any of that stuff. IOW, for a work of fiction, the learning curve for LaTeX is likely limited to setting the font, setting the size, setting the output type (book, article, etc) and using bold, emphasis, underline and possible verbatim. The learning curve for LaTeX is a cliff if you're writing a thesis, it's simply markup if you're not.
- pixelfarmer 4y ago
  I just scrolled through the page. I think https://iangmcdowell.com/blog/book_breaks.png https://iangmcdowell.com/blog/book_breaks.png says it all, quite openly. For anyone who delved a bit deeper into the topic, this is horrible to look at.
  - pixelfarmer 4y ago
    Seems like I have to add some explaining words here ... Book layout is a very complicated topic. If you look at that image and step away a bit it leaves a chaotic visual impression. Reason behind that is that if you want a visually pleasing look, all the paragraphs have to have a similar "density". That is defined by how long the words are, the spacing in the words (kerning, ligatures, font), and the spacing between the words. Latter is all across the board, even changes within the same paragraph! LaTeX has all that typesetting knowledge included, and it will actively hyphenate words to accomplish its goal. I see exactly one word being hyphenated there. Another thing that stuck out immediately was the font selection for the all uppercase paragraph. Some fonts are just not made to be used that way and this is one of them. These curvy uppercase letters are nice to start words, but used together it is ... ugh. Last is that leftover sentence at the top of the right side. It "validates" the separator image, so this is somewhat of a pro/contra mixed bag situation. Professionals could probably say even more about all this, I just used LaTeX for a couple years more often and these are things I learned (to see) on the way.
thunderbong 4y ago
Awesome writeup! I enjoyed the tongue-in-cheek style along with the technical stuff! And CSS is like he mentions - "One he'll of a hammer" Also, towards the end, this gave me a chuckle! > It’s like Linux: free so long as your time has no value.
- noufalibrahim 4y ago
  Yeah. I was going to echo this sentiment but it looks like you pre emptively followed me. The article has the air of a hack done just for the fun of it because the author can. This was popular once upon a time but these days, it's mostly stuff written to promote certain things or as marketing copy.
  - TylerE 4y ago
    This is marketing, don’t kid yourself.
    - bryanrasmussen 4y ago
      yeah, it seems a bit weird to be marketing your techno thriller book with a post about css. I mean I guess there is some overlap between the two subjects, as there is likely be overlap between anything in a world with complicated people.
      - TylerE 4y ago
        It. Is. Marketing. The very first sentence is just a link to Amazon to buy the thing.
        noufalibrahim 4y ago
        Yup. Well written enough for me to forget that part. Just enjoyed the post .
        codetrotter 4y ago
rcarmo 4y ago
I would also recommend https://weasyprint.org https://weasyprint.org if you are generating PDFs. Generating invoices, resumes, reports, flyers, etc. from plain Markdown is a two-line affair: https://taoofmac.com/space/notes/2023/03/19/1849#tuesday-2023-03-14 https://taoofmac.com/space/notes/2023/03/19/1849#tuesday-202...
- jcul 4y ago
  Thanks for the link, weasyprint for converting markdown to some presentation format looks cool, similar to pandoc but maybe more customizable? Just to point out, in the original post, the author does end up using weasyprint, as the tools he began with did not support the required CSS features.
pbhjpbhj 4y ago
Why not Scribus? It's FOSS, mature, and actively used for book layouts by others. It comes up in searches for "free InDesign alternative" and "foss book layout" (it's mentioned in every search result that I viewed [not many]). I mean, perhaps it didn't fit the story that showed the blog post to be used to trail the book, but I'd have thought it would be mentioned.
- colonwqbang 4y ago
  Do you have experience with it yourself? I haven't tried it for several years, but it was not at all usable last time I did. For a project like this, I think it's a good choice to go with something more declarative over a WYSIWYG tool. Latex would have been a very good choice, but only if you already happen to know it or have an interest in learning.
  - benoliver999 4y ago
    I use it for graphics heavy stuff like product packaging, instruction manuals etc. For a book I'd just throw it in latex for sure.
  - pbhjpbhj 4y ago
    Yes, I've used it -- along with Inkscape and The GIMP -- for advertising [layout of flyers, for print magazine adverts]. Probably about 3 years since I used it last for this type of work. I follow one of their support groups and people mention they publish newsletters, pamphlets, and books with it.
  - eynsham 4y ago
    1.5 onwards I think has been entirely usable; before that I found it bizarrely unstable.
- Moru 4y ago
  He also states the Hammer and Nail situation. If your only tool is a hammer, every problem becomes a nail. I get the impression he wanted to use something he knew instead of spending time learning something new.
blue1 4y ago
One serious problem is that CSS do not support CMYK colors.
- somat 4y ago
  Might be a joke, humor can be difficult to convey in forum post form, And I am that stereotypical sort who often does not get humor. But I will bite. It is a printed book... there is no color in the process.
  - danpalmer 4y ago
    I don't think it's a joke, for the general case of print this is indeed a problem as the whole print industry runs on CMYK. You could go further and say that because CSS/Weasyprint doesn't have a Pantone plugin, it'll be difficult to control colour accuracy throughout the production process. You're right this isn't necessary for most novels, but it's a very real concern for print media.
  - blue1 4y ago
    It is not a joke. Color print exists, you know. For example, try obtaining a pure cyan from RGB color...
- chrismorgan 4y ago
  CSS Color Module Level 5 <https://drafts.csswg.org/css-color-5/ https://drafts.csswg.org/css-color-5/> adds @color-profile for ICC profiles (which may cover CMYK), and device-cmyk() for uncalibrated CMYK colours. Sure, browser support isn’t there yet, and this is still draft work, but it’s coming.
DeinFreund 4y ago
This article completely misses the point. Proper typesetting is about achieving a consistent appearance starting from ligatures and kerning, then word spacing and hyphenation, up to entire paragraphs and pages. Each character has to be typeset considering what character came before, how many words are in the same line and other lines in the same paragraph. The choice of font is also questionable, but not the main issue except for capitalized sections. This example from the article says it all: https://iangmcdowell.com/blog/book_breaks.png https://iangmcdowell.com/blog/book_breaks.png I understand that LaTeX is convoluted and other software is expensive, but when offering an alternative, there should at least be a comparison based on the quality of typesetting.
- rhn_mk1 4y ago
  I think the article stated the point clearly: the author wanted to hold some paper carrying the HTML contents. From what I can see, they hit the point completely. Perfect is the enemy of the good, they say.
- thaumasiotes 4y ago
  > Proper typesetting is about achieving a consistent appearance starting from ligatures and kerning, then word spacing and hyphenation, up to entire paragraphs and pages. I looked into CSS hyphenation because I was curious about controlling hyphenation in ebooks. CSS hyphenation appears to be based around the principle that you manually insert HTML entities representing potential hyphen locations into every word, which is obviously insane. hyphenation hyphenation hyphenation hyphenation The TeX way is to provide a set of hyphenation points once, such that, if a word needs to be hyphenated, that list can be consulted and the word can be hyphenated appropriately without each instance of it needing to be entered with several invisible HTML entities. \hyphenation{hy-phen-ation} hyphenation hyphenation hyphenation hyphenation I can't think of any use case where I'd prefer what is apparently the only way to do it in CSS. Do epubs have a bespoke non-CSS way to handle this? (I looked into this in the first place because the Kindle mobile app is godawful at hyphenating words, and I wanted to know what it would take to write an ebook that didn't have obvious howlers. The errors occur in foreign words, but they violate the rules of hyphenating English -- I've seen the app place a hyphen before the first vowel in a word, and I've seen it render "Qis-han", which is exactly equivalent to a hypothetical English "fis-hing" -- so it seems like they must be using a lookup table for all English words and falling back on something completely ridiculous for words that aren't in the table.)
ognarb 4y ago
For those interested in this topic, you might want to checked paged.js https://pagedjs.org/documentation/ https://pagedjs.org/documentation/ It's an polyfil for the unimplemented CSS paged specification, which is exactly that is needed for laying out pages. https://www.w3.org/TR/css-page-3/ https://www.w3.org/TR/css-page-3/
- Semaphor 4y ago
  And print-css.rocks [0] for a comparison of tools, with support matrices, and tutorials. We use Weasyprint [1] to create PDF ebooks with HTML and CSS. [0]: https://www.print-css.rocks/ https://www.print-css.rocks/ [1]: https://doc.courtbouillon.org/weasyprint/stable/ https://doc.courtbouillon.org/weasyprint/stable/
- bayesian_horse 4y ago
  At the moment, the combo of pagedjs with a headless browser is my first recommendation when you need something to output pdf automatically. Weasyprint looks nice, I have yet to use it. It probably has the advantage of not using an actual browser document (with all the relayouting problems), and may use fewer resources in terms of time and memory (I'd have to check though). The disadvantage is also it's not an actual browser document, meaning you need to render the html and css in some form before passing it to weasyprint. Using a headless browser makes it easier in general to do some fancy stuff like music sheets or embed js chart libraries and so on.
  - yojo 4y ago
    > meaning you need to render the html and css in some form before passing it to weasyprint I'm not sure I understand this part. WeasyPrint is a rendering engine; it takes an HTML file as input and outputs a PDF. I can't speak to resource usage, since this was very ad-hoc. For my needs, it was very simple to set up, and worked on the first try. I was testing with about five pages of content, and on my M1 MBP it rendered out the PDF pretty close to instantaneously, which was nice for the edit/refresh cycle. Preview on MacOS actually live reloaded when the PDF changed, which was a pleasant surprise.
lloydatkinson 4y ago
I can hear the “make everything even your to do lists and shopping list in Latex” cultists seething from over here!
rob74 4y ago
True story: I once had to update an OpenOffice document containing mostly photos and insert newer photos. How hard can it be? Finally, I got so frustrated with OpenOffice constantly breaking the layout and simply refusing to fit the images I wanted to fit on a page on a page (needless to say that they did fit on a page in the old version of the document) that I gave up, built an HTML page with the images and printed it to PDF. Done!
sn41 4y ago
I once had to generate about 170K+ pdf files from latex. Took a while (~5 hours) on a desktop, so had to get a server to do it and ran pdflatex with gnu parallel. The layout was a pain, since some strings in the databases were quite long. Then I realized that I could just have generated HTML and printed it via some headless chrome script. The rendering was more consistent, and the printing was much faster (IIRC it took about 1/3 the time.)
cardamomo 4y ago
As a former freelance book compositor, I can say there are typically many more details that go into laying out a book. To take this layout up a notch, I would want to create a baseline grid (set the line heights and paragraph margins to align text of different sizes). I would also want to control widows and orphans, which is built into CSS.
- snoopen 4y ago
  Does CSS support baseline grids? Since pagination isn't really a thing in CSS in guessing not?
  - cardamomo 4y ago
    Not to my knowledge. Here's a write-up from 2012 that still seems to be accurate today. https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/ https://www.smashingmagazine.com/2012/12/css-baseline-the-go...
  - stasmo 4y ago
    Pagination really is a thing in CSS, it’s just a part of the spec that’s not well supported by browsers right now. Use pagedjs to polyfill the missing spec features and you can control how content is split up between pages, add content to page margins, add blank pages and solve all sorts of print-related problems with CSS only.
- yojo 4y ago
  Good point. My goal was definitely just getting to an output that satisfied me as a reader, but there are certainly people out there with more refined aesthetic sensibilities that are going to spot the places I fell down. The part that seemed hardest to get just right with CSS was text justification. I can specify inter-word justification, but there are cases where getting the spacing just right is impossible without breaking a long word using a hyphen. As far as I can tell, there's no programmatic way to do this with just CSS. I addressed widows and orphans in my ePub layout, but for some reason forgot it in the print layout (d'oh). The nice thing about print on demand is it's easy to make updates, which I will. So thanks for pointing that one out! I'll also read up on using a baseline grid, I suspect CSS will work fine for that, since my content is all text with little variation between sizes.
danpalmer 4y ago
I had a fun time implementing shipping labels a few years ago. They were just a printable web page, rendered by Django. I was also able to fairly directly translate the sizes/padding in the spec to CSS using physical units. Surprisingly straightforward!
SigmundurM 4y ago
Fun fact: EPUBs, the global standard for digital books, is based on just HTML, CSS, and JS https://www.w3.org/publishing/epub3/epub-contentdocs.html https://www.w3.org/publishing/epub3/epub-contentdocs.html
- blackoil 4y ago
  That is meant for e-books and not printable books.
  - SigmundurM 4y ago
    Yup. It would be interesting to explore using Fixed Layout EPUBs to print physical books.
- WillAdams 4y ago
  Yes, and they get a bye because they are constantly re-flowed --- no one would gladly accept that in print.
ThePhysicist 4y ago
Weasyprint has gotten really good, I use it to generate PDFs for invoices but you can easily use it to write multi-page content as well. PrinceXML was still a bit better last I checked, but it's a closed-source, commercial solution.
RandomWorker 4y ago
One thing it also needs is variable margins with margins based on page side. That way the text doesn’t get too close to the spine.
foxbee 4y ago
This is awesome! Jost is a really nice font. Some css i like to add to my fonts to improve readability: -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-ligatures: contextual common-ligatures; Give them a try and let me know if they help :-)
2b3a51 4y ago
I've learned about a few pieces of software through the article. I'm just wondering if the FocusWriter odt file could not be processed through pandoc in some way with a style sheet to make a pdf.
z3t4 4y ago
> It’s like Linux: free so long as your time has no value. A better phrase would be: Free software is "free" as long as you value your free time, more then you value your time at work.
anotheryou 4y ago
now try making your page numbers start after the index pages that's where I gave up.
topcat31 4y ago
What about something like bindery.js? https://bindery.info/ https://bindery.info/
martopix 4y ago
I keep thinking that what I'd really like is a substitute of latex that is based on markdown and CSS. This is a hint of what would be possible, although of course it would take decades to get to the power of latex.
- giraffe_lady 4y ago
  Pollen is a good intermediate for this if you like lisp.
- maegul 4y ago
  I’ve wondered about this, and can’t help but feel that what’s missing are good solid foundations from which webdev and general programming skills could build out everything we’d need to migrate from latex. I would bet the community would move pretty fast if the foundations were there, but I’m not sure there’s anyone with the requisite expertise and will and resources to build it. Shame really, because IMO a web-aligned document writing tool chain would be awesome.
cubefox 4y ago
The author is actually underselling CSS for rendering PDF layouts. Of course, if you just do a static book, you are probably better off with software like InDesign. But if you need PDFs with dynamic and complex content (e.g. info documents with graphs, tables, dynamic text) then HTML/CSS is actually pretty great. As he mentions, unfortunately the CSS3 Paged Media spec is not very well-supported by major browsers, though other tools do implement it. I actually started to love CSS much more when I had to use another code-based solution: LaTeX. LaTeX is great for equations and automatic bibliography, but not for much else. If you ever tried to merely style a minimally complex table in LaTeX, you know what I mean. You actually see in major research papers that people sometimes just give up and include a screenshot of their table. LaTeX has no inherent distinction between structure and design, like HTML+CSS, which generates incredibly inelegant bloat code, like writing and styling a website in pure HTML without any CSS. Moreover, there often is no consistent syntax in LaTeX, and most everything can only be achieved with some sort of hackish package someone put together years ago without proper documentation. HTML and CSS are a breeze in comparison. CSS features like Flexbox or Grid let you do complex dynamic layouts in a few minutes, which are so difficult in LaTeX that most users would just throw the towel.
- Upvoter33 4y ago
  The problem with this: LaTeX (or actually TeX) typesetting is way better. It is hard to get all the spacing, kerning, hyphenation, etc., right so that the text looks good. There is no way a CSS-based solution comes close.
  - WillAdams 4y ago
    Moreover, one needs controls for: - widows/orphans - running paragraphs one or more line longer or shorter - setting a page spread to be one (or possibly two) lines deeper or shallower - adjusting the size/cropping of an image/figure/table so as to influence pagination - adjusting the placement of an image/figure/table so as to influence pagination In my decades of doing typesetting, I've had exactly _one_ chapter come out perfectly on import w/ no need to adjust _anything_ --- fastest 40 minutes of my life.
  - 4y ago
junon 4y ago
> Affinity Publisher Didn't know Serif had made a third product. Be wary of them - Designer and Photo are both buggy minefields and their support forum is full of snobby jerks. Crashes have been reported and present for years, with little or no response from Serif. Their developers all seem either disgruntled or burnt out. Some of the employer review sites confirm this. They're cheap but you certainly get what you pay for. Save often, back up often. I say this as an avid Designer user.
- dagorenouf 4y ago
  Never tried them but is it worse than adobe products?
  - junon 4y ago
    Bug-wise yes, both Photo and Designer are very very buggy. Functionality, also yes, but not by much. Only thing I miss from Photoshop in Affinity Photo is content aware tooling. I don't remember anything I miss from Illustrator in Affinity Design and I actually think they have better features than Illustrator (admittedly haven't used Illustrator in almost a decade so maybe they've caught up). You really can't beat Affinity's price though unless you use GIMP/Inkscape of course, but I like neither of those programs.
  - akpa1 4y ago
    To chip in to on this, I've been using Affinity Photo for at least 5 years and I don't remember having many problems at all. That is to say, YMMV.
    - junon 4y ago
      Yeah photo is leagues less buggy than designer. That said, I've had random crashes with Photo in the past too.
mproud 4y ago
LaTeX is also free.
ritzaco 4y ago
I printed a book recently (https://makejsgames.com/ https://makejsgames.com/) as a test and was surprised how straight-forward it was using LeanPub for the layout and Lulu for the printing. Leanpub accepts standard Markdown (though does have its own markdown format now) and gives you an "export for printing" button that you can upload to Lulu. The cover was kind of tricky and I got some professional design help both to design it and to get the margins and bleeds exactly as Lulu wanted them, but the result was way better than I expected. I haven't tried the other professional tools mentioned in this article so I can't really compare quality or ease, but might be worth a look if anyone is looking for something in between "do it all yourself" and "pay for fancy tools". (I have a lifetime LeanPub license from back when they still offered them but the monthly subscription fees are a lot lower than some of the tools mentioned here and you can easily get a printing done in a single month).
chadlavi 4y ago
This person hasn't heard of pandoc I guess
nforgerit 4y ago
Another method I haven't seen mentioned yet and that I grew fond of is to use Apache FOP ("Formatting Object Processor") which is still under active development and comes with this beautifully retro Apache open source homepages[0]: (1) It has a pretty good idea about Layouts, Pages and other elements one would need for printing (2) It supported all the graphics formats that I ever needed in the past and automatically fetches images by URL when it stumbles upon them. (3) It is easily embeddable into some custom Java app. (4) It is based on W3C open standard (which though doesn't seem to be developed anymore) (5) It does PDF/A. (6) XML/XSLT is a bit annoying to write for your template, so I used a common templating engine (e.g. Thymeleaf) to render the XML/XSLT that I passed on to FOP. Worked like a breeze and gives you the possibility to create your own little DSL. (7) I'm still happily generating my invoices through FOP put behind an API that takes input data and uploads the generated documents into a bucket. (8) I don't have the exact numbers but last time I checked and compared output sizes of browser printed pdfs vs "generated by Fop", I saw smaller PDFs with Fop. It doesn't mangle the input images though All in all, I trust FOP better to generate printable documents than any CSS/Headless Browser thing. It comes with an arcane template format which, as said, can be abstracted away but therefore has much smaller infrastructure footprint than spawning headless browsers. [0] https://xmlgraphics.apache.org/ https://xmlgraphics.apache.org/
grecy 4y ago
For my print books I've used LaTeX for the print pdf, then I run that through Pandoc to create an epub from that same source files with a script. I'm extremely happy with the final results. Here's how I did it all [1] Using macros and defining your own functions in LaTeX is a game changer, and when it came time to make my second book, I was up and running typing content in about five minutes, and it has the precise same look and feel. [1] http://theroadchoseme.com/how-i-self-published-a-professional-paperback-and-ebook-using-latex-and-pandoc http://theroadchoseme.com/how-i-self-published-a-professiona...
nye2k 4y ago
I remember my excitement when CSS3 became reality in modern browsers. I was following this project closely, which attempted to use recreate Robert Bringhurst’s The Elements of Typographic Style in CSS. That project made it clear just how far we were from a legible, printable web. http://webtypography.net/ http://webtypography.net/
pauljonas 4y ago
A few years back, I wrote a web based publishing tool that used `wkhtmltopdf` to generate PDF from database content along with web images (& even more complicated with API access & Google Maps API). It took a lot of tinkering but it worked. At times, extra fiddling needed to generate accurately the Table of Contents (basic, uses `H1-6` elements in document) with proper page references and formatting. But it worked, even with allotting for stuff like "bleed" (it was being printed a massive color printer we leased that could bind or staple.
- Hackbraten 4y ago
  Thank you for wkhtmltopdf. If I recall correctly, Pandoc uses it under the hood for generating PDF?
effnorwood 4y ago
[dead]
yencabulator 4y ago
Typst is new but at this point I'd explore that, myself. Much more pleasant than LaTeX, and quite capable: https://github.com/typst/typst https://github.com/typst/typst https://news.ycombinator.com/item?id=35250210 https://news.ycombinator.com/item?id=35250210

349 points by yojo 4y ago

beej71 4y ago

I'm pleased to see it come this far. I still need footnotes, table of contents, and indexing, but maybe someday.

stakhanov 4y ago
Weasyprint does support all of these things actually, including footnotes. A table of contents would use references to CSS counters, and if you generate the input-HTML for weasyprint from pandoc, then pandoc can actually generate those for you. The only nontrivial thing on your list would be an index, assuming you would want to autogenerate it the way latex does, but even that seems kind of doable with a little bit of custom hacking. Pandoc can also do bibliographies through citeproc/csl. So pandoc+weasyprint is absolutely a practicable tech stack these days for science publishing, assuming you don't need latex-math and are not targeting any of those publishing outlets that give you a word template and latex style and force you to use it.

nayuki 4y ago

Excellent work. This is good time to remind web front-end developers that you don't need to click a link to bring up a "printable" version of a page. You can make every HTML page print-compatible through stylesheet rules wrapped in @media print { ... } or <link rel="stylesheet" href="my.css" media="print">.

madduci 4y ago

Interesting read, I find asciidoctor pdf and its theming guide extremely good to obtain nice results for books and articles, customizing it with CSS, fonts and more

pixelfarmer 4y ago
Asciidoctor PDF works as long as you are ok with what you could call the general "template" it uses. You can modify details within that, but if you want to change it, other approaches are required. Last time I had to deal with it I went with DocBook5 and then used a conversion to LaTeX to "break out". I agree with the asciidoctor guys about not offering more flexibility with that "template"; they have other things to focus on and it works well for cases where no specific layout is required.
senthilnayagam 4y ago
I like asciidoctor because it is a text file and easy to version control, I have written couple of books with it and made into pdf, but I am still looking for actively maintained themes, so for self publishing and KDP, I am using pandoc and bunch of tools to convert it into various formats(docbook, md, docx etc). My current workflow is convert into docx which is imported in kindle create and optimise it with kindle previewer.
KodingKitty 4y ago
I have written several books. I used Markdown for the first one. Then someone recommended AsciiDoc and AsciiDoctor. It was a much better experience compared to Markdown. Sure, not for pixel perfect tweaking. Still enough parameters to play with. Easy to create PDFs and EPUBs.

Brajeshwar 4y ago

I love reading printed books and blog posts. For those interested, a starting point for printable CSS is Gutenberg[1]. This has been my go-to for the print media in CSS. I believe I stopped looking for another one with my lack of deeper involvement in development of styles. I'm also guilty of picking Baskerville as the default classic look to printable font-family and even had resorted to it for screen. Besides the tools mentioned in the article (Vellum and Atticus), Ulysses also has a good option for print-ready output. 1. https://github.com/BafS/Gutenberg https://github.com/BafS/Gutenberg

jopsen 4y ago

If the objective was not spend on design software, why not use latex?

sondr3 4y ago
Wouldn't surprise me if it was easier for the author to hack this together in CSS since he already knows it quite well compared to learning LaTeX. I love LaTeX, but the learning curve is more like a cliff.
- lelanthran 4y ago
  > Wouldn't surprise me if it was easier for the author to hack this together in CSS since he already knows it quite well compared to learning LaTeX. I love LaTeX, but the learning curve is more like a cliff. Yeah, agree, but a work of fiction doesn't usually have tables, figures, references, equations, etc which can be painful in LaTeX. It does have kerning, ligatures, orphan/widow management, runs/ladder management, page numbering, chapter numbering, margins (larger closer to the spine), rules, struts, etc that all come for free without the author having to know any of that stuff. IOW, for a work of fiction, the learning curve for LaTeX is likely limited to setting the font, setting the size, setting the output type (book, article, etc) and using bold, emphasis, underline and possible verbatim. The learning curve for LaTeX is a cliff if you're writing a thesis, it's simply markup if you're not.
pixelfarmer 4y ago
I just scrolled through the page. I think https://iangmcdowell.com/blog/book_breaks.png https://iangmcdowell.com/blog/book_breaks.png says it all, quite openly. For anyone who delved a bit deeper into the topic, this is horrible to look at.
- pixelfarmer 4y ago
  Seems like I have to add some explaining words here ... Book layout is a very complicated topic. If you look at that image and step away a bit it leaves a chaotic visual impression. Reason behind that is that if you want a visually pleasing look, all the paragraphs have to have a similar "density". That is defined by how long the words are, the spacing in the words (kerning, ligatures, font), and the spacing between the words. Latter is all across the board, even changes within the same paragraph! LaTeX has all that typesetting knowledge included, and it will actively hyphenate words to accomplish its goal. I see exactly one word being hyphenated there. Another thing that stuck out immediately was the font selection for the all uppercase paragraph. Some fonts are just not made to be used that way and this is one of them. These curvy uppercase letters are nice to start words, but used together it is ... ugh. Last is that leftover sentence at the top of the right side. It "validates" the separator image, so this is somewhat of a pro/contra mixed bag situation. Professionals could probably say even more about all this, I just used LaTeX for a couple years more often and these are things I learned (to see) on the way.

thunderbong 4y ago

Awesome writeup! I enjoyed the tongue-in-cheek style along with the technical stuff! And CSS is like he mentions - "One he'll of a hammer" Also, towards the end, this gave me a chuckle! > It’s like Linux: free so long as your time has no value.

noufalibrahim 4y ago
Yeah. I was going to echo this sentiment but it looks like you pre emptively followed me. The article has the air of a hack done just for the fun of it because the author can. This was popular once upon a time but these days, it's mostly stuff written to promote certain things or as marketing copy.
- TylerE 4y ago
  This is marketing, don’t kid yourself.
  - bryanrasmussen 4y ago
    yeah, it seems a bit weird to be marketing your techno thriller book with a post about css. I mean I guess there is some overlap between the two subjects, as there is likely be overlap between anything in a world with complicated people.
    - TylerE 4y ago
      It. Is. Marketing. The very first sentence is just a link to Amazon to buy the thing.
      - noufalibrahim 4y ago
        Yup. Well written enough for me to forget that part. Just enjoyed the post .
        codetrotter 4y ago

rcarmo 4y ago

I would also recommend https://weasyprint.org https://weasyprint.org if you are generating PDFs. Generating invoices, resumes, reports, flyers, etc. from plain Markdown is a two-line affair: https://taoofmac.com/space/notes/2023/03/19/1849#tuesday-2023-03-14 https://taoofmac.com/space/notes/2023/03/19/1849#tuesday-202...

jcul 4y ago
Thanks for the link, weasyprint for converting markdown to some presentation format looks cool, similar to pandoc but maybe more customizable? Just to point out, in the original post, the author does end up using weasyprint, as the tools he began with did not support the required CSS features.

pbhjpbhj 4y ago

Why not Scribus? It's FOSS, mature, and actively used for book layouts by others. It comes up in searches for "free InDesign alternative" and "foss book layout" (it's mentioned in every search result that I viewed [not many]). I mean, perhaps it didn't fit the story that showed the blog post to be used to trail the book, but I'd have thought it would be mentioned.

colonwqbang 4y ago
Do you have experience with it yourself? I haven't tried it for several years, but it was not at all usable last time I did. For a project like this, I think it's a good choice to go with something more declarative over a WYSIWYG tool. Latex would have been a very good choice, but only if you already happen to know it or have an interest in learning.
- benoliver999 4y ago
  I use it for graphics heavy stuff like product packaging, instruction manuals etc. For a book I'd just throw it in latex for sure.
- pbhjpbhj 4y ago
  Yes, I've used it -- along with Inkscape and The GIMP -- for advertising [layout of flyers, for print magazine adverts]. Probably about 3 years since I used it last for this type of work. I follow one of their support groups and people mention they publish newsletters, pamphlets, and books with it.
- eynsham 4y ago
  1.5 onwards I think has been entirely usable; before that I found it bizarrely unstable.
Moru 4y ago
He also states the Hammer and Nail situation. If your only tool is a hammer, every problem becomes a nail. I get the impression he wanted to use something he knew instead of spending time learning something new.

blue1 4y ago

One serious problem is that CSS do not support CMYK colors.

somat 4y ago
Might be a joke, humor can be difficult to convey in forum post form, And I am that stereotypical sort who often does not get humor. But I will bite. It is a printed book... there is no color in the process.
- danpalmer 4y ago
  I don't think it's a joke, for the general case of print this is indeed a problem as the whole print industry runs on CMYK. You could go further and say that because CSS/Weasyprint doesn't have a Pantone plugin, it'll be difficult to control colour accuracy throughout the production process. You're right this isn't necessary for most novels, but it's a very real concern for print media.
- blue1 4y ago
  It is not a joke. Color print exists, you know. For example, try obtaining a pure cyan from RGB color...
chrismorgan 4y ago
CSS Color Module Level 5 <https://drafts.csswg.org/css-color-5/ https://drafts.csswg.org/css-color-5/> adds @color-profile for ICC profiles (which may cover CMYK), and device-cmyk() for uncalibrated CMYK colours. Sure, browser support isn’t there yet, and this is still draft work, but it’s coming.

DeinFreund 4y ago

This article completely misses the point. Proper typesetting is about achieving a consistent appearance starting from ligatures and kerning, then word spacing and hyphenation, up to entire paragraphs and pages. Each character has to be typeset considering what character came before, how many words are in the same line and other lines in the same paragraph. The choice of font is also questionable, but not the main issue except for capitalized sections. This example from the article says it all: https://iangmcdowell.com/blog/book_breaks.png https://iangmcdowell.com/blog/book_breaks.png I understand that LaTeX is convoluted and other software is expensive, but when offering an alternative, there should at least be a comparison based on the quality of typesetting.

rhn_mk1 4y ago
I think the article stated the point clearly: the author wanted to hold some paper carrying the HTML contents. From what I can see, they hit the point completely. Perfect is the enemy of the good, they say.
thaumasiotes 4y ago
> Proper typesetting is about achieving a consistent appearance starting from ligatures and kerning, then word spacing and hyphenation, up to entire paragraphs and pages. I looked into CSS hyphenation because I was curious about controlling hyphenation in ebooks. CSS hyphenation appears to be based around the principle that you manually insert HTML entities representing potential hyphen locations into every word, which is obviously insane. hyphenation hyphenation hyphenation hyphenation The TeX way is to provide a set of hyphenation points once, such that, if a word needs to be hyphenated, that list can be consulted and the word can be hyphenated appropriately without each instance of it needing to be entered with several invisible HTML entities. \hyphenation{hy-phen-ation} hyphenation hyphenation hyphenation hyphenation I can't think of any use case where I'd prefer what is apparently the only way to do it in CSS. Do epubs have a bespoke non-CSS way to handle this? (I looked into this in the first place because the Kindle mobile app is godawful at hyphenating words, and I wanted to know what it would take to write an ebook that didn't have obvious howlers. The errors occur in foreign words, but they violate the rules of hyphenating English -- I've seen the app place a hyphen before the first vowel in a word, and I've seen it render "Qis-han", which is exactly equivalent to a hypothetical English "fis-hing" -- so it seems like they must be using a lookup table for all English words and falling back on something completely ridiculous for words that aren't in the table.)

ognarb 4y ago

For those interested in this topic, you might want to checked paged.js https://pagedjs.org/documentation/ https://pagedjs.org/documentation/ It's an polyfil for the unimplemented CSS paged specification, which is exactly that is needed for laying out pages. https://www.w3.org/TR/css-page-3/ https://www.w3.org/TR/css-page-3/

Semaphor 4y ago
And print-css.rocks [0] for a comparison of tools, with support matrices, and tutorials. We use Weasyprint [1] to create PDF ebooks with HTML and CSS. [0]: https://www.print-css.rocks/ https://www.print-css.rocks/ [1]: https://doc.courtbouillon.org/weasyprint/stable/ https://doc.courtbouillon.org/weasyprint/stable/
bayesian_horse 4y ago
At the moment, the combo of pagedjs with a headless browser is my first recommendation when you need something to output pdf automatically. Weasyprint looks nice, I have yet to use it. It probably has the advantage of not using an actual browser document (with all the relayouting problems), and may use fewer resources in terms of time and memory (I'd have to check though). The disadvantage is also it's not an actual browser document, meaning you need to render the html and css in some form before passing it to weasyprint. Using a headless browser makes it easier in general to do some fancy stuff like music sheets or embed js chart libraries and so on.
- yojo 4y ago
  > meaning you need to render the html and css in some form before passing it to weasyprint I'm not sure I understand this part. WeasyPrint is a rendering engine; it takes an HTML file as input and outputs a PDF. I can't speak to resource usage, since this was very ad-hoc. For my needs, it was very simple to set up, and worked on the first try. I was testing with about five pages of content, and on my M1 MBP it rendered out the PDF pretty close to instantaneously, which was nice for the edit/refresh cycle. Preview on MacOS actually live reloaded when the PDF changed, which was a pleasant surprise.

lloydatkinson 4y ago

I can hear the “make everything even your to do lists and shopping list in Latex” cultists seething from over here!

rob74 4y ago

True story: I once had to update an OpenOffice document containing mostly photos and insert newer photos. How hard can it be? Finally, I got so frustrated with OpenOffice constantly breaking the layout and simply refusing to fit the images I wanted to fit on a page on a page (needless to say that they did fit on a page in the old version of the document) that I gave up, built an HTML page with the images and printed it to PDF. Done!

sn41 4y ago

I once had to generate about 170K+ pdf files from latex. Took a while (~5 hours) on a desktop, so had to get a server to do it and ran pdflatex with gnu parallel. The layout was a pain, since some strings in the databases were quite long. Then I realized that I could just have generated HTML and printed it via some headless chrome script. The rendering was more consistent, and the printing was much faster (IIRC it took about 1/3 the time.)

cardamomo 4y ago

As a former freelance book compositor, I can say there are typically many more details that go into laying out a book. To take this layout up a notch, I would want to create a baseline grid (set the line heights and paragraph margins to align text of different sizes). I would also want to control widows and orphans, which is built into CSS.

snoopen 4y ago
Does CSS support baseline grids? Since pagination isn't really a thing in CSS in guessing not?
- cardamomo 4y ago
  Not to my knowledge. Here's a write-up from 2012 that still seems to be accurate today. https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/ https://www.smashingmagazine.com/2012/12/css-baseline-the-go...
- stasmo 4y ago
  Pagination really is a thing in CSS, it’s just a part of the spec that’s not well supported by browsers right now. Use pagedjs to polyfill the missing spec features and you can control how content is split up between pages, add content to page margins, add blank pages and solve all sorts of print-related problems with CSS only.
yojo 4y ago
Good point. My goal was definitely just getting to an output that satisfied me as a reader, but there are certainly people out there with more refined aesthetic sensibilities that are going to spot the places I fell down. The part that seemed hardest to get just right with CSS was text justification. I can specify inter-word justification, but there are cases where getting the spacing just right is impossible without breaking a long word using a hyphen. As far as I can tell, there's no programmatic way to do this with just CSS. I addressed widows and orphans in my ePub layout, but for some reason forgot it in the print layout (d'oh). The nice thing about print on demand is it's easy to make updates, which I will. So thanks for pointing that one out! I'll also read up on using a baseline grid, I suspect CSS will work fine for that, since my content is all text with little variation between sizes.

danpalmer 4y ago

I had a fun time implementing shipping labels a few years ago. They were just a printable web page, rendered by Django. I was also able to fairly directly translate the sizes/padding in the spec to CSS using physical units. Surprisingly straightforward!

SigmundurM 4y ago

Fun fact: EPUBs, the global standard for digital books, is based on just HTML, CSS, and JS https://www.w3.org/publishing/epub3/epub-contentdocs.html https://www.w3.org/publishing/epub3/epub-contentdocs.html

blackoil 4y ago
That is meant for e-books and not printable books.
- SigmundurM 4y ago
  Yup. It would be interesting to explore using Fixed Layout EPUBs to print physical books.
WillAdams 4y ago
Yes, and they get a bye because they are constantly re-flowed --- no one would gladly accept that in print.

ThePhysicist 4y ago

Weasyprint has gotten really good, I use it to generate PDFs for invoices but you can easily use it to write multi-page content as well. PrinceXML was still a bit better last I checked, but it's a closed-source, commercial solution.

RandomWorker 4y ago

One thing it also needs is variable margins with margins based on page side. That way the text doesn’t get too close to the spine.

foxbee 4y ago

This is awesome! Jost is a really nice font. Some css i like to add to my fonts to improve readability: -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-ligatures: contextual common-ligatures; Give them a try and let me know if they help :-)

2b3a51 4y ago

I've learned about a few pieces of software through the article. I'm just wondering if the FocusWriter odt file could not be processed through pandoc in some way with a style sheet to make a pdf.

z3t4 4y ago

> It’s like Linux: free so long as your time has no value. A better phrase would be: Free software is "free" as long as you value your free time, more then you value your time at work.

anotheryou 4y ago

now try making your page numbers start after the index pages that's where I gave up.

topcat31 4y ago

What about something like bindery.js? https://bindery.info/ https://bindery.info/

martopix 4y ago

I keep thinking that what I'd really like is a substitute of latex that is based on markdown and CSS. This is a hint of what would be possible, although of course it would take decades to get to the power of latex.

giraffe_lady 4y ago
Pollen is a good intermediate for this if you like lisp.
maegul 4y ago
I’ve wondered about this, and can’t help but feel that what’s missing are good solid foundations from which webdev and general programming skills could build out everything we’d need to migrate from latex. I would bet the community would move pretty fast if the foundations were there, but I’m not sure there’s anyone with the requisite expertise and will and resources to build it. Shame really, because IMO a web-aligned document writing tool chain would be awesome.

cubefox 4y ago

The author is actually underselling CSS for rendering PDF layouts. Of course, if you just do a static book, you are probably better off with software like InDesign. But if you need PDFs with dynamic and complex content (e.g. info documents with graphs, tables, dynamic text) then HTML/CSS is actually pretty great. As he mentions, unfortunately the CSS3 Paged Media spec is not very well-supported by major browsers, though other tools do implement it. I actually started to love CSS much more when I had to use another code-based solution: LaTeX. LaTeX is great for equations and automatic bibliography, but not for much else. If you ever tried to merely style a minimally complex table in LaTeX, you know what I mean. You actually see in major research papers that people sometimes just give up and include a screenshot of their table. LaTeX has no inherent distinction between structure and design, like HTML+CSS, which generates incredibly inelegant bloat code, like writing and styling a website in pure HTML without any CSS. Moreover, there often is no consistent syntax in LaTeX, and most everything can only be achieved with some sort of hackish package someone put together years ago without proper documentation. HTML and CSS are a breeze in comparison. CSS features like Flexbox or Grid let you do complex dynamic layouts in a few minutes, which are so difficult in LaTeX that most users would just throw the towel.

Upvoter33 4y ago
The problem with this: LaTeX (or actually TeX) typesetting is way better. It is hard to get all the spacing, kerning, hyphenation, etc., right so that the text looks good. There is no way a CSS-based solution comes close.
- WillAdams 4y ago
  Moreover, one needs controls for: - widows/orphans - running paragraphs one or more line longer or shorter - setting a page spread to be one (or possibly two) lines deeper or shallower - adjusting the size/cropping of an image/figure/table so as to influence pagination - adjusting the placement of an image/figure/table so as to influence pagination In my decades of doing typesetting, I've had exactly _one_ chapter come out perfectly on import w/ no need to adjust _anything_ --- fastest 40 minutes of my life.
- 4y ago

junon 4y ago

> Affinity Publisher Didn't know Serif had made a third product. Be wary of them - Designer and Photo are both buggy minefields and their support forum is full of snobby jerks. Crashes have been reported and present for years, with little or no response from Serif. Their developers all seem either disgruntled or burnt out. Some of the employer review sites confirm this. They're cheap but you certainly get what you pay for. Save often, back up often. I say this as an avid Designer user.

dagorenouf 4y ago
Never tried them but is it worse than adobe products?
- junon 4y ago
  Bug-wise yes, both Photo and Designer are very very buggy. Functionality, also yes, but not by much. Only thing I miss from Photoshop in Affinity Photo is content aware tooling. I don't remember anything I miss from Illustrator in Affinity Design and I actually think they have better features than Illustrator (admittedly haven't used Illustrator in almost a decade so maybe they've caught up). You really can't beat Affinity's price though unless you use GIMP/Inkscape of course, but I like neither of those programs.
- akpa1 4y ago
  To chip in to on this, I've been using Affinity Photo for at least 5 years and I don't remember having many problems at all. That is to say, YMMV.
  - junon 4y ago
    Yeah photo is leagues less buggy than designer. That said, I've had random crashes with Photo in the past too.

mproud 4y ago

LaTeX is also free.

ritzaco 4y ago

I printed a book recently (https://makejsgames.com/ https://makejsgames.com/) as a test and was surprised how straight-forward it was using LeanPub for the layout and Lulu for the printing. Leanpub accepts standard Markdown (though does have its own markdown format now) and gives you an "export for printing" button that you can upload to Lulu. The cover was kind of tricky and I got some professional design help both to design it and to get the margins and bleeds exactly as Lulu wanted them, but the result was way better than I expected. I haven't tried the other professional tools mentioned in this article so I can't really compare quality or ease, but might be worth a look if anyone is looking for something in between "do it all yourself" and "pay for fancy tools". (I have a lifetime LeanPub license from back when they still offered them but the monthly subscription fees are a lot lower than some of the tools mentioned here and you can easily get a printing done in a single month).

chadlavi 4y ago

This person hasn't heard of pandoc I guess

nforgerit 4y ago

Another method I haven't seen mentioned yet and that I grew fond of is to use Apache FOP ("Formatting Object Processor") which is still under active development and comes with this beautifully retro Apache open source homepages[0]: (1) It has a pretty good idea about Layouts, Pages and other elements one would need for printing (2) It supported all the graphics formats that I ever needed in the past and automatically fetches images by URL when it stumbles upon them. (3) It is easily embeddable into some custom Java app. (4) It is based on W3C open standard (which though doesn't seem to be developed anymore) (5) It does PDF/A. (6) XML/XSLT is a bit annoying to write for your template, so I used a common templating engine (e.g. Thymeleaf) to render the XML/XSLT that I passed on to FOP. Worked like a breeze and gives you the possibility to create your own little DSL. (7) I'm still happily generating my invoices through FOP put behind an API that takes input data and uploads the generated documents into a bucket. (8) I don't have the exact numbers but last time I checked and compared output sizes of browser printed pdfs vs "generated by Fop", I saw smaller PDFs with Fop. It doesn't mangle the input images though All in all, I trust FOP better to generate printable documents than any CSS/Headless Browser thing. It comes with an arcane template format which, as said, can be abstracted away but therefore has much smaller infrastructure footprint than spawning headless browsers. [0] https://xmlgraphics.apache.org/ https://xmlgraphics.apache.org/

grecy 4y ago

For my print books I've used LaTeX for the print pdf, then I run that through Pandoc to create an epub from that same source files with a script. I'm extremely happy with the final results. Here's how I did it all [1] Using macros and defining your own functions in LaTeX is a game changer, and when it came time to make my second book, I was up and running typing content in about five minutes, and it has the precise same look and feel. [1] http://theroadchoseme.com/how-i-self-published-a-professional-paperback-and-ebook-using-latex-and-pandoc http://theroadchoseme.com/how-i-self-published-a-professiona...

nye2k 4y ago

I remember my excitement when CSS3 became reality in modern browsers. I was following this project closely, which attempted to use recreate Robert Bringhurst’s The Elements of Typographic Style in CSS. That project made it clear just how far we were from a legible, printable web. http://webtypography.net/ http://webtypography.net/

pauljonas 4y ago

A few years back, I wrote a web based publishing tool that used `wkhtmltopdf` to generate PDF from database content along with web images (& even more complicated with API access & Google Maps API). It took a lot of tinkering but it worked. At times, extra fiddling needed to generate accurately the Table of Contents (basic, uses `H1-6` elements in document) with proper page references and formatting. But it worked, even with allotting for stuff like "bleed" (it was being printed a massive color printer we leased that could bind or staple.

Hackbraten 4y ago
Thank you for wkhtmltopdf. If I recall correctly, Pandoc uses it under the hood for generating PDF?

effnorwood 4y ago

[dead]

yencabulator 4y ago

Typst is new but at this point I'd explore that, myself. Much more pleasant than LaTeX, and quite capable: https://github.com/typst/typst https://github.com/typst/typst https://news.ycombinator.com/item?id=35250210 https://news.ycombinator.com/item?id=35250210