Forum Moderators: not2easy

Message Too Old, No Replies

CSS for print friendly pages?

         

annej

3:18 am on Jan 18, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I understand there is a way to do a print friendly page with CSS without needing a separate URL. Where can I find information on how to do this?

lavazza

3:42 am on Jan 18, 2008 (gmt 0)

10+ Year Member




Re "without needing a separate URL", I assume you mean NOT using
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print">

w3schools.com CSS2 Media Types [w3schools.com] shows how to apply @media rules (e.g. @media print) in 'Internal Style Sheets'

coopster

3:43 am on Jan 18, 2008 (gmt 0)

WebmasterWorld Administrator 10+ Year Member



You send a print Media [w3.org] type stylesheet. Load your page with one stylesheet for display, but offer another stylesheet for print.

<added>
>> separate url

I thought perhaps annej was alluding to a completely different url such as ...

http://www.example.com/myarticle-printerfriendly.htm when the original was 
http://www.example.com/myarticle.htm

</added>

annej

9:25 pm on Jan 18, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



This is just the information I need. Thanks!

swa66

3:08 am on Jan 20, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You can actually add something like


@media print {
h1 {padding: 0;}
.search, .interactive, #menu {display:none;}
}

To you regular external css, no need for multiple files (and multiple hits), nor a need to put it inside the (x)html file.

Xapti

7:31 am on Jan 20, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I think they meant actually not having to use different HTML (as well as CSS), Since you do see it quite often, where websites do the "see printer-friendly version" thing. Anyways, problem addressed easily.