The Best CSS Tips Vol. I eBook (PDF and EPUB)
Once I wrote the “e-book” The Greatest CSS Tricks Vol. I, I put “e-book” in quotes as a result of there wasn’t something terribly book-like about it. The solely means you possibly can learn it was on-line, logged into this web site, with an MVP supporter membership. No printed model, not even digital copies you would possibly anticipate from a digital e-book.
I’ve modified that now and provide PDF and EPUB versions of the e-book. They’re free downloads for members — simply add them to your cart and take a look at.
All this book-writing stuff was and is an experiment. I like writing on this web site in a blog-post-like format the place all of the content material is at URLs and may have interactive content material. Being digital, I can management the entry and such. It means I can write in a means that’s comfy to me, and maybe-just-maybe, I could be extra prolific about it. Possibly I can get a Vol. II carried out that I have already got a ton of concepts for. Possibly I can write another books I’ve been fascinated about. Now I’ve a system! A spot to put in writing, a number of locations to publish to, and a approach to promote it.
Producing the digital variations
Once I initially made the selection to put in writing the e-book on-line, I figured PDF can be extremely easy. I’d output the content material on a “uncooked” template (simply as a clear start line that can final and is simple to preview), apply good print-like CSS, then fairly actually, simply ⌘P (Print) and “Save as PDF.” Performed.
That truly kinda works. You may fiddle with the settings (e.g. “✔ Print Background Graphics” with a view to have white textual content on a darkish background on issues like code blocks) and get it pretty good. However there are points — like you possibly can’t management the header or footer of every web page very properly. To not point out it’s not programmatic, however a really handbook course of.
Doing issues programmatically is what I used to be taking pictures for. Then I occurred throughout this blog post from Baldur Bjarnason by which he was searching for work:
• Do that you must make a web site or websites that walks like a e-book, talks like a e-book, and reads like a e-book however every little thing you make seems like a weblog?
• Are you having bother coping with file codecs similar to PDF, DOCX, or EPUB utilizing web tech?
• Are you making an attempt to supply PDFs or ebooks out of your web site or your CMS?
Sure, sure, sure!
Programatically creating an eBook
I reached out to Baldur and he was in a position to assist me work on all this. He created an automatic system for me that accepts an area .html file and robotically produces PDF, EPUB, and MOBI codecs from that single file. Primarily, I can run make from the command line and it’ll do all of the work, leveraging open supply instruments.
I nonetheless wanted near-perfect HTML prepared for the machine, although, which took some work. Happily, I used to be already considerably prepared to supply this, as I’ve a special URL that outputs the raw content (you possibly can nonetheless see this if you happen to’re not a member, simply with truncated content material) with the sunshine print types I wished.
The instruments
With the uncooked HTML and a programmatic method in hand, listed here are the instruments that make up the stack:
- For PDF creation, we tried each Paged.js and WeasyPrint. They each had their quirks and did issues worse/higher than one another. We finally landed on Paged.js.
- For EPUB creation, we used pandoc.
- For MOBI creation (which we didn’t deal with in any respect), we used Calibre. It’s a local Mac app, but it surely has an
ebook-convertinstrument buried inside it that may be referred to as from the command line.
To get to the purpose the place we might use these instruments over the command line, all types of different software program should be put in and able to use, like Python, pango, libffi, and extra. Baldur’s script made managing this simple, which was superior.
It seems like there may be a new player on the block called Percollate) for these things, however we didn’t discover that.
An Public Repo Combining all this Tooling for HTML-to-eBook Creation
After we bought by way of this course of collectively, Baldur generously created an open-source trimmed down public repo (book-tricks) for all y’alls reference. There’s numerous helpful magic on this Makefile that I’d be shocked if it wasn’t helpful for somebody in the identical place I used to be in: needing to create eBooks from easy HTML.
Previewing builds
PDFs are simple to view, after all (you possibly can even simply use a web browser), however I typically popped it open in Preview.app.
EPUB is equally simple on a Mac as a result of you possibly can simply pop it into Books.app to view it.
For MOBI, Calibre’s major operate is viewing these, in order that’s the trick there:
Probably the most painful half is the suggestions loop. There’s a complete technique of updating code (principally CSS) after which operating the entire construct to see the way it all seems. I’m positive I did it 100 or extra instances to get issues proper. There actually ought to be a greater story for this, with stay previews.
Web-only vs. eBook-only content material
Early within the book-writing course of, I had given up on each paper and digital variations. I ended leaning on photographs within the textual content as a lot and began utilizing embedded CodePen demos to point out off output and code. That’s the perfect expertise for the web anyway. However I can’t use embedded Pens in eBooks. eBooks can do some interactive issues (e.g. EPUB helps animated GIFs and hyperlinks, after all), however operating JavaScript and utilizing <iframe>s are issues I didn’t wish to count on. If I had correct photographs for every little thing, then simply possibly it’s extra prepared for paper sometime anyway.
It’s simple sufficient to cover issues from the eBook output with show: none, in order that’s what I did for all embedded Pens. (They’re a little bit of HTML earlier than they rework into the iframe.) Then to have “alternate” content material that’s just for the eBook model, I basically simply wrapped that stuff in <div class="print-only"> which is hidden on-line and proven within the print CSS. I made customized blocks within the WordPress block editor to make authoring these blocks simpler. That means, I might actually see what I used to be doing.
One fascinating bit is that as a result of I used to be taking pictures for eBook-only right here, I didn’t should do the type of CSS trickery I’m used to for issues like print stylesheets the place the output is probably going some pc paper. For instance, in a print stylesheet, I’d in all probability usually do:
major a[href]::after { content material: " (" attr(href) ") ";}That means, folks can see the URLs of hyperlinks in content material. However with these digital eBooks, I simply be sure the hyperlinks are blue they usually’ll be clickable in any of the digital codecs.
This was a enjoyable journey! I’m principally excited to have climbed the ladder of understanding a bit on all this, particularly as a result of rendering issues on digital canvases is kinda my wheelhouse. I’m solely a few rungs up although, as these things has a fairly steep studying curve!
Checkout extra Articles on Sayed.CYou
Comments
Post a Comment