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.cs s" 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;
}

#primarycontain er 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...whic h 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.cs s" 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; }

#primarycontain er 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...@edmullen. netwrote:

>

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 "automatica lly 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;
}

#primarycontain er 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...@edmullen. netwrote:

>>
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 "automatica lly 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;
}

#primarycontain er 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?

#primarycontain er 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...@edmullen. netwrote:

>

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...ap parently it's possible; I'm getting the
idea from Chapter 14 of "Beginning CSS Web Development: From Novice to
Professional" by Simon Collison...unfo rtunately, 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;
}

#primarycontain er 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...@edmullen. netwrote:

Prisoner at War wrote:

<SNIP>

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

#primarycontain er 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 <prisoner_at_.. [e-mail] e:

>

<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;

}

#primarycontain er 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...an y way to
turn that off, too?

<SNIP>

[Prisoner at War]

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

On Apr 20, 3:33 pm, Ed Mullen <e...@edmullen. netwrote:

Prisoner at War wrote:

<SNIP>

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

#primarycontain er 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>