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.
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.
G. I.
…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.
Kim Mihaly
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 !
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.
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.
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:
Content is king.
Navigation, hyperlinks, buttons, and other ‘online’ gewgaws are not.
Generally, if someone prints a page, it’s because the page has important content, not clever navigation, or excellent button design, or something else.
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 …
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.
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.
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.
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.
Michel Scriban
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
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.
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.
38 Reader Comments
Back to the ArticleJohn Lascurettes
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.
Tony O
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’.
G. I.
…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.
Dave Price
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
Kim Mihaly
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 !
Eugene Kravtsov
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.
Joseph P. Dempsey, Sr.
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.
Kurtis Kroon
At first, I was going to ask something simple:
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:
They allowed the print styles to stay “as is”.
Niek Emmen
“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…
Tony O
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.
Aaron Martone
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.
Michael Mueller
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.
Henk Jan Bouwmeester
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.
Graham Chetwynd-Morsley
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?
Michel Scriban
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
adjava john
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.
Termin Erinnerung
Hi! Thank you for these valuable informations…
Greetings from Germany
Sam.
Jonathan Landrum
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.