Dynamically sized page margin content

wmattei commented 3 years ago

If i have na element defined as running at the top of the page, and the content of this element is bigger than the page margin i get result where the header overflows the body.

Of course i could just increase the margin, but in my case, the header will be dynamic, and there is no way to know how big it can be..

Screenshot

Page 1

Page 2

Reproducible code:

<html>
  <head>
    <style>
        * {
            font-family: 'Arial';
        }
      @page {
        size: A4;
        font-size: 16px;
        margin: 2cm; 

        @top-center {
          content: element(header);
        }

        @bottom-center {
          content: element(footer);
        }
      }
      .header {
        page-break-inside: avoid;
        position: running(header);
      }
      .footer {
        page-break-inside: avoid;
        position: running(footer);
      }
      table {
        width: 100%;
        font-size: 16px;
        margin: 1cm;
        border-collapse: collapse;
      }

      td, th {
        padding: 6px;
        border: 1px solid gray;
      }
      tfoot td {
        background-color: aqua;
      }
      thead th {
        background-color: coral;
      }
    </style>
  </head>
  <body>
  <div class="header">
    <p>This example shows how to use table pagination.</p>
    <p>This example shows how to use table pagination.</p>
    <p>This example shows how to use table pagination.</p>
    <p>The table header and footer are automatically reproduced on each page.</p>
  </div>
    <table>
      <thead>
        <tr><th>Title 1</th><th>Title 2</th></tr>
      </thead>
      <tbody>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
        <tr><td>Hello</td><td>World!</td></tr>
      </tbody>
    </table>
  </body>
</html>

danfickle commented 3 years ago

Dynamically sized repeating page content needs float: top and float: bottom, neither of which we currently support. The good news is that I'm implementing footnotes in #711 which is giving me a good understanding of the issues around float:bottom so I may eventually implement them.

wmattei commented 3 years ago

I understand @danfickle. Should i keep this issue open?

danfickle commented 3 years ago

Thanks @wmattei,

I have renamed issue so you can leave it open.

danfickle / openhtmltopdf