CSSで句読点括弧のカーニングができるようになるぞ！日本語が読みやすくなる最近サポートされた・近日サポートされるCSSの機能のまとめ

Post on:2023年12月13日

はじめに

CSS Text Module Level 4からインターナショナルに関するCSSの新しい4つの機能が、Chromeに導入されます。この記事では、すでにサポートされている機能、近日サポート予定の機能について解説します。

Chrome 119から: word-break: auto-phrase;による日本語のフレーズで自動改行。
Chrome 120（フラグ）から: text-autospaceプロパティによる文字間のスペーシング。
開発中: text-spacing-trimプロパティによる日本語の句読点のカーニング。
Chrome 118から: 言語間で一貫した小さいサイズのフォント。

word-break: auto-phrase;によるフレーズで自動改行

この機能は、日本語テキストの読みやすさが向上されるもので、Chrome 119から利用できます。

日本語のような東アジアの言語には単語の区切りにスペースを使用せず、単語の途中であっても任意の文字で行を折り返すことができます。この改行動作はこれらの言語では見慣れたものですが、見出しなどの短いテキストでは自然なフレーズの境界で行を折り返すことを望むことがあります（この境界のことを日本語では「文節」と呼びます）。

CSSの新しい機能word-break: auto-phrase;は、日本語のフレーズで自動的に折り返しされるように設定できます。

<html lang="ja">
<style>
h1 {
  word-break: auto-phrase;
}
</style>

<h1>窓ぎわのトットちゃん<h1>

<style>

h1 {

word-break: auto-phrase;

}

</style>

<h1>窓ぎわのトットちゃん<h1>

word-break: auto-phrase;を設定すると、下記の右のようにフレーズの境界で折り返しされます。

左: normal、右: auto-phrase

境界の検出は機械学習エンジンによって実行されるため、意図した結果にならないことがあります。その場合は、ブレイクポイントを手動で設定できます。<wbr>タグ、またはゼロ幅スペース（&ZeroWidthSpace;）で改行可能なポイント設定します。また、ゼロ幅ジョイナー（&zwj;）は改行を防ぎます。

窓ぎわの<wbr>トットちゃん
ユーザー<wbr>インターフェース

1 2	窓ぎわの<wbr>トットちゃんユーザー<wbr>インターフェース

2023年現在、Chromeはこの機能を日本語に対してのみサポートしたおり、AdaBoost MLテクノロジーを使用するBudouX C++ portを使用しています。詳しくはBudouX: 読みやすい改行のための軽量な分かち書き器をご覧ください。

Chromeの将来のバージョンでは、韓国語と中国語もサポートする予定です。

text-autospaceによる文字間のスペーシング

この機能は現在、Chromeのフラグを設定すると利用できます。利用するには、Chrome 120以降で「Experimental Web Platform features」（chrome://flags/#enable-experimental-web-platform-features）を「Enabled」（有効）にしてください。

日本語はひらがなやカタカナ、漢字、英数記号文字などが混在して記述されます。漢字などの表意文字はスペーシングが一定ですが、他の文字と組み合わせた際にスペーシングを小さくすると読みやすくなることがよくあります。

Chromeはデフォルトで、文字間のスペーシングを導入する予定です。この機能は、読みやすさを向上させるために印刷物で広く使用されている一般的な手法をWebに導入するものです。

「new default」では、読みやすさを向上させるために小さなスペーシングが適用されています。これはtext-autospaceで設定できます。

この動作を無効にした場合は、text-autospaceプロパティを使用してスペースの挿入をなくすよう設定できます。

text-autospace: no-autospace;

1	text-autospace: no-autospace;

Chromeは異なる文字の周囲に明示的なスペース文字がある場合、スペーシングを挿入しないため、既存コンテンツを修正する必要はありません。

text-spacing-trimによる句読点のカーニング

この機能は現在開発中で、Chromeのデフォルトで有効になることを目指しています。

CJK（中国語・日本語・韓国語）では句読点の文字間にカーニングを適用することで、読みやすさが向上し、より視覚的に美しいタイポグラフィが可能になります。今日、ほとんどの印刷物やワープロにこのカーニングを適用されています。

たとえば、下記のように読点と閉じ括弧は通常、右半分にグリフ内部スペースを持つよう設計されており、一定の間隔をもって表示されます。

しかし、これらの句読点文字が連続して表示されると、この文字間のスペースが過剰に感じられます。下記は下段のものが正しい組版で、読点の右半分は削除されるべきです。

句読点文字が連続する場合は、読点の右半分を削除する

デフォルトの動作で一般的には良い結果が得られますが、デベロッパーはtext-spacing-trimプロパティで異なる値を設定したり、無効にすることもできます。

注: この機能は2つの部分から構成されています。1つは行の端用、もう1つは隣接する文字用です。後者は使用フォントがNoto CJKの場合、Android 13とChromeOS 90からすでに利用可能です。この機能はラインエッジをサポートし、より多くのフォントとプラットフォームをサポートし、フォントが変更された場合などのより多くのエッジケースをサポートすることで補完します。

言語間で一貫した小さいサイズのフォント

Chrome 117以前では、10pxより小さいサイズのフォントは指定サイズ通りにレンダリングされず、言語がアラビア語、ペルシア語、日本語、韓国語、タイ語、簡体字中国語または繁体字中国語の場合は切り上げられました。デベロッパーはtransformプロパティを使用するなどして、小さいサイズのテキストをレンダリングするための回避策が必要でした。

Chrome 118以降では、この制限がすべての言語で解除され、7つの言語がその他の言語と一致するようになりました。この変更により、他のブラウザとの互換性が向上しました。