Inconsistent spacing above level 2 headings #1288

pwaring · 2016-10-23T15:10:29Z

PHP version: 7.0.8-0ubuntu0.16.04.3
Dompdf version: 0.7.0 and master branch (as of today)

I've run into a problem with dompdf where the spacing above a level 2 heading is not always consistent. I've attached a sample PDF showing the problem - heading 5 has approximately double the spacing of the other level 2 headings.

Is there a way to fix or workaround this, or is it a limitation of dompdf (I don't mind if it's the latter, I just need to tell a client whether they can have consistent spacing or not).

sample.pdf

Code to generate the PDF:

<?php

require_once __DIR__ . '/dompdf-master/autoload.inc.php';

use Dompdf\Dompdf;

$dompdf = new Dompdf();
$dompdf->loadHtml(file_get_contents('pdf.html'));
$dompdf->setPaper('A4', 'portrait');
$dompdf->render();
$dompdf->stream();

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      table tr td.paragraph_number {
        padding-left: 25px;
        width: 50px;
      }

      table tr td.sub_paragraph_number {
        width: 25px;
      }

      table tr td {
        vertical-align: top;
      }
    </style>
  </head>
  <body>
    <h2>1. Header</h2>

    <table>
      <tr>
        <td class="paragraph_number">1.1</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue accumsan mauris, sed malesuada tortor auctor eget. Mauris elementum consequat consectetur. Proin interdum nec sem vel consectetur. Donec eu mollis mi, vel mattis velit. Nullam a sem accumsan, lacinia neque et, pulvinar lectus. In quis rutrum nisl, quis rutrum lacus. Aliquam faucibus consectetur est ac venenatis. Praesent et sagittis odio, vitae euismod nisl. Cras id pulvinar nisi. Curabitur porta luctus arcu, ut semper neque. Suspendisse sed est vitae metus ullamcorper condimentum. Donec a ipsum diam.</td>
      </tr>
      <tr>
        <td class="paragraph_number">1.2</td>
        <td>Etiam quam neque, sagittis sed egestas at, iaculis nec libero. Ut sed facilisis est. Curabitur aliquet euismod lorem a aliquam. Cras euismod nisi vel eros tempus consequat. Morbi sodales tellus est. In tristique, felis vel rhoncus commodo, mauris erat sollicitudin ex, quis hendrerit orci nunc non elit. Etiam tincidunt rutrum accumsan. Ut sapien lorem, varius ut orci nec, semper euismod turpis. Nam at tincidunt tellus, volutpat efficitur risus. Quisque eu tempus massa. Etiam mi nibh, auctor at efficitur in, laoreet a sapien.</td>
      </tr>
    </table>

    <h2>2. Header</h2>

    <table>
      <tr>
        <td class="paragraph_number">2.1</td>
        <td>Vestibulum vel tincidunt elit. Sed sodales quam ut velit fringilla condimentum. Nunc non commodo tortor, id iaculis massa. Praesent tempus enim ut aliquam pharetra. Etiam id leo magna. Morbi mauris tortor, varius id eros nec, commodo fermentum enim. Etiam fringilla odio sit amet molestie vulputate. Duis id molestie erat. Suspendisse feugiat odio nec mauris rhoncus, a dignissim mi pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent cursus sit amet lorem sit amet aliquam. Nullam vestibulum ac augue vel tempor.</td>
      </tr>
      <tr>
        <td class="paragraph_number">2.2</td>
        <td>Nulla sit amet mollis diam. Donec blandit tincidunt ante, iaculis sollicitudin risus imperdiet ut. In quam lacus, euismod nec lobortis sit amet, euismod ut nulla. Morbi ut ultricies massa. Ut sit amet imperdiet elit. Nunc eu imperdiet elit, at vestibulum lacus. Etiam augue risus, porta vel odio et, blandit posuere ligula.</td>
      </tr>
      <tr>
        <td class="paragraph_number">2.3</td>
        <td>Morbi vel lectus leo. Sed nisl velit, efficitur quis sollicitudin vitae, commodo vel libero. Nulla facilisi. Maecenas venenatis eu sem non mattis. Nam sit amet maximus quam. Cras lacinia tincidunt ante. Proin bibendum sapien a turpis suscipit, nec fermentum justo egestas. Nunc non mauris ut mi iaculis feugiat. Sed vel lectus volutpat, lobortis mi at, tristique libero. Pellentesque sodales elit eget nulla auctor commodo.</td>
      </tr>
    </table>

    <h2>3. Header</h2>

    <table>
      <tr>
        <td class="paragraph_number">3.1</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue accumsan mauris, sed malesuada tortor auctor eget. Mauris elementum consequat consectetur. Proin interdum nec sem vel consectetur. Donec eu mollis mi, vel mattis velit. Nullam a sem accumsan, lacinia neque et, pulvinar lectus. In quis rutrum nisl, quis rutrum lacus. Aliquam faucibus consectetur est ac venenatis. Praesent et sagittis odio, vitae euismod nisl. Cras id pulvinar nisi. Curabitur porta luctus arcu, ut semper neque. Suspendisse sed est vitae metus ullamcorper condimentum. Donec a ipsum diam.</td>
      </tr>
      <tr>
        <td class="paragraph_number">3.2</td>
        <td>Etiam quam neque, sagittis sed egestas at, iaculis nec libero. Ut sed facilisis est. Curabitur aliquet euismod lorem a aliquam. Cras euismod nisi vel eros tempus consequat. Morbi sodales tellus est. In tristique, felis vel rhoncus commodo, mauris erat sollicitudin ex, quis hendrerit orci nunc non elit.</td>
      </tr>
    </table>

    <h2>4. Header</h2>

    <table>
      <tr>
        <td class="paragraph_number">4.1</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue accumsan mauris, sed malesuada tortor auctor eget. Mauris elementum consequat consectetur. Proin interdum nec sem vel consectetur. Donec eu mollis mi, vel mattis velit. Nullam a sem accumsan, lacinia neque et, pulvinar lectus. In quis rutrum nisl, quis rutrum lacus. Aliquam faucibus consectetur est ac venenatis. Praesent et sagittis odio, vitae euismod nisl. Cras id pulvinar nisi. Curabitur porta luctus arcu, ut semper neque. Suspendisse sed est vitae metus ullamcorper condimentum. Donec a ipsum diam.</td>
      </tr>
    </table>

    <h2>5. Header</h2>

    <table>
      <tr>
        <td class="paragraph_number">5.1</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue accumsan mauris, sed malesuada tortor auctor eget. Mauris elementum consequat consectetur. Proin interdum nec sem vel consectetur. Donec eu mollis mi, vel mattis velit. Nullam a sem accumsan, lacinia neque et, pulvinar lectus. In quis rutrum nisl, quis rutrum lacus. Aliquam faucibus consectetur est ac venenatis. Praesent et sagittis odio, vitae euismod nisl. Cras id pulvinar nisi. Curabitur porta luctus arcu, ut semper neque. Suspendisse sed est vitae metus ullamcorper condimentum. Donec a ipsum diam.</td>
      </tr>
      <tr>
        <td class="paragraph_number">5.2</td>
        <td>Etiam quam neque, sagittis sed egestas at, iaculis nec libero. Ut sed facilisis est. Curabitur aliquet euismod lorem a aliquam. Cras euismod nisi vel eros tempus consequat. Morbi sodales tellus est. In tristique, felis vel rhoncus commodo, mauris erat sollicitudin ex, quis hendrerit orci nunc non elit. Etiam tincidunt rutrum accumsan. Ut sapien lorem, varius ut orci nec, semper euismod turpis. Nam at tincidunt tellus, volutpat efficitur risus. Quisque eu tempus massa. Etiam mi nibh, auctor at efficitur in, laoreet a sapien.</td>
      </tr>
    </table>

    <h2>6. Header</h2>

    <table>
      <tr>
        <td class="paragraph_number">6.1</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue accumsan mauris, sed malesuada tortor auctor eget.</td>
      </tr>
    </table>

    <h2>7. Header</h2>

    <table>
      <tr>
        <td class="paragraph_number">7.1</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue accumsan mauris, sed malesuada tortor auctor eget.</td>
      </tr>
    </table>

    <p>End of document</p>

  </body>
</html>

pwaring · 2016-11-14T11:18:50Z

Is there anything else I can do to help with this? I'm happy to test patches if it is a bug.

bsweeney · 2016-11-14T18:20:00Z

So far I've been unable to reproduce the issue. Are you using any particular font?

pwaring · 2016-11-14T18:31:09Z

No, my code and HTML is exactly as above. I haven't specified a font so dompdf seems to default to Times New Roman (12pt by the looks of it).

bsweeney · 2016-11-15T15:03:52Z

Well, you've tried the master branch. Want to give the develop branch a try?

pwaring · 2016-11-15T15:12:41Z

It's even less consistent if I use develop:
sample.pdf

If the heading is at the top of the page, the amount of padding following the heading is greater than if the heading is mid-page.

pwaring · 2016-12-05T16:22:50Z

Is there anything else I can do to help fix this?

bsweeney · 2016-12-06T03:37:09Z

I am able to reproduce the issue at the top of the page on the develop branch. By adding the layout debugging outlines to the output (sample) I can see that the first header element has a greater height than needed. I'm not sure where that's coming from ... could be something that cascaded from the page styling, but I'll need to research this a bit more.

If you add an empty block element above the affected header elements the spacing is normalized.

pwaring · 2016-12-07T14:06:24Z

Thanks, sticking an empty block (e.g. <br>) seems to have done the trick and provided I do it on every heading (since I don't know which ones will be at the top of each page) it seems to result in consistent heading spacings.

bsweeney · 2016-12-07T15:14:35Z

I used a <div></div> ... should have less visual affect on the spacing (I believe).

bsweeney · 2016-12-08T04:29:53Z

Ack...I can't unsee this error! I don't know if I just didn't notice before, but now I am seeing the extra spacing in my test bed and I don't remember seeing it before.

pwaring changed the title ~~Consistent spacing above level 2 headings~~ Inconsistent spacing above level 2 headings Oct 23, 2016

bsweeney added the bug label Dec 6, 2016

bsweeney added this to the 0.7.2 milestone Dec 6, 2016

bsweeney closed this as completed in 09da06a Jan 25, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Inconsistent spacing above level 2 headings #1288

Inconsistent spacing above level 2 headings #1288

pwaring commented Oct 23, 2016 •

edited

pwaring commented Nov 14, 2016

bsweeney commented Nov 14, 2016

pwaring commented Nov 14, 2016

bsweeney commented Nov 15, 2016

pwaring commented Nov 15, 2016 •

edited

pwaring commented Dec 5, 2016

bsweeney commented Dec 6, 2016 •

edited

pwaring commented Dec 7, 2016

bsweeney commented Dec 7, 2016

bsweeney commented Dec 8, 2016

Inconsistent spacing above level 2 headings #1288

Inconsistent spacing above level 2 headings #1288

Comments

pwaring commented Oct 23, 2016 • edited

pwaring commented Nov 14, 2016

bsweeney commented Nov 14, 2016

pwaring commented Nov 14, 2016

bsweeney commented Nov 15, 2016

pwaring commented Nov 15, 2016 • edited

pwaring commented Dec 5, 2016

bsweeney commented Dec 6, 2016 • edited

pwaring commented Dec 7, 2016

bsweeney commented Dec 7, 2016

bsweeney commented Dec 8, 2016

pwaring commented Oct 23, 2016 •

edited

pwaring commented Nov 15, 2016 •

edited

bsweeney commented Dec 6, 2016 •

edited