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: 自然なフレーズ境界で行を折り返します。
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 プロパティを使用してスペースの挿入を制御します。

text-autospace: no-autospace;

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

以下の機能は、Chrome でデフォルトで有効にすることを目的として開発中です。

中国語、日本語、韓国語では、句読点の間にケルニングを適用すると、読みやすさが向上し、視覚的に魅力的なタイポグラフィが実現します。現在、ほとんどの印刷物とワード プロセッサでは、このケルニングが適用されています。

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

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

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

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

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

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

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

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

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

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