Text doesn't align to baseline in tables, especially when it has line breaks
Summary
#1891 arised some of the problems we have regarding our table layout implementation.
The two problems reproducible by the code in this issue are:
- Text with line breaks doesn't align to baseline in tables
- Baseline aligned text looks different for text-top, text-bottom etc. It should look the same inside a table.
Operating system
macOS
Steps to reproduce
- Create a file with the attached reproducer
- Open it in Ladybird
- Observe
Expected behavior
Table renders as on "Safari" screenshot. I complies with standards, as well as any major web-browser.
Actual behavior
Table renders as on "Ladybird" screenshot.
URL for a reduced test case
N/A
HTML/SVG/etc. source for a reduced test case
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
td {
border: 1px solid black;
width: 300px;
height: 300px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td style="vertical-align: text-top;">
Text aligned at the top
</td>
<td style="vertical-align: text-bottom;">
Text aligned at the bottom
</td>
<td style="vertical-align: baseline;">
Text aligned at the baseline
</td>
<td>
Normal content for reference
</td>
</tr>
<tr>
<td style="vertical-align: text-top;">
Short text<br>with <br>line breaks
</td>
<td style="vertical-align: text-bottom;">
<div style="height: 50px;">A block element</div>
in the cell
</td>
<td style="vertical-align: baseline;">
Text aligned<br>at the baseline
</td>
<td>
Reference content with normal alignment
</td>
</tr>
</table>
</body>
</html>Log output and (if possible) backtrace
N/AScreenshots or screen recordings
Ladybird:
Safari:
Build flags or config settings
No response
Contribute a patch?
- I’ll contribute a patch for this myself.
LadybirdBrowser / ladybird
Truly independent web browser
21.3k
Contributors get 100% of received funds after fees
How does funding with Polar work?
1
Pay now to fund the work behind this issue.
2
Get updates on progress being made.
3
Maintainer is rewarded once the issue is completed.
FAQ
Backer
You're funding impactful open source efforts
Contributor
You want to contribute to this effort
Maintainer
You want to get funding like this too