Trying to not print hrefs

[Erin Paseka]

Does anybody know a good way to override the browser feature that spells out hrefs (URLs and mailtos) when users print a web page? It's an issue in Firefox and Opera but not IE 7, oddly enough.

I have some pages that need to be printer-friendly. On these pages, having the full href on the printed page is not a significant benefit to the user and it's often redundant and ugly ("whoever@unl.edu (mailto:whoever@unl.edu)"). The printed hrefs are breaking my layout because they're longer than the text of the link on the screen, with no spaces they don't wrap, and their containers often expand to accommodate them.

So far the best I've come up with is to use CSS and do something like this:

Code: Select all

.url_screen { display:inline; }
.url_print { display:none; }
@media print {
   .url_screen { display:none; }
   .url_print { display:inline; }
}

<a class="url_screen" href="http://psycweb.unl.edu/psypage/dynamic.asp?dir=grad&amp;page=overview.htm">Psychology</a>
<span class="url_print">Psychology</span>

That seems to work, printing as "Psychology" rather than "Psychology (http://psycweb.unl.edu/psypage/dynamic. ... erview.htm)", but there's got to be a better way.

[alvin_woon]

The href printing is a feature, not a bug. But IE does not recognize [] selector so this css rule in print.css does not work for it.

Code: Select all

 #maincontent a[href]:after {
            content: " (" attr(href) ") ";
            font-size: 90%;}

You can overwrite the rule by putting this code in your @media print

Code: Select all

 #maincontent a[href]:after {
            content: "."!important;}

let me know if that doesnt work. I am assuming it's ok to overwrite the print style sheet under such circumstances. Consult with Bob or the QA group on the validity of this overwrite hack.

[Erin Paseka]

Hey, that works perfectly! O great and powerful QA reps, am I actually allowed to override the template in this manner? At least for special pages?

I'd assumed this was an overly helpful feature of Firefox; I hadn't imagined that it might be part of the template.

[saltybeagle]

The printed href locations just provide a context for printed documents so users understand where a link would have taken them if they were browsing that page.

O great and powerful QA reps, am I actually allowed to override the template in this manner? At least for special pages?

I'm not great nor powerful, but... I think the QA people worked out a bit of language for the stylesheet override rule... 'no unnecessary overrides of the default css.' I wouldn't disagree with what you're doing in this case. An example Stephen Panarelli brought up was cell padding for html tables with tabular data - without specifying some padding, the content just runs together. In some situations, using css is essential, but what I think the QA team is watching for is overriding expected presentation or functionality of a template page.