dompdf
dompdf copied to clipboard
dompdf
Image positioning error
I found a strange, but consistent error with image positioning. See the very simple attached file.
- when including a single image in a div, it gets properly aligned with the div
- when including two images in the same div, they get shifted above the div Using DomPDF 2.0.3. test.zip test.pdf
Part of this appears to be incorrect adjustment to elements based on the line height. You can see this, particularly, with the following HTML:
<div style="border: 1px solid black;">
kittens<br>
<img src="https://placekitten.com/50/50" />
<img src="https://placekitten.com/50/50" />
</div>
I had started to work on a fix for the line height adjustment issue in #2762, though I ran into a roadblock then had to switch gears and just haven't gotten back to it. If you render with that version of the code you can see that the images are consistently placed (and is more consistent with browser rendering).
I don't think that update will make the next release though I hope to return to it afterwards.
For reference, the following sample:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div style="border: 1px solid black; display: inline-block;">
<img src="https://placekitten.com/50/50" />
</div>
<div style="border: 1px solid black; display: inline-block;">
<img src="https://placekitten.com/50/50" />
</div>
<div style="border: 1px solid black; display: inline-block;">
<img src="https://placekitten.com/50/50" />
<img src="https://placekitten.com/50/50" />
</div>
<div style="border: 1px solid black; display: inline-block;">
kittens<br>
<img src="https://placekitten.com/50/50" />
<img src="https://placekitten.com/50/50" />
</div>
</body>
</html>
renders like this on the current release:
and like this with the update:
Thank you, @bsweeney. I tried to use the vertical-align branch of the project, which contains your changes. The images alignment problems did go away, but unfortunately the changes created overall more layout problems in my PDFs (a lot of divs switched vertical alignment from top to bottom and some of them doubled their height), so I'm sticking to the release version for now and hope to get the fix benefits in a future release.
Ah ha ha yes I should have mentioned that it isn't quite ready for general use. I've seen the increased/increasing height issue. I don't think I've seen the vertical alignment issue so would be happy to have a sample to test against.
@bsweeney I was not able to properly isolate the vertical alignment issue. I will try again and send you the test if I get it right.
#2180 is indeed the same issue and a fix that's working for me is simply adding a CSS rule like:
img {vertical-align: top;}
hello everyone @bsweeney , I have the same problem, but when I tested the 'img {vertical-align: top;}' it looked like this:
correct:
so in images with different sizes one next to the other it will still cause another problem
