How to Format CSS for 8.5X11 Inch Printed Pages

How to format CSS for 8.5x11 inch printed pages

After using a CSS reset template, and with "shrink to page" turned off in print options I am able to make a DIV that is 7" (about 670px) wide and 9.5 (about 900px) high. I can position inside this box.

It translates fine between the printers I have connected. If my calculations are correct, the print DPI is about 95ppi.

#printPage
{
  margin: 0px;
  padding: 0px;
  width: 670px; /* width: 7in; */
  height: 900px; /* or height: 9.5in; */
  clear: both;
  background-color: gray;
  page-break-after: always;
}

Then positioning like this works:

#cube
{ 
  position: relative;
  top: 1in;
  left: 1in;
  width: 1in;
  height: 1in;
  background-color: white;
}

What is CSS for paper 8.5x11?

The proper way to achieve this would be to use a 'media query'

Insert all declarations for printing at the end of your main style sheet, and enclose them with this distinct rule: @media print { … }

Include all screen styles in the separate @media screen {…} rule;
Omit the media type for the condensed style sheet: <link rel="stylesheet" href="css/style.css"/>

Source

CSS Print Layout - Printing on a Single Page

I think the frustration with this detail of CSS is that the answer has to be tailored to my own project. Thanks to @blahdiblah and other for suggestions. A mix of solutions led to near-perfect results, though of course IE still gives me problems...

It had to do with a hard reset of all padding/margin styles and then lots of !important markers for padding, width, height, etc. Basically I filled up the page with height and then dropped in 100% wide objects. The result is maximum coverage on an 8.5x11 page with zero spillover to a second page.

@media print {
  * { margin: 0 !important; padding: 0 !important; }
  #controls, .footer, .footerarea{ display: none; }
  html, body {
    /*changing width to 100% causes huge overflow and wrap*/
    height:100%; 
    overflow: hidden;
    background: #FFF; 
    font-size: 9.5pt;
  }

  .template { width: auto; left:0; top:0; }
  img { width:100%; }
  li { margin: 0 0 10px 20px !important;}
}

Print HTML on 8.5x11 paper?

You can do the following:

Try to work approximately how tall a <div> you can print on one page. This is determined by the contents of the <div> and is not entirely in your control (i.e. if the data is mainly text, a user may choose to override your font size or scale the page for print). However you should be able to come up with an approximate height that fits. For 12pt font, I've found it to be around 900px in height.
Create a .page class that uses the CSS printing page break rules in a print stylesheet. These let you suggest to the browser if a page break should occur before or after your element.

You'll end up with something like the following:

HTML

<div class="page">
    /* data */
</div>
<div class="page">
    /* more exciting data */
</div>

CSS

.page {
    font-size: 12pt; 
    height: 900px;  /* You'll need to play with this value */
    page-break-after: always; /* Always insert page break after this element */
    page-break-inside: avoid; /* Please don't break my page content up browser */
}

For more reading, this ALA article gives some excellent tips on printing your web pages.

However if you're looking for precise control over how the reports print, I would recommend generating a PDF and serving it to the user.

How do you convert pixels to printed inches in JavaScript?

I think this does what you want. But I agree with the other posters, HTML isn't really suited for this sort of thing. Anyway, hope you find this useful.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#container {width: 7in; border: solid 1px red;}
#span {display: table-cell; width: 1px; border: solid 1px blue; font-size: 12px;}
</style>
<script language="javascript" type="text/javascript">
function resizeText() {
  var container = document.getElementById("container");
    var span = document.getElementById("span");

    var containerWidth = container.clientWidth;
  var spanWidth = span.clientWidth; 
    var nAttempts = 900;
    var i=1;
    var font_size = 12;

    while ( spanWidth < containerWidth && i < nAttempts ) {
      span.style.fontSize = font_size+"px";

        spanWidth = span.clientWidth;

        font_size++;
      i++;
    }       
}
</script>
</head>

<body>
<div id="container">
<span id="span">test</span>
</div>
<a href="javascript:resizeText();">resize text</a>
</body>
</html>

How to force web content to fill an A4 printed page?

HTML isn't very good for this job, especially if you have a single HTML page with many letters (i.e. you want each letter to start on a new page).

There are lots of PDF generation tools for PHP and PDF is actually rather good for print layouts.

PDF will let you control the fine-grained aspects of printing, such as keeping blocks together, when to start a new page and much, much more!

Which one is the best PDF-API for PHP?

Need CSS for printed footers on all pages but last, different footer on last

I came up with a solution, it is semi cross browser friendly except that different browsers seem to default to different print margins. It seems like .75in for IE, .4in for Chrome. It assumes 8.5x11 which makes it a little inflexible, but given the intention is printing you'll need to specify these kinds of things for your app.

<!DOCTYPE html>
<html>
<head>
    <title>Test of paging</title>
    <style type="text/css">
        @media screen {
            .page-footer, .page-break {
                display: none;
            }
        }

        @media print {
            body {
                /* Align first page to top */
                margin: 0;
            }

            .page-section {
                /* Specify physical size of page, margins may vary by browser */

                height: 9.5in; /* IE default margins are .75in */
                position: relative;
            }

            .page-footer {
                display: block;
                position: absolute;
                bottom: 0;
            }

            .page-break {
                page-break-before: always;
            }

        }
    </style>
</head>
<body>
<div class="page-section">
    <div>One</div>
    <div>Two</div>
    <div class="page-footer"><span class="footer-text">Footer one</span></div>
</div>
<div class="page-break"></div>
<div class="page-section">
    <div>Three</div>
    <div class="page-footer">Footer two</div>
</div>
</body>
</html>

Simulate A4 page in HTML

HTML assumes that the screen is 96 DPI, or that 1 pixel is 1/96 of an inch.

On hardware with a very high resolution, it uses the concept of logical pixels, which are units that are close to 1/96 of an inch, and each of which consists of multiple device pixels. This is true for printers, but also for phones and other devices with high res screens.

So, if you want a rectangle the same size an an A4 (21 × 29.7 cm), you should use 794 × 1122 pixels, or in CSS, width:794px; height:1122px. But you can also use physical units, width:21cm; height:29.7cm if you don't want to worry about these logical pixels.

How to Format CSS for 8.5X11 Inch Printed Pages