ダークモードの再実装と日本語のフレーズ改行

Published at 2024-03-28

このブログでもダークモードを prefers-color-scheme を使って Dark Mode に対応 していたが、諸々の実装を見直すタイミングで削除してあった。今回は、デフォルトでシステムの設定を参照するようにし、ダークモードを優先したい場合はページ上部にあるチェックボックスを on にすると有効化される。

そのトグル UI の実装は、何の変哲もない <input type="checkbox> かと思いきや、実は <input type="checkbox" switch> という新しい仕様で実装している。 switch 属性は長らく GitHub での議論されているが、Safari Technology Preview 185 での実装を経て Safari 17.4 に ship された。

また CSS に 4 つの新しい国際化機能が導入された。このブログでも英数字と日本語の混在を意識して半角スペースを含めたテキストにしているが、 text-autospace プロパティと text-spacing-trim プロパティによってタイポグラフィは改善される。それぞれのプロパティのデフォルトの挙動が改善されるので、実装を待つのみだが、もう1つ注目しているのが word-break: auto-phrase; である。

日本語や中国語といった言語は単語をスペースで区切らず、 word-break プロパティや overflow-wrap プロパティの値に応じて単語そのものが改行され、読みづらさを招く場合がある。auto-phrase 値は、日本語においては文節で改行することで可読性を改善してくれる。

このブログでも全般的に適用したが、改行位置が各行の日本語文章に依存するため、ブロック要素の右端で改行されずレイアウト上の違和感が残る。これはパラグラフの改行位置でレイアウトのリズムを揃えるのではなく、そのブロック要素そのものの UI を改善するべきだとは思うが、ひとまずダークモードと同様にオプトインで設定できるようにした。