This Tuesday, July 12th at 9pm (PST) we have Rachel Andrew (@rachelandrew ) joining us for a chat about CSS for print books. If you’re familiar with our books, now is your chance to chat with the woman behind our book formatting!
In this week’s conversation with Rachel, we’ll be taking questions about using CSS for print books. A specialised area in CSS which is both fascinating and also requires you to think differently, especially when coming from a web context.
In this Q&A:
You’ll learn about the specifications used for print.
We’ll cover which User Agents can be used to output PDF documents based on specifications.
You’ll have a chance to chat with Rachel Andrew about CSS for print and paged media.
Get your questions ready, as we start exploring CSS for print!
Check to see when this event is taking place in your time zone. But don’t worry if you can’t make the event, get ahead of the crowd and leave your questions below. We’ll get around to them during the event.
Yes - 5am here, so unfortunately I won’t be able to attend, either.
But I would be interested in knowing what the main differences in approach are between laying out a print page with CSS and laying out a Web page. What considerations (if any) are there for the print page that don’t apply to the Web page?
I’m wondering about some basic tools for how to create web pages that will print well on 8.5x11 paper. There used to be a time when designers cared how their pages print but this seems to be a dying practice. Perhaps they think nobody prints pages any more?
I deal with people who DO print pages, such as product pages or report pages. I think it’s kind of a waste of time trying to convert pages to PDF when you can just print from the browser if styled properly.
That said, do you have basic recommendations for how to set up a page to be printed? Pixel widths? Controlling headers/footer that get outputted by the browser? CSS frameworks that do well in print like Foundation or Bootstrap and which responsive grid works best (i.e. xs, sm, med etc).
How about fonts and font sizing? Should the page be fluid or lock it into a fixed width for printing?
I’m sure you’ll cover much of this, but I’m really interested in styling for direct printing. I’ve looked in to how to assemble pages directly to PDF and it seems very complex at this point. Much easier to print to PDF!
Maybe there are some cool libraries or alternate CSS frameworks specifically for printing that you can point us to.
Totally excited for this - could the event link be made available somewhere or am I just missing the obvious? (the latter always possible )
Question: 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 how the current approach to CSS for Print improves and/or expands on paged media if it does at all? Thanks!
Hey Molly, this is where the conversation take place. Great to see you drop in your question! If you come back for the event and this place will be filled with chatter.
Some areas of putting together print CSS seem obvious. eg.
no need to print links or buttons that don’t work on paper.
Even though people can opt to print in black and white, are there any “print-safe” colors similar to how there used to be “web safe” colors years ago?
To accommodate all the possible paper sizes, (eg. just because I have an A4 printer, not everyone will), are there anything like RPD (Responsive Print Design) best practices?
Ooh! I hope there’s some discussion of what will be enabled via Houdini and maybe a word or 2 about Prince and Vivliostyle. This is a very timely session for me.
Hi!
Welcome to our Q&A with @rachelandrew today on CSS for print media!
Rachel Andrew is a web developer, writer and public speaker from the UK. Founder of Perch, and an Invited Expert to the CSS Working Group; with a particular interest in CSS as used for layout - both on the web and for print.
Rachel, also has a history with us at SitePoint. She’s the author of The CSS Anthology and has worked with us in developing and preparing our own books. A true master of her craft and one of the many reasons we have her join us today.
It’s great to see that we’ve received so many questions ahead of time for this event! So without further delay - Welcome @rachelandrew!
Good morning/evening or whatever it is for you (it’s 5am here in the UK).
I can see there are a bunch of questions which I’ll go take a look at. As a reminder this topic is about the work I did to move the SitePoint book publishing process to HTML and CSS, rather than “print stylesheets for the web”. Using CSS for print currently requires that you use a User Agent that can output to PDF, I’m most familiar with Prince http://www.princexml.com/ but there are a couple of others.
Good question @TechnoBear! @rachelandrew, as someone who is new to this specialist area in CSS layouts, how would you differentiate between CSS for paged media and web?
That said, do you have basic recommendations for how to set up a page to be printed? Pixel widths? Controlling headers/footer that get outputted by the browser? CSS frameworks that do well in print like Foundation or Bootstrap and which responsive grid works best (i.e. xs, sm, med etc).
How about fonts and font sizing? Should the page be fluid or lock it into a fixed width for printing?
Hi zackw
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 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, reallyjust as you would a web page.
)
