郵便番号関連サービス。ローマ字部分の見切れ対策

郵便番号関連サービスサイトで、ちょっとした不具合を修正しました。

AMPでサイトを閲覧されたときに、長いローマ字が見切れてしまっていました（見切れるというのは、画面からはみ出してしまって見えない部分が出てしまうこと）。たとえば〒600-8436のページです。

赤丸で囲んである部分が
途中から表示されていなかった点を
折り返しで対応

AMPでなければ横スクロール可能ですので見ようと思えば見えていたのですが、AMPでは横スクロールバーが表示されず（自分がそういうCSSにしているだけかも知れない）、完全に見えなくなってしまっていました。これでは本当にローマ字を必要とする利用者に正しい情報が伝わりません。

なので、これを修正しました。

修正方法は、スタイルシートでbodyに
word-break: break-all;
を追加しただけです。

ちょっとしたことですが、スマホ対応サイトでは重要なことでしょう。


さて、今回なぜこれに気づいたかと言うと、前述の通り、長いローマ字のあるページをたまたま表示したためです。

ローマ字はアルファベットのみの文字列であるため、ブラウザに１つの英単語のように扱われます。１つの単語はデフォルトでは画面端に到達しても改行されず、横スクロール発生となります。

ところがスマホ前提のAMPだったので横スクロールを考慮しておらず、どうやっても見ることが出来ない部分が出てしまっていました。

当サイトでは住所のローマ字表記を扱っているので、地名によってはそれなりに長い文字列が発生します。区切りとしてスペースやハイフンがあれば改行されるのかも知れませんが、住所という特性上それらも無く、仮にあったとしても全データにおいて100%確実に表示されるという保障もありません。

ですので対策として、確実に改行するために
word-break: break-all;

を追加しました。

なおスクロールバーを表示するように設定してもよいのかも知れませんが、利便性を考慮すれば横スクロールという選択は無しだろうと判断しました。

そしてAMPではない通常のページでも、横スクロールは不便なので、同じく
word-break: break-all;
を追加して改行するようにしました。


長く運営しているサイト、かつ、ローマ字表記なので、「今更気づいた」ことが少々残念ですが、今回の対応で少し利便性や情報の精度を高められたと前向きに捉え、今後更なる改善への糧としたいと思います。