Once I wrote the “e book” The Best CSS Tips Vol. I, I put “e book” in quotes as a result of there wasn’t something terribly book-like about it. The solely method you may learn it was on-line, logged into this web site, with an MVP supporter membership. No printed model, not even digital copies you may anticipate from a digital e book.
I’ve modified that now and supply PDF and EPUB variations 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 might have interactive content material. Being digital, I can management the entry and such. It means I can write in a method that’s snug to me, and maybe-just-maybe, I may be extra prolific about it. Possibly I can get a Vol. II achieved 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 write down, a number of locations to publish to, and a technique to promote it.
Producing the digital variations
Once I initially made the selection to write down the e book on-line, I figured PDF could be extremely easy. I’d output the content material on a “uncooked” template (simply as a clear place to begin that may final and is straightforward to preview), apply good print-like CSS, then fairly actually, simply ⌘P (Print) and “Save as PDF.” Performed.
That truly kinda works. You possibly can fiddle with the settings (e.g. “✔ Print Background Graphics” so as 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’ll be able to’t management the header or footer of every web page very nicely. To not point out it’s not programmatic, however a really handbook course of.
Doing issues programmatically is what I used to be capturing for. Then I occurred throughout this weblog publish from Baldur Bjarnason through which he was in search of work:
• Do it’s essential make a website or websites that walks like a e book, talks like a e book, and reads like a e book however every thing you make seems like a weblog?
• Are you having hassle coping with file codecs comparable to PDF, DOCX, or EPUB utilizing internet tech?
• Are you attempting to provide 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 capable of assist me work on all this. He created an automatic system for me that accepts an area .html file and routinely produces PDF, EPUB, and MOBI codecs from that single file. Basically, 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. Fortuitously, I used to be already considerably prepared to provide this, as I’ve a particular URL that outputs the uncooked content material (you’ll be able to nonetheless see this should you’re not a member, simply with truncated content material) with the sunshine print kinds I needed.
The instruments
With the uncooked HTML and a programmatic method in hand, listed below 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 give attention to in any respect), we used Calibre. It’s a local Mac app, but it surely has an ebook-convert software buried inside it that may be referred to as from the command line.
To get to the purpose the place we may 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 brand new participant on the block referred to as Percollate) for these items, 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 may be a whole lot of 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’ll be able to even simply use an internet browser), however I typically popped it open in Preview.app.
EPUB is equally simple on a Mac as a result of you’ll be able to simply pop it into Books.app to view it.
For MOBI, Calibre’s predominant operate is viewing these, in order that’s the trick there:
Probably the most painful half is the suggestions loop. There’s a entire strategy of updating code (largely CSS) after which working the entire construct to see the way it all seems. I’m certain I did it 100 or extra occasions to get issues proper. There actually must be a greater story for this, with reside previews.
Net-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 photos within the textual content as a lot and began utilizing embedded CodePen demos to point out off output and code. That’s the best expertise for the net 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 working JavaScript and utilizing <iframe>s are issues I didn’t wish to depend on. If I had correct photos for every thing, then simply perhaps 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 remodel into the iframe.) Then to have “alternate” content material that’s just for the eBook model, I primarily 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 method, I may actually see what I used to be doing.
One attention-grabbing bit is that as a result of I used to be capturing 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 laptop paper. For instance, in a print stylesheet, I’d most likely usually do:
predominant a[href]::after {
content material: ” (” attr(href) “) “;
}
That method, individuals can see the URLs of hyperlinks in content material. However with these digital eBooks, I simply be certain that the hyperlinks are blue and so they’ll be clickable in any of the digital codecs.
This was a enjoyable journey! I’m largely 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 items has a fairly steep studying curve!
The publish The Best CSS Tips Vol. I eBook (PDF and EPUB) appeared first on CSS-Tips. You possibly can assist CSS-Tips by being an MVP Supporter.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!