Double Vision – Give the Browsers CSS They Can Digest - The print style sheet
(Page 8 of 8 )
The multi column layout of the screen does not make much sense on a printout, since all but the first page would have a useless gap on the right. That’s why we keep the TOC inline, and only define the colors, sizes and typefaces. Furthermore, we get rid of all backgrounds and knickknack to make the printout as small as possible.
Once again, the “back to table of contents” links become useless.
p.backlink{
display:none;
}
This is as far as it goes for MSIE and other CSS2 challenged browsers. For the rest, however, we can do a lot more.
First of all, we don’t want to have paragraphs with margins in between them, but text indentation for those that follow other paragraphs:
html>body #content p+p{
margin:0;
padding:0;
text-indent:2em;
}
For our footer, we need to overrule this setting, otherwise it’d be squashed against the text.
html>body #content p+p#footer{
margin-top:1em;
padding:2px 1em;
border-top:1px solid #000;
background:#ccc;
text-indent:0;
text-align:left;
}
When printing out online texts it is rather annoying that you cannot see the destination to which inline links point. You’d need to go back to the online version of the article to follow these links. Clever webzine content management systems overcome this problem by providing a list of links at the end of the article. With CSS2, we can work around the link problem by re-using the href attribute of inline links and display it after them:
#content a:after, #footer a:after{
content: " (URL:" attr(href) ")";
background:#ddd;
}
This generates a message with the location of the linked document after each link in the content and the footer. For the TOC, we need to overrule this setting, as we don’t want these links to be displayed:
#toc a:after{
content:'';
color:#000;
}
That’s all. Our article style sheet applies itself to all the browsers that can show the “special effects” and only send easily digestible CSS to the others. The final article style (http://icant.co.uk/forreview/generating.html) is easy to read and print.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
