Prev: Liquid layout with resizable sparkline graphs
Next: Q: Correct path for the @import rule and a url
From: Prisoner at War on 20 Apr 2008 09:55

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 <link> tag....

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 <link> tag??? 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!!
From: Prisoner at War on 20 Apr 2008 11:20

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?
From: Ed Mullen on 20 Apr 2008 11:33
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 <link> tag....
>
> 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 <link> tag??? 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
From: Prisoner at War on 20 Apr 2008 15:06
On Apr 20, 11:33 am, Ed Mullen <e...(a)edmullen.net> wrote:
>
>
> 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


From: Ed Mullen on 20 Apr 2008 15:31
Prisoner at War wrote:
> On Apr 20, 11:33 am, Ed Mullen <e...(a)edmullen.net> wrote:
>>
>> 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?
 |  Next  |  Last
Pages: 1 2 3 4
Prev: Liquid layout with resizable sparkline graphs
Next: Q: Correct path for the @import rule and a url