Flexbox layout cuts icon fonts in half
Categories
(Core :: Layout: Text and Fonts, defect)
Tracking
()
People
(Reporter: joshas, Unassigned)
Details
Attachments
(1 file)
|
13.91 KB,
image/png
|
Details |
Screenshot from 2024-06-10 18-53-04.png
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:126.0) Gecko/20100101 Firefox/126.0
Steps to reproduce:
Really peculiar issue with icon font rendering on https://develop.kde.org/hig/icons/ website.
Actual results:
Arrow icons, provided as arrow fonts, are cut into two and rendered on two lines.
Expected results:
Icon should not be split. If I set "flex-shrink: 0" on <a> element containing the icon, this fixes the issue. What is strange, that flex layout can split single object into two and render both on separate lines.
|
||
Comment 1•1 year ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Layout: Text and Fonts' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
||
Comment 2•1 year ago
|
||
Those arrow icons are not "single objects". They're implemented as ligatures in the font: what looks like a > symbol is actually a ligature of the seven characters go-next.
When the flex item is being shrunk to its minimum width, this results in a line-break after go-.
Applying white-space: nowrap to the <a> element (or the ::before pseudos that generate the icons) would prevent this.
(The fact that when this happens, the icon renders in two fragments is a known issue, see bug 479829. But even if that were fixed, we'd probably still get two lines, with go- on the first and next on the second, and no resulting ligature. The workaround here is to ensure that the hyphen is not treated as a possible line-break, e.g. by setting white-space or text-wrap-mode appropriately. Or don't use potentially-splittable strings as the underlying encoding for what should be a single symbol. There are perfectly good Unicode codepoints for a RIGHT ARROW symbol. Then something reasonable would appear even if the icon font failed to load for whatever reason...)
|
|
||
Comment 3•1 year ago
|
||
Marking this as a dupe of bug 479829, which is about inappropriately painting fragments of a ligature when the underlying text is split across lines; but as noted in comment 2, in this example I think the site's CSS should be modified to handle this better, in which case the issue won't arise here.
Thank you for detailed explanation. Apologies for assuming this was a bug.
Description
•