Stylesheets for Print and Handheld

blog
1

A commenter recently noted that it was difficult to print the Programmer's Bill of Rights post. And he's right. It's high time I set up a print stylesheet for this website. I added the following link tag to the page header:

This is a companion discussion topic for the original blog entry at: http://www.codinghorror.com/blog/2007/01/stylesheets-for-print-and-handheld.html
2

It is also possible to see what a website will look like on a handheld device using the “small screen” feature of the Opera browser ( see http://www.opera.com/products/mobile/smallscreen/ ).

Also, the one liner examples appear incorectly in internet explorer (ie adds a vertical scrolling bar). Looks fine in Opera though.

Great site, by the way :slight_smile:
Keep up the good work.

3

Is there any way to form a URL that views these styles without actually invoking Print Preview or using the mobile emulator?

4

In Firefox you can use the Web Developer extension to switch stylesheets. However, I have found that it produces kinda weird results… it doesn’t use the right font, for example.

5

Thanks for doing a post on this. It’s an important topic which I need to look into.

6

Openwave also has a Developer’s Network, including SDKs and also, a phone simulator with browser (http://developer.openwave.com/dvl/)

7

Also, once you have your nice print css set up, a nice touch is to have a printer icon link like so:

a href="javascript:window.print();"print/a

Some more neat tricks for print css here: http://haacked.com/archive/2006/03/09/ImplementingCSSBasedPrinting.aspx

8

In my (limited) experience, for print you’re better off defining your width in ‘physical’ units - like inches or centimeters. And leave enough lee-way for different browser’s default margins. I’ve had problems with 100% divs printing with the right part of the text ‘eaten’ by the margin.

9

Nice, printed that very bill myself not long ago :wink:
For the print you might consider serif fonts though.

10

This page looks broken in IE

11

So how do you set/change the font size for print? Some of the time I will need large print, other times not, so it would be useful to be able to do this flexibly. Thank you.

12

You can also get device simulators for the BlackBerry:
http://na.blackberry.com/eng/developers/downloads/simulators.jsp

13

I was slashdotted once and installed an austere style to reduce bandwidth load. I found it was a much better site for Treos after that. And in some ways, it was a much better site in general :slight_smile:

14

Ole, did the style sheet really affect how browsers downloaded your page? I was always under the impression that the style sheet was basically applied after the rest of the page was downloaded (otherwise how would it know the element ids and classes?)

Reed

15

Reed:

I believe, that since the CSS is loaded in the head of the HTML, it is then loaded into memory. There it is referenced by the HTML when the page loads, producing the visual effects specified.

16

Mobile style sheets are great when they work, however you still run into issues where mobile devices don’t handle them properly.

I was building a mobile style sheet of a website that needed to be viewed primarily on Blackberries. Turns out I had to create a different set of pages because the Blackberry supported handheld style sheets, but didn’t know how to handle the display: none; which is really the most important part.

I hope they fixed this now so I can go back to just using the good CSS to make the web mobile friendly.

Also, a neat trick for print style sheets is to include a high res graphic for the print header. You can hide it in the default screen style sheet, but display it in the print style sheet.

17

Aren’t those Blackjack’s great? I have one for myself, and I love it.

18

This page looks broken in IE

It’s not specific to IE. I just made the PRE element too large. I cut it in half.

19

A sort-of related issue: the font on your page looks like crap with ClearType turned off. Maybe you could create a CSS sheet for those of us who prefer not to anti-alias smaller text.

Could I have a different font set than everybody else?

20

Dan, I used to resist ClearType too. But then I gave up, because it’s inevitable:

http://www.codinghorror.com/blog/archives/000651.html

I do find that as LCDs get cheaper/larger, ClearType is more effective because the “pixels” are smaller and less noticeable.