Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Image positioning error #3173

Open
freecorvette opened this issue Mar 30, 2023 · 6 comments · May be fixed by #2762
Open

Image positioning error #3173

freecorvette opened this issue Mar 30, 2023 · 6 comments · May be fixed by #2762
Labels
bug layout
Milestone
3.1.0

Comments

@freecorvette
Copy link

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
@bsweeney
Copy link
Member

bsweeney commented Mar 30, 2023 •
edited

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:
image

and like this with the update:
image

@bsweeney bsweeney added this to the 2.0.4 milestone Mar 30, 2023
@bsweeney bsweeney linked a pull request Mar 30, 2023 that will close this issue
Improve vertical alignment and related adjustments #2762
Open
@freecorvette
Copy link
Author

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.

@bsweeney
Copy link
Member

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
Copy link
Member

bsweeney commented Apr 4, 2023

FYI appears to be the same as #2180.

@freecorvette
Copy link
Author

@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;}

@bsweeney bsweeney modified the milestones: 2.0.4, 2.0.5 Jun 11, 2023
@ramonribeiro96
Copy link

hello everyone @bsweeney , I have the same problem, but when I tested the 'img {vertical-align: top;}' it looked like this:
image

correct:
image

so in images with different sizes one next to the other it will still cause another problem

@bsweeney bsweeney modified the milestones: 3.0.1, 3.1.0 May 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug layout
Projects
None yet
Milestone
3.1.0
Development

Successfully merging a pull request may close this issue.

Improve vertical alignment and related adjustments dompdf/dompdf
3 participants
@bsweeney @freecorvette @ramonribeiro96