Google検索結果ページの「次へ」が言語によっては適切に表示されないというバグの原因分析


Google検索結果ページの下部に表示される「次へ」というテキストが言語によっては適切に表示されないバグについて、複数のIT企業を創業してきたリー・カン氏が原因を分析しました。
A subtle layout bug in Google Search: When CJK text-wrapping meets float • Li Kang
https://likang.dev/posts/google-search-bug/


カン氏がバグに気付いたのは数か月前でしたが、インストールしていたChrome拡張機能のいずれかが原因だろうと考えて放置していました。その後、新たなブラウザのプロファイルを設定して問題を再現したところ、サイト自体に問題があることを発見したとのこと。
具体的なバグの内容は下図の通り。Googleの検索結果ページの最下部では「>」というマークと「次へ」というテキストで次のページへのリンクが示されています。このマークとテキストの配置はブラウザの横幅に応じて並び方が変化しますが、中国語の「次へ」である「下一页」というテキストは奇妙に折り返されています。


カン氏が詳しく調査したところ、いわゆる「CJK(中国語、日本語、韓国語)」ではテキストのレンダリングに英語にはない癖があることを発見しました。「>」マークの横に文字を表示する幅がない場合、文字は完全に下へ回り込みます。


下部に文字を表示するスペースが十分にあっても、「>」マークの横に1文字分の幅があると文字が上に回り込んでしまいます。


バグは中国語で発生していましたが、横幅次第では日本語でも同じ問題が発生します。一方、英語では単語の途中での折り返しは発生しません。


「>」マークの横に十分な幅があれば全てのテキストがマークの横へ移動します。


Googleのような利用者が多いサイトでこのバグが長く修正されなかった理由について、カン氏は「英語以外の言語固有の動作でありテストで気付かれにくい」「CJK特有の折り返しルール」「特定の表示幅の時のみバグが発生する」などを挙げました。
今回のバグの修正には「>」マークの「float」設定を削除するか、テキストのspanタグに「clear: left」を設定すれば良いとのこと。
なお、カン氏は他に文字の高さが一致していないことも指摘しています。こちらはラテン系言語とそれ以外の言語の「font-family」の不一致が原因であり、「font-family」を一致させるか、「line-height」を統一することで修正可能だとのことです。

ジャンルで探す