Bug 64013 – REGRESSION: CJK characters causes floats to be misaligned

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Bryan Logan]

See the attached JSFiddle.  The bottom float should be flush to the right.  Changing the characters in the top right to English characters causes the float on the bottom row to be properly aligned.

[Alexey Proskuryakov]

Created attachment 99881 [details]
test case

Thank you for the report!

It's better to have test cases actually attached than to link to external sites.

[Alexey Proskuryakov]

Confirmed with r90400. This is a regression from Safari 5.0.5.

[Alexey Proskuryakov]

<rdar://problem/9732600>

[Bryan Logan]

Has there been any progress on this?  This is a pretty bad regression because not only is the content misaligned, but it also doesn't fire click events.

[Alexey Proskuryakov]

Are there any known sites affected? That information would help prioritize investigation.

[Bryan Logan]

This affects Gmail mobile in CJK.

Looks like the CJK font has a larger descender, making the first float taller than a line, so its bottom is below the top of the second float (which originates on the second line).

[Bryan Logan]

Is there a patch coming?  This also affects the newly-launched Gmail Offline such that stars cannot be clicked.

With the test case (attachment 99881 [details]), TOT WebKit behavior matches the layout in Firefox 3.6.22 and in Firefox 6.0.2 in OS X Lion. I think this is actually a WebKit progression and I see no reason to change the behavior.

[Bryan Logan]

I see this in FireFox as well, though I'm not convinced it is correct.  Is it in the spec?

At the least there should be a workaround.  How can I get the bottom line to float completely to the right?

[Philippe Wittenbergh]

(In reply to comment #10)
> I see this in FireFox as well, though I'm not convinced it is correct.  Is it in the spec?

It is correct per the spec. Depending on how your browsers are configured (which default font ?), the issue will be more or less visible. The intrinsic line-height for the roman text (Times maybe, or Helvetica maybe ?) is narrower / smaller than the line-height for the Japanese text - Hiragino Kaku gothic has an intrinsic line-height of about 1.5em, Times about 1.15em, Helvetica 1.05em). The line-box generated for your first floated box is thus much taller than the ones for the Roman text.
 
> At the least there should be a workaround.  How can I get the bottom line to float completely to the right?

Set the line-height ? or better 'clear:right' for the second float (basic things really)?


---
It doesn't help that WebKit does some hackery things with Helvetica and Times to have their (intrinsic) line-height match the one for Arial and Times New Roman - but that is still smaller than Jpn fonts.

[Ahmad Saleem]

Created attachment 470582 [details]
Safari / WebKit ToT matches with other browsers

All browsers as shown in reference image are matching, so we can mark this as 'RESOLVED CONFIGURATION CHANGED'.