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

Jack J
Jack J
GitHub

CSS Text Module Level 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>
単語の改行: 自動フレーズは、自然なフレーズの境界で行を折り返します。
word-break: auto-phrase は、自然なフレーズ境界で行を折り返します。

境界検出は機械学習エンジンによって行われるため、意図した結果が得られない場合があります。その場合は、ブレークポイントを手動で調整できます。<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 では、スクリプト間のスペースをデフォルトで挿入する予定です。この機能は、印刷物で読みやすくするために広く使用されている一般的な手法をウェブにも適用するものです。

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

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

text-autospace: no-autospace;

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

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

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

たとえば、CJK ピリオドと CJK 閉じ括弧は通常、各文字の進みが一定になるように、グリフ空間の右半分にグリフ内部のスペースが配置されるように設計されています。

ただし、これらの句読点が 1 行に複数表示されると、グリフ内部のスペースが過剰になります。次の 2 つの例で、2 番目の例は正しいタイポグラフィです。CJK のピリオドの右半分を削除する必要があります。

句読点が 1 行に複数ある場合は、CJK ピリオドの右半分を削除する必要があります。
句読点が連続して表示される場合は、CJK のピリオドの右半分を削除する必要があります。

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

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

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

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

Chrome 118 より、アラビア語、ペルシャ語、日本語、韓国語、タイ語、中国語（簡体字）、中国語（繁体字）で、10 px 未満のフォントサイズが指定どおりにレンダリングされないという制限が解除されます。
Chrome 118 以降、アラビア語、ペルシア語、日本語、韓国語、タイ語、簡体字、中国語（繁体）について、10 px 以下のフォントサイズが指定どおりにレンダリングされないという制限が解除されます。

意見交換とフィードバックの提供

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