The biggest difference, the one that gets the most positive comment, is that Navigation does not print. Since you cannot click on a link on a piece of paper, that whole block disappears from the page, leaving more room for the #maincontent area that, presumably, people really wanted anyway.
This is a terrific example of targeting your styles to their expected media. We spend a lot of effort making our page easier to navigate online, by including things like title attributes to flash little tool-tip messages and so on, but this technology is lost on the printed page, too. You cannot "hover" your finger over a printed link and get a message saying where it goes.
So to restore some of that lost utility to the printed page, it was decided to echo the URL string on the printed page, just behind the linked text.
This:
<a href="newPage.html" title="Links to New Page">New Page</a>
Becomes:
...will take you to a New Page (newPage.html).
...when this page is printed.
But not everyone is happy with this implementation. Some people want to turn off links in some areas of the page, while others would prefer not to echo the URL at all--especially if it is a particularly long strong, common in database and eCommerce pages.
The CSS entry that controls this echo is in the print.css page, which is linked to from UCOMM in the head of every document. Since we cannot comment-out the rule on that page, we need to write a rule locally that un-do what it is doing.
Let's look at the print.css file, available at:
http://www.unl.edu/ucomm/templatedependents/templatecss/layouts/print.css
As you read this file, you are seeing only those rules that go into effect when the presentation media is a printer. We are looking for a rule dealing with links, or anchor tags, here.
There's one in the sixth line! But, as we read it, we see it just underlines the link text and removes any background attached to it. So, that's not our rule, and we'll have to find ours somewhere else in the page.
We are probably looking for either a Class rule, or an ID rule, or some kind of contextual rule. Since this URL will echo on the printed page for any link, we can probably discount Classes and ID s. Recall that Classes can be anything, and ID s are limited to just one per page. Since even a simple link with no Class or ID attributes at all will still echo the URL, we must be looking for a contextual rule because the effect works with every class and every ID and even in the case of links with neither a class nor an id.
As we remember from the Introduction to Cascading Stylesheets training, these are rules built with multiple selectors, separated not by commas, but by only spaces.
h1, h2, h3, h4, h5, h6 { color: Red; } will turn all headings Red.
h1 h2 h3 h4 h5 h6 { color: Red; } will only turn Red any H6 heading, but only if it follows an H5 heading, which follows an H4 heading, which follows an H3, an H2 and an H1 heading.
So we are definitely looking for one of these on our print.css page.
We find it, about three-quarters of the way down the page:
#maincontent a[href]:after {content: " (" attr(href) ") "; font-size: 90%; }
What this is saying is "Any time you find, within the main content area of the page, an anchor tag (a "Link") that includes an http-reference, place the content of that link after the Linked Text, displaying it at nine-tenths the size of the linked text.
Now, if this rule was on our local style sheet, we could just comment-out that rule, with /* and */ characters, and go on. But since it has been linked to the page and already been read by our browser, we have to un-do it, somehow.
We can do that by writing our own page rule having to do with printed media, using the @media. If you already have a local or page style sheet atop your page, you can include this rule there, otherwise, include everything here, including the <style> tags, in the head of your document.
<style type="text/css">
@media print {
#maincontent a[href]:after { display: none }
}
</style>
Again, if you already have page styles in effect, just copy lines 2, 3 and 4, above and place them before the </style tag in your page. Otherwise, copy all five lines.
Now, this rule is a little trickier than most typical CSS rules. For one thing, the whole package is contained within the @media rule's own curly brackets. This rule will only go into effect if the media used is identified as a printer. Remember, the information is already at the browser that it should display the destination after the linked text at 90% of regular size and within parenthesis. We had to find a way to turn that off, and the simplest way is using the display: none; property-value pair.
So now, your browser downloads the print style sheet, with its instruction to echo the link, and then it reads your page style instruction which says "No matter what you may have read or heard elsewhere, on this page, if you are printing, and you encounter an anchor tag within the #maincontent area, do not echo the link destination after the linked text".
Since all of our anchor tags are within the #maincontent area, that's all of our links.
If you need to turn off echoing to just certain links, create a class in your page style.
<style type="text/css">
@media print {
#maincontent a.classname[href]:after { display: none }
}
</style>
Remember that whatever class you assign to .classname, it needs to appear within your link as a class attribute, now.
<style type="text/css">
@media print {
#maincontent a.noprint[href]:after { display: none }
}
</style>
<a href="newpage.html" class="noprint" title="Links to new page">New Page</a>.
The result of all of this is a link that prints, but without echoing out the destination URL.
No comments:
Post a Comment