ruby with display: inline mangles the position of the annotation characters
Categories
(Core :: Layout: Ruby, defect)
Tracking
()
People
(Reporter: karlcow, Unassigned)
References
(Blocks 1 open bug, )
Details
Attachments
(3 files, 1 obsolete file)
Firefox Nightly Top, Edge Canary Middle, Safari Tech Preview Bottom
in Firefox Nightly in the URL bar, enter
data:text/html,<!doctype html><title>ruby</title><meta charset='utf-8'><p>%E5%90%8D%E5%89%8D%E3%81%AE%E3%81%AA%E3%81%84<ruby style="display:inline">%E4%BA%8B%E4%BB%B6<rt>%EF%BE%94%EF%BE%8F</rt></ruby></p>
Notice how the annotation characters are shifted to the right of the ruby block.
- Firefox Nightly 97.0a1 (2021-12-16) (64-bit)
- Edge Canary 98.0.1106.0
- Safari Tech Preview Release 136 (Safari 15.4, WebKit 17613.1.9.2)
It could be a duplicate of Bug 1041711
|
Reporter | |
Comment 1•3 years ago
|
||
|
|
Reporter | |
Comment 2•3 years ago
|
||
|
|
Reporter | |
Comment 3•3 years ago
|
||
|
|
Reporter | |
Comment 4•3 years ago
|
||
Fixing the test.
|
|
Reporter | |
Updated•3 years ago
|
|
||
Comment 5•3 years ago
|
||
I think this issue is invalid. CSS Ruby rendering relies on the right display value. Intentionally setting display: inline should force it to behave like a <span>.
And it has nothing to do with bug 1041711. That one is about handling the case when setting the display to block ruby or when the ruby is being blockified (e.g. when setting position: absolute or float: left on it).
|
|
||
Comment 6•3 years ago
|
||
And Chrome and Safari render it differently because they don't support CSS Ruby at all, so they use the <ruby> element, and thus is immune to changes to display value. Eventually they should support CSS Ruby, at which point they will show the same issue.
|
|
Reporter | |
Comment 7•3 years ago
|
||
ah I should have checked that. Thanks Xidorn. :)
So it's a bug in WebKit and Blink not supporting CSS Ruby. :) Let's modify the webcompat issue a bit.
Description
•