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

ジャック・J
Jack J

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

境界検出は ML エンジンによって実行されるため、意図したとおりの結果が得られない可能性があります。そのような場合は、ブレークポイントを手動で調整できます。<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 より前は、10 px 以下のフォントサイズは指定どおりにレンダリングされず、アラビア語、ペルシア語、日本語、韓国語、タイ語、簡体字、繁体字中国語の場合は切り上げられていました。デベロッパーは、小さいテキストをレンダリングする回避策(transform プロパティを使用するなど)を必要としていました。

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

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

フィードバックを共有

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