Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

CSS for One Look on Screen, a Different Look Printed

A very modest proposal

7:48 pm on Sep 9, 2002 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 26, 2002
votes: 0

I need to make web pages that have one look on screen but
a different look when printed by the browser's print
command. I have a proposal for a way to do this that uses
CSS--VERY simply.

(This problem was dealt with in an earlier thread, but
the discussion was mostly about making an onscreen "click
here to print" button along with a separate PDF file to be
printed, or a "click here for a printer-friendly version"
button along with a near-duplicate page--containing a
ROBOTS.TXT directive to keep the printer-friendly page from
being indexed by SEs as duplicate content! See
[webmasterworld.com ] .
A better solution should work with the browser's ordinary print
command--and with its print preview--without extra pages
to keep in synchronization.)

I'm creating a website for a museum which will provide
access to a set of scanned historical documents--thousands
of pages. For viewing on screen, each page contains a
screen-sized JPG plus a number of graphical navigation
buttons to move around the on-line structure. But for
printing, each page should contain a printer-sized JPG with
a minimal identification in black; to print pictures of all
the screen navigation buttons onto paper would be a mistake.

It occurred to me that I could SEPARATE the parts of
a single HTML page so that the two parts could be written
and changed independently without affecting the other. The
HTML used on-screen would not used for rendering to the
printer, and the HTML used for printing would be completely
ignored for screen display. Where the same element belonged
in both, I could just duplicate it and give it the style
appropriate to each specific context. (This would not apply
to every project, but it's fine for my site.)

First, I created two external stylesheets which define
two "classes" of DIVs with directives to render DIVs of one
class ("display:block") and to not render DIVs of the other
class ("display:none"). The two classes could be called
anything, but I called them "div.screenclass" and
"div.printclass" to indicate their purpose.

(1) SCREEN.CSS (external stylesheet)

div.screenclass {display:block;} <!-- show screen DIVs -->
div.printclass {display:none;} <!-- hide print DIVs -->
(any other CSS for screen display would go here)

(2) PRINT.CSS (external stylesheet)

div.screenclass {display:none;} <!-- hide screen DIVs -->
div.printclass {display:block;} <!-- show print DIVs -->
(any other CSS for printing would go here)

Then every page has its BODY divided into two DIVs, one
containing the code for screen display, the other the code
for printing. One of the two DIVs is assigned to each of
the two "classes" defined in the CSS files.

(3) Structure of typical page, generated from a database:

<link rel="stylesheet" type="text/css" href="SCREEN.CSS">
<link rel="stylesheet" type="text/css" media="print"
<div class="screenclass"> <!-- this is a screen-only DIV -->
<table width="100%" ...
ordinary HTML content for screen here
link to smaller screen-size JPG
entensive graphical navigation buttons
<div class="printclass"> <!-- this is a print-only DIV-->
<table width="100%" ...
ordinary HTML content for print here
link to larger printer-size JPG
minimal identification of the image

At least on IE6 and Opera6, this works great. For
on-screen display, the first <DIV> is fully rendered and the
second <DIV> is skipped. For printing--and crucially also
for print preview!--the browser ignores the first <DIV> and
renders only the second <DIV>.

There is no need, of course, to restrict this to
precisely two DIVs. One could have any number of <DIV
class="screenclass"> and <DIV class="printclass"> sections,
and all the DIVs in one class or the other would be

And, as in this case, I can begin with an existing page
and add CSS just for this limited purpose--(a) two external
CSS stylesheets (each of two lines, with settings for
div.screenclass and div.printclass), (b) two <link>-lines to
the two CSS stylesheets, (c) <DIV class="screenclass"> ...
</DIV>, around the old code and (d) <DIV class="printclass">
... </DIV> around new printing code to be added. All the
rest of the styling can remain as it is, and possibly be
changed to CSS sometime later.

This only works, of course, if the right CSS can be
understood by the browsers.

The example above uses the best way I have found:

<link rel="stylesheet" type="text/css" href="SCREEN.CSS">
<link rel="stylesheet" type="text/css" media="print"

The idea would be that the browsers of interest (NN4 and
later, IE5 and later, Opera6 and later) should all be able
to read the first <link>-line, which has no "media="
parameter at all; all the browsers read that directive, and
they can all understand at least the two classes and their
"block" and "none" directives in the external file. So
every browser gets the SCREEN.CSS file, and learns that it
should show div.screenclass and should hide div.printclass.
(It seems to be important to have the non-"media="
<link>-line first; some browsers appear to fail on the
<link>-line with "media="print"", and then to skip the
remaining <link>-line as well.)

Most browsers can also read the second <link>-line which
has a "media=" parameter. Those that can read it, can
follow it and act on it; those that cannot read it never see
the special treatment of printing, so they always handle
just the HTML intended for screen and always ignore the HTML
for printing. This seems to provide a tolerable result:
most browsers get proper screen content and improved
printing; early browsers retain proper screen content and
just print that same thing, but suffer no loss.

There are lots of other suggestions in the site archives
for how to get alternative CSS to those browsers that can
handle it. These methods use "@media" directives or
"@import"-with-media directives, often concealed within
comments and further within <style> tags. But I have been
unable to make these work, particularly the "@import
url(PRINT.CSS) print;" directive, which (even with the
"url()" made explicit and the final semicolon included) with
the media parameter does not seem to work in any browser--or
maybe I'm making some other mistake.

Is there a concensus on the best method and ordering for
presenting the media-dependent CSS to all browsers, old and
new? Does anyone have a better or easier way of solving the
problem of how to have a web page look one way on screen and
a different way when printed?

8:13 pm on Sept 9, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:June 7, 2002
votes: 0

Well, that's similar to the method I've used. I don't think it'll get much better than that, except of course that non-CSS enabled browsers will get to display all the images...
8:25 pm on Sept 9, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 4, 2002
votes: 0

Seems like a lot of trouble to go to when you could do it all in one sheet. You don't need to set the display block either, it's already a block element by derault.

div.yourclass {
/* your screen rules here (notice proper comment tags also, I'm not sure yours are correct? */

@media print {

div.yourclass {
display: none;

} /* close @media declarations */

Will work on the same browsers...



Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members