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

Jack J
Jack J
GitHub

CSS Text モジュール レベル 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> タグまたは Zero Width Space（&ZeroWidthSpace;）は中断可能な点を適用し、Zero Width Joiner（&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 閉じかっこは通常、各文字が一定の進展を持つように、グリフスペースの右半分にグリフ内部のスペースを持つように設計されています。

しかし、これらの句読点を連続して使用すると、このグリフ内部のスペースが過剰になります。次の 2 つの例では、2 つ目は正しいタイポグラフィです。CJK ピリオドの右半分を削除する必要があります。

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

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

言語間で最小フォントサイズを統一

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

Chrome 118 以降、この制限はすべての言語に対して解除され、残りの 7 つの言語に対応します。この変更により、他のブラウザとの相互運用性が改善されます。

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

交流とフィードバックの共有

これらの機能についてご意見がございましたら、crbug.com からお知らせください。