Stylesheets for Print and Handheld

blog
21

Great Tip, Thanks!

22

One way which i use, is to have a second class called ā€œdontprintā€, then in my print.css:

.dontprint { display:none; }

So in all my divs which i want to hide, have a second class.

e.g.

div class=ā€œlogo dontprintā€/div

23

Completely unrelated, but I gotta askā€¦ did you self-author your Google widget, or did someone else make it for you, or did you use the submission tool for URLs?

24

Very nice, though I donā€™t think Iā€™ll be browsing CodingHorror on my phone. Thereā€™s a lot of data to download for the front page thatā€™s just taken up by past stories Iā€™m not interested in.

25

Jeff, have you considered excluding comments from print?

26

Second the post about Opera. So, letā€™s see, you could download a free browser to test this out on mobile devices, or you could do the Microsoft way:

If youā€™re wondering what your website looks like on a mobile device, wonder no longer. Try it yourself and see. The Windows SmartPhone / PocketPC emulator was surprisingly easy to get up and running. Hereā€™s what youā€™ll need:

* A clean Windows XP SP2 virtual machine
* The latest version of ActiveSync.
* Standalone Device Emulator with Windows Mobile OS Images (download both items listed here)
* Virtual Machine Network Driver for Microsoft Device Emulator

Once youā€™ve downloaded it all, install it in this order:

  1. Install ActiveSync
  2. Unzip and install V1Emulator (standalone_emulator_V1.exe)
  3. Install the Virtual Network Driver (netsvwrap.msi)
  4. Install the Emulator Images for Windows Mobile 5.0 (efp.msi)

Yeah. Thatā€™s easier. Try looking out your window once in a while.

27

have you considered excluding comments from print?

I have, but sometimes the discussion in the comments adds significantly to the entry.

I figure if you want the main article only, you can limit the printout to the first 1 or 2 pages.

letā€™s see, you could download a free browser to test this out on mobile devices, or you could do the Microsoft way

Sure, use whatever you want. I personally feel that the best way to test is actually on a mobile device (of whatever kind), and the cheapest way to do that is through an emulator.

28

You could use something like:

.blogbody {page-break-after: always;}

That way comments would always start on a new page.

29

Nathan, great tip! I implemented that on the print stylesheet, and it works a treat.

30

Ok. thx for nice tutorā€¦

31

Thanks for the tip - will try it out NOW

32

thanks for the tip! just finished setting up mine ā€¦ itā€™s not perfect ā€¦ but it does the job

Thanks again

33

I wouldnā€™t expect great results from the mobile stylesheet. Many phones, even though they support CSS, wonā€™t import an external CSS file (Iā€™m looking at you, Nokia).

34

I tend to prefer a single style sheet over a few (as with separate print stlye sheets). A minimal style sheet for printing can then be achieved even easier [1].

[1] http://meiert.com/en/blog/20070221/print-style-sheets-the-basics-for-no-excuses/

35

Thank you very much for the code! Iā€™ve had the code for creating a printer specific CSS and I absolutely love it (I really like being able to make a page that looks great both on the screen and when printed in hard copy). I had no idea the very same code could be used (with a few modifications) to create a page for mobile phones. Iā€™ve never really thought about formatting any of my pages for mobile phones before, but it makes sense. With all of the new phones out there adding more and more web functions and with the internet packages becoming cheaper, more people will be using their phones to surf the net. If you have FireFox, they have some very nice add on packages that let you very quickly and easily change the page to display a site like it would appear on a mobile phone. I downloaded one just for fun, and youā€™d be amazed at how many sites donā€™t load on phones.

36

Thanks for this great post, Iā€™ll use it!

37

Perfect! Today I had to do a printer friendly version of several pages. Luckily I came upon this article. I always wondered how this was done. Adding to my toolbox. Nice stuff!

Thanks!!

39

Wow, how sad is it that Iā€™m a web developer and didnā€™t know about this. This is going to save me a lot of time over the next few months!

40

Great, guy!

Congrats!

41

Iā€™ve recently taken the alternate style sheet switcher from A List Apart, at http://www.alistapart.com/articles/alternate/ and modified it to be used with the media attribute instead of the title attribute. Iā€™m working on a website, and at the moment I have 3 links on the page, one to switch to each set of stylesheets. No page reload, no PHP detection of which stylesheet to pass, just a tiny bit of javascript to switch between different media sets. My main purpose for now is debugging without actually constantly opening up a Mobile emulator or Print Preview, but I also plan on using it to create a printer-friendly link, for users who assume that what they see is whatā€™s actually going to be printed.