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

Multiple images in any element (div, table, span...) move outside of the container #2180

Open
simonschaufi opened this issue Jun 28, 2020 · 5 comments · May be fixed by #2762
Open

Multiple images in any element (div, table, span...) move outside of the container #2180

simonschaufi opened this issue Jun 28, 2020 · 5 comments · May be fixed by #2762
Labels
bug layout
Milestone
3.1.0

Comments

@simonschaufi
Copy link

simonschaufi commented Jun 28, 2020 •
edited

Dompdf version: v0.8.5

I couldn't believe what dompdf is doing but I guess I found a bug. Green is expected, red is an error.

Steps to reproduce:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        img {
            border-radius: 50%;
        }
    </style>
</head>
<body>
<h2>Table</h2>
<table>
    <tbody>
    <tr>
        <td style="background-color: lightgreen">
            <img src="ok.jpg" />
        </td>
        <td style="background-color: #E6492D">
            <img src="wrong.jpg" />
            <img src="wrong.jpg" />
        </td>
    </tr>
    </tbody>
</table>

<h2>div with 1</h2>
<div style="background-color: lightgreen">
    <img src="ok.jpg" />
</div>

<h2>div with 2</h2>
<div style="background-color: #E6492D">
    <img src="wrong.jpg" />
    <img src="wrong.jpg" />
</div>
</body>
</html>

Result

image

I tried everything I can but I din't find any css attribute that could fix this issue. I'm wondering what exactly pushes the images up as there are no styles applied.

I'm ready to sponsor a bug fix.

PS: Even the border radius is wrong as it should be a circle and not just a little round edges but that's another bug...
@simonschaufi simonschaufi changed the title Multiple images in block element (div, table) move outside of the container Multiple images in any element (div, table, span...) move outside of the container Jun 28, 2020
@bsweeney bsweeney added this to the dompdf-next milestone Jun 30, 2020
@simonberger
Copy link
Member

Hi @simonschaufi thank you for your bug report.
I found the reason for the problem. I currently have no patch for this because I can't assess the impact of changes at the particular code.
But I have a non-hacky CSS fix for you that solves the problem and also works correctly in the browser.

img {
    border-radius: 50%;
    vertical-align: top;
 }

There is some strange code moving inline elements which have the default value baseline. top deactivates this.

@simonberger
Copy link
Member

Regarding border-radius. Support is limited to simple values at the moment and percentage values do not work as expected at all.
The best you can do is to use 50% Pixel size of the smallest side of your image to get decent results. For square images this would be even your desired result.
I used border-radius: 50px on a 100 x 150 pixel image.
This is something that could be improved in the future.

@simonschaufi
Copy link
Author

simonschaufi commented Jul 3, 2020 •
edited

@simonberger You made my day! the vertical-align: top; solves my issue but this is a really dirty hack ;) I hope you come up with a proper bug fix. The funny thing is that with one element it works and it only breaks for 2 or more elements.

Regarding the border-radius: You can get the image size from GD easily with getimagesize and then do the 50% calculation.

@TomLorenzi
Copy link

Any update or fix about this ?

vertical-align: top; fix the problem but it really look dirty :/

@bsweeney bsweeney modified the milestones: dompdf-next, 2.0.4 Apr 4, 2023
@bsweeney bsweeney linked a pull request Apr 4, 2023 that will close this issue
Improve vertical alignment and related adjustments #2762
Open
@bsweeney bsweeney mentioned this issue Apr 4, 2023
Open
@bsweeney
Copy link
Member

bsweeney commented Apr 4, 2023

Not really. 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. I don't think that update will make the next release though I hope to return to it afterwards.

@bsweeney bsweeney modified the milestones: 2.0.4, 2.0.5 Jun 11, 2023
@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
4 participants
@bsweeney @simonschaufi @simonberger @TomLorenzi