Please Help Me Understand A Printer-Friendly CSS....

[Prisoner at War]

Okay, I'd like to create a print-friendly website, so I've been
reading up on how to create print-friendly pages (without duplicating
my site, of course, by having separate versions of each page)....

Apparently one can use JavaScript or CSS for this....

Using CSS, it seems that the "trick" is to use * media="print" * in
the <linktag....

So if I have a hyperlink to a print-friendly page...um, well, what's
that, just the current webpage, only with "print.css" instead of
"default.css" in the <linktag??? If so, that would be just having a
duplicate copy of the whole site!

So that can't be how it works, right?

But then, how does it work??

What's that print-friendly hyperlink actually pointing to??

This must be so basic that no one bothers explaining it...but I'm
starting ~95% from scratch, here....

BTW, here's something from my print.css file that's not working for
some reason:

body {
background-color: #fff;
color: #000;
margin: 0;
padding: 40px;
font: normal 12pt/160% Georgia;
}

#header, #menu, #search, #footer {
display: none;
}

a:link, a:visited, a:active {
color: #000;
text-decoration: none;
}

#primarycontainer a:after {
content: " ( attr(href) ")";
font-size: 11pt;
}

img { display: none; }
That last img thinggy, I'm not so sure about, as well the show URL
thinggy right before it, but the others don't work and yet they look
100% proper to me! What's going on?? My footer still shows up, my
menu shows up, the searchbox shows up, hyperlinks are still underlined
and colored, etc.

ALL ADVICE MUCH APPRECIATED!!

[Prisoner at War]

Okay, wait a minute...I can get most of that CSS to work now, but

a:link, a:visited, a:active {
color: #000;
text-decoration: none;
still doesn't work as intended...which is supposed to not only take
away the underline from hyperlinks, but also make the hyperlinks' URLs
show up in parentheses! Anyone know what I'm missing here? Maybe
that bit of CSS code is supposed to be applied to each link
individually??

Also, I'd still like to understand if a "printer-friendly page"
**isn't** just a duplicate webpage with a print-friendly CSS
associated with it...if not, then how's the browser supposed to know
what to do, when it's already loaded up the default website CSS file?

[Ed Mullen]

Prisoner at War wrote:

Okay, I'd like to create a print-friendly website, so I've been
reading up on how to create print-friendly pages (without duplicating
my site, of course, by having separate versions of each page)....

Apparently one can use JavaScript or CSS for this....

Using CSS, it seems that the "trick" is to use * media="print" * in
the <linktag....

So if I have a hyperlink to a print-friendly page...um, well, what's
that, just the current webpage, only with "print.css" instead of
"default.css" in the <linktag??? If so, that would be just having
a duplicate copy of the whole site!

So that can't be how it works, right?

But then, how does it work??

What's that print-friendly hyperlink actually pointing to??

This must be so basic that no one bothers explaining it...but I'm
starting ~95% from scratch, here....

No need to link to another page. Every page can simply link to the
print.css sheet. In your page where you link to the style sheets just
put the print.css under the main style sheet. When a browser print
command is invoked it will automatically use the print.css styles. For
example:

<link href="/styles/default.css" rel="styleSheet" type="text/css">
<link href="/styles/print.css" rel="styleSheet" type="text/css"
media="print">

Try it.

See:

http://meyerweb.com/eric/articles/webrev/200001.html

BTW, here's something from my print.css file that's not working for
some reason:

body { background-color: #fff; color: #000; margin: 0; padding: 40px;
font: normal 12pt/160% Georgia; }

#header, #menu, #search, #footer { display: none; }

a:link, a:visited, a:active { color: #000; text-decoration: none; }

#primarycontainer a:after { content: " ( attr(href) ")"; font-size:
11pt; }

img { display: none; }
That last img thinggy, I'm not so sure about, as well the show URL
thinggy right before it, but the others don't work and yet they look
100% proper to me! What's going on?? My footer still shows up, my
menu shows up, the searchbox shows up, hyperlinks are still
underlined and colored, etc.

ALL ADVICE MUCH APPRECIATED!!

Taken out of context of everything else in your page it's pretty
difficult to even comment on this. Post a link to the online page.

--
Ed Mullen
http://edmullen.net
There's no trick to being a humorist when you have the whole government
working for you. - Will Rogers

[Prisoner at War]

On Apr 20, 11:33 am, Ed Mullen <[e-mail]:

>

No need to link to another page. Every page can simply link to the
print.css sheet. In your page where you link to the style sheets just
put the print.css under the main style sheet. When a browser print
command is invoked it will automatically use the print.css styles. For
example:

<link href="/styles/default.css" rel="styleSheet" type="text/css">
<link href="/styles/print.css" rel="styleSheet" type="text/css"
media="print">

Ahh, actually, that's the ~5% know-how I do have, that I had been
alluding to...I actually do have those tags up, just so...what I'm
wondering is whether CSS can somehow create a print-friendly version
of the webpage *on screen* without my creating a copy of the original,
only with a print-friendly CSS file that's called....

Try it.

See:

http://meyerweb.com/eric/articles/webrev/200001.html

Thanks, Ed, but I actually did come across it already -- so let me
better phrase my situation:

I have a hyperlink that says "printer-friendly page" and I would like
it to point to a WYSIWYG page. Does that mean I would have to create
another webpage, only with a printer-friendly CSS file controlling it,
or can CSS somehow "generate on its own" such a page?

IOW, a kind of on-screen print-preview page, like what you get with a
time.com article...now are such pages just printer-friendly copies of
the original webpage, or has CSS been used to "automatically generate"
them somehow??

Taken out of context of everything else in your page it's pretty
difficult to even comment on this. Post a link to the online page.

Ach, it's not online yet...but how about that code for the hyperlinks
and URLS, respectively,

a:link, a:visited, a:active {
color: #000;
text-decoration: none;
}

#primarycontainer a:after {
content: " ( attr(href) ")";
font-size: 11pt;
}

--
Ed Mullenhttp://edmullen.net
There's no trick to being a humorist when you have the whole government
working for you. - Will Rogers

[Ed Mullen]

Prisoner at War wrote:

On Apr 20, 11:33 am, Ed Mullen <[e-mail]:

>>
No need to link to another page. Every page can simply link to the
print.css sheet. In your page where you link to the style sheets just
put the print.css under the main style sheet. When a browser print
command is invoked it will automatically use the print.css styles. For
example:

<link href="/styles/default.css" rel="styleSheet" type="text/css">
<link href="/styles/print.css" rel="styleSheet" type="text/css"
media="print">

Ahh, actually, that's the ~5% know-how I do have, that I had been
alluding to...I actually do have those tags up, just so...what I'm
wondering is whether CSS can somehow create a print-friendly version
of the webpage *on screen* without my creating a copy of the original,
only with a print-friendly CSS file that's called....

You missed the important point in what I said and what the cited page
says. The /USER'S BROWSER/ knows that there is a print style sheet and
will use it when the user invokes print or print preview (there's your
"print-friendly version of the webpage *on screen*"). The browser uses
your CSS style sheet to do that.

>

>Try it.

See:

http://meyerweb.com/eric/articles/webrev/200001.html

Thanks, Ed, but I actually did come across it already -- so let me
better phrase my situation:

I have a hyperlink that says "printer-friendly page" and I would like
it to point to a WYSIWYG page. Does that mean I would have to create
another webpage, only with a printer-friendly CSS file controlling it,
or can CSS somehow "generate on its own" such a page?

No no no! You're missing the point. All of this is handled by the
user's browser. As I already said, put link the print.css in every one
of your Web pages. If the user wants to print (or print preview) a page
his browser will use the styles in the print.css style sheet.

>
IOW, a kind of on-screen print-preview page, like what you get with a
time.com article...now are such pages just printer-friendly copies of
the original webpage, or has CSS been used to "automatically generate"
them somehow??

Sites that use that "Click for printer-friendly page" are probably
generating a new page on-the-fly server-side using PHP, Perl, etc.
Frankly, I have never seen the utility in that from a user stand-point.
The same is achieved by simply linking a style sheet and letting the
user choose "print preview" if they want to see it before printing it.
If you use the technique I'm talking about it is much less complicated
design-wise, takes no fancy server-side "stuff" and takes less time.
Using a print.css style sheet doesn't require building and then loading
a whole different page. Nor opening it in a new window, which I also hate.

But, if you really want to use that method maybe someone else can tell
you how.

>Taken out of context of everything else in your page it's pretty
difficult to even comment on this. Post a link to the online page.

Ach, it's not online yet...but how about that code for the hyperlinks
and URLS, respectively,

a:link, a:visited, a:active {
color: #000;
text-decoration: none;
}

#primarycontainer a:after {
content: " ( attr(href) ")";
font-size: 11pt;
}

So put up the unfinished code; we don't care if it isn't finished, it
needs to be seen in context. Out-of-context code can't be reliably
de-bugged.

--
Ed Mullen
http://edmullen.net
Have you noticed since everyone has a camcorder these days no one talks
about seeing UFOs like they used to?

[Ed Mullen]

Prisoner at War wrote:

BTW, here's something from my print.css file that's not working for
some reason:

font: normal 12pt/160% Georgia;

Looking more closely I'm perplexed by that construct. Where's you get that?

#primarycontainer a:after {
content: " ( attr(href) ")";
font-size: 11pt;

You got me on that construct. Never seen such a thing.

}

img { display: none; }
That last img thinggy, I'm not so sure about, as well the show URL
thinggy right before it, but the others don't work and yet they look
100% proper to me! What's going on?? My footer still shows up, my
menu shows up, the searchbox shows up, hyperlinks are still underlined
and colored, etc.

ALL ADVICE MUCH APPRECIATED!!

Maybe someone else will chime in here.

--
Ed Mullen
http://edmullen.net
Photons have mass? I didn't even know they were Catholic.

[Prisoner at War]

On Apr 20, 3:31 pm, Ed Mullen <[e-mail]:

>

You missed the important point in what I said and what the cited page
says. The /USER'S BROWSER/ knows that there is a print style sheet and
will use it when the user invokes print or print preview (there's your
"print-friendly version of the webpage *on screen*"). The browser uses
your CSS style sheet to do that.

No no no! You're missing the point. All of this is handled by the
user's browser. As I already said, put link the print.css in every one
of your Web pages. If the user wants to print (or print preview) a page
his browser will use the styles in the print.css style sheet.

Yes, when the user hits the browser's print button, the browser knows
that there's a CSS file just for printing the webpage.

I was wondering if there's a way to give the user a WYSISYG page, a
preview of the printout, independent of the operating system's own
print preview capability...apparently it's possible; I'm getting the
idea from Chapter 14 of "Beginning CSS Web Development: From Novice to
Professional" by Simon Collison...unfortunately, he doesn't explain
this step-by-step, assuming by that point (page 320) that one's
already got a lot of the necessary background knowledge, I guess.

He specifically uses the Nottingham Science City website as a case
study (http://www.science-city.co.uk, though there's no longer a
"Print Version" link for some reason), where the site's got a black
background but hitting a print-friendly hyperlink brings up the same
page, only denuded of "printer-hostile" aspects like that black
background....

Sorry I'm having difficulty articulating all this!

Sites that use that "Click for printer-friendly page" are probably
generating a new page on-the-fly server-side using PHP, Perl, etc.
Frankly, I have never seen the utility in that from a user stand-point.
The same is achieved by simply linking a style sheet and letting the
user choose "print preview" if they want to see it before printing it.
If you use the technique I'm talking about it is much less complicated
design-wise, takes no fancy server-side "stuff" and takes less time.
Using a print.css style sheet doesn't require building and then loading
a whole different page. Nor opening it in a new window, which I also hate.

But, if you really want to use that method maybe someone else can tell
you how.

Hmmm, so that's all server-side, huh?? Makes sense, then!

But such a thing does seem possible client-side, too...again, I've got
that book but unfortunately the Nottingham Science City website
referenced doesn't have a print-friendly link anymore for some reason
so I don't think looking at the (X)HTML would help....

So put up the unfinished code; we don't care if it isn't finished, it
needs to be seen in context. Out-of-context code can't be reliably
de-bugged.

Um, okay...

* * * * * * * * * * * * * * * *

body {
background-color: #fff;
color: #000;
margin: 0;
padding: 40px;
font: normal 12pt/160% Georgia;
}

#header, #menu, #search, #footer {
display: none;
}

img { display: none; }

a:link, a:visited, a:active {
color: #000;
text-decoration: none;
}

#primarycontainer a:after {
content: " ( attr(href) ")";
font-size: 11pt;
}

* * * * * * * * * * * * * * * *
So far, it's only the last two that don't seem to work, or have any
effect at all.

--
Ed Mullenhttp://edmullen.net

Thanks again, Ed! I'm curious...how are you using CSS for your site?

Have you noticed since everyone has a camcorder these days no one talks
about seeing UFOs like they used to?

True!!

[Prisoner at War]

On Apr 20, 3:33 pm, Ed Mullen <[e-mail]:

Prisoner at War wrote:

<SNIP>

Looking more closely I'm perplexed by that construct. Where's you get that?

#primarycontainer a:after {
content: " ( attr(href) ")";
font-size: 11pt;

You got me on that construct. Never seen such a thing.

It's from Simon Collison's "Beginning CSS Web Development: From Novice
to Professional" (2006, Apress)...he doesn't explain it much since
it's on pages 323-4 and so probably assumes a high level of technical
know-how by then...it's supposed to get the browser to display, on a
printer-friendly WYSIWYG page, the URLs of your hyperlinks within
parentheses, after the text that would normally be underlined as
hyperlinks (previously removed by a separate bit of CSS code)....

Maybe someone else will chime in here.

Sure hope so! Seems like a real niffty lil' usability feature to
implement! Ahhh, "craftsmanship".... ;-)

--
Ed Mullenhttp://edmullen.net
Photons have mass? I didn't even know they were Catholic.

[Prisoner at War]

On Apr 20, 4:04 pm, Prisoner at War <[e-mail]:

>

<SNIP>

* * * * * * * * * * * * * * * *

body {
background-color: #fff;
color: #000;
margin: 0;
padding: 40px;
font: normal 12pt/160% Georgia;

}

#header, #menu, #search, #footer {
display: none;

}

img { display: none; }

a:link, a:visited, a:active {
color: #000;
text-decoration: none;

}

#primarycontainer a:after {
content: " ( attr(href) ")";
font-size: 11pt;

}

* * * * * * * * * * * * * * * *

So far, it's only the last two that don't seem to work, or have any
effect at all.

Correction: the penultimate bit of code does work -- hyperlink
underlines are removed and hyperlink "coloring" as well...only it's
still "live" and can be clicked to the URL referenced...any way to
turn that off, too?

<SNIP>

[Prisoner at War]

On Apr 20, 4:09 pm, Prisoner at War <[e-mail]:

On Apr 20, 3:33 pm, Ed Mullen <[e-mail]:

Prisoner at War wrote:

<SNIP>

Looking more closely I'm perplexed by that construct. Where's you get that?

#primarycontainer a:after {
content: " ( attr(href) ")";
font-size: 11pt;

You got me on that construct. Never seen such a thing.

It's from Simon Collison's "Beginning CSS Web Development: From Novice
to Professional" (2006, Apress)...he doesn't explain it much since
it's on pages 323-4 and so probably assumes a high level of technical
know-how by then...it's supposed to get the browser to display, on a
printer-friendly WYSIWYG page, the URLs of your hyperlinks within
parentheses, after the text that would normally be underlined as
hyperlinks (previously removed by a separate bit of CSS code)....

Clarification: last sentence should read, "...after the text that
would normally be underlined as hyperlinks (the underlines previously
removed by a separate bit of CSS code)...."

<SNIP>

[Jonathan N. Little]

Prisoner at War wrote:

I was wondering if there's a way to give the user a WYSISYG page, a
preview of the printout, independent of the operating system's own
print preview capability...apparently it's possible; I'm getting the

Yeah, with most moder browser they have a "Print Preview" button. The
print stylesheet will be used to create the preview page, so there is
not need to duplicate this on your part...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Prisoner at War]

On Apr 20, 6:22 pm, "Jonathan N. Little" <[e-mail]:

>

Yeah, with most moder browser they have a "Print Preview" button. The
print stylesheet will be used to create the preview page, so there is
not need to duplicate this on your part...

Okay, I guess my question is "academic" or "moot" at this point, but
for the sake of intellectual curiosity I must reiterate: it was,
apparently, possible to get CSS to generate a webpage based on an
existing webpage.

So forget the "print-friendly" business, then, and let me ask: how
does one use CSS to generate another page based on one currently
viewed??

Again, I'm getting this notion from Simon Collison's 2006 "Beginning
CSS Web Development," page 323-4, if I'm reading it right (he even has
before-and-after photos of http://www.science-city.co.uk as
"proof")....

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com

[Ben Bacarisse]

Prisoner at War <pr*************@yahoo.comwrites:

On Apr 20, 3:33 pm, Ed Mullen <[e-mail]:

>Prisoner at War wrote:

<SNIP>

Looking more closely I'm perplexed by that construct. Where's you get that?

#primarycontainer a:after {
content: " ( attr(href) ")";

This is (intended to be) CSS3 and should probably read:

content: " (" attr(href) ")";

No idea if there is any browser support for it yet. It seems
premature to suggesting as a solution to any real problem.

font-size: 11pt;

You got me on that construct. Never seen such a thing.

It's from Simon Collison's "Beginning CSS Web Development: From Novice
to Professional" (2006, Apress)...he doesn't explain it much since
it's on pages 323-4 and so probably assumes a high level of technical
know-how by then...

Acquired how? By reading someone else's book on CSS? A technical
book should explain its content -- you are being too kind in letting
the author off the hook.

BTW, on the whole "WISIWTG print version" thing, simply forget it.
Any link to such a thing is just a hack from the last century and the
attempt to anything in a browser that even gets close to the browser's
print preview in terms of accuracy or usefulness is doomed to
failure. Do the print media CSS, by all means, but what else could
you usefully add?

--
Ben.

[Prisoner at War]

On Apr 20, 7:37 pm, Ben Bacarisse <[e-mail]:

>

This is (intended to be) CSS3 and should probably read:

content: " (" attr(href) ")";

Okay, to quote the book (pages 323-4):

It is...useful to actually print the URLs alongside mentioned websites
in certain sections of the page. Earlier we looked at how CSS can
generate content before and after an element using CSS pseudo-
elements...here, the :after pseudo-element is used to perform a
specific function after each hyperlink...we are targeting the
[primarycontainer] column, ensuring links outside of this column are
not printed. Next, the selector seeks any links in this column as the
<aelement is declared. Finally, the :after pseudo-element is
declared, informing the browser that any links within the
[primarycontainer] column are where this action should happen. The
value declared for the content property is a little more complex, but
it basically tells the browser to perform the action immediately after
the content, which is the attribute href, and to place the generated
content within brackets (which have to be surrounded with quotes)....

No idea if there is any browser support for it yet. It seems
premature to suggesting as a solution to any real problem.

Thing is, the book's copyrighted 2006! That must mean he wrote it in
2005!!

Acquired how? By reading someone else's book on CSS? A technical
book should explain its content -- you are being too kind in letting
the author off the hook.

I think technical books, even if they aren't meant to be strictly
reference texts, ought to have each section be more "self-contained"
than not, but seeing how I've just started the book yesterday and am
already skimming ahead to Chapter 14 out of like 16 altogether, I just
can't say if anyone's at "fault" here.

BTW, on the whole "WISIWTG print version" thing, simply forget it.
Any link to such a thing is just a hack from the last century and the
attempt to anything in a browser that even gets close to the browser's
print preview in terms of accuracy or usefulness is doomed to
failure. Do the print media CSS, by all means, but what else could
you usefully add?

Ah, well, since I'm just learning right now, it's all very interesting
just for something to be possible, whatever its utility! I mean, one
could also include "javascript:self.print()" in a "print this"
hyperlink even though practically everyone would know how to print a
webpage...but it was very interesting in itself to know that such a
thing can be done.

--
Ben.

[Ben Bacarisse]

Prisoner at War <pr*************@yahoo.comwrites:

On Apr 20, 7:37 pm, Ben Bacarisse <[e-mail]:

>>
This is (intended to be) CSS3 and should probably read:

content: " (" attr(href) ")";

Okay, to quote the book (pages 323-4):

No, you are quite right. I misread a document title! The attr()
syntax is in CSS 2 and 2.1. IE6 support is missing (which why one
does not see this used much) but that does not mean it is not
"current" CSS.

<snip>

Thing is, the book's copyrighted 2006! That must mean he wrote it in
2005!!

OK, but there were drafts of lots of CSS3 before then. No excuse for
my getting it wrong, but the date is not the issue.

<snip>

Ah, well, since I'm just learning right now, it's all very interesting
just for something to be possible, whatever its utility! I mean, one
could also include "javascript:self.print()" in a "print this"
hyperlink even though practically everyone would know how to print a
webpage...but it was very interesting in itself to know that such a
thing can be done.

The problem is the whole idea of "such a thing" (WYSIWYG print preview
in browser window). It is ill-defined and even those bits where one
can make a stab at defining the "expected" behaviour, CSS has no hope
of even getting close to doing it.

Even the rather limited "change the page so links include the text of
the href attribute" can't be done in a cross-browser way (yet).

--
Ben.

[Prisoner at War]

On Apr 20, 8:36 pm, Ben Bacarisse <[e-mail]:

>

<SNIP>

The problem is the whole idea of "such a thing" (WYSIWYG print preview
in browser window). It is ill-defined and even those bits where one
can make a stab at defining the "expected" behaviour, CSS has no hope
of even getting close to doing it.

Even the rather limited "change the page so links include the text of
the href attribute" can't be done in a cross-browser way (yet).

Well, that's precisely the matter at hand: can it, or not? The book
seems to say it's possible...I mean, it had two pictures of the site,
a before and after, both within the Apple Safari web browser (though,
curiously, no URL field), which seems to suggest such a WYSIWYG page
possible. So I'm really puzzled how that could be, how CSS could be
used to generate a page based on another page.

If it's actually not possible, then those two photos were really
misleading, especially in their before-and-after placement. Being
inside browser windows, it seemed to suggest that the code the author
provided could "dynamically" create a "stand-alone" WYSIWYG print-page
in the browser....

Ugh, I think I will just go back to website content-creation as
opposed to structural-construction and tweaking...bleh....

--
Ben.