CSS Design: Going to Print

by
Published in CSS, Layout & Grids
A note from the editors: The print style sheet discussed below was used in ALA 2.0, whose February 2001 CSS redesign helped usher in the modern CSS-layout era. Some details below pertain only to that layout, and not to ALA 3.0. But the principles Eric Meyer discusses in this article are as true and as generally applicable today as they were when this article first appeared in ALA.

You’ve seen them before: links that say “click here for printer-friendly version” or words to that effect. Every time you follow one of those links, you load a separate document that presents exactly the same information with a different layout, and probably different markup.

Article Continues Below
Article Continues Below

That means somebody (or a script) had to take the original document and convert it to a stripped-down version that’s more suitable for print output. Maybe that somebody was even you.

Print style sheets to the rescue#section2

One of the wonderful things about CSS is that it allows authors to create media-specific styles for a single document.  We’re pretty used to styling for the screen, but thinking about other media isn’t a habit yet.  And as all the “printer-friendly” links attest, our thinking about the print medium has been limited to recreating a document in a different way.

Why bother, when the power to offer your readers a better view of your material in print is no further away than a well-structured document and a media-specific style sheet?

You can take any (X)HTML document and simply style it for print, without having to touch the markup.  Worries about version skew between the web and print versions suddenly become a thing of the past.  Best of all, it’s simple to do. (For more information on the basic principles involved in creating media-specific stylesheets in general and print styles in particular, see “Print Different” at meyerweb.com.)

Let’s look at how A List Apart got some new print styles that danced around a browser bug and, in the end, made the printed output look much better.

Fixing a float flub#section3

As you can see by visiting Bugzilla entry #104040, Gecko-based browsers like Netscape 6.x or Mozilla have a problem with printing long floated elements.  If a floated element runs past the bottom of a printed page, the rest of the float will effectively disappear, as it won’t be printed on the next page.

If you have a site styled like A List Apart, and the entire article content is contained in one big float, then that means readers will only get the first page of the article.

The fix, as it turns out, is to un-float the content when the page is printed.  Simply put, all you have to do is assign any large floated element to have float: none.  Doing this returns the floated element to the “normal flow” of the document, which is printed as you might expect, a page at a time until the end of the document.

So that’s what I recommended Zeldman do for ALA, and once he did, the printing problem was solved.  Gecko-based browsers still have the bug (as of this writing), but at least it’s something that can easily be worked around.

The starting point#section4

Here’s the print-medium style sheet that A List Apart was using once the float bug was cleared away:

#menu { 
	display: none; 
} 

#wrapper, 
#content { 
	width: auto; 
	border: 0; 
	margin: 0 5%; 
	padding: 0; 
	float: none !important; 
}

It’s a good start.  This style sheet removes the right-side menu completely from the document, so it isn’t printed (display: none;), and resets the margins and padding of the article’s content so that the text will flow from one side of each page’s printable area to the other.

The problem, as I saw it, was that too many of the styles intended for the screen were leaking through to the print.

If we look at the head of a recent ALA article, we find (among a lot of other stuff) the following lines:

<style type="text/css" media="all"> @import "nucss2.css";</style>
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

We have a style sheet, print.css, which has been restricted to the print medium with the use of the attribute media.  The style sheet nucss2.css, which is being imported in order to hide it from Navigator 4.x, will be used in all media the user agent supports.  That’s screen, print, projection, aural—you name it.  Unless we’re careful, we could end up with background colors and pixel-based font sizes in our printed output.

Is this a tragedy?  No, but most browsers are configured not to print backgrounds; and pixel-based fonts, while nice for screen media, are not so useful in print media.

So let’s do something about these and a few other layout issues.

Whitewashed backgrounds#section5

A lot of background colors get applied to things in the right-hand sidebar. Since that’s dropped for print, we don’t have to worry about changing anything within the sidebar. This removes numerous potential headaches right away.

Since printers don’t print white, we want to set the page’s background to be white.  We also want to remove any background images that might have leaked in.

If we simply use the property background, we can accomplish both tasks with a single value.  In order to leave ourselves a little flexibility, we’ll set the body background to be white, and the content and wrapper elements to have a transparent background (thus letting the page’s white shine through):

body { 
	background: white; 
} 

#menu { 
	display: none; 
} 

#wrapper, 
#content { 
	width: auto; margin: 0 5%; 
	padding: 0; 
	border: 0; 
	float: none !important; 
	color: black; 
	background: transparent; 
}

Setting the foreground color to go with the background colors wasn’t absolutely necessary, but it’s always a good idea.  Now we have two non-floated elements (#wrapper, #content) with no visible background, and a page with a white background.

You might be worried that Navigator 4.x does terrible things with the value transparent, but be of good cheer: NN4.x only pays attention to style sheets that have a media value of screen.  Just like with @import, the styles in our print style sheet are forever hidden from Navigator 4’s rheumy eyes.  So no worries there.

Sizing the font for print#section6

The all-media style sheet is sizing our printed text to be 11px tall, which seems like a poor choice.  The font family (Georgia to start, and serif fonts thereafter) is fine for print, where serif fonts are usually preferred.  Only the size needs a change. Thus:

body { 
	background: white; 
	font-size: 12pt; 
}

“Wait!” you’re probably exclaiming.  “Heretic! Everyone knows points are evil!  Todd Fahrner said so!”

Well, yes, he did, and he was entirely correct—for screen media, points are a horrible choice.  In print, points make just as much sense as they have for decades now.  Since we are styling for print, setting our body font size to 12 points is actually a good thing.

You can of course pick any size you like, but 12 points is a very common size.  And since Zeldman’s all-media styles size elements in the article content in relation to the body, we’re all set there.

Marginalia#section7

The existing styles for the wrapper and content divs sets their left and right margins to be 5%.  That means that there will be “blank space” to either side of the article, and each blank area will be 10% the width of the page’s printable area.  That’s because the content div is inside the wrapper, and each one has 5% on each side.  Add ’em up and you get 10%.

The original all-media styles set a 15% right padding on the content div.  The margins already give us 10%, so we just need an extra 5%.  That’s easy enough to do:

div#content { 
	margin-left: 10%;
}

Another option would have been to leave the margin alone and give the left padding a value of 5%.  Since the content div doesn’t have a visible background, either approach should have the same effect.

Unfortunately, some browsers have trouble handling padding appropriately, so it’s currently a better idea to move things around with margins whenever possible.

Printed links#section8

One tricky question was what to do about hyperlinks.  Obviously they aren’t going to be as useful in print as they are onscreen, but it’s often important to provide some clue that there were links in the original.  So here’s what I devised:

a:link, 
a:visited { 
	color: #520; 
	background: transparent; 
	font-weight: bold; 
	text-decoration: underline; 
}

This gives the links a color dark enough to be close to black in grayscale output, while still using a dark red that will show up on a color printout. The boldfacing and underlining ensure that the text of the links will stand out.

In a fully CSS2-conformant browser, we can parenthetically insert the URLs of the links after each one, thus making them fairly useful to anyone who has a copy of the printout and a web browser handy.  Here’s the rule, which restricts this effect to the “content” div and thus avoids sticking a URL in the masthead:

#content a:link:after, 
#content a:visited:after { 
	content: " (" attr(href) ") "; 
	font-size: 90%; 
}

Try it out in a Gecko-based browser, like Mozilla or Netscape 6.x.  After every link in the printout, you should see the URL of the link in parentheses.

In any browser that doesn’t understand the rule, there should be no ill effects—the links will still be dark red, underlined, and boldfaced.  They just won’t have a URL appear after the text of the link, that’s all.

Note that the spaces before and after the parentheses are actually part of the rule above—the spaces have to appear in the rule in order to be inserted into the document.

There is one aesthetic problem with this new rule, precisely because it causes the value of a link’s href attribute to be inserted into the document verbatim.

If we look at the code of ALA pages, we’ll quickly notice there are a lot of “rooted” URLs like /issues/144.  Those will be dropped into the document exactly as they are, which makes them less useful than if they were displayed as an absolute URL.

As it happens, the CSS3 selectors draft offers us an out.  Any attribute selector that uses the operator ^= selects elements based on the beginning of their attribute values.  Thus we can select any href that starts with a slash and insert enough text to fill out the value.

#content a[href^="/"]:after { 
	content: " (http://www.alistapart.com" attr(href) ") "; 
}

This rule transforms a value like /issues/144/ into http://www.alistapart.com/issues/144/.  It won’t help with relative URLs that don’t start with slashes, but fortunately ALA doesn’t use those kinds of URLs.

!IMPORTANT: As mentioned, ^= is a CSS3 selector. The W3C CSS validator can only test for compliance with CSS1 and CSS2. Unable to understand the CSS3 selector, the W3C validator will report it as an error, even though it is perfectly valid per the CSS3 Selectors Candidate Recommendation.

Extending the masthead#section9

In doing a final review of the print styles, I realized that the masthead of the site bugged me.  It wasn’t that it existed so much as it had an “underline” as part of the graphic.  That line, of course, ended with the edge of the graphic.  It occurred to me that it would be possible to pull a little sleight-of-hand and make the line extend to the width of the article text.

The first step was to give the content div a top border that was, like the underline in the graphic, a solid one-pixel dark red line. Since I was going to create a visible top border for the content, it also seemed a good idea to insert some padding between the border on the content.

div#content { 
	margin-left: 10%; 
	padding-top: 1em; 
	border-top: 1px solid #930; 
}

By itself, that would draw a line just underneath the masthead graphic.  It turns out that said graphic is wrapped in a div element all by itself, so the bottom margin of that div is used to pull the rest of the content up into itself.

div#mast { 
	margin-bottom: -8px; 
}

div#mast img { 
	vertical-align: bottom; 
}

These simple rules cause the content div’s top border to line up with the underline in the masthead graphic.  The border is actually overlaying the graphic, but since the colors match it’s difficult (if not impossible) to realize that’s what is happening.  Even if a browser decided to put the graphic on top of the content’s top border, the graphic and border would still line up and create the illusion.

The second rule shown, the one with vertical-align, works around an interesting Mozilla behavior that is only seen when a document is rendered in “standards” mode, as are all ALA articles.  See my Netscape DevEdge article “Images, Tables, and Mysterious Gaps”  for more information on this behavior, and various workarounds (including the one used above). Also see Better Living Through XHTML in ALA 137.

As for the background color of the masthead graphic, there’s really no way to remove it short of actually setting those pixels to be transparent in the graphic itself.  We could set a matching background color on the masthead div, but that would probably be overkill for so light a background.

What else?#section10

That’s all we did for this redesign, but it certainly isn’t the end of what’s possible.

Fiddling with colors to be more printer-friendly is one possibility, as is tweaking the column’s margins so they’re based on points (or picas, or even inches) instead of percentages.  In the print world, you have almost as much room to design as you do on-screen.

One area we didn’t scratch as deeply as we could have is font sizing.  A number of classes, like superfine, were left to use the all-media styles based on pixel sizes.  Resizing them for print is as simple as what we did for the body element—just write a rule that addresses the element(s) in question, and assigns a new value to font-size.

To pick one example, we might have written .superfine {font-size: 9pt;}… or any other value that seemed appropriate.  There are other elements, like footers and pre, that could benefit from similar work, and they may appear in future versions of the ALA print styles.

The end result#section11

Here’s the print style sheet we ended up with after making the changes:

body { 
	background: white; 
	font-size: 12pt; 
}
	
#menu { 
	display: none; 
}
	
#wrapper, 
#content { 
	width: auto; 
	margin: 0 5%; 
	padding: 0; 
	border: 0; 
	float: none !important; 
	color: black; 
	background: transparent none; 
}
	
div#content { 
	margin-left: 10%; 
	padding-top: 1em; 
	border-top: 1px solid #930; 
}
	
div#mast { 
	margin-bottom: -8px; 
}
	
div#mast img { 
	vertical-align: bottom; 
}
	
a:link, 
a:visited { 
	color: #520; 
	background: transparent; 
	font-weight: bold; 
	text-decoration: underline; 
}
	
#content a:link:after, 
#content a:visited:after { 
	content: " (" attr(href) ") "; 
	font-size: 90%; 
}
	
#content a[href^="/"]:after { 
	content: " (http://www.alistapart.com" attr(href) ") "; 
}

As minimal and (in some ways) crude as this style sheet may be, the effect it has should be obvious to anyone holding a printout next to the same article online.  Similarly useful and dramatic changes are possible for almost any design, from the simple to the sublime, and these sorts of media-specific styles free authors from ever having to create another “printer-friendly” copy of a document.

109 Reader Comments

  1. Good article. I love it when programmers’ eyes light up when I say “Nah, don’t do a print specific page, I’ll handle it with CSS.”

    Outputting links’ URLs is a great idea, but limiting this to bodycopy

    elements, and going with a small font size works better. Print this article in Netscape 6.2 and the title image, which is wrapped in a

    , spits out a superhuge

    styled URL that doesn’t wrap. Yikes.

  2. As usual, ALA has put up a great and informative article.

    A browser-related note: currently, the Mac version of Opera doesn’t handle point-sizes in print stylesheets very well. Opera uses 96 dpi on screen, which is what Windows uses and close to what the W3C recommends (90 dpi, IIRC). However, in print, 72 points make an inch. This is why the original Mac’s use of 72 dpi made it perfect for desktop publishing. The Mac version of Opera uses its 96 dpi definition in print as well, making the output too large. I don’t believe there is any workaround at this time. I’ve reported the bug to Opera.

    Also, a tip for people making print stylesheets for sites that use absolute positioning: you should declare your absolutely-positioned divs as position:static (and probably also use width:auto) in your print stylesheet to return them to the normal document flow, or you may get strange results.

  3. over the past few months i have come to love CSS and i now do everything with it, or at least so i thought up till now. i thank you for writing this article. it will no doubt come in very handy to me 😀

  4. Amazing article, I was very impressed. Having used this method myself, I found it useful to have a full article going over the topic in greater depth.

    Combining this with a style switcher should make for good usability – I’ve long wanted an easy way to make good pages, that work well on multiple devices, and for people with visual disabilities, and this sure is a good approach for printers.

  5. Excellent article. I was prompted to experiment with CSS print version trickery by posts in the old forum. This article encourages me to go back and tinker some more.

    Oh how I miss the old CSS forum ….

  6. Excellent article. I was prompted to experiment with CSS print version trickery by posts in the old forum. This article encourages me to go back and tinker some more.

    Oh how I miss the old CSS forum ….

  8. Don’t waste paper testing the results of your new print-only stylesheets. The Print Preview function in both IE and Moz will let you see how your stylesheet is coming on – without the need to print it.

  9. Great article, the absence of print style sheets from virtually every major site has been a pet peeve of mine for some time. Hopefully their sluggish in-house developers will get round to learning enough CSS sometime in the next few years.

    One teeny weeny almost microscopic nitpicking point about ALA’s printer-friendliness: it’d be just that little bit more slick if the images used transparency (obviously there’d still be pixels around the edges matted onto the background colour to retain anti-aliasing, but it’d be an improvement).

  10. An excellent article, especially well timed for me (thx) as I am trying to get all the new sites to consider css print as well as screen. Thanks to ALA I am well armed to do so.

    [Small point the link to print different, the second page of that article appears blank when printed.]

  11. THis is really handy, but when you look at the sad truth all the big sites as mentioned in one of the posts above cannot take for granted that their users have the needed browsers.

    On my site I solved this issue with a small PHP script that extracts the content only (indicated by comments in the HTML, coming from the CMS) and substituting all images and links in there. It’s also a rather fast and small solution and works on every browser.

    Just my two cents, still awesome that some people write about the benefits newer browsers give us.

  12. Thanks for the article. It has solved many problems I was facing and couldn’t find solutions to. Like previous posters, the article has given me encouragement.

    Does anyone know where I can find out which other media selectors are supported by various browsers?

  14. The best part about print links on most major sites isn’t the fact that it removes a lot of the display (which you wouldn’t want to waste paper on), but the fact that it places all of the content on one “page”. No more clicking a link to go to the 2nd (or 3rd or 4th, etc.) page.

    While I agree that a print media style sheet would be wonderful on sites that have a “Print!” link, I don’t think it would alleviate the problem of multiple pages of content. That’s the biggest draw to a “Print!” link, IMHO.

    In the case of a print CSS, you would have to print each page of the article, clicking next to load the next page, and printing that page, rather than loading the article in one large page (like the BigCo’s do it now with their “Print!” links) and printing directly from that.

  15. Great article, but I noticed when print previewing the page in Moz RC1 that there is a big URL that comes right after the image at the top of the story. That might be something that you want to fix. Great article though, I’ve used some but definetly not all of these tips.

  16. This is really handy, but when you look at the sad truth all the big sites as mentioned in one of the posts above cannot take for granted that their users have the needed browsers.

    I don’t see a reason why major sites, including yours, coudn’t do both. That’s the part I like best about CSS print styles. A user can print from the print only page or from the normal page and the output is respectable both ways. And if you have a consistent naming convention, it doesn’t take a whole lot of effort either.

  17. Great – but the link to the article about images and tables is broken. There’s a space (%20) before the last slash in the address. Once removed, the url works fine.

  18. Great piece of work but how do you get the long URLs to wrap? They’re busting my table width apart in the print out at the moment.

  19. Jason–there is no need to print each page of a multi-page web document–if the author has coded it correctly and you’re using the right browser.

    This code, placed on all of the individual pages, should cause a modern browser to print a different document instead:

    Or:

    Works with IE5+/Win, but still doesn’t work with MacIE last time I checked.

  20. Great article. I love it!!
    Theoretical CSS-3 to complete relative URIs that start with slashes and URIs that don’t:

    /* for all relative URIs (“foo…”) */
    #content a:not([href^=”http://www.alistapart.com/”]):after {
    content: ” (http://www.alistapart.com/” attr(href) “) “;
    }
    /* for all relative URIs (“/foo…”) */
    #content a[href^=”/”]:after {
    content: ” (http://www.alistapart.com” attr(href) “) “;
    }

    Now, I am not sure if the second rule overrides the first. It should, but in case it doesn’t, then replace the first rule’s selector by this:
    #content a:not([href^=”http://www.alistapart.com/”]):not([href^=”/”]):after

    Relative URIs that start with something like “../foo”, I am not sure what to do about that, but I recently stopped using them. I define a BASE-URL and all paths are always from that location down. In the above-mentioned examples, that BASE-URL would be “http://www.alistapart.com/”.

    O yeah, this is all pure speculation, but it made sense to me.

  21. “Print” pages also frequently let you escape wretched design. Unreadable color combinations usually go away, as do unreadable font sizes and unreadable line-lengths. Usually. Plus, you escape stupid animations.

    Not to say, of course, that you shouldn’t use a print stylesheet, but that the benefits *users* will gain are likely to be more than offset by what we lose. I’ll remember the Print Preview trick mentioned above….

  22. “Print” pages also frequently let you escape wretched design. Unreadable color combinations usually go away, as do unreadable font sizes and unreadable line-lengths. Usually. Plus, you escape stupid animations.

    You can increase the user experience by including a style switcher. Plus, the whole point of CSS is that the user can control the experience and “escape wretched design” through an user style sheet. Basically, print pages always were a hack and still are. With proper CSS and actual standards-compliant Web browsers, we shouldn’t be indulging in kludges any more. Besides, the newer browsers are better for users anyhow.

  23. Thanks for all the positive feedback, folks! I really appreciate knowing that articles like this are useful and interesting, and also what other questions people have about CSS. Here are my responses to a few.

    “…I noticed when print previewing the page in Moz RC1 that there is a big URL that comes right after the image at the top of the story. That might be something that you want to fix.”

    A couple of people commented on this. We left them in on purpose, because the image link contains a URL like any other. However, we could have avoided the HUGE TEXT problem using something like this:

    h1 a:after {font-size: 50% !important;}

    That would make the generated content half the usual size of ‘h1’ text when printed. Of course you could use whatever value you like. When Big Z gets back from his trip I’ll talk with him about whether or not we want to do that for the site’s print styles.

    “…how do you get the long URLs to wrap? They’re busting my table width apart in the print out at the moment.”

    As it turns out, that’s browser-dependent. Some browsers will line-wrap after a hyphen or slash, while others won’t. If yours won’t then you may want to stop trying to size a table to a certain width in print, or making the generated URLs use a smaller font size in print. As a last resort, you could class any link you don’t want to generate a long URL and write styles to prevent it.

    “Theoretical CSS-3 to complete relative URIs that start with slashes and URIs that don’t… ”

    I think you’re close, but there are some cases that your rules wouldn’t cover. I’d really like to explore a comprehensive solution, but it would almost be an article in itself– which is why it doesn’t appear in the article I wrote. Still, I’m impressed; I didn’t think anyone was messing around with those CSS3 selectors, and it looks to me like you have a pretty good handle on how they work. That’s more than I can say about myself most days…

  24. That was a great article – practical and helpful with some ideas that I had not considered before. I already had a print.css, but I have been back fiddling a bit more with it and it is now definitely better than it was. I particularly appreciated the tips about links – I didn’t even realise before that this was possible!

  25. Great article, all ready knew about print css; but I did not know about “… a:link:after, #content a:visited:after {
    content: ” (” attr(href) “) “; …”

    Could someone point me in the direction to find out about it and more.

  26. I can do that, albeit by pointing you to a piece of CSS2.

    * http://www.w3.org/TR/CSS2/generate.html

    This is the section of CSS2 that describes generated content, which is how that URL insertion got done. Note that the section on counters and automatic numbering can be ignored, because no browser I know has implemented them correctly. Or at all.

  27. “Note that the section on counters and automatic numbering can be ignored, because no browser I know has implemented them correctly. Or at all.”

    Are you joking?!!

    Opera has had support for almost all of generated content for years! The only thing that it doesn’t have support for is generated objects (content: ).

    http://www.westciv.com/style_master/academy/browser_support/generated_content.html
    (note that Opera 5 *does* support the attr() function, contrary to the chart)

  28. I wouldn’t recommend the extra space on the end of the paranthesis after printing links out. If the link is at the end of the setence it means you’ll get something like ‘…/page.html .’ Which looks a bit silly. All the links that are inline will already have spaces after them anyway, so I don’t see any point in that extra space. Apart from that, nice article.

    Re: the content request. You can find out more about it in the CSS2 spec. It’s not too hard to read, particulalr,y I don’t think. http://www.w3.org/TR/REC-CSS2/generate.html

  29. Thanks, guys

    I’m really going to use this – starting now. I’m finding so much of use in ALA I can’t begin to describe. . . Maybe I’ll catch up some day.

    John

  30. This is a great thing – the one with CSS print version of the page 😉 But nobody mentioned that not all users that are browsing the web, are webmasters that know about CSS.
    They will be still looking for the “click here for printer-friendly version”? link. If there is none such link – they will propably not print the page. Or they will and they will be pleasantly surprised 😉

    So i think that from now on i’ll use both of the options…

  31. Maybe I’m being obtuse, but there’s nothing stopping us putting somewhere on our pages something like “This page will reformat correctly for your printer” with appropriate credit to the clever use of stylesheets. Or would that not accord with the design of your pages?

  32. Great article! I’m now beefing up the print stylesheets for my sites 🙂

    One problem thought… I’m having trouble getting URL completion to work… basically I can get the URL to display (in N6.2 at least) but I can’t get the relative URLs to complete. This is the code, very slightly modified:

    div.item a:link:after, div.item a:visited:after {
    content: ” (” attr(href) “)”;
    }
    div.item a[href^=”/”]:after {
    content: ” (http://www.fullurl.com” attr(href) “)”;
    }

    Have I done something daft, or is this feature not supported in most of the currently-used browsers…?

    Still, displaying the URL in any form is a huge leap forward 🙂

  33. (just lost a post…?)

    quick version: I’m trying to add this to my print-version stylesheets but I can’t get the URL completion to work… how well (or otherwise) is the feature supported in the common browsers at the moment? Trying to figure out if the fault is mine or the UA 🙂

  34. div.item a[href^=”/”]:after {
    content: ” (http://www.fullurl.com” attr(href) “)”;
    }

    The selector above is CSS level 3. CSS-3 is still a W3C draft and not expected to be supported at all at the moment. But things go fast and it doesn’t harm knowing what will be possible within hopefully only months.

    If you put a class on outgoing links (you may wish to style those differently as well, if they are about to open up a new window), you can escape those from the completion rule. Then for the internal links, if they are all relative:
    div.item a:link:after, div.item a:visited:after {
    content: ” (http://www.domain.com” attr(href) “)”;
    }

  36. I’m not joking, Kevin (http://www.alistapart.com/stories/goingtoprint/discuss/2/#ala-426). While Opera does support generated content, it had some serious bugs up through at least v5, many of which I personally reported to Opera’s CTO. Most of them were fixed, but not everything works as it should. See, for example, the test located at http://www.meyerweb.com/eric/css/tests/css2/sec12-02.htm , which shows some support for ‘content’. At least one text ont he page is failed by Opera 6/Win. Furthermore, when I print-preview the article in Opera 6, or try testing the generated content with a screen-media version of the print styles, none of the URLs appear. So it would seem to me that there are some flaws in Opera’s CSS2 support, probably in the generated-content area.

    Remember that I said “Note that the section on counters and automatic numbering can be ignored, because no browser I know has implemented them correctly. Or at all.” There’s a difference implementing a thing and implementing it correctly, as the past five years have taught us all too painfully.

    This is not meant to denigrate Opera: it has very good CSS support, especially in Opera 6. And it does seem to get counters mostly right (for example, see http://www.meyerweb.com/eric/css/tests/countertest.html), so I may have overstated my point a bit. I’d need to do far more extensive testing than I already have before I could say with certainty.

  37. “Have I done something daft, or is this feature not supported in most of the currently-used browsers…? ”

    The selector in question will only “complete” ‘href’ values that begin with a ‘/’ character. For example, ‘/stories/goingtoprint’ would be “completed” by the rule I used, but ‘examples/ch1/figure07.jpg’ would not because it doesn’t start with a forward-slash. And so far as I know, it will only be handled by Mozilla and its variants, like Netscape 6.x, which have implemented the CSS3 selectors draft.

  39. right. I posted in response to the last post on the previous page, not noticing that there was another page. I see that my post is quite superfluous.

    -wg <><

  43. I’ve been using something similar on my resume page, where I have a link that switches the style of the page to a “printer friendly” version. I was using a JavaScript from the “Dreamweaver 4 Magic” book (which has some pretty good tricks in it, although I’ve been hand coding using HomeSite 5 now more and more lately). Maybe it’s the code, or the script, or just having 2 style declarations that screws it up. Either way, I’ve gotten rid of the script and now I’m only using the following in my head:

  44. Great article, which seem to answer all my prayers, but I’m a bit new to developing and didn’t grasp everything.

    I’ve got a DHTML menu bar, which is placed into DIV tags. This file is then use as an #include file within all my main pages. I don’t want the menu bar to be displayed when I print, can anybody help????

  45. My suggestion would be to try something like . . .

    the #include file:

    NAVBAR STUFF

    the CSS (in the print stylesheet):

    #dhtmlmenubar { display: none; }

    Since the include file is dropped in and actually becomes part of your page (the browser doesn’t know, only the server does), you could treat the navbar’s

    the same way as any other HTML in your page.

    That’s just off the top o’ my head, but try it out. Hope that helps.

    –damien

  46. Cheers Damien, I tried your method but still no joy, I think its down to the complexity of the DHTML nav bar, it use’s a couple of ‘JS’ include files and no matter what I try it still appears. Anyway i’ll solider on – much appreicated.

    migs

  47. Leave it to ALA to put out another great article. I have become a CSS fanatic since I found this site and Have integrated all of what I have learned here in my web development in one way or another. This is a little off the subject, but does anyone know how to get the rotated 3-D text effect a la the logo for this printing article where it says “ala”?

  48. Wonderful article Eric, it’s always great to have straight forward to read when working on a project. Sometimes I swear ALA monitors what it is I’m doing, they never cease to amaze me.

  49. Movement2.com is an ethical and ecological policy and lifestyle service.

    We propose a life without the burden of property and the freedom of movement within Europe.

    We enable our members to shape the ethical and ecological minds of in industry by using their collective buying as lobbying tool.

    Our proposal is a housing system in which an individual buys into a network of homes instead of just one house. An individual can move freely within our EU wide system. All furnishing, utility billing and security is managed by us. It gives individuals the freedom of owning what they want not what they need.

    http://www.movement2.com

  51. Eric, I was wondering if you’ve had a look at Printtopdf, a useful utility that acts as a desktop printer and lets you output PDFs from any application on a Mac.

    It’s surpring how well your tips work with that program when you print from Netscape or IE. With only a little modification to your styles, you can output something really good.

    I’d be interested in you taking a look at Printtopdf and maybe post your comments about how to modify your print styles to get flawless PDF prints. If you’d like some feedback from my meagre attempts, give me a yell.

    Thanks for the great article!

  52. I was able to implement the print stylesheet in about 15 minutes. I’ve been wanting to do this for a long time, but the time it would have taken to learn enough php! Whew!

  53. I’m wondering if anyone has been experimenting with page-break-before or page-break-after. I’ve been working on a print style for a couple of MovableType sites and controlling page breaks in the monthly archives would be really helpful. So far I’ve not noticed any effect – are there any browsers that support this?

  54. Very useful article. I am new css and thus i require some help please. I have created 2 css. My question is, how do i call the printer friendly page from a link such as [view printer friendly page].

  55. You don’t, that’s the whole point 😉

    When the user prints the page, the printer-specific CSS gets applied to your web-page automatically by the (standards compliant) browser.

    If you’re desperate to have your own “Print this page” link, you can always use Print in place of the “Printer Friendly Page” link you had before.

  56. Not that long ago I was faced with the task of producing a lot of content for an intranet. The browser used was NN4.0 and I was told it “it has to print perfectly.” I kept trying to get my bosses to at least upgrade their browser but no. Nearly all the content ended up as .pdf (sob / scream in rage Delete where appropriate) How i wish my now former employers could see this article. Then again as they are still on NN4 I doubt they will.

    The bits about links were great. Now to do a print version of my own site.

    RobC

  57. I’m using a print.css on the site I develop for as well. It is an elegant and simple solution that made the printed page look far better than it had before. This article was great for some new ideas (like the link options mentioned), but didn’t mention something I had noticed on our site. Opera (Version 6.01, Build 1041, Platform Win32, System Windows 2000, Sun Java Runtime Environment 1.3) seems to read the styles from both a print and screen style sheet when printing. In this case, the style sheets are called in the HTML with

    The pages display just as expected on the screen, but when printing, both styles from insidepage.css and printss.css are used. This was easily fixed by using !important and styles in printss.css to overwrite where necessary. Unfortunately, we’ve run into a much harder problem to fix which I can detail in a separate post, but which would be fixed if Opera did not read insidepage.css when printing… Has nobody else experienced this? I would have expected to see it in the article if someone had.

  60. Hi All, I’ve got a query and wonder if any of you can help,

    I’ve got two images which I’ll call ImageA & ImageB.

    ImageA- I want to display on screen but not when printing.
    ImageB- I want to display when printing but not on screen.

    I’m using two style Sheets one for screen the other for printing but I can’t seem to display ImageB when I’m printing.

    Any suggestions are most welcome – Thanks!

  61. Thanks for your great articles — there’s so much fantastic stuff to read, I’m having a hard time getting through them (especially when IE keeps crashing, argh).

    Whenever I read stuff on style sheets, there’s the “make sure it works in old browsers that don’t support CSS” line. My question is, how do you make sure of this? I read that you can’t install older versions of IE because they stuff up the new ones. How do you get a hold of older browsers to check your sites for accessibility?

    Thanks a lot if anyone can help!

  62. Excellent article. As always, EMeyer blosters the confidence of designers using CSS. However, I have encountered something of a bug in IE6/Win. Possibily some one out there can help…

    Like the “Float Flub” mentioned for mozilla, this is appearing in IE/6 on long pages, but without the float anywhere to be found. I simply get the first page, followed by blank pages to the end of the print job.

    The base CSS was taken from bluerobot’s layout reservoir for three column layouts. Anyone experiencing similar issues in IE6/Win?

    Thanks,
    Tim

  63. Migs,

    Assuming that either a) your print stylesheet appears after the other, or b) your other stylesheet is not a media all then you should just be able to use body (or whatever) {
    background: blah blah;
    }

  64. Cheers Lachlan,

    I’m gonna give your suggestion a try. Thanks for your reply much appreciated.

    Migs

  65. Great article…I love using CSS…but I have run into a problemo.
    I would like to use CSS for printer friendly pages, but I have text boxes that contain information my users would like to print. Is there any way using CSS to capture the content in the text boxes and print them?

    I think I am resigned to using a combination of Java Script (w/printer friendly button) and CSS.

  67. OK. I know all the wonders you can do with CSS. ( I don’t fully know how to do them but I know they exist).
    This is my question. What happens if I as a regular user want to actually print the side bars?? for example : there’s a coupon ( from one of these ad companies that give random ads) on the left bar that I want to print ? or a phone-number or address from a business on the right bar?
    what if I WANT the whole page to be printed in the exact same way I see it on screen??
    Should I mix some JavaScript and some buttons and so I can give my user the options of
    1. print the article (then use print.css)
    2. print the whole page (use some other css suitable for print but that encloses every element on the page).
    3. buttons to print the left, right side bar???

    and then when they actually print the page get rid of the buttons using the

    tag that encloses them??

    As a developer I see the beneficial part of using CSS and not having to create a second version of the same page for printing purposes, but as a user I feel that somebody is TELLING me (not asking) what are the things I can and can’t print. Probably is just me. Don’t get me wrong I’m NOT against CSS, on the contrary I think is the best thing ever created for the web. Having a way to separate content from presentation is something that’s always welcome in my toolbox.
    I’m just talking options here, not technical matters, options on what to print, that’s all.
    fer

  68. re: Print Contents of a Text Box
    ———————————————————————————–
    Just define your input elements in the print.css without the borders (or with borders dotted to make them easy to see and differentiate) and then adjust the font size and appereance of those elements to something you’d like to see on paper.
    ie:
    input{
    border : thin dotted Black;
    color : Red;
    font : 12pt Arial, Helvetica, sans-serif;
    background : transparent;
    }

  69. Please help how to use JavaScript ‘print()’ method to let user print out my
    page while not print out the bottom line of my URL ?

    Thanks!

  70. Got some problems solved!
    I’m just experimenting with a redesign of my own page at http://www.xpw18.de – current efforts at http://www.xpw18.de/_demos/entwurf04/ – switching layout and markup to some style which is more simple and completely XHTML/CSS-based.
    Had problems with Mozilla getting page breaks done when printing. I don’t have floating ‘divs’ there so I wondered where the problem was rising from. Found out that ‘position:absolute;’ in a ‘div’ for the main content caused the problem. IE5.5 doesn’t matter, it gets the page breaks while printing.
    But there seems to be no possibility to get around the default printing margins the browser sets by itself. I know some people who set them to something about 2.5cm left and some 1.5cm top margin to get some comfortable space for older inkjet printers or for having the pages picked up in a folder.

  71. Thanks for the great article. But I have a problem, u may help solving it. When a line comes at the end of a page, the text is clipped; meaning part of the text in one page and the remainin part in hte next page!
    I am using IE6.
    I would appreciate anyone tries to help (via email is recommended).

  72. I was going blind with rage trying to figure out why my printing styles were doing wacky sheet and inheriting styles from other style sheets.

    The root of the problem:

    The solution:

  74. Hi,
    (this may not be the place to post this, and if it isn’t please forgive me ALA)

    I’d already started using print specific css before I read this (and Eric’s) great articles.
    I’ve got a situation which someone here might have come across and may be able to offer advice.
    I’m having to print a table generated from a database via php, the table is an unknown number of rows and each row is an unknown size.
    The current table prints over 15 pages (no problem getting to print multiple pages) but some of the page breaks cut in the middle of lines so the lines are illegible, and (this is really weird) the width of the table shrinks as you move through the pages!!

    I have a feeling that you can’t have a clean page break within a continious table, but if anybody has any suggestions (especially about the width thing) I would be most grateful.

  75. A post earlier by Peter Sheerin gave me the clue, I created another php output which formatted the document using

    tags instead of as a table.
    Then in the table version I used a which is called when someone presses print.

    Thanks Peter!

  76. Using Moz build 2002082306 to print the article seems to throw up very odd results for me. The font is a sans-serif and appears to be 14-16 point rather than 12??

    Anyone else having similar issues?

  77. div.nav {display: none;} does not work in IE6 on PC. Any ideas why? I need to get rid of the left nav so my copy doesn’t cutoff. Any suggestions are greatly appreciated. Thanks!

  78. Hi

    This must be so obvious that no-one mentions it …cos I can’t find help on it anywhere, but how do I print from a browser without the infernal windows header and footers appearing? I just want them to go

    please help…

  79. Why doesn’t the menu show up on the printable side (a good thing)? By what method is it hidden or omitted? Thanks!

  80. We are experienced web developers. It seems, unless you are using HTML, you could check your server CGI variables, see if the browser is print friendly, include the css print style. (If not, let them use the browser print and blame the browser for non-compliance!) Not supporting any browser over another here, but the standards should be supported by any major browser.

  81. Great article. Had experimented with this but now I can eliminate the print-friendly page.
    Anyone know when page-break-inside will be supported? Can’t find anything on this, although it’s in CSS2 it’s is not supported anywhere. Page-break-before and after seem to work.

  82. I am trying to use your example css on my company test site, but am having problems with the margin, the left margin in particular – it’s half-a-page wide, no matter which browser I print from, no matter what I set the margin percentage to, it just will not print to the left margin of the pager. Too weird. I ‘ve tested in IE6, Netscape7, Mozilla 1.1 and Opera 5 and 6. Then after that gets resolved there is the font size issue…

  83. My Printer wont print out!!!!1 the green light keeps flashin!!!!!!!!
    Ive changed the ink & its as defoult printer , Any ides Plz

  84. my printer wont print the green light keeps flashing green!!iv,e changed the ink & its as default printer . any ideas thankx

  85. I never realized that you CSS affects print quality so much.

    We were getting complaints from our client about the print versions of our pages.

    Until now we didnt know the cause.

    Please keep up the good work.

  86. So I’ve got the whole print css thing working, I can’t believe I never thought of this. 🙂 Now I know you can set the page to print landscape or portrait, but with the footer, is there a way to make sure that it is always a the bottom of a page that I print, even if there is a lot of blank whitespace?

  87. I tried my pages in print preview with IE6 and found that only the active tab’s content is displayed. I used javascript to change visibility / display of other content divs, but I have a print sheet:

    div.tabs{display:none;}
    html body div.content{display:block !important;visibility:visible !important;}
    #nav{display:none;}
    title{font:20px bold sans-serif}

    No problem in Moz: I see the page displayed in print preview just like I want to see it. I linked the stylesheed in the head of my document, like this:

    You can see just about any page on my site to experience this. Here’s one:
    http://dhtmlkitchen.com/dhtml/ui/tooltip/

  88. Great article! I used it to create print and screen stylesheets – great results. Question: when updates are made to some pages, I change the BGCOLOR to “highlight” them. How can I preserve that effect in the print version? I have tried BODY {
    font-size: 10pt;
    background: inherit;
    background-color: inherit;
    }
    but had no luck. Thanks!

  89. I am learning to use CSS as much as possible. I link a single CSS file to a site with a straight forward link to the pages within the site.

    Q. The CSS shown for printing pages give reference to page options which are already taken care of for the page ‘look’. How do I link to the print page CSS without affecting the main site/page CSS?

    Do you have a print button/text which is somehow linked to the print page CSS?

    Thank you for any help you may be able to offer

    Andy

  90. Awesome article! I have definate need of being able to print web pages from our intranet. I’m fairly new to CSS, so what is happening when you included “!important” in your float definition for #wrapper or #content? It’s not a comment (* , *), right?

    #wrapper, #content {
    width: auto;
    margin: 0 5%;
    padding: 0;
    border: 0;
    float: none !important;
    color: black;
    background: transparent none;
    }
    Help?

  92. A colleague has the problem of putting headers and footers on pages when printed out. I referrred him to this article, but that particular feature doesn’t seem to have been mentioned. I intend to dig into my css reference books, since css isn’t my main specialty, I thought I ask for pointers. Anyone?

  93. i use a xerox docuprint 4508. all the lights are flashing eg paper jammed. paper empty etc and it will not print. obviously the paper is not the problem yet this message flashes on screen also, printer out of paper, can some one advise… anne

  94. Im trying to print some white text on top of an image. The approach is a simple image, and a layer positioning the white text on top of the image.

    I have a stylesheet with a screen and print type, and i can see that the print version is used.

    However, no matter how i put it, once my text color reaches a certain “lightness”, it starts fading towards grey instead of white. Pure white will produce grey.

    If i make a pure green, it will print pure green. Taking that same color and adding a little red and blue into it will have it gradually fade to grey instead of white on print.

    Anyone have a solution to this?

  95. I recently replaced ink cartridges (on my Canon S750 printer) and I can no longer print e-mail. It will print when I highlight, “Copy” and “Paste” the subject onto “Write”. I was able to always print out e-mail or whatever from it’s original display prior to the ink replacement. What did I do wrong?
    Thanks for any help.

  96. Someone asked about !important. I hadn’t remembered seeing that before either. It is explained here: http://www.w3.org/TR/REC-CSS1#important

    Basically, if I understand it correctly, by adding !important to a style, that style is forced to take precedence even when another style may normally take precedence by default. So by adding !important to a style that is absolutely necessary (for printing in this case) we do not have to worry about it being overridden by, say, a style defined within the body of the doc. (Could this be a solution to a few problems some have mentioned here?)

    Btw, the above reference is only part of a section which explains how one style gets preference over another. The entire section 3 may be helpful to anyone that is not sure how this works.

    Hope this helps.

  97. Some have taken issue with the lack of a printer friendly link when utilizing this solution. Some workarounds have been addressed by others. If you must you can still create such a page, although I like the suggestion to use some very simple javascript to simply print the current page.

    However, in my experience, the average user often overlooks the printer friendly link and complains that pages do not print in such a way that they are readable, thereby negating the value of the option. This alleviates that problem by ensuring that all pages look as intended when printed, no matter the level of the user (which makes it the best solution in my view). And if you feel obligated to provide the link for the more knowledgable/ observant, then by all means do.

    Thank you ala for providing another great article (to bad I didn’t read it sooner). Even the least intelligent of visitors to my sites can get the intended results whenever I follow your excellent advice.

  98. This was a great article, as have been all the ones I’ve read here. But I still have a question about something that’s happening to a site I’m working on. If you go to this page http://www.sassllc.com/index.asp and do a Print Preview, it looks OK. But if you go to http://www.sassllc.com/FAQ.asp and do the same, the text gets squeezed to the left of the content box.

    Am I missing something really obvious?

    Thanks so much! (If there’s a more proper place for me to be asking this, please let me know and I will forthrightly comply!)

  99. Hi, im new at css and i need this. I want a print this button on my page so im gonna have that link to a new page and i wanna put in this code to make it printer ready.. Now if anyone has any better ideas i would like to know :). But i dont really understand this code, well some of it. Could someone, very simply, tell me exactly where i need to put everything and what i need to change. Thanks!

  100. Its me again, same guy as before. Ok say i already have a style sheet on my page, because i already do. This will still work with it right?? Another question is, does this only make the printed page come out different it doesnt make it on the net look different??? I need to know how to use this because im very new at css and this is complicated, ahhhhh. By the way, i want to also make a print this icon. How would i make that work so it automatically printed?

  101. Great article and making me change how our new site is formatted. However…
    Like someone else in this thread I have menus on the left and removing them with display: none just leaves a blank space with the content still shifted across the page.
    How do I get the content back to use the empty space to the left?

    Thanks in anticipation.

  102. I’ve used the similar
    http://alistapart.com/stories/alternate/
    alternate CSS to create a fixed point font size for printing. But both on that, and also your sample page, my IE6 continues to print as if the screen font is not changed. (NN6 is fine though). In other words, IE6 completely disregards the visible changes on the screen, although it DOES print out according to size if I use the mousewheel to resize the print.

    Is this a known Win IE6 problem? Is it my setup? Is there any way round it?

    Many thanks

    Tony

  103. I cannot get the display: none to work. I’m using IE 6.0 to view my pages. I see it working on the article’s page but it isn’t working on mine. Ugh!!!!

  106. Hi,

    First, thank you for a very good idea on print style sheets. I am a complete novice at this CSS thing so please be kind if the idea I’m about to suggest is flawed.

    I created a separate print style sheet as per the article and added it to my template with the following declaration:

    But I found that when I validated the CSS by URI it did so but the validator gave me warnings saying that I had several redefinitions in my CSS. Obviously the W3C validator reads both style sheets and adds them together, I don’t know. So I searched for a hack and couldn’t find anything until I came across the @ media tag.

    Within my style sheet (styles.css) I added the following:

    @media print {

    /* I then cut and pasted my print style sheet into this section */

    }

    It worked great and validated correctly, naturally that meant I could remove the line.

    So now I have a single style sheet that does two jobs. Some of you gurus may already know about this technique but I thought I’d share it anyway, plus someone may be able to develop it further.

    regards,

    Terry

  107. While I find the solution discussed in this article interesting, sometimes you want to offer visitors more than just the same page with different looks.

    Is it possible to instruct the web browser to choose a specific document when the user wants to print a page? Something like that basicallt says: “if the user wants to print this page, use the document resume.pdf”.

  108. This is a great article but I’m working with a site currently built with tables. Most of the code has worked (getting rid of graphics, changing fonts, etc.), but my text is being cut off by the right margin of the printed page. I’m not sure if this is b/c of tables or some other problem. The content is the center column of a three column table. Left and right columns are set to display:none. Any ideas?

  109. I printed this article in Safari 1.0 (v85) and the main content wrapped to a column only about 25% the width of the page. From IE, it looked fine. Is there a something in the CSS that can fix this? Or perhaps it’s a browser-bug?

Got something to say?

We have turned off comments, but you can see what folks had to say before we did so.

More from ALA