ALA’s New Print Styles

by Eric Meyer

38 Reader Comments

Back to the Article
  1. After printing out, I would like to put it in binders. However, there is too few room on the left to punch without hitting characters. The margin on the right would be ok.

    Copy & paste the code below to embed this comment.
  2. Only skimmed the article (print style sheets are so individual, aren’t they), but noticed a little detail in the “a[href]:after” rule: ‘content: ” (” attr(href) “) “;’ seems to include unnecessary whitespace behind the closing parenthese. Especially before any punctuation, this might be disturbing: “Foo (http://example.org/) .”, instead of “Foo (http://example.org/).”.

    Copy & paste the code below to embed this comment.
  3. Print style CSS is something that I have been looking at for some time – without, I may say, much success. Your article has opened my eyes to new horizons in how to code this. Great stuff. Many thanks.

    Copy & paste the code below to embed this comment.
  4. Having a print background I find it strange to see pixels units in a print style sheets. Most printers deal with units like ‘pt’ or ‘mm’. I was wondering why these where not used. The precision they offer is far greater.

    Using ‘em’ seems less odd, I mean it’s relative unit. Great for margins. However, when viewing the print outputs on various formats that are commonly used (US paper and A4) I found the lines a bit on the long side.

    What worries me even more is the use of Verdana in the print stylesheet, or rather the lack of an assigned font. This really should be a non-screen orientated typeface.

    Verdana and Arial are fonts that shouldn’t be used in print work especially considering printers often have better alternatives already available. Such as Helvetica, Frutiger, Times, Garamond, ad infinitum. Which typefaces are generally available is not entirely clear so picking one would be a bit tricky. But going for an OS / browser font is the easy way out.

    Copy & paste the code below to embed this comment.
  5. Verdana and Arial are fonts that shouldn’t be used in print work especially considering printers often have better alternatives already available. Such as Helvetica, Frutiger, Times, Garamond, ad infinitum. Which typefaces are generally available is not entirely clear so picking one would be a bit tricky. But going for an OS / browser font is the easy way out.

    While some of those fonts would definitely be preferable for printing, you run into the same exact problem that gets you hung up when specifying fonts on web pages: you can specify any fonts you want, but it won’t do any good unless the user has that font installed on their computer. They can’t use it for screen display and they can’t use it to print either. Trust me, if there were a dependent and consistent base of alternative “safe” fonts, we would be all over it.

    Copy & paste the code below to embed this comment.
  6. If anyone’s interested in how I found out my answer, I posted the debugging steps on “Eric’s site”:http://meyerweb.com/eric/thoughts/2005/09/14/when-printing-maims/#comment-6433 .

    By the way, great article Eric, thanks for all your hard work.

    Copy & paste the code below to embed this comment.
  7. Dan’s “debugging tips”:http://meyerweb.com/eric/thoughts/2005/09/14/when-printing-maims/#comment-6433 at Meyerweb are great.

    Copy & paste the code below to embed this comment.
  8. Let me first say that ALA finally has a very good print stylesheet. Better the most I’ve ever seen. A list apart has become a reference for many a designer and so I’d like to see more awareness of such issues like appropriate units and typographical options.

    While some of those fonts would definitely be preferable for printing, you run into the same exact problem that gets you hung up when specifying fonts on web pages: you can specify any fonts you want, but it won’t do any good unless the user has that font installed on their computer.


    Your point is certainly valid but I would like to reiterate my view, just for arguments sake.

    1. Surveys of web users show a very high percentage of users having Helvetica installed on their system. I’m pretty sure that users wishing to print an article would reflect a higher than average install base of print suitable typefaces. In any case the Verdana typeface is just about the worst font to use for print. Arial would be a more readable alternative, even “˜sans-serif’ would be better. If your site were B2B orientated then this wouldn’t be so much of an issue at all. Corporate users have laser printers and their preinstalled fonts at their disposal. I’d be surprised if ALA users didn’t have more than a few print friendly fonts installed.
    2. What of the pixel in a print stylesheet issue? Is a laser printer to take a 1px border literally? Most printers / browsers actually don’t and they’re making a best guess as what it could be. The control ‘pt’ and ‘mm’ units give you is the more logical option.
    Copy & paste the code below to embed this comment.
  9. I notice that in source the link styleshit for print media comes before the links for media=“all”.
    Wouldn’t it work and be better to define all media first, then media=“print”, and thus get rid of all theses !important rules ?

    Copy & paste the code below to embed this comment.
  10. Only skimmed the article (print style sheets are so individual, aren’t they), but noticed a little detail in the “a[href]:after”? rule: “˜content: “? (”? attr(href) “) “?;’ seems to include unnecessary whitespace behind the closing parenthese. Especially before any punctuation, this might be disturbing: “Foo (http://example.org/) .”?, instead of “Foo (http://example.org/).”?.

    I am seeing the opposite problem, which I’m assuming the extra whitespace is unseccesfully trying to compensate for. Using Jens example, the period (.) would appear at about he bottom of the slash (/) and the First letter of the next sentence would be slightly overlapped by the ‘)’.

    Copy & paste the code below to embed this comment.
  11. I have 730 fonts installed on my Winbox, none of which are Helvetica. I think Egor’s argument should read “Surveys of professional web designers on Macs…” I printed one of the ALA articles, and I thought it looked great (nice job, Eric!). Verdana doesn’t make me cry like it does some people, I guess.

    Re units for printing: I’m sure a ton of processing goes on before even CSS pixels are translated to the screen, so I’m sure the “native language of printers” isn’t mm or pt, although it may be the native language of print designers. The dimensional “precision” Egor argues for is meaningless to my printing situation, where margins, paper size, paper alignment, and other printer idiosyncracies are in play. And speaking of margins, Mr. Hartmann, you can always set your own in your print setup.

    Copy & paste the code below to embed this comment.
  12. Here is a “screen capture”:http://waylan.limberg.name/alaprint.png of the print preview I am getting. Guess I didn’t describe the problem exactly right.

    Copy & paste the code below to embed this comment.
  13. Hello everyone,

    I read Eric’s original article on print styles, “Going to Print” and tried to implement the ideas on my own site. However, I was never able to get the browser to actually utilize the style sheet. Either that or I typed it wrong. I used this link structure:

    <link rel=“alternate stylesheet” type=“text/css” title=“print” href=”/css/print.css” media=“print” />

    When that didn’t work I tried this variation:

    <link rel=“stylesheet” type=“text/css” href=”/css/print.css” title=“print” media=“print” />

    Still to no avail. Any ideas?

    ~Jonathan

    Copy & paste the code below to embed this comment.
  14. Slightly off topic, but in case anyone was wondering, we did some usability testing on our web site last week and one of the things we checked was our use of print style sheets.

    We asked our users to print an internal page (well print preview it, at least) and tell us what they thought of how it looked. 100% (6 out of 6) preferred it to simply printing out the screen view – for all the reasons that you would expect.

    For me, this issue is closed.

    Copy & paste the code below to embed this comment.
  15. If you need extra space in the left hand margin for a special case such as placing the pages in a binder, set those extra margins in the browser and let the width:auto; part do it’s job.  Not everyone will have specialized uses for margins.

    Also, I’d just like to point out that the last time I ever printed a web page was Meyer’s old “Going to Print” article when it first came out.  Then again I rarely print anything and I’d even estimate that roughly half my book purchases in the past year have been in PDF format with the other half being good ole dead tree.

    Copy & paste the code below to embed this comment.
  16. When we developed my company’s website, we designed it for 1024 wide screens with arial/verdana fonts. I implemented the stylesheet so there were no width (let the computer figure out how wide a piece of paper is) and changed all the fonts from “san-serif” to “serif”. A little magic with ‘display:none’ and we created one page brochures for each section. See it at www.buzzhoney.com

    Copy & paste the code below to embed this comment.
  17. Dave, I’m sure you have print orientated fonts on your PC. Surveys of general users do suggest that these fonts are available to designers to add to their font-family rules. I’m not going to quibble over exceptions to the rule. Being able to distinguish between print and screen fonts and to make an assessment whether these can be used is just another part of a designer’s skill base.

    I agree printers always interpret given units to fit their own resolution (dot size). However, “˜mm’ and “˜pt’ units are fixed in size and are rendered equally well across most printers, pixels are relative to screen size and resolution and are in my experience ambiguous at best.

    These are just two issues not addressed in the ALA print stylesheet. The issue of margins and line length are much trickier because the user also controls these. The ALA correctly in my view assumes an A4 / letter paper size with “˜portrait’ page orientation. Also it reflects the identity of the website very well. Again, a job well done.

    Copy & paste the code below to embed this comment.
  18. I am seeing the same rendering issues noted in Comments 10 and 12.  In Firefox, when a link is displayed in the print preview, the link text is overlapping the text that preceeds and follows it.  In addition, some normal text is overlapping as well.  This is a common issue I have noticed with Firefox/Mozilla for a while with print stylesheets.  It seems to render/print perfectly in IE however, with the exception that the actual URL is not displayed in the printed version (which is known)

    Also, is there a way to accurately preview print CSS displays other than actually going into the browser’s “Print Preview” option?

    Copy & paste the code below to embed this comment.
  19. To help me be a better developer, could you explain why you used the “all” media type instead of “screen”. Wouldn’t it have been easier to create specific styles just for print without worrying about the screen styles? Also if you modify the screen style, don’t you now have more work to do since you have to revisit the print style sheet?

    Am I wrong? I really want to know.

    Copy & paste the code below to embed this comment.
  20. This is by no way a knock on the styles that are output. The majority is a couple of borders and some backgrounds. I imagine that even this “screen” css (the stuff I’m looking at right now on my monitor) would serve up pretty well on a handheld device. Granted the biggest offender of ignoring ‘handheld’ (cough Treo) is also a very popular browser. Although I believe they’re switching to windows mobile for Treo 670 – the fact of the matter is, you’re serving print, is handheld next? It’s as easy as doing the same stuff… knocking out floats, clearing columns, remove background images.

    All in all, it’s a solid style sheet for Print. Great work.

    Copy & paste the code below to embed this comment.
  21. Waylan, the print preview screen shot you are showing is from Firefox. Firefox seems to have some serious bugs in Print Preview (on Windows since there is no internal Print Preview on FF Mac). If you really want to see what a page will print out as, you need to select “Print” in Firefox without going through the Print Preview function first. That’s been my experience.

    Of course the real problem is that many FF users on Win will want to use that Print Preview funtion and will experience the rendering problems of FF’s own internal print rendering. On the Mac, if you run OS X’s own Print Preview from the Print dialog box, there is not the same issue. I don’t know how it is on Linux.

    Copy & paste the code below to embed this comment.
  22. I guess what I am questioning here is one level up from the discussion…and something brought aboout by my brother who is a novice.

    Not being very technically savvy he wanted to print a page from a website I designed for him, and his problem was the default settings in IE on a PC, with the page set up being wrong and the backgrounds not being set to print.

    Should you be restricting the user experience by offering a different expectation to the Print Page command? i.e if I want to print the page because I love the new site design I have to make a screenshot and print that.

    This may have come up in the discussion before, and I will scan at a later date to check it out, but I still feel that fundamentally you should not change the appearance of the printout from the Print Page command. I think that the style is better suited to a hyertext or button kink for ‘Print Article’.

    Copy & paste the code below to embed this comment.
  23. …you want to avoid the breaking of some page elements, e.g. avoiding the page breaking inside a table. Browsers don’t care about “page-break-inside:avoid”, at least in the case of tables.

    Copy & paste the code below to embed this comment.
  24. Thanks,

    I just found your original article today – and was getting ready to dig into one of my muticolumn sites to try this out.

    How great that you posted such a clear followup to the issues you encountered in rolling your code out.

    aloha,
    dave

    Copy & paste the code below to embed this comment.
  25. I am so pleased to see print being (re)addressed, and I am glad to get some guidelines and answers to some of my problems. I heartily concur with Mikes comments about users insisting on being able to print. I believe designers are underestimating the demand for printing pages and note that on searching useit.com Jakob Nielson last wrote about print (other than to bag PDF) in 1996 !

    I develop some small sites for local (country Qld Australia) B&B’s & tour operators who insist that pages print ‘well’. It is their experience that their customers arrive from Brisbane clutching a print of something from the site( usually the booking confirmation – but could be any page that contains an address – and all mine do) in their hot little hands. One client even insisted that I add a ‘mud map’ to each PRINTED page (an img classed with display:none;) for this very reason.

    Many of my clients are on really slow phone lines (19K max) and pay by the hour for internet connections (and as for a 2nd phone line for the internet – may as well ask the local telco for the moon !) so their strategy is to scan the page quickly determine it may answer whatever it is they want to know & print it for later reading.

    It is my experience that Opera 8 also prints badly and the developers really don’t seem to care. I long for the day when browsers actually obey the css orphans, widows and page breaks !

    Copy & paste the code below to embed this comment.
  26. I did notice abundance in print preview artifacts (overlappings etc.) in Opera as well as in Firefox or Explorer. However, when I printed out several articles from ALA through Opera 8.50 using HP PSC 1510, results were impressive to say the least—everything was in right order without any problems at all.

    Copy & paste the code below to embed this comment.
  27. Your main points are well taken, however, I get the impression that you must be from the UK or Canada.  Here, in the United States, we don’t ask “after” something, we ask “about” it.  That is, users asked about the print styles.

    Copy & paste the code below to embed this comment.
  28. Should you be restricting the user experience by offering a different expectation to the Print Page command? i.e if I want to print the page because I love the new site design I have to make a screenshot and print that.

    At first, I was going to ask something simple:

    • Since it isn’t hard to make a screenprint—‘print screen’ utilities exist (and are fairly easy to use) on both Windows and Macintosh—what’s the problem?

    Then I remembered that I had dealt with this issue before, while designing the style sheets (print and screen) for my employer’s intranet. The same question came up: “We love the design … why won’t it print?” I showed them (our usability mavens) the Alt+‘Print Screen’ shortcut. They were pleased that this capability exists, but they still wanted to know why. So, I explained it in terms of usability:

    1. Content is king.
    2. Navigation, hyperlinks, buttons, and other ‘online’ gewgaws are not.
    3. Generally, if someone prints a page, it’s because the page has important content, not clever navigation, or excellent button design, or something else.
    4. So, why burden printing visitors with something that’s less than useless—because it doesn’t do anything—on the printed page? Especially since creating screenprints really isn’t hard …

    They allowed the print styles to stay “as is”.

    Copy & paste the code below to embed this comment.
  29. “Verdana and Arial are fonts that shouldn’t be used in print work especially considering printers often have better alternatives already available.”

    The verdana is a font for displaying on screens, the Arial is a font designed to b printed though…

    Copy & paste the code below to embed this comment.
  30. You missed the point here. If a user selects ‘Print’ or ‘Print Page’ from the browser (not the page) then you are changing their expectations. In as much as web developers do not like browsers altering the appearance of their websites because they do not conform to Standards or have proprietry code, I do not feel that a website should allow code to change the way a page prints out at an application level.

    In other words if Iselect ‘File’ and then ‘Print…’

    A print out of what I see in the browser is what I expect.

    As for the idea that screen capture is simple to do – I think you are disregarding a large proportion of non-savvy users and as a genral rule I would never assume anything.

    I think that the re-formatting of content is helpful – but should be kept as a user choice. However, I can also see an argument for the owner of the content taking the view that the contentis theirs and that as the owner they will stipulate whether the content can be printed or how. But that is another discussion altogether.

    Copy & paste the code below to embed this comment.
  31. If at all possible, I’d like to see a print page maintain the document layout, rather than being sent off to the virual design disposal machine for sake of just getting content.

    Yes yes, content may be king, but form is queen.  And 5 days out of the month the queen reigns supreme.

    As for me, Verdana has always been the perfect font for display; especially at small sizes.  But I’ll agree that on paper, there just has to be a better alternative.  Arial, IMO, looks better in print than it does on web.  But this is all heresay.  And if you live over there, then it’s theresay.

    Copy & paste the code below to embed this comment.
  32. Thanks for this article. I have never dealt with print styles so far, but I think I will try to include some of your proposals in a few sites.

    Copy & paste the code below to embed this comment.
  33. I’ve been testing for hours: with all advise in this great article, I still had a problem to get long pages to wrap to the next page in print. Eventhough I added the “float:none !important;” to all big-sized divs. My text was still displaying ‘outside’ my print-page.

    I found a solution (or the problem!) for this issue: Around the text I had a <div> with “position:absolute;”. That was the problem, the solution was to ‘redo’ this div in the print-style with “position: relative !important;”.

    Simple, maybe, but I thought to share it with you.

    Copy & paste the code below to embed this comment.
  34. I have created some accessible stylesheets and obviously use style switching to choose which one.  However, when it comes to printing are you stuck with one print style sheet or can this be changed as well?

    Copy & paste the code below to embed this comment.
  35. HELP
    In test, I use both methods (a:link:after – a:visited:after) and (a[ref]:after) – The two works correctly when used and printed on SAFARI, FIREFOX, MOZILLA but ONLY when the original full links were not visited”¦ When a link is visited, the full link (auto-insert the URLs of links) is not printed after the text of the title”¦ As somebody has an idea why ? a solution ?
    Many thanks

    Copy & paste the code below to embed this comment.
  36. I want articles on trade and business and i have a great web directory, yellow pages and products directory as well as news and other sections like entertainment, games etc.

    Copy & paste the code below to embed this comment.
  37. Hi! Thank you for these valuable informations…
    Greetings from Germany

    Sam.

    Copy & paste the code below to embed this comment.
  38. In my comment “I think I did something wrong…”:http://www.alistapart.com/comments/alaprintstyles?page=2#13 I mentioned not being able to convince the user agent to apply the print stylesheet. I found out why: I hadn’t put “@media print” at the top of the stylesheet. I’m posting this in case anybody else had that problem.

    Copy & paste the code below to embed this comment.