Re: [WSG] Print style sheet
On 17 February 2010 03:42, c...@fagandesign.com.au wrote:
Hi all,
Just wondering about best practice, accessibility and practical
implementation of a print stylesheet.
I have been asked to place a different header image in my HTML templates
specifically for print (only shows when printed and replaces usual header).
I would like to know if this is deemed acceptable use of CSSAND if a
hard-coded image has to be downloaded on page load or page print??
eg.
div id=print-header style=display:none;
img src=img/elements/print-header.jpg alt=blah blah width=600
height=254 /
/div
div id=header
img src=img/elements/normal-header.jpg alt=blah blah width=800
height=300 /
/div
!-- PRINT STYLESHEET --
.print-header {display:block!important}
This duplication of content is unnecessary and would be rather
difficult to maintain in the long term.
.The issue has been dealt with in http://www.w3.org/TR/CSS2/media.html..
Use one element id in a document for one element e.g.
div id=header
and then define it differently for different media as per examples in
that link.n
@media print {
#header { font-size: 10pt }
}
@media screen {
#header { font-size: 13px }
}
@media screen, print {
#header { line-height: 1.2 }
}
This method achieves independence of data (web page content) from
design/style (whether it is screen, print or other media type).
HTH
Lesley
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
RE: [WSG] Print style sheet [SEC=UNCLASSIFIED]
You seem to be on the right track, Oliver.
Matthew's response regarding targeting media types is also helpful. One of the
implementations I've used before is described below.
Note that:
- The print-only version of the logo is the near-last element in the page. I
assume that someone will read all (or most) of the document before printing,
giving the browser time to download the print-only [hidden] inline image.
- Both images are requested at page load, not at page print
- Background image printing is unlikely to be enabled by default on a user's
browser, hence the use of inline images
- When printing, the screen version of the logo is entirely hidden, and the
print logo is positioned absolutely on the top left of the page.
- ContentWrapper is given a top margin related to the height of the printable
logo (preventing nasty overlaps)
- Both images are downloaded in the same page request.
- I do not regard this as a duplication of content - a print-optimised version
of a logo may have very different requirements from a screen-optimised version
of a logo.
- Similar approaches should work for other @media types
- CSS-less browsers will expose both versions of the logo - one at the top of
the page, one at the bottom (not a deal breaker, IMO).
Markup:
==
html
head
...
link type=text/css rel=stylesheet media=print href=print.css/
link type=text/css rel=stylesheet media=screen href=screen.css/
/head
...
img id=headerLogo ... /
div id=contentWrapper
...
/div
...
img id=printLogo height=80px width=120px .../
...
/body
/html
print.css
==
...
#printLogo {
position: absolute;
left: 0;
top: 0;
}
#headerLogo {
display: none;
}
screen.css
==
...
#printLogo {
display:none;
}
#contentWrapper {
margin-top: 80px;
}
Good luck!
- Gordon
I have been asked to place a different header image in my HTML templates
specifically for print (only shows when printed and replaces usual header).
I would like to know if this is deemed acceptable use of CSSAND if a
hard-coded image has to be downloaded on page load or page print??
eg.
div id=print-header style=display:none;
img src=img/elements/print-header.jpg alt=blah blah width=600
height=254 /
/div
div id=header
img src=img/elements/normal-header.jpg alt=blah blah width=800
height=300 /
/div
!-- PRINT STYLESHEET --
.print-header {display:block!important}
This duplication of content is unnecessary and would be rather
difficult to maintain in the long term.
.The issue has been dealt with in http://www.w3.org/TR/CSS2/media.html..
Use one element id in a document for one element e.g.
div id=header
and then define it differently for different media as per examples in
that link.n
@media print {
#header { font-size: 10pt }
}
@media screen {
#header { font-size: 13px }
}
@media screen, print {
#header { line-height: 1.2 }
}
This method achieves independence of data (web page content) from
design/style (whether it is screen, print or other media type).
HTH
Lesley
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Finance Australian Business Number (ABN): 61 970 632 495
Finance Web Site: www.finance.gov.au
IMPORTANT:
This transmission is intended only for the use of the addressee and may contain
confidential or legally privileged information. If you are not the intended
recipient, you are notified that any use or dissemination of this communication
is strictly prohibited.
If you have received this transmission in error, please notify us immediately
by telephone on 61-2-6215- and delete all copies of this transmission
together with any attachments.
If responding to this email, please send to the appropriate person using the
suffix .gov.au.
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] Print Style Sheet Inconsistencies
Patrick H. Lauke wrote: Chris Stratford wrote: 1) Printing IGNORES all background attributes... This is understandable - but I didn't realise this until just now... So my LI background elements weren't printing (or showing in Print Preview which is how I check what it looks like) A small consolation: you can set your browser to print background colours and images. But yes, out of the box, these will indeed not be printed. 2) FireFox Ignores Custom LI background elements (the proper method with: list-style-image: url(../media/ul_li_point.gif); - not using a background image) This is very annoying, because basically if you want to include the custom element in a print now - I need to put the image inside the li... This must be a bug or a mistake on Moz's behalf?? IE will print the background LI element - which is good! I think that is the way it should be? Or is there a reason why Moz has done this? This is only a stricter enforcement of 1). It's a bit schizophrenic of IE to give users the option not to print background colours and images, but then happily still doing it for things like LI. In my mind FF is correct here. I dont know if I explained it correctly - or if you understoood what I meant. But the problem I am having is the LIST BULLET are printing in IE, but not FF... Why wouldn't FF print List Bullets? I believe that the bullets are crucial to the operation of ULs... I may aswell use a p tag with some br /s. Anyone else have anything to say on the topic? -- Chris Stratford [EMAIL PROTECTED] http://www.neester.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Print Style Sheet Inconsistencies
From: Chris Stratford I dont know if I explained it correctly - or if you understoood what I meant. But the problem I am having is the LIST BULLET are printing in IE, but not FF... Ah ok, I thought you had used trickery with background images. Fair enough, it looks like a wrong-ish interpretation on FF's part (by the look of it, it just ignores *any* images set via CSS). Why wouldn't FF print List Bullets? I believe that the bullets are crucial to the operation of ULs... I may aswell use a p tag with some br /s. To work around it at the moment, may be worth doing a separate print stylesheet which reverts to normal default bullets rather than list style images. Patrick Patrick H. Lauke Webmaster / University of Salford http://www.salford.ac.uk ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Print Style Sheet Inconsistencies
Hey List, I am trying to develop a website at the moment and I want to have a great stylesheet for printing as well as a great layout sheet... http://inspiro.neester.com A problem I had was with LI images - I had 2 main issues here: 1) Printing IGNORES all background attributes... This is understandable - but I didn't realise this until just now... So my LI background elements weren't printing (or showing in Print Preview which is how I check what it looks like) 2) FireFox Ignores Custom LI background elements (the proper method with: list-style-image: url(../media/ul_li_point.gif); - not using a background image) This is very annoying, because basically if you want to include the custom element in a print now - I need to put the image inside the li... This must be a bug or a mistake on Moz's behalf?? IE will print the background LI element - which is good! I think that is the way it should be? Or is there a reason why Moz has done this? Cheers List! Chris Stratford [EMAIL PROTECTED] http://www.neester.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Print Style Sheet Inconsistencies
Chris Stratford wrote: 1) Printing IGNORES all background attributes... This is understandable - but I didn't realise this until just now... So my LI background elements weren't printing (or showing in Print Preview which is how I check what it looks like) A small consolation: you can set your browser to print background colours and images. But yes, out of the box, these will indeed not be printed. 2) FireFox Ignores Custom LI background elements (the proper method with: list-style-image: url(../media/ul_li_point.gif); - not using a background image) This is very annoying, because basically if you want to include the custom element in a print now - I need to put the image inside the li... This must be a bug or a mistake on Moz's behalf?? IE will print the background LI element - which is good! I think that is the way it should be? Or is there a reason why Moz has done this? This is only a stricter enforcement of 1). It's a bit schizophrenic of IE to give users the option not to print background colours and images, but then happily still doing it for things like LI. In my mind FF is correct here. -- Patrick H. Lauke _ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] print style sheet question
Is there a way to make a check box and radio button print with an empty box instead of
a filled, black box?
Here's a page with an example:
http://v4.csatravelprotection.com/csa/packinglist.do
I tried adding this to the print style sheet
checkbox {background-color:#fff !important;}
but it didn't seem to help.
Thanks
**
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
