Absolutely positioned elements with no content will change how some RTL text in inline-blocks gets rendered
Categories
(Core :: Layout: Block and Inline, defect)
Tracking
()
People
(Reporter: adrian_cs98, Unassigned)
Details
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36
Steps to reproduce:
(1) Create an inline-block element with direction set to right-to-left
(2) Add some text such that the browser will interpret it as English text, such as a phone number formatted as following: 123-456-789
(3) Apply some absolutely positioned pseudo-elements with no content to some individual tokens of the said text (see following code sandbox: https://4uzwqc.csb.app/)
Actual results:
The said absolutely positioned pseudo-elements change how the text is being rendered in the browser.
Expected results:
Absolutely positioned elements that have no content should not change (to my knowledge) how the text of an inline-block element gets rendered.
|
||
Comment 1•2 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Layout: Block and Inline' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
||
Comment 2•2 years ago
|
||
I see the same behavior in Chrome and Safari, so at least it's consistent.
A greatly simplified example that shows similar behavior:
data:text/html,<span dir=rtl>123<b style="position:absolute"></b>456</span>
This displays as "456123" in all browsers I tried: the empty abs-pos <b> element interrupts the text "123456", breaking it into two fragments, which then appear in RTL order.
I'm not sure offhand how thoroughly the specifications address things like this... it does seem like intuitively, the presence of an out-of-flow element such as abs-pos should not disrupt its neighbors in the flow.
Description
•