A subtle layout bug in Google Search: When CJK text-wrapping meets float
81 points
4 days ago
| 9 comments
| likang.dev
| HN
zelon88
4 days 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."

reply
simlevesque
4 days ago
[-]
> The homepage of Google has n-e-v-e-r had an error free console

I just checked, mine is error free.

https://google.com

Are you sure it's not your ad-blocker or another browser extension that causes this for you ?

reply
Cieric
4 days ago
[-]
Opening on Firefox 132.0.2 (all extensions disabled) I get a Content-Security-Policy error, on Edge 131.0.2903.51 (stock) in the issues panel reports 40 Errors and 147 Warnings (With Top Browsers selected). Downloading chrome 131.0.6778.86 just to test they also have a different error "Define @import rules at the top of the stylesheet" which specifies that the @import is ignored due to it not being at the top. They're just hidden in the issues, so same as edge.

This might be more down to the browser you're using and not the extensions present (while extensions like ublock origin do cause more errors.) Not even chrome has 0 problems with their own default home page.

reply
ilrwbwrkhv
4 days 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.

reply
immibis
4 days ago
[-]
In other words: they made good design decisions. If they hadn't made good design decisions, their design would be bad.
reply
ilrwbwrkhv
4 days 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.
reply
jfactorial
4 days 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-di...
reply
ilrwbwrkhv
4 days ago
[-]
I've read a bunch of stuff about their design and why it's so bad, including this one. Bottom line is you cannot scientifically manage your way to design. That is why in the future we are going to see designers with aesthetic sense become more and more useful as AI sort of like starts doing everything.
reply
eviks
3 days ago
[-]
The first 4 flaws from the link above can definitely be "scientifically" managed even by people without aesthetic sense.
reply
JeremyBarbosa
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...

reply
mananaysiempre
4 days 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.)
reply
qingcharles
4 days ago
[-]
Just wait until you have to test vertical traditional Mongolian sites:

http://khumuunbichig.montsame.mn/index.php?home

reply
ycombinatrix
3 days ago
[-]
my eyes!
reply
tapirl
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)
reply
silvestrov
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.

reply
londons_explore
4 days 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...

reply
ipaddr
4 days ago
[-]
2009 but css flex didn't become popular until 2014+.
reply
mananaysiempre
4 days 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.

reply
peremen
3 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.

reply
ashvardanian
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.
reply
eimrine
4 days ago
[-]
Why there are 2 pages #2 on each screenshot?
reply
kang_li
3 days ago
[-]
my mistake :P fixed
reply
DimuP
4 days ago
[-]
Now i have to learn html again
reply
clacker-o-matic
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.
reply
kang_li
3 days ago
[-]
reply