css print styles

[Tim W]

I am looking at a css labelled 'HTML5 Boilerplate styles - h5bp.com
(generated via initializr.com' There is a section headed 'Print styles'
beginning '@media print {'. istm it is making a bit of a mess of
printing my pages. In particular

a[href]:after {
content: " (" attr(href) ")";
}

prints the full url of every link including the internal menu links and
all the text is made black.

I know I can edit the css how I want but before I do are there
conventions in print styles? Are there rules I should retain for a
reason? Do users expect any particular changes when printing? Or shall I
just do my own thing with it and make a guess at what someone might need
on a printed page? ATM for instance the nav takes up half the first side
of A4 with each item written out in full. I am thinking I might just
remove the nav altogether from the printed page.

tim W

 

[Jukka K. Korpela]

I am looking at a css labelled 'HTML5 Boilerplate styles - h5bp.com

HTML5 Boilerplate can be a good tool for experienced authors and
developers, but it has pitfalls and risks when people use it without
understanding and revising the details. Much like FrontPage once was.

(generated via initializr.com' There is a section headed 'Print styles'
beginning '@media print {'. istm it is making a bit of a mess of
printing my pages. In particular

a[href]:after {
content: " (" attr(href) ")";
}

prints the full url of every link including the internal menu links and
all the text is made black.

Making all text black is generally a good idea in a print style sheet,
since you should expect the page to be printed on a grayscale printer.
Black is better than various shades of gray, as a rule.

Putting URLs after links is much more questionable, and a poor idea in a
general-purpose boilerplate. The general principle is that the URL of
the *page* should be present in print copies (and the browser should
normally take care of this), so that the user can access the page
online, and then any links there.

HTML5 Boilerplate explicitly makes links underlined in print.
Underlining is the default, but I think they expect authors to remove
underlining in their style sheets, as they often do. This is rather
paradoxical: why remove to visual clue of linkness on screen where links
can be clicked on, but retain it in print copies, where no clicking will
work?

One might ask whether it is necessary at all to have any special
rendering for links in print media. The answer is absolutely "it
depends". Many page look too foolish if links appear as normal text. And
I don't mean just silly links like "here" or "click here".

One possibility is to include an arrow symbol before a link, with
something like the following (in a print style sheet):

a { color: black; background: white; text-decoration: none }
a:before { content: "\2192" }

(Caveat: If you use the Calibri font, you have a problem with the arrow:
it looks awful. There's a partial @font-face fix to this.)

I know I can edit the css how I want but before I do are there
conventions in print styles?

Not really. Authors mostly don't care about them. Developers care even
less, I'm afraid.

Do users expect any particular changes when printing?

No, but making suitable changes is a good idea anyway.

Or shall I
just do my own thing with it and make a guess at what someone might need
on a printed page?
Yep.

ATM for instance the nav takes up half the first side
of A4 with each item written out in full. I am thinking I might just
remove the nav altogether from the printed page.

Right. A printed page needs a header that identifies what the page is,
like site logo or name and a page heading, little less.

 

[dorayme]

HTML5 Boilerplate explicitly makes links underlined in print.
Underlining is the default, but I think they expect authors to remove
underlining in their style sheets, as they often do. This is rather
paradoxical: why remove to visual clue of linkness on screen where links
can be clicked on, but retain it in print copies, where no clicking will
work?

Perhaps a little paradoxical, but maybe there is some reasoning behind
it? Obviously, retaining it in print form lets the reader know where
the links are (though perhaps there can be confusion when non-links
are underlined for other emphasise purpose). In print form, in
greyscale, there is no other natural clue as on screen, no hand cursor
to test for when the reader smells a clue...

 

[Jukka K. Korpela]

Perhaps a little paradoxical, but maybe there is some reasoning behind
it?

Surely. HTML5 Boilerplate has a lot of reasoning behind it, but some
parts are questionable. Showing the URLs is. Underlining links is more
debatable.

Obviously, retaining it in print form lets the reader know where
the links are (though perhaps there can be confusion when non-links
are underlined for other emphasise purpose). In print form, in
greyscale, there is no other natural clue as on screen, no hand cursor
to test for when the reader smells a clue...

Well, you could use gray color. But the question: do you need to know
what texts are links, when reading a print copy? Isn't it rather
disturbing, really? What would you do with the information?

Sometimes you might think that a link looks interesting and decide to
follow the link when you view the page online. Well, mostly you would
just forget to do that.

I'm not saying that link indicators are always useless or worse on
printed pages. But I think that we should normally expect that links can
appear as normal text in print copies. (If the text is not useful, then
you should perhaps omit the link entirely on printing - I'm mainly
thinking of navigational links.)

Let's call this unobtrusive linking. You write some text, make sure that
it makes sense as it is, then possibly turn some pieces of text into
links. So you could write "During my visit to Portugal, I..." and then
turn "my visit to Portugal" to a link, if you have something to link to.
Alternatively, and often better, you would leave the text as is but
append e.g. at the end of a paragraph a sentence like "There is a more
detail description of this in my trip report", making "trip report" a link.

Now look, you made me started on this, and made me think that this whole
linking thing needs to reconsidered. There has a been a lot of talk and
proposals on indicating "link types", aimed at telling what a link
points to or what its role is. But the real, safe, reasonable approach
is that your text should tell that, in prose. Maybe we can some day use
rel=... attributes that are relevant to search engines and friends. But
we need write link texts and their textual context so that *people*
understand what relevance of a link is.

And if we do so, we can have link texts as normal text in print media,
though we *could* give hint (with an arrow, an asterisk, or some other
hint that suggests a link but does not mess up typography).

 

[dorayme]

Now look, you made me started on this, and made me think that this whole
linking thing needs to reconsidered. There has a been a lot of talk and
proposals on indicating "link types", aimed at telling what a link
points to or what its role is. But the real, safe, reasonable approach
is that your text should tell that, in prose. Maybe we can some day use
rel=... attributes that are relevant to search engines and friends. But
we need write link texts and their textual context so that *people*
understand what relevance of a link is.

And if we do so, we can have link texts as normal text in print media,
though we *could* give hint (with an arrow, an asterisk, or some other
hint that suggests a link but does not mess up typography).

There is probably no one size fits all in this business of how to go
about representing links. Some webpages seem unlikely to be much use
when printed, they seem to be springboards to so many other and
diverse sites and pages.

Of course, strictly, you could say, when printed their use would be as
an index to further printed pages. And if the links on the page
pointed to a nicely defined set of small other pages, maybe a print
version might be useful.

But the reality of so many web pages is that they are not for the
print medium and it would be a lot of trouble keeping out a careful
eye on the print version. Perhaps the link to printing is mostly
doomed to a certain pragmatic carelessness?