A big thank you to Jeff Smith for having reviewed and edited this article.
A Recap on CSS for Paged Media
Do you remember when CSS did not yet exist? Probably not, but let me tell you… when CSS arrived, it introduced a completely new way of thinking about web layouts. In fact, we haven’t stopped experimenting with layouts since! There’s always an emerging layout trend that’s pushing new ideas and the very boundaries of CSS.
Last week we spoke with Rachel Andrew, a CSS Working Group Invited Expert, and Founder of Edge of my Seat. Rachel is passionate about CSS, and that passion has clearly made her stand out as a master of her craft, especially when working with paged media. She has even worked with us to produce our own book layouts here at SitePoint — all with CSS! CSS for paged media is such a niche topic, and this is exactly the reason that we were blown away when Rachel decided to join us for a Q&A to answer your questions. Let’s dig in!
Your Questions for Rachel
Q: I would be interested in knowing what the main differences are when approaching page layout within a print page and web page? What considerations are there for the print that don’t apply to a web page?
Rachel: In some ways, working with a fixed size page in paged media is a lot easier, as you are outputting to a known format.
The main difference is that with paged media you have a page model, which has margin boxes which you can then insert stuff into with generated content. The example provided in the Prince docs is a good one because most of the learning curve in moving from the web to print is understanding that model.
Q: What lessons or techniques from CSS for print media can be readily transferred back to the design of web pages?
Rachel: The CSS Working Group are working on a rewrite of the CSS Generated Content module. This is where you can use the content property to insert stuff into your document from CSS.
In print, we heavily rely on Generated Content – it’s how you insert content into headers and footers, such as creating page numbers, dynamically adding the chapter title, and so on. That note on the CSS WG blog says:
“For those who want to toy with implementations, most CSS->PDF renderers already support a significant subset.”
It may be that we will start to have more access to the things from the generated content for paged media specifications available in a web context — assuming browsers support it, of course.
Q: There have been several attempts over the years to implement CSS for print, such as Hakon’s proposal for paged media for print, which fell to the wayside in favor of higher priority work. Could you explain a little about the current approach to CSS for print improvements and/or expansions on paged media?
Rachel: I think there are a bunch of interesting ideas out there, much of the problem is that to actually use this stuff you need a specific UA, which puts people off.
I was recently playing around with the ideas in Hakon’s CSS Figures specification, having a look at what was possible with things we have or might have in future.
The paged media specifications itself defines the canvas we are working on. The other useful functionality is in the current generated content for paged media specifications. Where that goes in the future probably depends on demand. My feeling is that there would be more demand if authors knew what was possible in these dedicated User Agents. They’d be keen to see it in browsers too!
Q: Do you have some basic recommendations on how to set up a page to be printed?
Rachel: To have full control of print output you do need to print via a UA that fully supports these specifications. The control you have when printing directly from a browser is very limited.
The good news is that working with a dedicated print user agent isn’t any harder than writing CSS for the web once you have figured out the different page model that you are dealing with. While I’ve been mostly working with books, it’s also possible to use the Prince UA via an API (directly, as you can install Prince on your server, or via a third party service https://docraptor.com/). So if you had to format invoice PDFs, for example, or a report, you could do this from live data, really just as you would a web page.
Q: Having done as many books for SitePoint as you now have, where do you feel that either ‘CSS for print’, or the tools for it, are still lacking?
Rachel: Every time I do something specific I come up with something new. For example, in SitePoint books we have a lot of code, and I wanted to insert a code wrapping character when it breaks. I ended up writing some gnarly JavaScript to deal with that. Thankfully Prince will run JavaScript so you can do stuff to your document using scripting when you hit the limits of what the UA can do.
Q: It sounds like user agents like Prince are helping to keep alive the idea of CSS for print. It seems like it would be a real shame if print styles faded away. @rachelandrew — Do you have any thoughts on what might revive interest in this area?
Rachel: If we want browsers to support this stuff better, then it really is up to us as a community to request that support. This is true for anything we want to see support for. Make some noise about it!
You can make noise in a couple of ways. You can directly ask browsers for support, and also you can just write about it. Show that there is web community interest and use cases for support, so that when these topics come up and the question is asked “Do web developers care about this?” the answer is clearly yes. And if it’s being written about, that can be easily demonstrated with a quick web search.
Q: Do you know of viable alternatives that are less costly?
Rachel: All the specialist tools have a price tag. You can use the Prince technology via an API at DocRaptor which may work out better depending on your use case.
In terms of output to other formats, you really need other tools for those. It turns out that it is far easier to get HTML & CSS into EPUB or Mobi (Kindle) format as these formats are essentially HTML and CSS anyway.
To get to EPUB I use Pandoc and then tidy up in Sigil. I then turn an EPUB into a Mobi with the Kindlegen tool.
It’s mostly a command line stack, so you can pretty much automate all this stuff and just spit out a bunch of versions of a book from your document. If it is just something simple, that might be all you need to do, otherwise you can use them as a starting point to tweak.
Want more?
Head on over to our Q&A to see the conversation in its entirety! Rachel may have left the conversation, but it doesn’t have to mean the chat is over. Go on in and continue the discussion with our vibrant community members!
Angela MolinaAngela has been fascinated by and trawling the web since dial-up was the only way to connect. Now she's helping you learn (even more) as the Production Manager at SitePoint Premium.
Rachel AndrewRachel Andrew is a front and back-end web developer, author and speaker. Her books include the recent Get Ready for CSS Grid Layout and she is a regular contributor to a number of publications both on and offline. Rachel is co-founder of the CMS Perch, a Google Developer Expert and an Invited Expert to the CSS Working Group. She writes about business and technology on her own site at rachelandrew.co.uk.
Jeff SmithJeff works for a startup as a technical writer, does contract writing and web development, and loves tinkering with new projects and ideas. In addition to being glued to a computer for a good part of his day, Jeff is also a husband, father, tech nerd, book nerd, and gamer.
