HTML and CSS Reference
In-Depth Information
Getting Feedback About Your “Funny Printouts”
Despite all your hard work, someone is bound to ask, “Why does your page not print out
properly?” Many users expect that what they see on screen will be replicated in the printout.
Remember that you can use print CSS itself to address the issue (e.g., perhaps a block of text
that reads “This page has been crafted for perfect printing...” that is hidden on screen but set
as
display:block
for the printed version).
An alternative method is to use generated content using the
:after
pseudo-attribute,
which is covered in Chapter 3 and Appendix A. However, as previously mentioned, the support
for this is still not there (keep in mind that IE 7 and earlier do not support this feature).
Advanced Print CSS Techniques
Hiding and showing or restyling content dependent on the medium is fairly straightforward
stuff once you've grasped the basics. In this section, we'll examine some more advanced fea-
tures that introduce some extra dynamics into the usually static world of print. This is where
browser support can get a little flakier, though, so be sure to treat these as “nice-to-haves”
rather than as essential features that must be available to all browsers.
Inserting URLS in Printed Pages
The great thing about reading a web page with links is that when you see an underlined
phrase you can click on that link and immediately investigate another avenue. With that page
printed out, you have no way of following that link, so you have a couple of choices:
•
Suppress the underline (or any other link styling, such as bold text) for print so that it
doesn't get in the way needlessly; there's no point signifying a link that can't be followed.
•
Choose the opposite route—instead of hiding the link styling, expand on it and dynam-
ically create a printed version of the web address (whatever is in that link's
href
attribute).
The latter is definitely doable, but it requires some slightly advanced CSS (not supported
by IE 7 or earlier) or a JavaScript solution.
Using Generated Content to Write Out the URL
Here is the basic CSS that does the job of writing out links on the page (be sure to add this
only
to the print CSS file):
a:after {
content: " (" attr(href) ") ";
}
This code tells the browser to get the value of an attribute (the
href
attribute, as detailed
in the parentheses) and then place that value in a string that begins and ends with parenthe-
ses. If you are familiar with JavaScript, it's equivalent to
" (" + this.getAttribute('href') + ")"
but there is no concatenation symbol such as
+
or
&
. In this example HTML:
