Discussion on <div> and printing

M

Mark Preston

Admission first - I don't actually have a problem here but have noticed
that a lot of people have been asking similar questions and getting very
varied answers. What I've done is to sort of "compile the questions"
into a theoretical problem to see what people think should be done to
solve it.

Maybe it will be a worthwhile discussion, but more importantly maybe it
will find out the very best way to sort this kind of problem out so that
we can perhaps add it to the FAQ... recently, at least, it has most
certainly been "Frequently Asked". So, to begin with, let's define the
problem. If you want to build code or whatever to describe how you would
solve it, please help yourself.

Situation:-
===========
We have a web page - its probably in HTML 4.2 or XHTML but take your own
preference for your answer - and a Cascading Style Sheet to define how
it is to be displayed. Much of the page is split up into layers using
the <div> tag and it does not use tables for page formatting.

The layers are switched on and off with a menu tucked away somewhere on
the page so that the main part of the page displays whatever option is
selected from the menu. For the sake of the discussion, layers are
switched on with function "layer_On('id')" and off with function
"layer_Off('id')", in both cases changing either (or both) the
document.<element>.style.[visibility || display] as required.

I'm sure that, like myself, many of you have done this sort of thing
often enough. For those not familiar with the notation used, the section
shown as [a || b] means either "a" or "b" and <element> means "any valid
element details".

So - as a "skeleton" of the page - we have something like this:-

<html>....<head>
<style...>
.style1 [...]
.style2 [...]
...etc
</style>
<script>
function layer_On(which) {...}
function layer_Off(which) {...}
...etc
</script>
</head>
<body>
<div id="layer_1" class="style1">....</div>
<div id="layer_2" class="style2">....</div>
....etc
<body>

Problem:-
=========
Now, having this sort of page (which does seem to be growing in
popularity these days) the user also wants to be able to print the whole
page, with all <div> layers shown, in a "printer friendly" way. In the
real world, I suppose the user would do like the BBC does and put a
"Print Friendly Version" button on the page and a "Print" button on that
page, or maybe the first button just prints a "print friendly" version
of it, loike many auction sites do. That's one of the things we can talk
about while we look at the problem.

So - how do you think the user should go about printing the whole page,
with all <div> layers visible, even if normally switched off, and at the
same time ignoring the menu (much as I've ignored it here)?

At an initial look, there seem to be three approaches. First, the CSS
could be used to build a print media version - perhaps switching
stylesheets with JavaScript. Second, the script could be used to switch
all the 'off' layers back 'on' before printing. Third, a separate page
could be provided especially for the purpose.

So folks - what do you think? How would you approach the problem (while
at the same time making the answer simple enough for all those who have
recently asked similar questions to follow)?
 
I

Ivo

So - how do you think the user should go about printing the whole page,
with all <div> layers visible, even if normally switched off, and at the
same time ignoring the menu (much as I've ignored it here)?

At an initial look, there seem to be three approaches. First, the CSS
could be used to build a print media version - perhaps switching
stylesheets with JavaScript. Second, the script could be used to switch
all the 'off' layers back 'on' before printing. Third, a separate page
could be provided especially for the purpose.

You have a stylesheet for the screen, and another for the printer. I don't
see the problem. There is no reliance on javascript.
<style type="text/css" media="print">
div { display:block; visibility:visible; }
</style>
<URL: http://www.w3.org/TR/REC-CSS2/media.html >

--Iv
 
M

Michael Winter

[snip]
You have a stylesheet for the screen, and another for the printer.I
don't see the problem. There is no reliance on javascript.
<style type="text/css" media="print">
div { display:block; visibility:visible; }
</style>
<URL: http://www.w3.org/TR/REC-CSS2/media.html >

It depends how the script modifies the document. I thought that a print
stylesheet would be all that's necessary, but it doesn't work if inline
styles were added with the style object; they override the stylesheet.
Thinking about it, this should be obvious due to the cascade order.

If inline styles are applied, they must be removed beforehand to allow a
print stylesheet to affect a document properly.

If the style changes are effected through the styleSheets collection or
modification of an element's className property - any way really, as long
as it's not inline - there should be no problem and a print stylesheet is
all that's needed.

Mike


By the way, I wouldn't say you can be assured of what I've written above,
but it did stand up under some very brief testing. I'd assess yourself,
first.
 
R

Richard Cornford

Ivo said:
"Mark Preston" wrote

Printer specific style sheets would be easiest to apply, as the browser
would be doing that for you in the appropriate context. Otherwise you
would have to be reacting to the not universally supported -
onbeforeprint - event or asking the user to switch style sheets prior to
printing (maybe not a bad idea as a "display this page in a format
suited to printing" option is not too different from offering another
version tailored to printing).

Again the - onbeforeprint - event would be needed to do the switching,
or the user would have to do it.

I would not ever recommend alternative pages for printing, in the sense
that those pages are alternative human authored and fixed resources on
the server, because that is doubling creation/maintenance costs and
introducing a realistic possibility of the two getting out of sync. If
there is one server-side source for the content (database or whatever)
and the pages are dynamically assembled or pre-processed then a printer
tailored version could be just one additional sever-side script (or
pre-processing step).
You have a stylesheet for the screen, and another for the
printer. I don't see the problem. There is no reliance on
javascript.

<style type="text/css" media="print">
div { display:block; visibility:visible; }
</style>
<URL: http://www.w3.org/TR/REC-CSS2/media.html >

Mixing the dynamic displaying and hiding of contents with scripts and a
desire to include all of the content when printing would not necessarily
be entirely solved with printer specific style sheets in that style.
Problems would arise due to the cascaded nature of CSS assignments
depending on how the display/hiding was achieved. When CSS is applied to
an HTML document any STYLE attributes local to the HTML elements will
override all CSS assignments originating in external style sheets and
STYLE elements in the HEAD (because they are defined as being as
specific as ID selectors, but also appear later and so override equally
specific rules that precede them). So a local STYLE attribute will
override a printer specific style sheet. Unfortunately there does not
appear to be a mechanism form making STYLE attributes media specific.

The - style - object associated with HTML elements within the DOM is the
representation of the STYLE attribute so any content manipulation
achieved by setting properties on the - style - object is equivalent to
re-defining a local STYLE attribute. Thus they will override assignments
from STYLE elements and external style sheets. The use of the - style -
object in switching visibility/display/z-indexes is normal/common, so
its place in the cascading rules of CSS is significant.

Alternative approaches might include; setting the - className -
properties of DOM elements instead of - style - object properties, then
CSS class definitions would be derived from the appropriate media
specific style sheet (generally regarded as a heavyweight alternative to
setting individual - style - object properties).

Otherwise the CSS - ! important - declaration could be used in print
specific style sheets to have the element specific style attributes
ignored (probably the best options if it can be demonstrated to work
sufficiently well).

Richard.
 
M

Mark Preston

Ivo said:
You have a stylesheet for the screen, and another for the printer. I don't
see the problem. There is no reliance on javascript.
<style type="text/css" media="print">
div { display:block; visibility:visible; }
</style>
<URL: http://www.w3.org/TR/REC-CSS2/media.html >
Ivo - as I said, that's probably my ideal too. The point is to come up
with the "best" solution to submit to the FAQ.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top