Today we are launching the feature that really reveals the real power of PressBooks: our CSS editor. In this post I’m going to tell you why this is exciting, and give a quick tutorial about how to use the new PressBooks CSS editor. (Caveat: it’s not completely polished… please give us feedback).
What Is CSS?
CSS, or Cascading Style Sheets, make up a core idea of how the modern web works: webpages are rendered in HTML, the “content” layer that tells you what is on a page; CSS is the “display” layer that tells you what the page should look like.
This is familiar to anyone who has spent a bit of time on blogging platforms. Different themes on your WordPress or Tumblr blogs look different (mostly) because of CSS. If you are a professional or semi-professional builder of ebooks, you similarly know about CSS.
PressBooks ebooks look the way they do because of CSS. And the PressBooks webbooks use CSS as well. What about print?
CSS to Make PDFs? Now I’ve Seen Everything!
The exciting thing for us is: PDF. Our PDF rendering engine (Prince) uses HTML + CSS to produce PDF outputs. We’ve been using this internally to produce the templates you find on PressBooks.com, and for clients: we absolutely love it.
Our new CSS editor means that if you are a web developer/designer with CSS chops you can now use PressBooks to create:
- lovely print books, with your custom CSS
… in addition to:
- lovely ebooks, with your custom CSS
- lovely webbooks, with your custom CSS
Our New CSS Editing Interface
Today, we are rolling out the first cut of our interface for editing PDF, ebook, and web CSS in PressBooks. It will be improving, but below I’ll go over how it works, and show you an example of how to use the editor in practice.
How to Use the PressBooks CSS Editor: General Instructions
Step 1: Enable Custom Themes
Go to Appearance –> Themes
Step 2: Activate PressBooks Custom CSS”
“PressBooks Custom CSS” –> Activate
(We’ve enlisted Ceiling Cat to help us make this new feature public. Thanks Ceiling Cat! … if you can suggest or design a better screencap for the PressBooks Custom CSS … please let us know.)
Activate Custom CSS
Step 3: Select Edit CSS
Under the Theme, select “Edit CSS”
Edit CSS
Step 4: Select Output format and CSS base file
a. Select which output CSS you want to edit: Ebook, Web or PDF.
b. Select which CSS you want to modify from existing PressBooks themes
Select Files to Edit
Step 5: Edit your CSS!
Caveats!
Caveats and improvements on the way:
- font and image paths are complicated … we will improve this as time goes on
OK, Let’s Try it
Let’s say we like the Clark Theme, but we want to spice and customize the PDF output a little bit. In particular, we want to:
- make all our Headers red and change the font to Times New Roman
- change our Body font smaller, blue, and change it to Helvetica
- make line spacing a bit looser, and get rid of justification
Make our Headers Red & Times New Roman
In our css we’ll find the following code:
h1, h2, h3, h4, h5, h6 {
font-family: Helvetica, Arial, sans-serif;
line-height: 1.4em;
font-weight: normal;
}
Which we will modify as follows:
h1, h2, h3, h4, h5, h6 {
font-family: Times New Roman, serif;
line-height: 1.4em;
font-weight: normal;
color: red;
}
Make Body font smaller, blue, change it to Helvetica, and loosen line-height
In our CSS file we find the following:
body {
font: 12pt/1.6 "Times New Roman", Georgia, serif;
}
And we will change it as follows:
body {
font: 9pt/1.6 Helvetica, sans-serif;
color: blue;
}
Make line spacing a bit looser, and get rid of justification
Start with:
p {
line-height: 1.2em;
text-align: justify;
margin-bottom: 0;
orphans: 3;
widows:3;
}
Modify to:
p {
line-height: 2em;
text-align: none;
margin-bottom: 0;
orphans: 3;
widows:3;
}
Now let’s look at the results.
Here is our original PDF export using the standard Clarke Theme:
Clarke PDF (Original Css)
And here is our new customized PDF output:
Custom PDF CSS (Clarke variant)
What about Ebooks and Webbooks?
This feature works in similar ways for webbooks and ebook custom CSS. Please test it out! …
Conclusions
We believe that modern web design technologies (HTML+CSS) is the way of the future for “book design.” This is already the case in ebooks, and, of course is what underpins the web. By launching this new featureset in PressBooks, we hope to help bring HTML+CSS to print design as well. Far from signalling the death of book design, we think that customizable templates in general, and HTML+CSS in particular, will bring in a flourishing of book design activity — just as customizable templates, HTML+CSS have resulted in an explosion of great design activity on the web.
This new feature in PressBooks is in alpha/beta testing stage, and we expect to make improvements in the coming weeks and months. Please contact us with bug reports, problems, suggestions and other feedback.
Recent Comments