Printalble HTML page

need a bit of HTML advice

[Weblamer]

Ok, i'm too lazy today to fool around with this, so i'm going to ask here.

I am building an HTML page that will hold content from a form results. Anyways, I want to format this HTML page so that it will be suitable for printing on an 8 1/2 by 11 inch page, yer normal sheet of printer paper.

Im going to build this by making one static table on the outside with a fixed pixel height, and all the other tables on the inside set by a precentage so they 'streatch' inside the main table, so all the data content will always fit onto one page.

Basically, no matter what goes into the form will all still fit onto one page. And if there is too little data, it won't fill only half a page.

Anyone out there ever formatted HTML page specifically for printing in this manner?

[Mark_A]

"Anyone out there ever formatted HTML page specifically for printing"

Not exactly in that manner, bearing in mind that US letter and European A4 are different sizes with US letter being wider and shorter afaik.

Ive just made a fexible with page and ensured that all contents can rezise to below A4, test print it I think its about 640px or 680 or something.

As to stopping it from overflowing to another page (length > 1 page) depends if you want to fix the text size which also has an effect.

hth

Mark

[Purple Martin]

Im going to build this by making one static table on the outside with a fixed pixel height

I didn't think it was valid to set heights for tables. How about using a DIV instead? You can set the width as well. You could even use maxHeight and maxWidth :)

[justa]

Why not go a step further and use CSS for the printable page. If you just want the information to be printed out and leave the contents and headers out you could create a seperate style sheet for print.

For example, your page uses style.css which define your div's and classes. You then create a print.css which set the div's you wish to ignore to visibility: none;. When the page is printed the area's you don't want are hidden and the important content is printed.

Here is a quick example

style.css

#Header {
margin:20px 0px 10px 0px;
padding:0px 0px 0px 0px;
height:80px;
width:640px;
border-style:solid;
border-color:black;
border-width:0px 0px;
line-height:80px;
background-color:#FFF;

voice-family: "\"}\"";
voice-family:inherit;
height:80px;
}
#Content {
position: absolute;
top: 195px;
left:162px;
padding:10px;
width: 80%
}
#Library {
position:absolute;
top: 100px;
left: 180px;
width: 480px;
height: 60px;
line-height: .8em
}
#Menu {
position:absolute;
text-align: center;
top:100px;
left:10px;
width:140px;
padding:0px;
background-color:#69C;
border:none;
line-height:17px;

voice-family: "\"}\"";
voice-family:inherit;
width:150px;
background-image:url("images/sidebanner.gif")
}

print.css

#Header {
visibility: hidden;
margin:20px 0px 10px 0px;
padding:0px 0px 0px 0px;

height:80px;/
width:640px;
border-style:solid;
border-color:black;
border-width:0px 0px;
line-height:80px;
background-color:#FFF;

voice-family: "\"}\"";
voice-family:inherit;
height:80px;
}
#Content {
position: absolute;
top: 0px;
left:0px;
padding:10px;
}
#Library {
visibility: hidden;
position:absolute;
top: 100px;
left: 180px;
width: 480px;
height: 60px;
line-height: .8em
}

#Menu {
visibility: hidden;
position:absolute;
text-align: center;
top:100px;
left:10px;
width:140px;
padding:0px;
background-color:#69C;
border:none;
line-height:17px;

voice-family: "\"}\"";
voice-family:inherit;
width:150px;
background-image:url("images/sidebanner.gif")
}

Within the head of the documents you wish to print include

<style type="text/css" media="screen">@import url(style.css);</style>
<style type="text/css" media="print">@import url(print.css);</style>

This may not have answered your question but it could be another option. I'm sure tedster or papabaer will be along shortly to shoot holes in my code and lend a hand.

Justa.

[piskie]

I had to do this recently for a site containing about a hundred data/information documents. Some were single pages and others multi page printouts.

I found the best width to use was 625 pixels. This allowed most preference settings for page setup margins etc.

If the printout is to span more than one page, you can force the page-break by using:
STYLE="page-break-after: always"
OR
STYLE="page-before-after: always"
You can include this in br tags, image tags, table tags etc.

[ergophobe]

What is the interpretation of pixels in print media? Doesn't it change depending on a lot of variables?

Also, on thing that I haven't managed to get around with a print stylesheet, is images that fall on the page break. If the page breaks in the middle of a paragraph that has an image floated to one side and the image can't fit on one page, it just doesn't print at all.

Tom

[rewboss]

Some old builds of MSIE running on Windows used to convert pixels to printer dots, when defined in CSS, at a ratio of 1:1. So if you specified font-size: 12px that looked fine onscreen at between 72 and 120 pixels-per-inch, but printed out twelve dots high at 300 dpi it was impossible to read.

I'm not sure what the reality is, but CSS specifications define a "reference pixel" to be 1/96 inch, or thereabouts. So, in theory at least, if you define a table or a div to be 960 pixels wide, it should print out to be ten inches wide. Whether it does or not may depend on:

The browser/platform,
The printer,
The printer driver,
Printer settings,
Browser settings,
OS settings.

CSS does allow you to specify absolute lengths in inches and centimetres, as well as points and picas (1 pica = 12 points = 1/6 inch). Theoretically, these should provide more predictable results for printed documents. You don't normally use these measurements for onscreen display, since the OS has no viable way of knowing exactly how many screen pixels make up an inch (it doesn't know how big your screen is, it only knows the resolution).

You can import a stylesheet for printer use only with this code:

<script type="text/css">
@import url(printerstyles.css) print;
</script>

You can use this to override all your measurements and supply absolute measurements for printing out.

Bear in mind that the standard printer-paper size for Europe (that's a lot of users) is DIN A4, which is about 8 inches by 11 or so. Also remember to leave an inch or so all round for printer margins.

<edit>
Just noticed that Weblamer appears to be talking about an A4 sheet. Bear in mind that American letter paper is wider and shorter than A4 (I'm not sure by how much).
</edit>

Absolute measurements for printed documents are:

in (inch)
cm (centimetre: 1cm = approx. 2.54in)
pc (pica: 6pc = 1in)
pt (point: 12pt = 1pc)

[BlobFisk]

cm (centimetre: 1cm = approx. 2.54in)

Should that not be the other way around?

1 inch = 2.54 centrimetres?

[Weblamer]

Thank's for all the tips. I think I am going to swing for the style sheet fix.

[ergophobe]

CSS does allow you to specify absolute lengths in inches and centimetres, as well as points and picas (1 pica = 12 points = 1/6 inch). Theoretically, these should provide more predictable results for printed documents

That's what I was driving at. How well-supported is this practically, not just theoretically? It seems that things like page break and page length in inches and so on are not generally implemented in current browsers. I haven't tried to use them in a while, perhaps there's been some progress?

Tom

[piskie]

Print output is more tolerant to pixels than browser display is to print related CSS.

With 100+ HTML documents forming 150 ish printed A4 sheets, hours of work and reams of paper were spent checking many formating techniques on just about every permutation of Computer, Operating System, Browser, Printer and Settings etc. The conclusion was that the most consistent and virtualy quirk free setting for width was 625 pixels.

When all widths were defined as 625 pixels instead of a variety of print relative measurements etc. all negative feedback regarding print problems dried up overnight. As the main function of the site was to persuade visitors to print out or download data sheets, this was quite a relief.

[FwAnK]

Small detail: Background images does not get printed. I think you can set the browser to do it but by default it does'nt.