今回は比較的最近制定されたCSSプロパティ、word-break: auto-phrase;についてです。

私もWebコンテンツを作るにあたって改行位置の調整には結構苦心していたので、これを見た時は脱力しました。今までやってた作業、何だったんだろう？　まあでも今後これが普通に使えるようになると嬉しいですね。

その前に：他のプロパティじゃダメなの？

今までも他のプロパティで文字を折り返すことは普通に行われてきました。text-wrapなんかがそうです。

英語の文章は単語と単語の間のスペースで優先的に折り返されるのですが、日本語の文章では基本的に全ての文字が折り返しの対象になります。これにより、本来折り返されてほしくない単語の途中で改行が入ってしまい読みづらくなっていました。

こんなふうに自動改行した結果、文章が読みづらくなったり、改行の先に文字が取り残されてしまったりしてしまうわけです。

word-break: auto-phrase の特徴

word-breakプロパティ自体は以前からありましたが、auto-phraseが実装されたのは2023年でごく最近です。

word-break: auto-phraseを適用すると、日本語で書かれた文章から文節単位で区切りを探して改行してくれます。text-wrapがCJK文字（Chinese, Japanese, Korean）に対応するようになったものと考えればだいたい合ってます。

なお、以下のような注意点があります。日本語のデベロッパーやライターであれば通常は気にすることはありませんが、引っかかったら確認しましょう（特にlang属性）。

• htmlに正しいlang属性が指定されていないと、このプロパティはword-break: normal;と同じ挙動を示します。
• このプロパティはhyphensプロパティに優先します。単語の中で折り返すことがないため、hyphens プロパティを指定していても hyphens: none;を指定した時と同じように振舞います。

出典：CSS Text Module level 4

上記の文章に適用すると以下のようになります。（Google Chrome推奨。非対応ブラウザでは同じようにしか見えません）

メリット

生の文章を打ち込んでおしまい！にできる

<wbr>を使わなくても良くなったのは大きな進歩です。特に生のテキストデータとしてコピペしたい時にこういったタグの存在が邪魔になることは多々あるので、手間をかけずにきれいに整えてくれるこのプロパティはとてもありがたいですね。

既存の文章にプロパティを追加するだけでアップデートできる

↑と関連していますが、既にできているWebページに対してもこのCSSプロパティを設定するだけで改行位置を整えてくれるので、アップデートが容易です。

当サイトでも少し使わせてもらいましたが、ものの1分で作業が終わりました。

デメリット

非対応ブラウザの存在

新しいcssプロパティにはつきものの問題ですが、Safari、Firefoxでは2024年5月現在非対応となっており、まだメジャーなところでも非対応ブラウザが残されているのが気掛かりです。特にSafariが全滅ということはiOSから閲覧した時にまるで機能しないということですので、今の日本のモバイル端末のiOSシェアを考えると頼り切るのも得策とは言えないですね。

また、何らかの事情で更新せずに使われているブラウザでは当然機能しません。開発者としては当然のようにアップデートしているものと思いますがユーザーはそうとは限らないので、対応状況は注視していく必要があるでしょう。

固有名詞には弱い（らしい）

造語とかそういったものに対してうまく働かないといったことは考えられます。小説の中に出てくる固有名詞、自社サービスの名称、そういったものに対しては改行位置が上手く調整されないことは念頭に入れておいた方がいいかもしれません。

今後の展望：使いどころを選べばがっつり使っていけそう

Web記事の文章など、そこそこのクオリティで改行位置が整っていればいいような場所に対してはとても使い勝手のいいCSSプロパティです。

一方で改行位置が重要なレイアウトを組むには不安定さもあり、向いていないかもしれません。やはり非対応ブラウザの存在がまだ重くのしかかっていると言えます。

使い分けをよく考えて、楽できるところは楽していく、そんなスタンスがちょうどよいかなと思います。