HTML and CSS Reference
In-Depth Information
<style type="text/css">
#bodycontent a span {
display:none;
}
@media print {
#bodycontent a span {
display:inline;
}
}
</style>
You can see the result in Figure 13-4.
Figure 13-4. The top part shows the screen rendering; the bottom shows the content revealed for
the printout.
This is a fairly simple script to address the issue, but it works. However, you can do a lot
better than this. When looking at a block of content, a long URL directly after the text can
make it a little difficult to read, regardless of the benefit offered by having the reference there.
Wouldn't it be great if you could simply create a footnote from each link and just place a num-
ber after the link that references the footnote link? Well, you can thank Aaron Gustafson for
devising a JavaScript technique that does just that, all ready for you to download and imple-
ment ( http://alistapart.textdrive.com/articles/improvingprint ).
Selective Printing Using the DOM and CSS
One final advanced technique that you might like to consider is mixing together DOM script-
ing and CSS to create specific printable areas of a page. An example of how this works is a FAQ
page that contains many blocks of content. You might want to print only one section of that
page; by using JavaScript you can dynamically toggle display attributes of different sections so
that only the part you want printed is shown—but without affecting the screen view.
This is a fairly involved technique, which is covered thoroughly (a chapter in its own right!)
in Web Standards Creativity by Cameron Adams et al. (friends of ED, February 2007), although
you can also read about the technique online on my personal blog ( http://lloydi.com/blog/
2006/03/21/how-to-print-selective-sections-of-a-web-page-using-css-and-dom-scripting-2/ ).
Search WWH ::




Custom Search