Forum Moderators: open
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?
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
Im going to build this by making one static table on the outside with a fixed pixel height
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.
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.
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
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)
cm (centimetre: 1cm = approx. 2.54in)
Should that not be the other way around?
1 inch = 2.54 centrimetres?
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
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.
