Discussion on <div> and printing

Discussion in 'Javascript' started by Mark Preston, Aug 13, 2004.

  1. Mark Preston

    Mark Preston Guest

    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)?
     
    Mark Preston, Aug 13, 2004
    #1
    1. Advertising

  2. Mark Preston

    Ivo Guest

    "Mark Preston" wrote
    > 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
     
    Ivo, Aug 14, 2004
    #2
    1. Advertising

  3. On Sat, 14 Aug 2004 11:55:37 +0200, Ivo <> wrote:

    [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.

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail
     
    Michael Winter, Aug 14, 2004
    #3
  4. Ivo wrote:
    > "Mark Preston" wrote
    >> 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.


    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).

    >> Second, the script could be used to switch all
    >> the 'off' layers back 'on' before printing.


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

    >> Third, a separate page could be provided especially for the
    >> purpose.


    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.
     
    Richard Cornford, Aug 14, 2004
    #4
  5. Mark Preston

    Mark Preston Guest

    Ivo wrote:
    >
    > 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.
     
    Mark Preston, Aug 16, 2004
    #5
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. William Gower
    Replies:
    1
    Views:
    331
  2. Priyanka
    Replies:
    1
    Views:
    337
  3. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    775
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    206
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    334
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page