search

Jeckky / dompdf

Automatically exported from code.google.com/p/dompdf
0 stars 0 forks source link

Unordered list is vertically misaligned when using a non-default font #472

Open GoogleCodeExporter opened 8 years ago

GoogleCodeExporter commented 8 years ago 
What steps will reproduce the problem?

I converted the unicode Cardo TTF Google Web font to use in the PDF as I need 
to display scientific characters like µ μ. Cardo: 
http://www.google.com/webfonts/specimen/Cardo

This is the HTML used:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
#cardo{font-family:Cardo;}
</style>
</head>
<body>
<ul>
    <li>First Item μ</li>
    <li>Second Item</li>
    <li>Third Item</li>
    <li>Fourth Item</li>
</ul>
<ul id="cardo">
    <li>First Item μ</li>
    <li>Second Item</li>
    <li>Third Item</li>
    <li>Fourth Item</li>
</ul>
</body>
</html>

What is the expected output? What do you see instead?

The #cardo styled list bullets are not aligned with the text, but the unordered 
list that does not have a style assigned to it looks fine and is vertically 
aligned.

I tried the same code with an ordered list and it works fine for that and is 
aligned correctly, so it's evidently not the font that is the problem here.

What version of dompdf are you using? What version of PHP? On what
operating system?

Windows 7, PHP 5.3.5, latest DOMPDF version pulled from SVN Trunk today 
25-04-2012.

Thank you.

Original issue reported on code.google.com by a_re...@live.co.uk on 25 Apr 2012 at 1:11

GoogleCodeExporter commented 8 years ago 
Sample render with trunk r491 here:
http://eclecticgeek.com/dompdf/debug.php?identifier=c1080fd65093a582fbb61888c3ae
8f66

Original comment by eclecticgeek on 25 Apr 2012 at 6:31

GoogleCodeExporter commented 8 years ago 
I realized that our way to get text/line height was not accurate, I'm going to 
try to fix it, so that we don't even have to rely on the 
DOMPDF_FONT_HEIGHT_RATIO config.

Original comment by fabien.menager on 28 Apr 2012 at 3:56

GoogleCodeExporter commented 8 years ago 
To overcome this issue (until the bug is resolved) use CSS background-image 
property to add bullet points as background images.

Apparently you need to hide bullet points and prepare the image with single 
bullet point. 

.pdf-item ul li {
  padding-left: 30px;
  list-style-type: none;
  list-style-image: none;
  background-image: url("images/icons/list-icon.png");
  background-position: 0px 7px;
  background-repeat: no-repeat;
}

Original comment by Ivan.Gry...@gmail.com on 11 Apr 2013 at 4:26

GoogleCodeExporter commented 8 years ago

Original comment by eclecticgeek on 24 May 2013 at 3:00