5 ms·

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

81 points by kang_li 2y ago

DimuP 2y ago
Now i have to learn html again
JeremyBarbosa 2y 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/ https://ladybird.org/ [1] https://wpt.fyi/results/?label=experimental&label=master&aligned https://wpt.fyi/results/?label=experimental&label=master&ali...
- mananaysiempre 2y ago
  I thought those were on CJK encodings like GB 18030 and Shift-JIS? (Absolutely massive and one of the few places you’ll still encounter the insane stateful four-charset monster that is ISO 2022, so deserving of a lot of testing.)
- qingcharles 2y ago
  Just wait until you have to test vertical traditional Mongolian sites: http://khumuunbichig.montsame.mn/index.php?home http://khumuunbichig.montsame.mn/index.php?home
  - ycombinatrix 2y ago
    my eyes!
silvestrov 2y 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.
- londons_explore 2y ago
  I wonder how long ago this CSS was written... That particular UI element of google search has been around decades, so might predate css flex...
  - ipaddr 2y ago
    2009 but css flex didn't become popular until 2014+.
    - mananaysiempre 2y ago
      In 2009, one still needed to give IE6 serious thought (even if, depending on the use case, the conclusion could already be “nope”). At the time, I had someone telling me that we shouldn’t waste our time on supporting mobile. And flexbox was more a curiosity you studied with a hope of using someday than a serious option. And clearing your floats was part of the absolute basics. Of course, we still forgot to now and then.
clacker-o-matic 2y 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.
- kang_li 2y ago
  check https://github.com/chrismwilliams/astro-theme-cactus https://github.com/chrismwilliams/astro-theme-cactus
zelon88 2y ago
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."
- ilrwbwrkhv 2y ago
  Well I hope nobody follows Google's design philosophy seriously. They are among the worst in the business. I've said this for a long time, but the only reason Google search was successful is because they were lucky enough to just have a text area for the search box. If they had tried to do anything else, they would have drowned miserably because their design choices and decisions are so bad.
  - immibis 2y ago
    In other words: they made good design decisions. If they hadn't made good design decisions, their design would be bad.
    - ilrwbwrkhv 2y ago
      I think every other design that they have ever done apart from that Google search homepage has been horrible and bad. So that's why they lucked out on that first one.
      - jfactorial 2y ago
        I would definitely read an in-depth exploration of Google's design failures from someone informed & opinionated on the topic. I found this looking for such a thing: https://ux.stackexchange.com/questions/81965/what-are-the-disadvantages-of-material-design https://ux.stackexchange.com/questions/81965/what-are-the-di...
        ilrwbwrkhv 2y ago
tapirl 2y 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)
eimrine 2y ago
Why there are 2 pages #2 on each screenshot?
- kang_li 2y ago
  my mistake :P fixed
ashvardanian 2y 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.
peremen 2y 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.

81 points by kang_li 2y ago

Now i have to learn html again

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/ https://ladybird.org/ [1] https://wpt.fyi/results/?label=experimental&label=master&aligned https://wpt.fyi/results/?label=experimental&label=master&ali...

mananaysiempre 2y ago
I thought those were on CJK encodings like GB 18030 and Shift-JIS? (Absolutely massive and one of the few places you’ll still encounter the insane stateful four-charset monster that is ISO 2022, so deserving of a lot of testing.)
qingcharles 2y ago
Just wait until you have to test vertical traditional Mongolian sites: http://khumuunbichig.montsame.mn/index.php?home http://khumuunbichig.montsame.mn/index.php?home
- ycombinatrix 2y ago
  my eyes!

silvestrov 2y 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.

londons_explore 2y ago
I wonder how long ago this CSS was written... That particular UI element of google search has been around decades, so might predate css flex...
- ipaddr 2y ago
  2009 but css flex didn't become popular until 2014+.
  - mananaysiempre 2y ago
    In 2009, one still needed to give IE6 serious thought (even if, depending on the use case, the conclusion could already be “nope”). At the time, I had someone telling me that we shouldn’t waste our time on supporting mobile. And flexbox was more a curiosity you studied with a hope of using someday than a serious option. And clearing your floats was part of the absolute basics. Of course, we still forgot to now and then.

clacker-o-matic 2y 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.

kang_li 2y ago
check https://github.com/chrismwilliams/astro-theme-cactus https://github.com/chrismwilliams/astro-theme-cactus

zelon88 2y ago

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."

ilrwbwrkhv 2y ago
Well I hope nobody follows Google's design philosophy seriously. They are among the worst in the business. I've said this for a long time, but the only reason Google search was successful is because they were lucky enough to just have a text area for the search box. If they had tried to do anything else, they would have drowned miserably because their design choices and decisions are so bad.
- immibis 2y ago
  In other words: they made good design decisions. If they hadn't made good design decisions, their design would be bad.
  - ilrwbwrkhv 2y ago
    I think every other design that they have ever done apart from that Google search homepage has been horrible and bad. So that's why they lucked out on that first one.
    - jfactorial 2y ago
      I would definitely read an in-depth exploration of Google's design failures from someone informed & opinionated on the topic. I found this looking for such a thing: https://ux.stackexchange.com/questions/81965/what-are-the-disadvantages-of-material-design https://ux.stackexchange.com/questions/81965/what-are-the-di...
      - ilrwbwrkhv 2y ago

tapirl 2y 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)

eimrine 2y ago

Why there are 2 pages #2 on each screenshot?

kang_li 2y ago
my mistake :P fixed

ashvardanian 2y 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.

peremen 2y 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.