URL: https://jsfiddle.net/vwLso5b8/8/
Browser / Version: Firefox 128.0
Operating System: Windows 10
Tested Another Browser: Yes Chrome
Problem type: Design is broken
Description: Items are misaligned
Steps to Reproduce:
It is my understanding that span tags should be layout-neutral. However, on Firefox the use of span tags inside another element (including inline elements) sometimes changes formatting when "text-align: justify" is used. In the JS Fiddle linked, the text content of the two divs are identical. However, justification is different.
The glitch can be hard to reproduce because text justification is only inconsistent at certain widths. In this example, in my local browser, setting the container to 410px did it. However, if the problem is not apparent, just remove the fixed width and drag to resize the window for a bit and it'll eventually pop up.
It's also hard to pinpoint what's wrong because changing CSS (font-size, white-space, word-break, font-kerning etc.) will seemingly fix it. However, you'll soon realize that it's not really fixed, it's just that the text has repositioned and will now break at a different width. Nothing that I tried solved it definitively, although sometimes it took longer for the problem to manifest.
I suspect it's something in the text justification algorithm.
View the screenshot
Browser Configuration
From webcompat.com with ❤️
URL: https://jsfiddle.net/vwLso5b8/8/
Browser / Version: Firefox 128.0
Operating System: Windows 10
Tested Another Browser: Yes Chrome
Problem type: Design is broken
Description: Items are misaligned
Steps to Reproduce:
It is my understanding that span tags should be layout-neutral. However, on Firefox the use of span tags inside another element (including inline elements) sometimes changes formatting when "text-align: justify" is used. In the JS Fiddle linked, the text content of the two divs are identical. However, justification is different.
The glitch can be hard to reproduce because text justification is only inconsistent at certain widths. In this example, in my local browser, setting the container to 410px did it. However, if the problem is not apparent, just remove the fixed width and drag to resize the window for a bit and it'll eventually pop up.
It's also hard to pinpoint what's wrong because changing CSS (font-size, white-space, word-break, font-kerning etc.) will seemingly fix it. However, you'll soon realize that it's not really fixed, it's just that the text has repositioned and will now break at a different width. Nothing that I tried solved it definitively, although sometimes it took longer for the problem to manifest.
I suspect it's something in the text justification algorithm.
View the screenshot
Browser Configuration
From webcompat.com with ❤️