Layout inconsistency between Firefox and other browsers on two different language script with `vertical-lr`
Categories
(Core :: Layout, defect)
Tracking
()
People
(Reporter: yvvki, Unassigned)
Details
Steps to reproduce:
In response to https://stackoverflow.com/q/78995150/14511192.
This code snippet produce different layout on Firefox and other browsers (ex. Chrome):
<h1 style="writing-mode: vertical-lr;">
結ꦲꦂꦠꦤ꧀ꦠ
</h1>
Actual results:
The Javanese script is aligned to the center right of the kanji, however on Chrome it is aligned to the left side of the kanji. This is also happens but less prevalent on Latin alphabet.
Expected results:
Layout should be consistent across browser, including Firefox.
|
||
Comment 1•1 year ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
||
Comment 2•1 year ago
|
||
Yes, there's definitely a different behavior here. What I think is really happening is that Firefox is setting the Javanese on an alphabetic baseline (as it is rotated 90° to be "sideways" text), and then aligning this with the vertical center baseline of the Kanji, while Chrome is setting the Javanese on a centered baseline in the cross-stream direction. This can be seen more readily if you vary the font size of the Javanese text: in Firefox, different sizes stay on the same alphabetic baseline, while in Chrome the alphabetic baseline varies because the text is being center-aligned:
data:text/html;charset=utf-8,<h1 style="writing-mode: vertical-lr;">%E7%B5%90%EA%A6%B2%EA%A6%82%EA%A6%A0%EA%A6%A4%EA%A7%80%EA%A6%A0<span style="font-size:.5em">%EA%A6%B2%EA%A6%82%EA%A6%A0%EA%A6%A4%EA%A7%80%EA%A6%A0<span style="font-size:.5em">%EA%A6%B2%EA%A6%82%EA%A6%A0%EA%A6%A4%EA%A7%80%EA%A6%A0<span style="font-size:.5em">%EA%A6%B2%EA%A6%82%EA%A6%A0%EA%A6%A4%EA%A7%80%EA%A6%A0
It's not readily apparent which result is preferable or more correct....it probably depends on the specific use case. But we should check whether the specifications clarify the expectation here.
Description
•