dompdf: top-margin after page break not working

StackOverflow https://stackoverflow.com/questions/22153069

  •  19-10-2022
  •  | 
  •  

Question

I'm experimenting with Wordpress and (the recent version of) dompdf at the moment and ran into an annoying problem regarding the formating.

My Problem: The top-margin of the main content seems not to be considered on the second page generated, resulting in an overlapping with my logo. You can view the generated PDF under this link.

The relevant code from which the PDF is generated reads as follows (it is not perfect yet as i want to resolve the issue first):

function ppt_pdf_output() {

// post-ID of referring page needed
$post=get_post($_POST['postid']);

$output = '<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>'.$post->post_title.'</title>
<style>
body {
    margin: 30px 0 0 0;
    font-family:sans-serif;
    text-align:left;
}

img {
    margin: 15px 0;
}   

#header,
#footer {
  position: fixed;
  left: 0;
    right: 0;
    color: #aaa;
    font-size: 0.9em;
    line-height:1.2em;
}

#header {
  top: -30px;
    /*border-bottom: 0.1pt solid #aaa;*/
}

#footer {
  bottom: 0;
  border-top: 0.1pt solid #aaa;
}

#header table,
#footer table {
    width: 100%;
    border-collapse: collapse;
    border: none;
    text-align: center;
    color: #000;
    font-size: 24px;
}

.entry-content {
    margin: 100px auto 35px auto;
    top: 0; left: 0; bottom: 0; right: 0;
    background-color: #d1d977;
    width:90%; height:auto;
}

.entry-title {
    font-size: 18px;
    text-align: center;
}

#header td,
#footer td {
  padding: 0;
    width: 50%;
}

#footer .page-number {
  text-align: center;
}

.page-number:before {
  content: "Seite " counter(page);
}

.gallery-item {
display:inline-block;
}

br[style] {
display:none;
}

.gallery + p {
clear:left;
}

</style>
</head>
<body><div id="header">
  <table>
    <tr>
      <td>ANTRAG</td>
      <td style="text-align: right;"><img src="path/to/logo.png" /></td>
    </tr>
  </table>
</div>

<div id="footer">
  <div class="page-number"></div>
</div>';
$output .='
<!--<h1 class="entry-title">'. $post->post_title .'</h1>-->
<div class="entry-content">' . 
    apply_filters('the_content',$post->post_content) . '</div>';

$output .= '</body></html>';            

return $output;
}

As you can see, the formatting on the first page is as it should be (or at least as I intended it to be), but after the page break the content area (for visualization reasons provided with a green background) just starts at the beginning of the page, regardless of which number I give the margin.

Has anybody an idea how to resolve this issue? I've been working on this for countless hours and just don't know what to do at this point.

Any help would be greatly appreciated.

Kind regards
Olli

UPDATE: Of course I found this solution only just. I will try this and see if I can get the issue resolved with this.

UPDATE2: Still no luck. I'm now stuck with the following code (the output can be found under the link provided earlier):

function ppt_pdf_output() {

// post-ID of referring page needed
$post=get_post($_POST['postid']);

$output = '<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>'.$post->post_title.'</title>
<style>
@page {
    margin: 120px 50px 80px 50px;}  

#header {
    position: fixed;
    top: -82px;
    width: 100%;
    height: 109px;
    background: #aaa url("path/to/logo.png") no-repeat right;
}

#content {
    width: 100%;
    height: 85%;
    background-color: #d1d977;
}

footer {
    position: fixed;
    bottom: -65px;
    height: 30px;
    background-color: #333399;
}

footer .page-number {
    text-align: center;
}

.page-number:before {
    content: "Seite " counter(page);
}

br[style] {
display:none;
}
</style>
</head>
<body><div id="header">
  <h2>ANTRAG</h2>
</div>

<footer>
  <div class="page-number"></div>
</footer>';
$output .='<h1>'. $post->post_title .'</h1>
<div id="content">' .
    apply_filters('the_content',$post->post_content) . '</div>';
$output .= '</body></html>';

return $output;
}

It seems just so fragile. For example, as soon as I change the font-size of the h1 element, it gets overlapped by the logo. After the page break, it looks okay, but that just seems an coincidence - as soon as I change the font-size or the text, the text again gets overlapped. Will absolute positioning change anything or do you have any other tipps as how to resolve this anoying issue? Margins of any kind don't seem to work either.

Was it helpful?

Solution

You're on the right track. As you've seen, when an element is split across pages (as your content area is) some of the formatting information does not follow. This is by design.

The correct tact is to define the page margins so that they are large enough to hold your header/footer content and place the header/footer into that space. The content will then just fill the "body" of the document (i.e. the space inside the page margins). This is what you've attempted, but you haven't given enough space for the header. The header is positioned 82px inside the page margin but the height of the header is 109px. Because of this any content that has a small margin will still fall under the header.

Try this instead:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>"Kaffeefahrten" in Bornheim: hart durchgreifen, Senioren vor Betrügern schützen</title>
  <style>
  @page {
    margin: 120px 50px 80px 50px;
  }

  #header {
    position: fixed;
    top: -115px;
    width: 100%;
    height: 109px;
    background: #aaa url("path/to/logo.png") no-repeat right;
  }

  #content {
    background-color: #d1d977;
  }

  footer {
    position: fixed;
    bottom: -65px;
    height: 30px;
    background-color: #333399;
  }

  footer .page-number {
    text-align: center;
  }

  .page-number:before {
    content: "Seite " counter(page);
  }

  br[style] {
    display:none;
  }
  </style>
</head>
<body>
  <div id="header">
    <h2>ANTRAG</h2>
  </div>

  <footer>
    <div class="page-number"></div>
  </footer>

  <h1>"Kaffeefahrten" in Bornheim: hart durchgreifen, Senioren vor Betrügern schützen</h1>

  <div id="content">
    ...
  </div>
</body>
</html>

Note that you also don't have to specify any height/width for the content element (unless you want to further constrict the space it uses).

With CSS3 you could go with your original styling and re-use the margins by applying the box-decoration-break property. However as of writing dompdf does not yet support this property.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top