Laying Out a Print Ebook With CSS
Compulsory Secure Diffusion picture
Final 12 months I printed my debut technothriller, The Anshar Gambit, as an eBook. Satisfying, sure, however I’ve spent completely an excessive amount of of my life peddling bits. I wished to maintain it. Unsurprisingly, in an effort to get my e-book printed, I first wanted to submit a pixel-perfect PDF of all of the pages. And like all self-respecting nerd, I approached the problem in probably the most convoluted manner attainable.
The sane solution to do it
As you may count on, laying out a e-book is a solved drawback. The only resolution is to pay knowledgeable. However I’ve ample time to study and restricted finances, so I wished a DIY resolution.
Most self-publishers use software program explicitly constructed for this process. Vellum is the gold customary. It is extremely good and straightforward to make use of, and prices simply $250. One other contender is Atticus, which is pitched as an all-in-one writing platform for a extra reasonably priced $147. These are each good choices, and whereas costly for software program, affordable for the period of time they prevent. However I’m a idiot with extra time than sense/cents, and I knew I may do it cheaper.
Reedsy affords a web-based device that helps producing a primary print format. And it’s free! That bought my consideration. I made it so far as importing my manuscript, however hit a rendering bug displaying Latin Prolonged-A characters in a code-block. I reported the bug, and a pleasant CSR advised me they’d ahead it to their engineering group, who have been unlikely to repair it. I made a decision to not make investments extra time hacking round their limitations to get a format I wasn’t thrilled about anyway.
The much less sane solution to do it
I’m too low cost to rent knowledgeable, however perhaps I can use their instruments? Adobe InDesign is unsurprisingly a well-liked alternative, however I simply hear the phrase ‘Adobe’ and my hand instinctively reaches again to guard my pockets. On reflection I might need been capable of get away with a one-month subscription for the relative deal of $31.49.
Affinity Publisher makes a well-regarded various that individuals declare is simply as highly effective. And for $70 you get an actual license, none of that subscription BS. I used to be sufficient to start out a free trial, however realized instantly I used to be in manner over my head and had a steep studying curve to climb. If solely there was a strong format device I already knew use…
The best way I did it
I’ve spent a non-trivial quantity of my life positioning divs. It’s low on my checklist of duties I get pleasure from, however through the years I’ve gotten fairly good at cajoling bits into place. CSS is a hell of a hammer, and the extra I considered it, the extra my e-book began trying like a nail.
That’s proper, I made a decision to put out a print e-book utilizing cascading model sheets. You already know, like everybody makes use of on the net. And nobody makes use of in print. Effectively, nearly nobody; we’ll get to that later.
I already had my e-book rendered out as bunch of HTML recordsdata from my sturdy e-book pipeline. Haha, jk, I wrote a couple of hundred strains of sloppy Python/BeautifulSoup that transforms my FocusWriter-generated odt file into an ePub appropriate for distribution. God bless ebookify.py. Anyhow, I used to be already waist-deep within the HTML swamp, and had one thing I may slap a stylesheet on.
However CSS isn’t actually made for print, proper? I imply, certain, like all completely regular particular person I take advantage of @media print to make my HTML resume look higher when a recruiter runs off a replica, however laying out a 300+ web page novel is a distinct beast. You’ve bought web page numbers, persistent headings, particular instances for first of a chapter, bizarre paper-sizing, and many others. Can CSS do all this?
Spoiler: Sure. However you need to push it to the bleeding edge.
Getting Began
I tweaked ebookify.py to output a single concatenated HTML file containing the markup for all of the chapters. My preliminary purpose was to write down a stylesheet in opposition to this that might make a fairly good trying e-book after I hit print in Chrome.
Right here’s what I began with:
LGTM, ship it!
Fonts
CSS is nice at sticking fonts on issues. As a industrial work although, I wanted to pay slightly extra consideration to licensing. I wished a pleasant serif font for the physique textual content, and a futuristic sans font for the titles/headers.
Baskerville was a straightforward choose for the physique; it’s a standard/fashionable alternative, and the license that comes with my Mac is already good for distribution. I appeared up good pairings, noticed it subsequent to ‘Futura,’ and fell in love. Then I learn Futura’s license.
Licensed (protected) font. This font should not be modified, embedded, or exchanged in any method with out first acquiring permission of the authorized proprietor.
D’oh.
Positive, I may pay the $50, however I’ve already come this far without spending a dime – I need to get all the best way there. One other journey to professor Google advised Jost as a substitute for Futura. It’s not as excellent as my first-love, however there’s extra to a relationship than simply appears to be like. Like licenses (okay, so the metaphor breaks down).
Anyhow, CSS time!
physique {
font-family: "Baskerville";
}
h2 {
text-align: heart;
font-family: "Jost";
}
Higher(?)
Primary Structure
It nonetheless appears to be like like a web-page, it’s time to use some print conventions. The chapter headings want some room, and perhaps a candy underline. The physique textual content needs to be a column, with indented paragraphs. That sort of stuff.
A word on my CSS: Sure, I’m in all places with my models (Inches! Pixels! Factors! Ems!), and there’s no rhyme or purpose to the order of my declarations. In my protection: it doesn’t matter. I’m not going to prod with this. Nobody’s going to be caught sustaining it. And, god prepared, I’ll by no means have to increase it. However you’re welcome to wash it up to be used in your individual challenge.
h2 {
text-align: heart;
font-family: "Jost";
margin-top: 1.4in;
margin-bottom: .9in;
font-weight: 300;
show: inline-block;
/* Pad field to place the "underline" that is rendered utilizing the border */
padding: 0.1in 0.2in;
border-bottom: 1px strong;
line-height: 1em;
font-size: 15pt;
}
p {
margin:0;
text-indent: 1.5em;
font-size: 12pt;
line-height: 14.3pt;
text-align: justify;
text-justify: inter-word;
word-spacing: -.7px;
}
p:first-child {
text-indent: 0;
}
.chapter {
text-align: left;
}
Vaguely print-like
Web page Numbers
The essential format is trying okay, however now we’re lacking print particular stuff. Web page numbers being a big-one, clearly. Dealbreaker for CSS, proper?
Improper!
Try @page, sucka. CSS is aware of what pages are! And it will probably count! And there are particular sections on the web page margin for sticking issues like web page numbers. It’s nearly like somebody was thinking about laying out books with CSS.
After all, there’s an enormous distinction between “one thing with a spec” and “one thing broadly applied in browsers.” Let’s ask my good buddy caniuse
Woohoo! The darkish inexperienced of full assist.
Alright, let’s make some pages and web page numbers!
physique {
counter-reset: page_num chap_num;
}
@web page {
margin-top: .7in;
/* Getting an additional .12 inches padding on the underside from ?? No matter, hack! */
margin-bottom: .58in;
padding: 0;
dimension: 5.5in 8.5in;
counter-increment: page_num;
@bottom-center {
font-family: "Jost";
font-weight: 300;
content material: counter(page_num);
font-size: 9pt;
place: relative;
margin-top: -.35in;
}
}
Umm…
It’s the proper dimension and stuff, however the place are my numbers? They’re supported, proper? Proper? RIGHT??!!?
Oops, there’s a bug. In caniuse, haha. Not Chrome – Chrome has never supported @bottom-center. Ditto goes for Firefox. I can not use. At the very least, not all of the cool elements.
I took slightly solace that Kevin has been feeling my pain for 18 years, nevertheless it nonetheless stung.
So what now? I’m sunk, proper? Not one of the main browser distributors assist the characteristic I would like, and I can’t effectively have a e-book with out web page numbers. However I learn by way of the caniuse bug, and lo:
edgar444 commented on Jul 13, 2018
… [snip some CSS about rendering a header using @top-center]
There may be software program like weasyprint that did produce the crimson bins.
Q: What’s a weasyprint?
A: An eldritch invocation for rendering html to pdf that helps a stunning quantity of bleeding edge CSS.
I don’t consider in ‘manifesting,’ or no matter. However I’m fairly certain this software program didn’t exist till I willed it to. I fired off a brew set up weasyprint and crossed my fingers.
Another time with feeling weasing:
Have a look at that stunning web page quantity!
Now we’re off to the races. Let’s marginalia all of the issues!
One drawback although – I need completely different headers on the left and proper pages. Additionally completely different left and proper margins, since lots of the paper will get buried within the binding. Certainly CSS doesn’t assist– aww, you already know I’m solely messing. CSS DOES ALL.
:root {
--inside-margin: .75in;
--outside-margin: .5in;
}
@web page :left {
margin-left: var(--outside-margin);
margin-right: var(--inside-margin);
@top-center {
margin-bottom: -.22in;
font-family: "Jost";
font-weight: 300;
font-size: 9.2pt;
content material: "IAN G. MCDOWELL";
}
}
@web page :proper {
margin-left: var(--inside-margin);
margin-right: var(--outside-margin);
@top-center {
margin-bottom: -.23in;
font-family: "Jost";
font-weight: 300;
font-size: 10pt;
content material: "The Anshar Gambit";
}
}
Headers! This can be a e-book! Wait, what’s that chapter doing there beginning mid-page…
Extra Bookish Issues
Anybody that ever word-processed pre-2006 is aware of that web page breaks are a factor. Guess what? CSS breaks pages with the perfect of them. I’m additionally going to throw in a candy customized SVG part break I made.
.chapter {
break-after: at all times;
}
.divider {
text-align: heart;
padding: .2in;
}
.divider img {
width: 50%;
}
Tada, chapters begin on new pages. Additionally, take a look at that candy mid-chapter break graphic (No, I’m not a designer. Sure, I’m irrationally proud).
However now our header is exhibiting up on the primary web page of the chapter. That’s not skilled. Certainly CSS has a solution to conditionally cover it?
Really, no. Not elegantly. At the very least not that I may discover. However I didn’t write CSS for a decade with out studying to HACK. We’ll simply make our chapter headers exude an enormous white field that obliterates every little thing above them.
h2::earlier than {
content material: '';
place: absolute;
/* Want a damaging offset as our father or mother is the non-margin elements of the web page. */
prime: -1in;
left: 0;
width: 100%;
top: 2in;
background-color: white;
}
@web page :proper {
...
@top-center {
...
z-index: -1;
}
}
@web page :left {
...
@top-center {
...
z-index: -1;
}
}
Header be gone!
Conclusion
There you’ve got it: All of the formatting of a standard print e-book, achieved in probably the most asinine manner attainable. I didn’t get CSS to run doom or something, however I’m nonetheless delighted that I made this work utilizing solely HTML, CSS, and slightly weasy black magic.
It’s even bought some benefits; if I alter any textual content, the entire thing robotically reflows. And after I’m able to ship it to the printer, I can dive into the markup to hand-tweak something that doesn’t look precisely proper.
My writer copies got here within the mail immediately, and so they appear to be… books!
I’m holding HTML!
Whole out-of-pocket price: $0. It’s like Linux: free as long as your time has no worth.
flippity-flip-flip
Would I like to recommend this strategy to a buddy? Hell no. Simply use Vellum like a standard particular person. Will I share my stylesheet? I imply, I already sort of did, however should you ask good I suppose I may give it to you as a file. Hit me up – ian@iangmcdowell.com. I can even hearken to your offended CSS rants, although I can’t make it easier to repair points 🙂
Anything?
Pitch time!
Should you like riveting, fast-paced technothrillers with compelling characters, near-future know-how, and orbital bombardment, it is best to take a look at The Anshar Gambit, accessible wherever mega-corporation monopolists promote books (learn: Amazon). Now in paperback!
Alternatively/moreover, for these of you embracing the frugal spirit of this submit, you possibly can sign up for my mailing list to obtain a free digital copy of the prequel novella, The Boreas Hole.