CSSによる分かち書きの実現

2019年12月4日 著

Webアクセシビリティ Advent Calendar 2019、4日目の記事です。CSSによる分かち書きの実現について、雑に紹介します（識者の方からの補足やツッコミ大歓迎）。分かち書きとは一般的に、単語や文節といった単位ごとに空白などで区切りを入れる書き方のこと。例えば「私の名前は木達です」を全角の空白文字で分かち書きすると「私　の　名前　は　木達　です」とか「私の　名前は　木達です」になります。

発達性読字障害（ディスレクシア）の方にとっては特に、分かち書きされたほうが文章を読みやすい場合があります。その分かち書きをCSSで実現するための仕様がCSS Text Module Level 4に盛り込まれていることを、つい先日とあるメーリングリストで教えていただきました。具体的には、11月13日付けで発行された同仕様のWorking Draftで2.2. Word Boundariesに記されているのが、分かち書きを実現するプロパティやその値です。

まずword-boundary-detectionプロパティは、どこで区切るかを決定したり、仮想単語境界（原文では「virtual word boundary」、ゼロ幅スペースのようなもの）を挿入するうえで必要なコンテンツ解析をユーザーエージェントが行うかどうかや、行う場合の方法を指定するものです。そのあたりの知見が無いので、normal（規定値）とmanualの違いが仕様を読んでもよくわからなかったのですが、auto(<lang>)値を指定することで、ユーザーエージェントに仮想単語境界の挿入位置を決定すべく言語固有のコンテンツ解析させることができるらしい（<lang>には日本語だったらjaみたいなIETF言語タグが入る）。

そしてword-boundary-expansionは、区切りを可視化するのに用いるプロパティ。規定値はnone（何の影響も持たない）で、他にゼロ幅スペースのインスタンスを空白文字（ユニコード：U+0020）に置き換えるspaceと、和字間隔（ユニコード：U+3000）に置き換えるideographic-spaceが定義されています。先だって情報アクセシビリティの推進に参加した際に工藤氏の電子書籍に関するデモで拝見したような、区切りを斜め線や横線なんかで表示する方法は、仕様を眺めた限りわかりませんでした......これからカスタマイズ可能なよう拡張されるのかもしれません。

仕様を斜め読んだ感想としては2点、仮想単語境界という存在が興味深く感じたこと、その挿入位置を決定するのが思ったより複雑そうだなということ。単語区切りか文節区切りかは現状ユーザーエージェント次第なのかな？　タイ語なんて習ったことないものだから、改行の位置で意味が変わってしまうなんて知らなかったしね。ともあれ、いずれ仕様の策定とその実装が進み、CSSによる分かち書きが簡単に実現できると電子書籍ともども、Webを一層アクセシブルにできそうで今後が楽しみではあります。