Unformed Building

テキストの省略とページ内検索

公開:

パーマリンク

これはなにかの解決方法とかではなく、どうしたらいいんだろうなという話です。

YouTubeの動画一覧などがわかりやすいのですが、タイトルが特定行で省略されてellipsisが付与されています。
問題は1行でも複数行でも関係ないのですが、この省略されたテキストです。

このような省略されたテキストがページ内検索にマッチした場合、ページはその位置までスクロールするのですが、ハイライトが見えない(省略されているので)ために、どこがマッチしているのかまったくわかりません。
これがただの縦に詰むタイプのレイアウトならば、ある程度の予測はつけられますが、複数カラムのグリッドにアイテムが並ぶようなレイアウトだと完全にお手上げです。

やる気に溢れている場合は開発者ツールを開いて省略しているスタイルを削除すればいいのですが、手間です。
ユーザーCSSという手もありますが、そこまで頻繁にページ内検索しているわけでもないので手間とのバランスが微妙です。そして対象サイト以外だと結局開発者ツール頼りになります。

省略されているテキストを検索できる機能が別に存在している場合もありますが、サイト固有機能の学習が必要です。
一方、ページ内検索というものはデスクトップのウェブ・ブラウザーには搭載されていますし、どのサイトであっても共通動作で実行でき、非常に便利です。

ページ内検索は問題なく動作しているのに、サイトのCSSでその機能がほとんど使い物にならない状態に陥るのは、使っている側は理不尽に感じます。

一方、ウェブ制作者としてはテキストが省略されたデザインというものは珍しいものではなく、実装する機会もそれなりにあります。
個人的な気持ちで言えば省略したくないことが多いのですが、デザイン以前の様々な事情もあって省略することになっている場合もある、ということは理解できます。

そういうわけで、省略されたテキストはページ内検索にひっかかるけど見つけられない、という状況はどうしたらいんだろうなという話でした。


当然ですが、HTML上で省略されているものは、そもそもページ内検索に引っかからないのでこのような問題は起きません。