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

Wrong vertical alignment of float elements in tables #2216

Closed
minorum opened this issue Aug 1, 2024 · 2 comments
Closed

Wrong vertical alignment of float elements in tables #2216

minorum opened this issue Aug 1, 2024 · 2 comments
Labels
bug Existing features not working as expected
Milestone
63.0

Comments

@minorum
Copy link

minorum commented Aug 1, 2024

There seems to be an issue with calculating table width even after #2087
The results differ between WeasyPrint and how browsers render the tables.

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
            
        

</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="width: 100%;-webkit-text-size-adjust: none;margin: 0;padding: 0;color: #000;font-family: Verdana,sans-serif;font-size: 11pt;line-height: normal;text-align: left">
    <div style="font-family: Verdana,sans-serif; font-size: 11pt; min-height: 1em; text-align: justify">
<table border="0" style="height: 67px; width: 100%; background-color: #ffffff; margin-left: auto; margin-right: auto">
<tbody style="">
<tr style="height: 33px">
<td style="padding: 0; border-collapse: collapse; width: 798px; height: 33px;">
<table border="0" style="height: 168px; width: 100%; border-collapse: collapse; background-color: #cad7e0; border-style: none">
<tbody style="">
<tr style="height: 168px">
<td style="padding: 0; border-collapse: collapse; width: 100%; height: 168px; border-style: none;">
<table border="0" style="height: 168px; width: 362px; border-collapse: collapse; background-color: #cad7e0; border-style: none; float: right">
<tbody style="">
<tr style="">
<td style="padding: 0; border-collapse: collapse; width: 362px; border-style: none;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="height: 34px">
<td style="padding: 0; border-collapse: collapse; width: 640px; height: 34px;">
<div style="font-family: Verdana,sans-serif; font-size: 11pt; text-align: left; min-height: 1em">&nbsp;</div>
<table border="0" height="22" style="height: 14px; width: 90%; border-collapse: collapse; border-style: none; margin-left: auto; margin-right: auto">
<tbody style="">
<tr style="height: 18px">
<td style="padding: 0; border-collapse: collapse; width: 600px; height: 18px; border-style: none;"><div style="min-height: 1em">test</div></td>
</tr>
</tbody>
</table>
<div style="min-height: 1em">&nbsp;</div>
</td>
</tr>
</tbody>
</table>
</div>


</body></html>

WeasyPrint:
image

Chrome:
image

The html is dynamic it comes from tinymce editor so we don't have 100% control over it.
@liZe liZe added the bug Existing features not working as expected label Aug 1, 2024
@liZe liZe changed the title issues with table width Wrong vertical alignment of float elements in tables Aug 9, 2024
@liZe
Copy link
Member

liZe commented Aug 9, 2024

It’s not a problem with the columns widths, it’s because of the float in a row with fixed height.

<table style="width: 200px; background-color: green">
  <tr>
    <td style="height: 100px">
      <div style="height: 100px; width: 100px; background-color: blue; float: right"></div>
    </td>
  </tr>
</table>

@liZe liZe added this to the 63.0 milestone Aug 10, 2024
@liZe liZe closed this as completed in 9213f62 Aug 10, 2024
@liZe
Copy link
Member

liZe commented Aug 10, 2024

Thanks for the report! It should work now, feedback is welcome.

grewn0uille added a commit that referenced this issue Nov 11, 2024
@grewn0uille
Only fix alignment for out-of-flow cell chidren.
5c4e995 
Related to #2216.
Fix #2293.
liZe pushed a commit that referenced this issue Nov 11, 2024
@grewn0uille @liZe
Include floats in calculation of minimum cell height
8c08e68 
We calculate the height of a cell by rendering the cell as a block after
setting an auto height to the cell. This way, it can grow if needed.

But setting the height attribute is not enough: we take care of floats in
finish_block_formatting_context, that checks for the style value: we have to
fake this value too.

Related to #2216. Fix #2293.
@liZe liZe mentioned this issue Nov 11, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Existing features not working as expected
Projects
None yet
Milestone
63.0
Development

No branches or pull requests
2 participants
@liZe @minorum