A subtle layout bug in Google Search: When CJK text-wrapping meets float

kang_li | 81 points

Not surprising.

The homepage of Google has n-e-v-e-r had an error free console, which I find funny considering it's literally a white page with a logo and a lonely text field, and considering that Google expends so much effort trying to sling their design methodology onto everyone. "Do as I say, not as I do."

zelon88 | 4 days ago

While following the development of the Ladybird browser[0] I found out many of the Web Platform Tests[1] are related to CJK rendering which I found surprising, but seeing this it makes a lot more sense.

[0] https://ladybird.org/

[1] https://wpt.fyi/results/?label=experimental&label=master&ali...

JeremyBarbosa | 4 days ago

Another problem for years in Chrome is, if a line is wrapped between two Chinese words, Chrome will insert a space between them in rendering. (Firefox doesn't)

tapirl | 4 days ago

In short: don't use "float: left/right" for anything besides real floating images.

In this case a "display: flex" on the <a> element would be a much better solution.

silvestrov | 4 days ago

> However, CJK languages don’t rely on spaces as word separators, which allows line breaks to occur between any characters.

No, not for Korean. We do have spacing rules like European languages. And we don't like a situation when an arbitrary line break is added in the middle of the word.

peremen | 3 days ago

I’m not sure I’ll be able to sleep after this! :) Joking aside, I can’t think of a single frequently used website—no matter how simple—that doesn’t have layout issues.

ashvardanian | 4 days ago

Why there are 2 pages #2 on each screenshot?

eimrine | 4 days ago

Now i have to learn html again

DimuP | 4 days ago

Fascinating article! Weird side note but lovely note callout. I’ve been trying to get something similar on my site but haven't got it to work right. Is the code for your site open source? I check your GitHub and couldn’t find it.

clacker-o-matic | 4 days ago