Bug 287619

Summary: ruby text shifts to left when negative-margin is applied
Product: WebKit Reporter: Takao Baba <baba>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: bfulgham, fantasai.bugs, karlcow, simon.fraser, vitor.roriz, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: All   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=286597
Attachments:
Description Flags
result on safari and chrome
none
rendering in safari, firefox, chrome
none
rendering in safari, firefox, chrome
none
testcase
none
rendering in safari, firefox, chrome none

Takao Baba
Reported 2025-02-13 01:22:31 PST
Created attachment 474219 [details] result on safari and chrome ## Steps to reproduce 1. Open https://jsbin.com/pazikuxilo/edit?html,output ## Expected behavior The ruby text "a" should be aligned to the center of the ruby base "あいう". ## Actual behavior The ruby text is aligned to left. ## Note This style is usually used for long <rt> that excess the ruby-base width: to avoid extra spaces to the adjacent elements. Chrome and Firefox works well.
Attachments
result on safari and chrome (5.08 KB, image/png)
2025-02-13 01:22 PST, Takao Baba
no flags
rendering in safari, firefox, chrome (1.27 MB, image/png)
2025-02-17 22:04 PST, Karl Dubost
no flags
rendering in safari, firefox, chrome (1.26 MB, image/png)
2025-02-17 22:07 PST, Karl Dubost
no flags
testcase (304 bytes, text/html)
2025-02-17 22:08 PST, Karl Dubost
no flags
rendering in safari, firefox, chrome (1.34 MB, image/png)
2025-02-17 22:11 PST, Karl Dubost
no flags
Karl Dubost
Comment 1 2025-02-17 22:04:18 PST
Created attachment 474261 [details] rendering in safari, firefox, chrome Hi Takao, Thanks for the report. Testing on Safari Technology Preview 213 20621.1.11.111.1 Firefox Nightly 137.0a1 13725.2.16 Google Chrome Canary 135.0.7020.0 7020.0 I see the same layout for all rendering engines.
Karl Dubost
Comment 2 2025-02-17 22:07:24 PST
Created attachment 474262 [details] rendering in safari, firefox, chrome OK I see it. My bad. let me upload a testcase.
Karl Dubost
Comment 3 2025-02-17 22:08:21 PST
Created attachment 474263 [details] testcase testcase with a negative margin applied on rt. It has no effect on Chrome and Firefox.
Karl Dubost
Comment 4 2025-02-17 22:11:47 PST
Created attachment 474264 [details] rendering in safari, firefox, chrome We see better witgh background colors applied. rt {margin-inline: -2em;background-color:gold} ruby {background-color: pink;}
Radar WebKit Bug Importer
Comment 5 2025-02-20 01:23:12 PST
Note You need to log in before you can comment on or make changes to this bug.