CSS に 4 つの新しい国際化機能を導入

Jack J
Jack J
GitHub

CSS テキスト モジュール レベル 4 の 4 つの新しい国際的な CSS 機能が Chrome に導入されます。この投稿では、すでにリリース済みの製品と、間もなく提供予定の製品について説明します。

  • Chrome 119 以降: word-break: auto-phrase での日本語のフレーズ改行。
  • Chrome 120 のフラグの背後: text-autospace プロパティによるスクリプト間のスペース。
  • 開発中: text-spacing-trim プロパティを使用した中国語、日本語、韓国語（CJK）の句読点カーニング。
  • 言語間で最小フォントサイズを統一します。

日本語のフレーズの改行: word-break: auto-phrase

日本語の読みやすさを向上させるこの機能（Chrome 119 以降）

中国語や日本語など東アジアの一部の言語では、単語を区切るためにスペースを使用しません。また、単語の途中であっても、改行で区切られることがあります。これは、これらの言語では通常の改行動作ですが、見出しや詩などの短いテキストでは、自然なフレーズの境界で行を折り返すことをおすすめします（日本語では、この境界を「文節」と呼びます）。

新しい CSS 機能 word-break: auto-phrase は、このような境界で折り返しを行うよう指定します。

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

<h1>窓ぎわのトットちゃん<h1>
<ph type="x-smartling-placeholder">
</ph> 単語の改行: 自動フレーズは、自然なフレーズの境界で行を折り返します。
word-break: auto-phrase は、自然なフレーズ境界で行をラップします。

境界線検出は ML エンジンによって行われるため、意図した結果が得られない可能性があります。その場合は、ブレークポイントを手動で調整できます。<wbr> タグまたはゼロ幅スペース（&ZeroWidthSpace;）は分割可能なポイントを適用し、ゼロ幅結合ツール（&zwj;）は中断を防ぎます。

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

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

Chrome の今後のバージョンでは、韓国語と中国語に対応する予定です。

スクリプト間のスペース: text-autospace

現在、次の機能は Chrome でフラグが立てられています。テストするには、Chrome 120 以降で試験運用版のウェブ プラットフォーム機能フラグ（chrome://flags/#enable-experimental-web-platform-features にあります）を有効にします。

中国語と日本語では、複数の文字、ハン、ラテン、ASCII の数字、日本語の場合はひらがな、カタカナが混在しています。漢字以外の文字体系を切り替える際には、スペースを小さくすると読みやすくなることがよくあります。

Chrome では、デフォルトでスクリプト間のスペースの挿入を開始する予定です。この機能は、読みやすさを向上させるために印刷物で広く使用されている一般的な手法をウェブにもたらします。

<ph type="x-smartling-placeholder">
</ph> 新しいデフォルト設定では、読みやすくするために小さなスペースが適用されます。これはテキストの自動スペースで制御できます。 <ph type="x-smartling-placeholder">
</ph> 新しいデフォルト設定では、読みやすくするために小さなスペースが適用されます。これは text-autospace で制御できます。

この動作を無効にするには、text-autospace プロパティを使用すると、スペースの挿入を制御できます。

text-autospace: no-autospace;

CJK 句読点のカーニング: text-spacing-trim

次の機能は、Chrome でデフォルトで有効になるよう開発中です。

中国語、日本語、韓国語では、句読点文字の間にカーニングを適用すると、読みやすさが向上し、より見栄えの良いタイポグラフィになります。現在、このカーニングは、ほとんどの印刷媒体やワード プロセッサに適用されています。

たとえば、CJK のピリオドと CJK 閉じ括弧は通常、グリフスペースの右半分にグリフ内部のスペースを持つように設計されており、各文字が一定に前進します。

ただし、これらの句読点が連続して表示されると、このグリフ内部のスペースが過剰になります。次の 2 つの例で、2 番目の例は正しいタイポグラフィです。CJK の期間の右半分は削除されます。

<ph type="x-smartling-placeholder">
</ph> 句読点が連続して表示される場合は、CJK のピリオドの右半分を削除する必要があります。 <ph type="x-smartling-placeholder">
</ph> 句読点が連続して表示される場合は、CJK のピリオドの右半分を削除する必要があります。

通常はデフォルトの動作で良好な結果が得られますが、デベロッパーは text-spacing-trim プロパティを使用して、別のスタイルを選択したり、場合によっては無効にしたりできます。

すべての言語で最小フォントサイズを統一

Chrome 118 より前は、10 ピクセル程度未満のフォントサイズは指定どおりに表示されず、アラビア語、ペルシア語、日本語、韓国語、タイ語、中国語（簡体字、繁体字）の場合は切り上げられていました。デベロッパーは、transform プロパティを使用するなどして、小さいテキストをレンダリングするための回避策を必要としていました。

Chrome 118 以降、すべての言語でこの上限が撤廃され、7 つの言語が他の言語と同じになります。この変更により、他のブラウザとの相互運用性が向上します。

<ph type="x-smartling-placeholder">
</ph> Chrome 118 以降、アラビア語、ペルシア語、日本語、韓国語、タイ語、タイ語、中国語（簡体字、繁体字）について、10 px 以下のフォントサイズが指定どおりにレンダリングされないという制限が解除されます。 <ph type="x-smartling-placeholder">
</ph> Chrome 118 以降、アラビア語、ペルシア語、日本語、韓国語、タイ語、タイ語、中国語（簡体字、繁体字）について、10 px 以下のフォントサイズが指定どおりにレンダリングされないという制限が解除されます。

対応してフィードバックを共有する

これらの機能についてフィードバックがある場合は、crbug.com で問題を報告してください。