Hyphens between digits truncate min-content width, but they don't break on the final layout, with hyphens: auto
Categories
(Core :: Layout: Text and Fonts, defect)
Tracking
()
People
(Reporter: bugzilla, Assigned: emilio)
Details
Attachments
(4 files)
Screenshot from desktop mobile device preview (same bug on real Firefox for Android)
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:82.0) Gecko/20100101 Firefox/82.0
Firefox for Android
Steps to reproduce:
Create a table that contains dates in ISO 8601 format (YYYY-MM-DD) and make the window size so small that not all contents fit in the table. Then Chrome will wrap the dates and make the table columns narrower. Firefox, however, does not wrap the dates, which I prefer because wrapped dates are ugly (but then again, I should use CSS white-space nowrap for that). So the dates always remain in one text line. But the table columns are resized so small as if the dates were wrapped. So Firefox is a bit schizophrenic here, it thinks the text is wrapped and the column is narrower, but then it renders the text unwrapped and the column is too narrow now.
I have JavaScript in place that detects resize events and measures the table width to see if everything fits in the window. If not, it begins hiding columns and offers a column overflow menu with the hidden content. This is my approach to responsibe data and form tables. It works really nice everywhere, but not with table content that has hyphens in it. Because Firefox makes the table narrower that it's allowed to be with its content, I never see the table too wide and cannot hide the columns. Firefox is lying to me and so effectively preventing me to solve the space problem for the user.
So the bug here is that table column sizing is broken if the text wrapping is okay, or text wrapping is broken. Anyway, it's a bug that needs to be fixed. Web developers can't fix it. Chrome does not expose this bug.
|
||
Comment 1•4 years ago
|
||
Bugbug thinks this bug should belong to this component, but please revert this change in case of error.
|
||
Comment 2•4 years ago
|
||
Thanks for the bug report, Yves. Do you have a URL for that content so we can test with it, or can you attach the page to this bug?
|
Reporter | |
Comment 3•3 years ago
|
||
Here's a simple file that reproduces the issue. Change the mobile viewport width to see how the dates are reaching into the next column before the width of the table is stable.
|
|
||
Comment 4•3 years ago
|
||
The severity field is not set for this bug.
:emilio, could you have a look please?
For more information, please visit auto_nag documentation.
|
Assignee | |
Comment 5•3 years ago
|
||
Not sure to what extent this is a tables bug or a text bug... Jonathan?
Two things come to mind:
- I don't think there should be wrapping in the test-case in comment 3 because there's no language specified.
- But even if I add
lang="de"orlang="en"to<body>, the date won't wrap ("Content" would though). - I can make the date wrap if I add something like
td:first-child { overflow-wrap: anywhere }(but that of course is suboptimal because it can break in between numbers).
So my guess is that this might be just our hyphenation behavior. In fact, a reduced test-case could just be:
<!doctype html>
<body lang="en">
<p style="width: 10em; hyphens: auto">
2020-2020-2020-2020-2020-2020-2020-2020-2020-2020-2020-2020-2020-2020-2020-2020
</p>
</body>
Which chromium breaks but we don't.
|
|
Assignee | |
Updated•3 years ago
|
|
|
Assignee | |
Comment 6•3 years ago
|
||
(Maybe there's a better way to solve this use case btw)
|
||
Comment 7•3 years ago
|
||
hyphens:auto wouldn't be relevant here, that's about inserting possible hyphenation-breaks within words, where there's no explicit hyphen in the content.
The issue here is that we don't like to break within a digit/hyphen/digit sequence. In many cases this is good; it's preferable to avoid breaking things like a reference to "pages 9-10" or "the week of December 1-10", both of which Chrome will happily break after the hyphen if it happens to reach the end of line here. I'd argue our behavior of breaking before the complete digit/hyphen/digit sequence is usually better.
In extreme cases, though, it might be desirable to allow a break there as a "last resort".
|
|
Reporter | |
Comment 8•3 years ago
|
||
I believe the main issue got lost a bit here. I'm fine with not wrapping these dates, that's actually what I expect. But then the table column must claim the space for its content just like any other column does. But it doesn't. It claims less space than its content needs and lets its content exceed into the next column. That's the bug. It seems to render the text unwrapped, but measure it wrapped. That really should be the same.
Might be a layout issue?
I need the space claimed so that I can measure the size with JavaScript. That's the requirement so that I can determine that there isn't enough space and do something about it (here: hide some columns and move their content into an overflow dialog). If the table happily squeezes itself into the available space while the content paints over each other, I'll never detect a lack of space and cannot provide the user with an ideal presentation.
|
|
Assignee | |
Comment 9•3 years ago
|
||
Ah, I see now, yeah, that looks bogus, sorry for misunderstanding.
It's like if the min-content size wanted to break but the actual layout said nope. It is not specific to tables, the following two things shouldn't render differently if we decide not to wrap:
data:text/html,<div style="width: 50px"><div style="display: inline-block; border: 1px solid; hyphens: auto">2020-01-022020-01-022020-01-022020-01-022020-01-022020
data:text/html,<div style="width: 50px"><div style="display: inline-block; border: 1px solid;">2020-01-022020-01-022020-01-022020-01-022020-01-022020
|
|
Assignee | |
Updated•3 years ago
|
|
|
||
Comment 10•3 years ago
|
||
Oh, right - sorry, I also misunderstood the point here. Yes, that looks like a bug.
There's something weird happening with min-content width in general when hyphens:auto is applied, actually; not just with digits. I see (slightly) incorrect widths with examples like
data:text/html,<div style="width: min-content; display: inline-block; border: 1px solid; hyphens: auto">a-b
or
data:text/html,<div style="width: min-content; display: inline-block; border: 1px solid; hyphens: auto">abc-def
too.
|
||
Comment 11•3 years ago
|
||
Reproduced on all latest Firefox versions on MacOS 10.15. Updating affected flags, this issue is not reproducible on Chrome.
|
|
Assignee | |
Updated•3 years ago
|
|
|
Assignee | |
Comment 12•3 years ago
|
||
|
|
Assignee | |
Comment 13•3 years ago
|
||
|
||
Updated•3 years ago
|
|
|
Assignee | |
Updated•3 years ago
|
|
||
Comment 14•3 years ago
|
||
Pushed by ealvarez@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/9d0f1fc9eac3 Fix hyphenated text min-content size. r=jfkthame
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/31203 for changes under testing/web-platform/tests
|
||
Comment 16•3 years ago
|
||
| bugherder | ||
Upstream PR merged by moz-wptsync-bot
|
||
Updated•3 years ago
|
Description
•