CODEWITHSUNDEEP
htmlcssgoogle-chromeprinting
HikeMike
HikeMike

Reputation: 126

Chrome seems to miscalculate css sizes given in mm unit when printing

I want to print to A4 using css.

A4 is 297mm high - 6 mm margin top - 6 mm margin bottom = 285 mm should be left for content.

In IE 11 : I have to set page borders to 6 mm and disable header/footer --> Text appears where it should when I set content height to 284 mm (1 mm diff is close enough for me) IE 11: OK: Text at 284 mm is located at bottom of page 1

In Chrome 33: I don't have to change any settings --> Text is located far below from where it should be. It only works when I set content height to 267 mm (where did 18 mm diff go?) Chrome 33: Fail: Text at 284 mm is located somewhere near top of page 2

<!DOCTYPE html>
<html>
   <head>
      <style type="text/css">
         @page {
            margin: 6mm;
            size: A4 portrait;
         }
         body {
            margin: 0mm;
         }
         table {
            page-break-after: always;
            border-spacing:0mm;
         }
         tr {
            vertical-align: bottom;
            height:284mm;
         }
      </style>
   </head>
   <body>
      <table>
         <tr>
            <td>Page 1</td>
         </tr>
      </table>
      <table>
         <tr>
            <td>Page 2</td>
         </tr>
     </table>
   </body>
</html>

Is there something wrong with my css or does Chrome not know the size of 1 mm?

Upvotes: 2

Views: 2926

Answers (1)

HikeMike
HikeMike

Reputation: 126

I figured it out just now. It is not enough to set height, I need to set width as well. (I still need to set height to 284 instead of 285, but that is ok (probably a rounding error))

tr {
    vertical-align: bottom;
    height:284mm;
    width:198mm;
}

Upvotes: 1

Related Questions