line-height does not render in the middle #670

jorgenhorstink · 2013-06-20T10:35:05Z

Hi,

Yesterday I've been digging into the source code, but I was not able to isolate the issue. Line-height is not rendered in the middle as a webbrowser does;

<!DOCTYPE html>
<html>
    <body>
        <div style="font-size: 40px; line-height: 400px; border: 1px solid red; width: 500px;">Not in the middle</div>
    </body>
</html>

I cloned the most recent version of the source code, and I am still able to reproduce the issue. I do not know the details about how line-height should be calculated and rendered, but I think it is a bug. Am I right, if so, any ideas how to fix the issue? I think it has something to do with the way the position of line boxes is calculated.

expected result
The text Not in the middle, should be in the middle.

The text was updated successfully, but these errors were encountered:

bsweeney · 2013-06-20T19:53:33Z

It's not perfect, but if you add vertical-align: middle to your style then the placement by dompdf is much closer to what you see in the browser.

jorgenhorstink · 2013-06-21T08:04:45Z

I see, it helps a bit. Do you have any idea what causes the issue? I'd love to see this issues fixed, and if you can point me in the right direction, I'm going to spend some time at least trying to fix it. I suppose it has something to do with the way the position of line boxes is being calculated...

jorgenhorstink · 2013-06-21T09:06:29Z

This one breaks vertical-align... See comment below

I made some changes, but I don't know if it is going to break on other cases. It seems to fix the line-height issue.

HTML used:

<!DOCTYPE html>
<html>
  <body>
    <h1>DOMPDF</h1>
    <div style="font-size: 20px; line-height: 30px; margin-bottom: 10px; vertical-align: top; border: 1px solid red; width: 500px;">Line<br>Line</div>
    <div style="font-size: 20px; line-height: 140px; margin-bottom: 10px; vertical-align: bottom; border: 1px solid red; width: 500px;">Line<br>Line</div>
    <div style="font-size: 50px; line-height: 50px; margin-bottom: 10px; border: 1px solid red; width: 500px;">Line</div>
    <div style="font-size: 14px; line-height: 40px; margin-bottom: 10px; border: 1px solid red; width: 500px;">Line</div>
    <div style="font-size: 20px; line-height: 30px; margin-bottom: 10px; border: 1px solid red; width: 500px;">Line</div>
  </body>
</html>

Added to style.cls.php:

function has_normal_line_height() {
  return $this->_props["line_height"] === "normal";
}

Added to block_frame_reflower.cls.php vertical_align function:

// Prevent vertical_align if the element has line-height
if (!$frame->get_parent()->get_style()->has_normal_line_height()) {
    continue;
}

Added a new function to block_frame_reflower.cls.php:

function line_height() {

  $canvas = null;

  foreach ( $this->_frame->get_line_boxes() as $line ) {

    $height = $line->h;

    foreach ( $line->get_frames() as $frame ) {
      $style = $frame->get_style();

      if ( $style->display !== "inline" ) {
        continue;
      }

      if ( !isset($canvas) ) {
        $canvas = $frame->get_root()->get_dompdf()->get_canvas();
      }

      $fontheight = $canvas->get_font_height($style->font_family, $style->font_size);

      $lineHeight = $frame->get_parent()->get_style()->line_height;

      $y_offset = ($height - $fontheight) / 2;

      if ( $y_offset ) {
        $frame->move(0, $y_offset);
      }
    }
  }
}

Added to block_frame_reflower.cls.php within reflow function after call $this->vertical_align();:

$this->line_height();

Result as attached:

jorgenhorstink · 2013-06-21T10:03:02Z

Okey, the previous comment broke the vertical-align...

Using 0.9 as arbitrary value gave me better results compared to Google Chrome.

<!DOCTYPE html>
<html>
  <body>
    <h1>DOMPDF</h1>
    <div style="border: 1px solid red; width: 700px; margin-bottom: 10px;">
      <span style="line-height: 30px; font-size: 14px;">lh 20px fs 10px</span>
      <span style="vertical-align: middle; font-size: 14px;">lh 40px fs 10px</span>
      <span style="vertical-align: top; font-size: 14px;">lh 40px fs 10px</span>
      <span style="vertical-align: bottom; font-size: 14px;">B lh 40px fs 10px</span>
    </div>
    <div style="border: 1px solid red; width: 700px; margin-bottom: 14px;">
      <span style="line-height: 30px; font-size: 14px">lh 20px fs 10px</span>
    </div>
    <div style="border: 1px solid red; width: 700px; margin-bottom: 10px;">
      <span style="line-height: 60px; font-size: 30px;">lh 20px fs 10px</span>
      <span style="vertical-align: middle; font-size: 30px;">lh 40px fs 10px</span>
      <span style="vertical-align: top; font-size: 14px;">lh 40px fs 10px</span>
      <span style="vertical-align: bottom; font-size: 20px;">lh 40px fs 10px</span>
    </div>
    <div style="border: 1px solid red; width: 700px; margin-bottom: 14px;">
      <span style="line-height: 50px; font-size: 50px">lh 20px fs 10px</span>
    </div>
    <div style="font-size: 20px; line-height: 30px; margin-bottom: 10px; vertical-align: top; border: 1px solid red; width: 700px;">Line<br>Line</div>
    <div style="font-size: 20px; line-height: 70px; margin-bottom: 10px; vertical-align: bottom; border: 1px solid red; width: 700px;">Line<br>Line</div>
    <div style="font-size: 50px; line-height: 50px; margin-bottom: 10px; border: 1px solid red; width: 700px;">Line</div>
    <div style="font-size: 14px; line-height: 40px; margin-bottom: 10px; border: 1px solid red; width: 700px;">Line</div>
    <div style="font-size: 20px; line-height: 30px; margin-bottom: 10px; border: 1px solid red; width: 700px;">Line</div>
  </body>
</html>

...

class Block_Frame_Reflower extends Frame_Reflower {
  ...
  function line_height() {

    $canvas = null;

    foreach ( $this->_frame->get_line_boxes() as $line ) {

      $height = $line->h;

      foreach ( $line->get_frames() as $frame ) {
        $style = $frame->get_style();

        if ( $style->display !== "inline" ) {
          continue;
        }

        // skip if we don't have a line height
        if ($frame->get_parent()->get_style()->has_normal_line_height()) {
          continue;
        }

        if ( !isset($canvas) ) {
          $canvas = $frame->get_root()->get_dompdf()->get_canvas();
        }

        $baseline = $canvas->get_font_baseline($style->font_family, $style->font_size);
        $fontheight = $canvas->get_font_height($style->font_family, $style->font_size);

        $lineHeight = $frame->get_parent()->get_style()->line_height;

        $y_offset = ($height * 0.8 - $baseline) / 2;

        if ( $y_offset ) {
          $frame->move(0, $y_offset);
        }
      }
    }
  }

  /**
   * Align inline children vertically.
   * Aligns each child vertically after each line is reflowed
   */
  function vertical_align() {

    $canvas = null;

    foreach ( $this->_frame->get_line_boxes() as $line ) {

      $height = $line->h;

      foreach ( $line->get_frames() as $frame ) {
        $style = $frame->get_style();

        if ( $style->display !== "inline" ) {
          continue;
        }

        if (!$frame->get_parent()->get_style()->has_normal_line_height()) {
          continue;
        }

        $align = $frame->get_parent()->get_style()->vertical_align;

        if ( !isset($canvas) ) {
          $canvas = $frame->get_root()->get_dompdf()->get_canvas();
        }

        $baseline = $canvas->get_font_baseline($style->font_family, $style->font_size);
        $fontheight = $canvas->get_font_height($style->font_family, $style->font_size);

        $y_offset = 0;


        switch ($align) {
          case "baseline":
            $y_offset = $height*0.9 - $baseline; // The 0.8 ratio is arbitrary until we find it's meaning
            break;

          case "middle":
            $y_offset = ($height*0.9 - $baseline) / 2;
            break;

          case "sub":
            $y_offset = 0.3 * $height;
            break;

          case "super":
            $y_offset = -0.2 * $height;
            break;

          case "text-top":
          case "top": // Not strictly accurate, but good enough for now
            break;

          case "text-bottom":
          case "bottom":
            $y_offset = $height* 0.9 - $baseline;
            break;
        }

        if ( $y_offset ) {
          $frame->move(0, $y_offset);
        }
      }
    }
  }

  function reflow ... {
    ...
    $this->_text_align();
    $this->vertical_align();
    $this->line_height();
    ...
  }
  ...
}

bsweeney · 2013-06-24T14:35:08Z

Thanks for the feedback. Right now I can't be of too much more help. @PhenX has more knowledge of how dompdf works internally so if he has time to look into this he'll be able to provide some feedback on what you found.

Paroca72 · 2019-05-16T08:14:49Z

This bug is still open on the 0.8.3 version!

bsweeney · 2019-05-29T01:44:23Z

Indeed. Dompdf currently handles line-height mostly at the block level. Using the example provided earlier you can get a better rendering if you style the span elements with display: inline-block;.

bsweeney · 2022-01-29T21:08:08Z

alignment is generally improved with #2726 but going through the samples here I do still see some room for improvement

bsweeney added the layout label May 29, 2019

bsweeney modified the milestones: 1.0.0, dompdf-next Nov 10, 2020

bsweeney added the css label Nov 4, 2021

bsweeney modified the milestones: dompdf-next, 1.1.1 Nov 4, 2021

bsweeney mentioned this issue Nov 4, 2021

Images with subsequent elements are vertically misaligned #2630

Open

bsweeney linked a pull request Aug 25, 2022 that will close this issue

Improve vertical alignment and related adjustments #2762

Open

bsweeney modified the milestones: 2.0.1, 2.0.2 Aug 25, 2022

bsweeney modified the milestones: 2.0.2, 2.0.3 Dec 29, 2022

gidzr mentioned this issue Jan 9, 2024

Not applying true css / styles : line-height and fonts issue #3369

Closed

bsweeney modified the milestones: 3.0.1, 3.1.0 May 13, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

line-height does not render in the middle #670

line-height does not render in the middle #670

jorgenhorstink commented Jun 20, 2013

bsweeney commented Jun 20, 2013

jorgenhorstink commented Jun 21, 2013

jorgenhorstink commented Jun 21, 2013

jorgenhorstink commented Jun 21, 2013

bsweeney commented Jun 24, 2013

Paroca72 commented May 16, 2019

bsweeney commented May 29, 2019

bsweeney commented Jan 29, 2022 •

edited

line-height does not render in the middle #670

line-height does not render in the middle #670

Comments

jorgenhorstink commented Jun 20, 2013

bsweeney commented Jun 20, 2013

jorgenhorstink commented Jun 21, 2013

jorgenhorstink commented Jun 21, 2013

jorgenhorstink commented Jun 21, 2013

bsweeney commented Jun 24, 2013

Paroca72 commented May 16, 2019

bsweeney commented May 29, 2019

bsweeney commented Jan 29, 2022 • edited

bsweeney commented Jan 29, 2022 •

edited