pre要素での折り返し

長らくpre要素で折り返されるようにしていたが、少し前に折り返さずにスクロールバーを表示するように変更した。主な理由は狭い画面では折り返されると読めたものではないということがはっきりとわかったからだ。しかしそこそこ広い画面では折り返された方が読みやすいし、見た目の収まりも良い。つまりメディアクエリでうまいこと分岐すると良いようだ。

このウェブサイトではコンテンツが収まるような幅という基準でレイアウトを切り替えているので、pre要素への折り返しの適用もそこで分岐することにした。

pre {
  overflow-x: auto;
}

@media (min-width: 39.118rem) {
  pre {
    overflow-x: visible;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

このようにするとデフォルトではoverflow-x: scrollによって横スクロールで表示させるようになる(ブラウザーとOSによってはスクロールバーが表示される)。39.118rem(色々な計算に基づくものなので中途半端な数字になっている)を超えると、overflow-xプロパティーが規定値のvisibleに戻り、white-spaceとoverflow-wrapプロパティーによりURLのような折り返されにくい文字列も含め折り返されるように変化する。

モバイル機器では横スクロールは自然に行える作業なので、横にはみ出していたら横にスワイプするというのはもはやユーザーも学習しえたのではないかと思う。Appleのウェブサイトでグローバル・ナビゲーションに採用されたことも後押ししてくれる。と、思う。

そう考えて横スクロールを強制する形にした(戻した)のだけど、overflow-xにより横スクロールバーが表示されると非常にうっとうしいことも思い出した。特にWindowsではいまだ自動非表示スクロールバーに確実にする方法が無いので、読み進める方向と直交する方向にUIウィジェットがどっかと居座るのはかなり厳しい。

それぞれに向いた表示を両立するためには、メディアクエリで適切に分岐するのが良いのではないかと考えてこうしてみた。