SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: Printable HTML

  1. #1
    SitePoint Zealot
    Join Date
    Aug 2002
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Printable HTML

    Hi

    I have an problem with planning a catalogue for print using HTML. The catalogue is already built, used of online purposes, however I need to generate a print catalogue from this. The catalogue is built with PHP/MySQL and while I realise that I could produce the catalogue in a PDF format I intend to use the same HTML that is produced for a print catalogue for a version of the catalogue in compiled HTML.

    The problem I face is deciding how to break a page of HTML. Any given product category may have, say, 200 products and I could organise to have 20 products per page but any given product might have a description that is 50-100 characters or it might have 500-1000 characters. So I am not sure how to plan the print version, how many products to put per page, how to organise the page headers/footers and how to organise the categories.

    Can anyone point me in the right direction?

    Thx in advance!

  2. #2
    Ensure you finish what you sta bronze trophy John Colby's Avatar
    Join Date
    Aug 2003
    Location
    University of Central England, U.K.
    Posts
    487
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried using a stylesheet with media="print" ?

    There appears to be a significant lack of resources about print CSS stylesshets but here are some I've found:

    http://www.alistapart.com/articles/goingtoprint/
    http://www.tufts.edu/webcentral/tutorials/printcss/
    http://www.tufts.edu/webcentral/tuto...css/print.html
    and W3C calls it "paged media"
    http://www.w3.org/TR/CSS2/page.html

    Hope this helps. If I've misunderstood please post back
    John
    No electrons were harmed during the creation, transmission
    or reading of this posting. However, many were excited and
    some may have enjoyed the experience.

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2002
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Nearly!

    Thanks John, much appreciated.

    There is some interesting info you have posted here but my problem is not so much how to make the HTML printer friendly, I'm pretty much across that, but more about how do I decide about where to break a a page.

    For instance, I know I can use something like: <p style="page-break-before:always"></p>, which will cause a break in the page. What I can't work out how to do is to figure out where to put something like to above.

    As I mentioned above I will be working with products where one product might take up 10 lines of content while another only takes up two. I am unsure about how I can figure out where to stop a page and start another one.

    Thanks again!

  4. #4
    Ensure you finish what you sta bronze trophy John Colby's Avatar
    Join Date
    Aug 2003
    Location
    University of Central England, U.K.
    Posts
    487
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you need to consider widows and orphans. From W3C spec:
    13.3.3 Breaks inside elements: 'orphans', 'widows'

    'orphans'
    Value: <integer> | inherit
    Initial: 2
    Applies to: block-level elements
    Inherited: yes
    Percentages: N/A
    Media: visual, paged

    'widows'
    Value: <integer> | inherit
    Initial: 2
    Applies to: block-level elements
    Inherited: yes
    Percentages: N/A
    Media: visual, paged

    The 'orphans' property specifies the minimum number of lines of a paragraph that must be left at the bottom of a page. The 'widows' property specifies the minimum number of lines of a paragraph that must be left at the top of a page. Examples of how they are used to control page breaks are given below.

    For information about paragraph formatting, please consult the section on line boxes.
    Which is the major control.

    If you consider further down the document - http://www.w3.org/TR/CSS2/page.html#page-breaks - you'll come to:

    13.3.4 Allowed page breaks
    13.3.5 Forced page breaks
    13.3.6 "Best" page breaks
    Have a look down these examples and I think you'll find what you're looking for - and I'm having to do it this way because although I can visualise what you're saying happens you must be the final arbiter of how 'correct' it looks on the page you're printing.

    CAVEAT:

    This is the standards view: How your particular case will be interpreted by each browser is a moot point. At a guess if you try firebird you'll have most success. But as you'll probbaly want to process in IE and it looks markedly different (it may well do) then please post back with relevant code and let's have a look. Not many sites use print style sheets - so knowledge about them is more limited than display style sheets. In fact you may be one of the first people doing this other than in a test situation

    And I for one would welcome feedback on what worked and what didn't
    John
    No electrons were harmed during the creation, transmission
    or reading of this posting. However, many were excited and
    some may have enjoyed the experience.

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2002
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ok

    Hi again John

    You got me thinking about this and I thought I should do some experimenting to see where I get to. Unfortunately I am not much closer to a solution, however I have the problem defined a lot more clearly.

    Firstly, I am producing a version of a catalogue purely for print purposes. As the online version has so much information that is redundant for the print version, like order text inputs, thumbnails and stock levels, I will be producing a seperate print copy.

    The browser issue is a moot point because the most fundamental use for this catalogue is to be printed by a professional printing service. However, this is not to say that it could not be offered as a download. At the end of the day, though, the layout needs of this particular catalogue are very straight forward, therefore it should be fairly easy to get consistent across browsers.

    I've attached two different versions of how this catalogue may look. The first example is a traditional table style layout and the second is a layer/css layout. Both layouts consist of the same page elements, a header (with company name/address etc.), a body (with page heading and catalogue entries) and a footer (with copyright notice). I've made the area of these layouts a constant value for the purposes of viewing them now however I would not do this for an actual print version.

    In each of these examples I have included three product entries, the columns for each consist of:

    Product Name | Product Code | Description | Price

    You can see that each product entry has a different length description, therefore the area it requires compared to the other entries can be significantly different.

    My goal is to produce pages that contain the necessary page elements, header and footer, and the relevant number of product entries per page to fit on an A4 page, considering that any given product category could return several hundred results.

    I have come to understand that what I am asking is perhaps beyond the scope of HTML/CSS and even if I where able to produce the correct layout, how would I organise each individual page to be printed in the relevant order.

    Regardless, it would be good to see where, if anywhere, this use of HTML/CSS for this application could go.

    Thanks again!
    Attached Files Attached Files

  6. #6
    Ensure you finish what you sta bronze trophy John Colby's Avatar
    Join Date
    Aug 2003
    Location
    University of Central England, U.K.
    Posts
    487
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by grahowler
    Firstly, I am producing a version of a catalogue purely for print purposes. As the online version has so much information that is redundant for the print version, like order text inputs, thumbnails and stock levels, I will be producing a seperate print copy.
    Can you use <div class="something", <div class="somethingelse"> etc and in your print stylesheet set:
    Code:
    .something, .somethingelse { display:none;}
    so that you pass over the items you don't need included?

    Quote Originally Posted by grahowler
    I have come to understand that what I am asking is perhaps beyond the scope of HTML/CSS
    I don't think it is really. It is just that there hasn't been sufficient experiemntation into the possibilitites of print stylesheets. If people want things printed they go off and produce another HTML page with bits omitted - IMHO a waste of time.
    John
    No electrons were harmed during the creation, transmission
    or reading of this posting. However, many were excited and
    some may have enjoyed the experience.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •