Live Q&A: Rachel Andrew on CSS for Print, Tuesday 12th July at 9PM (PST)

HTML & CSS
, ,
#1

Howdy!

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!

Rachel Andrew is the founder of Edge of My Seat, an independent software maker behind CMS products such as Perch. Not only a founder, Rachel is also a CSS guru and author of The CSS Anthology, The CSS Layout Workshop, and other titles. It’s no wonder we have Rachel joining us for a chat!

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.

See you there!

7 Likes
#2
#3

I’m not sure whether the timing with work for me, but I’ll look forward to seeing what comes out of it.

#4

If the timing doesn’t work for you, you’re welcome to get your questions in ahead of time @chrisofarabia :slight_smile:

#5

It looks like we’re a little light on questions here at the moment. Whilst I don’t think I can attend, here’s a question:

“What lessons/techniques from ‘CSS for Print’ can be readily transferred back to the design of web pages?”

I posted a link to this thread in Paul Boag’s Slack channel yesterday - Rachel is a member there.

4 Likes
#6

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?

3 Likes
#7

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.

5 Likes
#8

Totally excited for this - could the event link be made available somewhere or am I just missing the obvious? (the latter always possible :wink: )

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!

Molly

1 Like
#9

Hey Molly, this is where the conversation take place. :slight_smile: Great to see you drop in your question! If you come back for the event and this place will be filled with chatter.

3 Likes
#10

Thanks so much for clarifying Angela! Appreciate the quick response and looking forward to the event :smiley:

2 Likes
#11

How do you get round the fact backgrounds are turn off in certain browsers by default when creating print.css for HTML pages?

1 Like
#12

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?

4 Likes
#13

I hope I can make it to the chat. I believe it’s a very important one to deal with.

I’ve always thought that print output (html) will vary depending on the OS, fonts and printer.
So here are my questions:

  1. Is there a way to make the output consistent without using PDF?
  2. Based on font sizes, the number of rows per page will defer. So how do you know when to use a page-break within the code?

Thanks!

2 Likes
#14
#15

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.

2 Likes
#16

Hi! :wave:
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!

5 Likes
#17

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.

The CSS Modules of interest here are Paged Media: https://www.w3.org/TR/css3-page/
and Generated Content for Paged Media: https://www.w3.org/TR/css-gcpm-3/

Browsers unfortunately don’t support much of this natively, so you can’t simply print direct from a browser and take advantage of this stuff.

2 Likes
#18

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?

#19

Yes, that’s the one I’m aware of, but it’s frightfully expensive.

Do you know of viable alternatives that are less costly?

a User Agent that can output to PDF

Are any of these tools useful for outputing to other formats such as epub?

#20

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.

1 Like