[HN Gopher] A subtle layout bug in Google Search: When CJK text-...
___________________________________________________________________
A subtle layout bug in Google Search: When CJK text-wrapping meets
float
Author : kang_li
Score : 63 points
Date : 2024-11-19 16:05 UTC (6 hours ago)
(HTM) web link (likang.dev)
(TXT) w3m dump (likang.dev)
| DimuP wrote:
| Now i have to learn html again
| JeremyBarbosa wrote:
| 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...
| mananaysiempre wrote:
| 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 wrote:
| Just wait until you have to test vertical traditional Mongolian
| sites:
|
| http://khumuunbichig.montsame.mn/index.php?home
| silvestrov wrote:
| 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 wrote:
| 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 wrote:
| 2009 but css flex didn't become popular until 2014+.
| mananaysiempre wrote:
| 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 wrote:
| 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.
| zelon88 wrote:
| 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 wrote:
| 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 wrote:
| In other words: they made good design decisions. If they
| hadn't made good design decisions, their design would be bad.
| ilrwbwrkhv wrote:
| 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 wrote:
| 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...
| ilrwbwrkhv wrote:
| 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.
| simlevesque wrote:
| > 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 ?
| Cieric wrote:
| 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.
| tapirl wrote:
| 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 wrote:
| Why there are 2 pages #2 on each screenshot?
___________________________________________________________________
(page generated 2024-11-19 23:00 UTC)