CSS テキストモジュール レベル 4

W3C 作業草案,

この文書の詳細
このバージョン:
https://www.w3.org/TR/2026/WD-css-text-4-20260608/
最新公開バージョン:
https://www.w3.org/TR/css-text-4/
編集者草案:
https://drafts.csswg.org/css-text-4/
以前のバージョン:
履歴:
https://www.w3.org/standards/history/css-text-4/
フィードバック:
CSSWG 課題リポジトリ
仕様内のインライン表示
編集者:
Elika J. Etemad / fantasai (Apple)
(招待専門家)
(Adobe Systems)
Florian Rivoal (招待専門家)
この仕様への編集を提案:
GitHub エディター
テストスイート:
https://wpt.fyi/results/css/css-text/

概要

この CSS モジュールは、テキスト操作のためのプロパティを定義し、その処理モデルを規定します。これは、行の 改行、両端揃えと配置、空白の扱い、およびテキスト変換を扱います。

CSS は、構造化文書のレンダリングを記述するための言語です (HTML や XML など) 画面上、紙面上などで。

この文書のステータス

この節は、この文書の公開時点におけるステータスを説明します。 現在の W3C 公開文書の一覧 およびこの技術報告書の最新改訂版は W3C 標準および草案インデックスで確認できます。

この文書は CSS ワーキンググループにより、 勧告 トラックを使用して作業草案として公開されました。 作業草案としての公開は、 W3C およびその会員による承認を意味するものではありません。

これは草案文書であり、 いつでも他の文書によって更新、置換、 または廃止される可能性があります。 この文書を進行中の作業以外のものとして引用することは不適切です。

フィードバックは、 GitHub で課題を提出することにより送信してください(推奨)。 タイトルには次のように、仕様コード “css-text” を含めてください: “[css-text] …コメントの概要…”。 すべての課題とコメントはアーカイブされます。 または、フィードバックを(アーカイブ済みの)公開メーリングリスト www-style@w3.org に送ることもできます。

この文書は 2025年8月18日 W3C Process Document に準拠します。

この文書は、 W3C Patent Policy の下で運営されるグループにより作成されました。 W3C は、そのグループの成果物に関連して行われた すべての特許開示の公開リスト を管理しています。 そのページには、特許を開示するための手順も含まれています。 個人が、その個人が Essential Claim(s) を含むと考える特許について実際の知識を有する場合、 その情報を W3C Patent Policy の第 6 節に従って開示しなければなりません。

1. はじめに

このモジュールは CSS の組版制御について説明します。 すなわち、ソーステキストを整形され行折り返しされたテキストへ変換することを制御する CSS の機能です。 さまざまな CSS プロパティにより、 大文字・小文字変換空白の折り畳みテキストの折り返し行分割規則 および ハイフネーション配置と両端揃え間隔、 そして インデントを制御できます。 レベル 3 以降の追加については レベル 3 以降の追加を参照してください。

注: フォント選択は CSS Fonts Module で扱われます。 [CSS-FONTS-3]

下線、 下線圏点、 および などの テキスト装飾機能 (以前はこのモジュールの一部) は、 CSS Text Decoration Module で扱われます。 [CSS-TEXT-DECOR-3]

双方向および 縦書きテキスト は CSS Writing Modes Module で扱われます。 [CSS-WRITING-MODES-4].

世界中のさまざまな言語および書記体系の 組版要件に関する詳細情報は、 Internationalization Working GroupLanguage Enablement Index にあります。 [TYPOGRAPHY]

1.1. モジュール間の相互作用

このモジュールは、CSS Text Decoration Module とともに、 Cascading Style Sheets Level 2 第 16 章 で定義されたテキストレベル機能を置き換え、拡張します。 [CSS-TEXT-DECOR-3] [CSS2]

以下で定義される用語に加えて、 この仕様で使用されるその他の用語および概念は、 Cascading Style Sheets Level 2 および CSS Writing Modes Module で定義されます。 [CSS2] and [CSS-WRITING-MODES-4].

1.2. 値の定義

この仕様は、[CSS2]CSS プロパティ定義の規約に従い、 [CSS-VALUES-3]値定義構文を使用します。 この仕様で定義されない値型は CSS Values & Units [CSS-VALUES-3] で定義されます。 他の CSS モジュールとの組み合わせにより、これらの値型の定義が拡張される場合があります。

各定義に列挙されたプロパティ固有の値に加えて、 この仕様で定義されるすべてのプロパティは、 プロパティ値として CSS 全体キーワードも受け入れます。 読みやすさのため、これらは明示的には繰り返していません。

1.3. 言語と組版

最良の組版動作を得るため、著者はコンテンツに正確な言語タグを付けるべきです。

多くの組版効果は言語的文脈によって異なります。 言語および書記体系の慣習は、 行分割、ハイフネーション、両端揃え、グリフ選択、 そしてその他多くの組版効果に影響することがあります。 CSS では、言語固有の組版調整は 内容言語が既知(宣言済み)である場合にのみ適用されます。 したがって、 より高品質な組版を行うには、著者が文書内のテキストについて 正しい言語的文脈を UA に伝える必要があります。

要素の 内容言語とは、 文書言語の規則に従って、 その要素が属すると宣言されている(人間の)言語です。 要素の 内容言語が不明であることもあり得る点に注意してください—​たとえば、タグ付けされていない内容、 または言語タグ付け機能を持たない 文書言語内の内容は、 不明な 内容言語を持つと見なされます。

注: 著者は HTML のグローバル lang 属性 または XML の汎用 xml:lang 属性を使用して 内容言語を宣言できます。 HTML における HTML 要素の内容言語を決定する規則、 および XML 1.0 における XML 要素の内容言語を決定する規則を参照してください。 [HTML] [XML10]

要素が属すると宣言された 内容言語は、 その要素で使用されるその言語の特定の書記形式も識別します。 これは 内容書記体系として知られます。 内容言語を識別するための 文書言語の仕組みに応じて、 この情報は明示的な場合も暗黙的な場合もあります。 規範的な 付録 F: 内容の書記体系の識別を参照してください。

注: 一部の言語には複数の書記体系の伝統があります。 また、言語が外来の書記体系へ翻字される場合もあります。 著者は、UA が適切に適応できるよう、 そのような場合にはサブタグを付けるべきです。

たとえば、韓国語(ko)は ハングル(-Hang)、 漢字(-Hani)、 またはその組み合わせ(-Kore)で書くことができます。 漢字のみで書かれた歴史文書では 単語間スペースを使用せず、 現代韓国語よりも現代中国語に近い形式で組まれます。 言い換えると、組版上の目的では ko-Hanikoko-Kore)よりも zh-Hant に近く振る舞います。

別の例として、日本語(ja)は通常、 ひらがな(-Hira)、 カタカナ(-Kana)、および漢字(-Hani)の 組み合わせ(-Japn)で書かれます。 しかし、語学学習教材などの特別な目的ではラテン文字(-Latn)に 「ローマ字化」されることもあり、 その場合は日本語よりも英語に近い形式で組まれるべきです。

第三の例として、現代モンゴル語は 2 つの文字で書かれます: キリル文字(-Cyrl、モンゴル国で公式に使用)と モンゴル文字(-Mong、中国の一部である内モンゴルでより一般的)。 これらは非常に異なる整形要件を持ち、 キリル文字はラテン文字やギリシャ文字に似た振る舞いをし、 モンゴル文字はアラビア語と中国語の双方の書記慣習に由来します。

1.4. 文字と字母

組版の基本単位は 文字です。 しかし、書記体系は基本的な英語アルファベットほど単純とは限らないため、 文字が実際に何を意味するかは、 その用語が使用される文脈によって異なります。 たとえば、ハングル(韓国語の書記体系)では、 1 つの音節を表す四角い表記 (例: =Han) を 文字と見なすことができます。 しかし、この四角い記号は実際には、音素を表す複数の字母から構成されています (例: =h, =a, =n)。 そしてこれらもそれぞれ 文字と見なされる場合があります。

任意の符号化におけるコンピュータテキスト符号化の基本単位も 文字と呼ばれます。 符号化によっては、 1 つの符号化された 文字が、 事前合成された音節 文字全体(例: )に対応することも、 個々の音素的 文字(例: )に対応することも、 または、基底字形(例: ) や、それを変化させる結合記号(例: 帯気を表す追加画)などの より小さな単位に対応することもあります。

さらに、1 つの符号化された 文字は、 データストリーム内で 1 つまたは複数のバイトとして表現されることがあります。 またプログラミング環境では、1 バイトが 文字と呼ばれることもあります。

したがって、技術的な精度が求められる場合、 文字という用語はかなり曖昧です。

テキストレイアウトでは、テキストの基本単位として 組版上の 文字単位を指すことにします。 テキストレイアウトの範囲内であっても、 関連する 文字単位は 操作によって異なります。 たとえば、行分割および字間調整は、 U+0E33 ำ THAI CHARACTER SARA AM を含むタイ文字列を異なる方法で分節します。 また、デーヴァナーガリーなどの文字体系における結合子音の挙動は、 使用されるフォントに依存する場合があります。 したがって、組版上の文字は、 特定の組版操作(行分割、first-letter 効果、字間調整、両端揃え、縦配置など)に関して 分割不能である、書記体系の単位—​たとえばラテンアルファベットの字母(発音区別符を含む)、 ハングル音節、 中国語の表意文字、 ミャンマー文字の音節クラスタ—​を表します。

Unicode Standard Annex #29: Text Segmentation は、組版上の文字に近似する 書記素クラスタと呼ばれる単位を定義しています。 [UAX29] UA は、UAX29 で定義される 拡張書記素クラスタ旧来の書記素クラスタではない)を、 その 組版上の文字単位の基礎として使用しなければなりません。 ただし、既定の規則が常に適切または理想的であるとは限らないため、 UA は組版上の伝統に応じて定義を調整すべきであり、 必要に応じて操作ごとに異なる調整を行うことが期待されます。

注: このような調整の規則は CSS の範囲外です。

以下は、標準的な組版慣行で必要とされる 組版上の文字単位の調整例です:

組版上の字母 単位 (またはこの仕様の目的における 字母) は、Letter または Number の 一般 カテゴリのいずれかに属する 組版上の文字単位です。 組版上の 文字単位の Unicode プロパティをどのように決定するかについては、 付録 E: 文字とプロパティを参照してください。

要素境界によって分割された 組版上の文字単位の描画特性は未定義です。 理想的には、各構成要素は、 組版上の文字単位全体の 正しいシェーピングと配置を維持しつつ、 それぞれの要素のプロパティの整形要件に従って描画されるべきです。 しかし、その部分間の整形上の違いの性質や 使用されるフォント技術の能力によっては、 これが常に可能とは限りません。 したがって、そのような 組版上の文字単位は、 境界のいずれか一方に属するものとして描画されたり、 または双方に属する何らかの近似として描画されたりすることがあります。 著者は、書記素クラスタ または合字を 要素境界で分割すると、一貫性のない、または望ましくない結果になる場合があることに注意してください。

1.5. テキスト処理

CSS は Unicode を基盤としています。 [UNICODE] Unicode をサポートする UA は、 CSS によって明示的に上書きされる場合を除き、 Unicode Core Standard のすべての規範的要件に従わなければなりません。 非 Unicode テキスト符号化モデルを基礎として実装された UA も、 適切な対応付けおよび類似の挙動を仮定することによって、 同じテキスト処理要件を満たすことが期待されます。

テキスト処理 (空白処理、テキスト変換、行分割など)のための隣接性を判断する目的では、 したがってこの仕様内では一般に、 介在する インラインボックス境界および 通常フロー外 要素 は無視しなければなりません。 ただし、テキストシェーピングに関しては、§ 8.7 要素境界をまたぐシェーピングを参照してください。

2. テキストの変換

2.1. 大文字・小文字変換: text-transform プロパティ

名前: text-transform
値: none | [capitalize | uppercase | lowercase ] || full-width || full-size-kana | math-auto
初期値: none
適用対象: テキスト
継承: する
パーセンテージ: 該当なし
算出値: 指定されたキーワード
正規順序: 該当なし
アニメーション型: 離散

このプロパティは、スタイル付けの目的でテキストを変換します。 これは基礎となる内容には影響せず、 プレーンテキストのコピー&ペースト操作の内容に影響してはなりません。

著者は、意味的な目的で text-transform に依存してはなりません。 むしろ、正しい大文字・小文字表記および意味は、 ソース文書のテキストとマークアップに符号化されるべきです。

値は次の意味を持ちます:

none
効果なし。
capitalize
各単語の最初の 組版上の字母単位が小文字である場合、 タイトルケースにします。 その他の文字は影響を受けません。
uppercase
すべての 字母を大文字にします。
lowercase
すべての 字母を小文字にします。
full-width
すべての 組版上の文字単位全角形式にします。 文字に対応する 全角形式がない場合、 そのままにされます。 この値は通常、ラテン字母や数字を 表意文字であるかのように組むために使用されます。
full-size-kana
すべての 小書き仮名 文字を、対応する 通常サイズの仮名に変換します。 この値は通常、ルビ注釈テキストに使用されます。 そこでは、ルビで通常使用される小さなフォントサイズにおける読みやすさの問題を補うため、 著者がすべての小書き仮名を大きな仮名として描画したい場合があります。
math-auto
MathML Core § 4.2 The math-auto transform を参照してください。
次の例は、日本語テキスト中の略語で使用される ASCII 文字を全角の異体へ変換し、 表意文字のように配置および行分割されるようにします:
abbr:lang(ja) { text-transform: full-width; }

注: text-transform の目的は、 文書の意味に影響を与えずに 表示上の大文字・小文字変換を可能にすることです。 特に、text-transform の大文字・小文字操作は情報を失うものであり、 テキストの意味を歪める可能性がある点に注意してください。 アクセシビリティインターフェースは、 描画されたテキストの見かけ上の大文字・小文字を利用者に伝えたい場合がありますが、 変換されたテキストが文書の基礎となる意味を正確に表すことには依存できません。

この例では、 テキストの最初の行が視覚効果として大文字化されています。
section > p:first-of-type::first-line {
  text-transform: uppercase;
}

この効果はソース文書に書き込むことはできません。 行分割の位置がレイアウトに依存するためです。 さらに、大文字化は意味上の区別を反映しておらず、 段落の読み方に影響することを意図していません。 したがって、これは表示層に属します。

この例では、 主段落テキストの半分のサイズである ルビ 注釈が、 小書き仮名の代わりに 通常サイズの仮名を使用するよう変換されます。
rt { font-size: 50%; text-transform: full-size-kana; }
:is(h1, h2, h3, h4) rt { text-transform: none; /* unset for large text*/ }

これは小さな文字サイズでそのような字母を見やすくする一方で、 変換はテキストを歪めることに注意してください: 読者は、適切な場所で 小書き仮名 を頭の中で置き換える必要があります—​これは、すべての “U” が “V” に見えるラテン語碑文を読むのと似ています。

たとえば、次のソースに text-transform: full-size-kana が適用された場合、 注釈は、注釈対象の「十」に対する正しい読みと意味である “じゅう”(jū、「十」)ではなく、 “じゆう”(jiyū、「自由」)と読まれることになります。

<ruby><rt>じゅう</ruby>

2.1.1. マッピング規則

capitalize について、何が「単語」を構成するかは UA 依存です。 [UAX29] は そのような単語境界を判断するために推奨されます (ただし必須ではありません)。 通常フロー外ボックスおよび インラインボックス 境界は、 text-transform の単語境界を導入してはならず、 そのような単語境界を判断するときには無視しなければなりません。

注: 著者は、 capitalize が 言語固有のタイトルケース規約 (英語で冠詞を飛ばすなど)に従うことには依存できません。

UA は Unicode 文字に対する完全な大文字・小文字マッピングを使用しなければなりません。 これには、The Unicode StandardDefault Case Algorithms 節で定義される 条件付き大文字・小文字規則も含まれます。 [UNICODE] 要素の 内容 言語が、 文書 言語の規則に従って、 既知である場合(かつその場合に限り)、 適切な言語固有規則も適用しなければなりません。 これには少なくとも、 Unicode の SpecialCasing.txt にある言語固有規則が含まれますが、 それらに限定されません。

たとえば、トルコ語には 2 種類の “i” があります。 点付きの “İ” と “i”、 そして点なしの “I” と “ı” です。 したがって、“I” と “i” の通常の大文字・小文字マッピングは、 英語には存在しない、それぞれの点なし/点付きの対応文字への 異なる一連のマッピングで置き換えられます。 このマッピングは、 内容言語 が、現代のラテン文字ベースの 書記体系で書かれたトルコ語 (またはトルコ語の大文字・小文字規則を使用する別のチュルク語) である場合にのみ有効でなければなりません。 他の言語では、 “I” と “i” の通常のマッピングが必要です。 この規則はしたがって、Unicode の SpecialCasing.txt ファイルで条件付きで定義されています。

全角 および 半角形式の定義は、 Unicode Standard Annex #11: East Asian Width にあります。 [UAX11] 全角形式へのマッピングは、 Unicode Standard Annex #44: Unicode Character Database における Decomposition_Mapping 内に <wide> または <narrow> タグを持つコードポイントを取ることによって定義されます。 [UAX44] <narrow> タグについては、 マッピングはコードポイントから (<narrow> タグを除いた)分解へのものです。 <wide> タグについては、 マッピングは (<wide> タグを除いた)分解から 元のコードポイントへ戻すものです。

小書き仮名から 通常サイズの仮名へのマッピングは、 付録 G: 小書き仮名のマッピングで定義されます。

2.2. 単語間の拡張: word-space-transform プロパティ

名前: word-space-transform
値: none | [ space | ideographic-space ] && auto-phrase?
初期値: none
適用対象: テキスト
継承: する
パーセンテージ: 該当なし
算出値: 指定どおり
正規順序: 文法に従う
アニメーション型: 離散

一部の言語や書記体系には、 単語を区切る別の方法があります。 それは異なる区切り文字を使用する場合もあれば、 可視文字をまったく使用しない場合もあります。 このプロパティにより、著者はマークアップを変更する必要なく、 レンダリングをあるスタイルから別のスタイルへ変更できます。

none
このプロパティは効果を持ちません。
space
この要素の子 テキスト内の 拡張可能 区切り は U+0020 SPACE に置き換えられます。
ideographic-space
この要素の子 テキスト内の 拡張可能 区切り は U+3000 IDEOGRAPHIC SPACE に置き換えられます。
auto-phrase
内容 言語が既知であり、 ユーザーエージェントがその言語の言語解析をサポートする場合、 ユーザーエージェントは フレーズ境界を検出しなければなりません。 その境界に 単語区切り 文字その他の空白 区切り、 または U+200B ZERO WIDTH SPACE 文字が 既に存在しない場合、 UA は 仮想拡張可能区切りを挿入しなければなりません。

この値が省略されている場合、 または 内容 言語が不明である場合、 またはユーザーエージェントがその言語について フレーズ境界の検出をサポートしない場合、 仮想拡張可能区切りは存在しません。

このプロパティの目的では、 拡張可能 区切りとは、次のいずれかです:

仮想 拡張可能区切りとは、 ソース文書には他の形で出現しない 拡張可能区切り を表す、テキスト内で UA が検出した構文上の境界です。 これはこのプロパティ以外には効果を持ちません。

ユーザーエージェントは、 強制改行の 直前または直後にある 拡張可能 区切り を置き換えてはなりません (介在するインラインボックス境界、 および関連する margin/border/padding を無視します)。

注: 仮想拡張可能 区切りインラインボックス境界に関与する最外側の要素内に配置されるため、 それが、親ボックスが word-space-transform: none使用値 を持つインラインボックスの境界と一致する場合、 その特定の 仮想拡張可能区切りは 拡張されません。 それは親ボックス内に配置されるためです。

text-transform と同様に、このプロパティはスタイル付けの目的でのみ テキストを変換します。 これは基礎となる内容には影響せず、 プレーンテキストのコピー&ペースト操作の内容に影響してはなりません。

大人向けの本とは異なり、幼い子ども向けの日本語の本では、 読みやすくするために、 文節の間にスペースが置かれることがよくあります。 ディスレクシアの人々も、このスタイルの方が読みやすいと感じる傾向があります。

特定のスタイル指定がない場合、次の文は以下のように描画されます。

<p>むかしむかし、<wbr>あるところに、<wbr>おじいさんと<wbr>おばあさんが<wbr>すんでいました。

むかしむかし、あるところに、おじいさんとおばあさんがすんでいました。


フレーズベースの間隔は、次の css で実現できます:

p {
  word-space-transform: ideographic-space;
}

むかしむかし、 あるところに、 おじいさんと おばあさんが すんでいました。


別の一般的な変種では、許容される行分割をさらにこれらのフレーズ境界に制限します。 同じマークアップを使用して、これは次の css で容易に実現できます:

p {
  word-break: keep-all;
  word-space-transform: ideographic-space;
}

むかしむかし、 あるところに、 おじいさんと おばあさんが すんでいました。

ソースコードを読みやすくすることに加えて、 マークアップで U+200B ではなく wbr を使用すると、 著者は区切りを異なるグループへ分類することもできます。

次の例では、 wbr 要素は、 単語を区切る場合には無印であり、 フレーズも区切る場合には class p で印付けされています。

<p>らいしゅう<wbr><wbr>じゅぎょう<wbr><wbr class=p>たいこ<wbr><wbr>ばち<wbr><wbr class=p>もって<wbr>きて<wbr>ください。

これを使用すると、かなり一般的なフレーズベースの間隔を有効にできるだけでなく、 曖昧さを減らすためにディスレクシアの人々に好まれる可能性の高い 単語ごとの間隔、 あるいはフレーズベースの間隔と単語ベースの折り返しを組み合わせるなど、 その他の変種も可能になります。

通常の描画

らいしゅうじゅぎょうたいこばちもってきてください。


フレーズ間隔
p wbr.p {
  word-space-transform: ideographic-space;
}

らいしゅうじゅぎょうに たいこばちを もってきてください。


単語間隔
p wbr {
  word-space-transform: ideographic-space;
}

らいしゅう の じゅぎょう に たいこ と ばち を もって きて ください。


フレーズ間隔、単語折り返し
p {
  word-break: keep-all;
}
p wbr.p {
  word-space-transform: ideographic-space;
}

らいしゅうじゅぎょうに たいこばちを もってきてください。


単語間隔と折り返し
p {
  word-break: keep-all;
}
p wbr {
  word-space-transform: ideographic-space;
}

らいしゅう の じゅぎょう に たいこ と ばち を もって きて ください。

2.3. 処理の順序

複数の変換を適用する必要がある場合、 それらは次の順序で適用されます:

  1. word-space-transform
  2. capitalizeuppercase、 および lowercase
  3. full-width
  4. full-size-kana

単語間隔変換および テキスト変換は、§ 4.3.1 フェーズ I: 折り畳みと 変換の後、 ただし § 4.3.2 フェーズ II: トリミングと配置の前に発生します。 これは、たとえば full-width保持された 空白内の スペース(U+0020)のみを U+3000 IDEOGRAPHIC SPACE に変換することを意味します。

注: 付録 A: テキスト処理の処理順序で定義されるように、 変換は行分割およびその他の整形操作に影響します。

3. 空白と折り返し: white-space プロパティ

名前: white-space
値: normal | pre | pre-wrap | pre-line | <'white-space-collapse'> || <'text-wrap-mode'> || <'white-space-trim'>
初期値: normal
適用対象: テキスト
継承: 個々のプロパティを参照
パーセンテージ: 該当なし
算出値: 指定されたキーワード
正規順序: 該当なし
アニメーション型: 離散

このプロパティは、white-space-collapsetext-wrap-mode、および white-space-trim の一括指定です。 これは 2 つのことを指定します:

注: この一括指定は、継承されるプロパティと 継承されないプロパティの双方を組み合わせます。 これが問題である場合は、CSSWG に知らせてください。

特に指定されない限り、省略された 個別指定 は、その 初期値に設定されます。

次の表は、 一括指定の特殊キーワードの値を、 それと等価な 個別指定値へ対応付ける規範的な対応表です。

white-space white-space-collapse text-wrap-mode white-space-trim
normal collapse wrap none
pre preserve nowrap none
pre-wrap preserve wrap none
pre-line preserve-breaks wrap none

注: 場合によっては、 保持された空白 および その他の空白区切り は行末にあるときに ぶら下がることがあります。 これは 内在的 サイズ決定でそれらが計測されるかどうかに影響する可能性があります。

次の参考表は、 さまざまな white-space 値の挙動を要約したものです:

改行 スペースとタブ テキストの折り返し 行末の スペース 行末の その他の空白区切り
normal 折り畳む 折り畳む 折り返す 削除 ぶら下げ
pre 保持 保持 折り返さない 保持 折り返さない
nowrap 折り畳む 折り畳む 折り返さない 削除 ぶら下げ
pre-wrap 保持 保持 折り返す ぶら下げ ぶら下げ
break-spaces 保持 保持 折り返す 折り返す 折り返す
pre-line 保持 折り畳む 折り返す 削除 ぶら下げ

4. 空白処理と制御文字

文書のソーステキストには、最終的なレンダリングには関係しない整形が含まれることがよくあります: たとえば、 編集しやすくするためにソースをセグメント (行)に分割したり、 ソースコードをインデントするために タブスペースなどの 空白文字 を追加したりすることです。 CSS の空白処理により、著者はそのような整形の解釈を制御できます: 文書をレンダリングするときにそれを保持するか、折り畳んで取り除くかです。 CSS における空白処理 (white-space-collapse および white-space-trim プロパティで制御される) は、レンダリングのためだけに 空白文字を解釈します: 基礎となる文書データには影響しません。

注: 文書言語によっては、 セグメントは特定の改行シーケンス (ラインフィードや CRLF ペアなど)で区切られる場合もあれば、 SGML の RECORD-START および RECORD-END トークンなど、 別の機構で区切られる場合もあります。

CSS 処理では、 各文書言語で定義された「セグメント区切り」または「改行シーケンス」—​またはそれらが定義されていない場合は、テキスト内の各ラインフィード (U+000A)—​は セグメント区切りとして扱われ、 その後 white-space プロパティで指定されるようにレンダリングのために解釈されます。

HTML の場合、 改行は DOM 内での表現のために ラインフィード文字(U+000A)へ 正規化されます。 そのため、HTML 文書が DOM ツリーとして表現されるとき、 各ラインフィード(U+000A)は セグメント区切りとして扱われます。 [HTML] [DOM]

注: 最も一般的な CSS 実装では、 HTML は直接スタイル付けされません。 代わりに、DOM ツリーへ処理され、 その後スタイル付けされます。 HTML と異なり、 DOM はキャリッジリターン(U+000D)に特定の意味を与えないため、 それらは セグメント 区切りとして扱われません。 HTML 解析以外の手段でキャリッジリターン(U+000D)が DOM に挿入された場合、 それらは以下で定義されるように扱われます。

注: 文書パーサーは、 セグメント 区切りを正規化するだけでなく、 他の空白文字を折り畳んだり、 マークアップ規則に従って空白を処理したりすることがあります。 CSS 処理は解析段階のに行われるため、 これらの文字をスタイル付けのために復元することはできません。 したがって、以下で指定される挙動の一部は これらの制限の影響を受けることがあり、 ユーザーエージェント依存となる場合があります。

注: 折り畳み可能な 空白のみで構成される匿名ブロックは、 レンダリングツリーから削除されます。 したがって、ブロックレベル要素を囲むそのような 空白は 折り畳まれて取り除かれます。 CSS 2 § 9.2.2.1 Anonymous inline boxes を参照してください。 [CSS2]

制御文字(Unicode カテゴリ Cc)—​タブ(U+0009)、 ラインフィード(U+000A)、 キャリッジリターン(U+000D)、 および セグメント 区切りを形成するシーケンスを除く—​は、可視グリフとして描画されなければならず、 フォント内にあるグリフが可視でない場合、UA はそれを合成しなければなりません。 そして、それ以外の点では Other Symbols(So一般カテゴリ および Common スクリプト の他の任意の文字として扱われなければなりません。 UA は、その制御文字専用にフォントが提供するグリフを使用しても、 Control Pictures ブロック内の対応する記号に対して提供されるグリフを代用しても、 そのコードポイント値の視覚表現を生成しても、 または適切な可視グリフを提供するために他の方法を使用してもよいです。 Unicode により要求されるように、 サポートされない Default_ignorable 文字は テキストレンダリングでは無視しなければなりません。 [UNICODE]

キャリッジリターン(U+000D)は、すべての点でスペース(U+0020)と同一に扱われます。

注: HTML 文書では、 ソースコード中に存在するキャリッジリターンは 解析段階でラインフィードに変換されます (HTML § 13.2.3.5 Preprocessing the input stream および Infra における normalize newlines の定義を参照)。 したがって CSS には U+000D CARRIAGE RETURN としては現れません。 [HTML] [INFRA]) ただし、文字はエスケープシーケンス (&#x0d;)を使用して符号化された場合には保持され、 上記の規則を観察できます。

4.1. 空白の折り畳み: white-space-collapse プロパティ

この節はまだ 議論中であり、将来の草案で変更される可能性があります。

名前: white-space-collapse
値: collapse | discard | preserve | preserve-breaks | preserve-spaces | break-spaces
初期値: collapse
適用対象: テキスト
継承: する
パーセンテージ: 該当なし
算出値: 指定されたキーワード
正規順序: 文法に従う
アニメーション型: 離散

このプロパティは、 空白 を折り畳むかどうか、およびどのように折り畳むかを指定します。 値は次の意味を持ち、 空白処理規則に従って 解釈されなければなりません:

collapse
この値は、ユーザーエージェントに対し、空白の連続を 1 つの文字 (または場合によっては文字なし)へ折り畳むよう指示します。
preserve
この値は、ユーザーエージェントが 空白の連続を折り畳むことを防ぎます。 ラインフィードなどの セグメント区切り強制改行として保持されます。
preserve-breaks
collapse と同様に、 この値は連続する 空白文字を折り畳みますが、 ソース内の セグメント 区切り強制改行として保持します。
preserve-spaces
この値は、ユーザーエージェントが 空白の連続を 折り畳むことを防ぎ、 タブおよび セグメント区切りスペースへ変換します。 (この値は、SVG における xml:space="preserve" の挙動を表すことを意図しています。)
break-spaces
挙動は preserve と同一ですが、 次の点を除きます:

注: この値は、 空白によるオーバーフローが決して発生しないことを保証しません: たとえば、行の長さが非常に短く、 単一の空白文字すら収まらない場合、 オーバーフローは避けられません。

discard
この値は、ユーザーエージェントに対し、 要素内のすべての空白を「破棄」するよう指示します。

これは 改行機会を保持するのか、それとも保持しないのか? 別個の "hide" 値が必要か? 改行機会を保持する場合、 word-space-transform の値で置き換えるべきかもしれない?

空白処理によって削除または折り畳まれなかった 空白は、 保持された空白と呼ばれます。

次のスタイル規則は MathML の空白処理を実装します:

@namespace m "http://www.w3.org/1998/Math/MathML";
m|* {
  white-space-collapse: discard;
}
m|mi, m|mn, m|mo, m|ms, m|mtext {
  white-space-trim: discard-inner;
}

4.2. 空白のトリミング: white-space-trim プロパティ

名前: white-space-trim
値: none | discard-before || discard-after || discard-inner
初期値: none
適用対象: インラインボックスおよび ブロックコンテナー
継承: しない
パーセンテージ: 該当なし
算出値: 指定されたキーワード
正規順序: 文法に従う
アニメーション型: 離散

このプロパティにより、著者は ボックスの先頭および末尾におけるトリミング挙動を指定できます。 値は次の意味を持ちます:

discard-before
この値は、要素の開始直前にあるすべての折り畳み可能な空白を 折り畳むよう UA に指示します。
discard-after
この値は、要素の終了直後にあるすべての折り畳み可能な空白を 折り畳むよう UA に指示します。
discard-inner
ブロックコンテナーに対して、この値は、 要素内の最初の非空白文字の前にある最後の セグメント区切りまで (それを含む)要素の先頭のすべての空白を破棄し、 さらに、要素内の最後の非空白文字の後にある最初の セグメント区切りから始まる 要素の末尾のすべての空白を破棄するよう UA に指示します。 その他の要素に対して、この値は、 要素の先頭および末尾のすべての空白を破棄するよう UA に指示します。

注: 文書空白white-space-trim によって破棄すると、 テキスト中で ソフト折り返し機会が発生する場所が変化する可能性があります。

次のスタイル規則は、DT 要素がソース文書内で別々の行に記述されていても、 それらをコンマ区切りリストとして描画します:

dt { display: inline; }
dt + dt:before { content: ", "; white-space-trim: discard-before; }

次のスタイル規則は、整形済みブロックの開始/終了タグに隣接する ソース整形用の空白を削除しますが、 要素の実際の内容に適用されたインデントや入り交じった空白は 削除しません:

pre { white-space: pre; white-space-trim: discard-inner; }
これにより、次の 2 つのソースコード断片は:
<pre>

  some
preformatted

  text

</pre>
<pre>  some
preformatted

  text</pre>
次のように同一に描画されます:
  some
preformatted

  text

代わりにこれをインライン要素に適用した場合:

span { white-space: normal; white-space-trim: discard-inner; }
start[<span>

  some
inline
  text

</span>]end
start[<span>  some
inline
  text</span>]end
これは、要素の実際の内容の前にある先頭/末尾の空白を すべて破棄するよう UA に指示します:
start[some inline text]end

white-space-trim の空白処理は、 § 4.3.1 フェーズ I: 折り畳みと変換の前に行われます。

4.3. 空白処理規則

別途指定されない限り、 CSS における空白処理は、 文書空白文字にのみ影響します: スペース(U+0020)、タブ(U+0009)、および セグメント区切りです。

注: 文書空白と見なされる文字集合 (文書内容の一部) と、構文上の空白と見なされる文字集合 (CSS 構文の一部) は必ずしも同一ではありません。 ただし、どちらにもスペース(U+0020)、タブ(U+0009)、ラインフィード(U+000A)が含まれるため、 ほとんどの著者は違いに気づかないでしょう。

スペース(U+0020) およびノーブレークスペース(U+00A0)のほかに、 Unicode は多数の追加の空白区切り文字を定義しています。 [UNICODE] この仕様では、 Unicode の 一般カテゴリ Zs に属するすべての文字のうち、 スペース(U+0020) およびノーブレークスペース(U+00A0)を除いたものをまとめて その他の空白 区切りと呼びます。

4.3.1. フェーズ I: 折り畳みと変換

注: white-space-trim は このフェーズの前に考慮されます。

インライン整形コンテキスト内の 各インライン (匿名インラインを含む。 CSS 2 § 9.2.2.1 Anonymous inline boxes [CSS2] を参照) について、 空白文字は、 行分割 および 双方向 並べ替えの前に、 双方向 整形文字Bidi_Control プロパティを持つ文字 [UAX9])を 存在しないものとして無視し、次のように処理されます:

次の例は、 空白の折り畳みと双方向性の相互作用を示します。 次のマークアップ断片を考えてください。特に スペース (強調と識別のため、背景と境界を変えています)に注意してください:
<ltr>A <rtl> B </rtl> C</ltr>

ここで、<ltr> 要素は左から右への埋め込みを表し、 <rtl> 要素は右から左への埋め込みを表します。 white-space プロパティが normal に設定されている場合、 空白処理モデルは次の結果をもたらします:

これにより、2 つの スペースが残ります。 1 つは左から右への埋め込みレベルにおける A の後、 もう 1 つは右から左への埋め込みレベルにおける B の後です。 その後、テキストは Unicode 双方向アルゴリズムに従って順序付けられ、 最終結果は次のようになります:

A  BC

A と B の間には 2 つの スペースがあり、 B と C の間にはスペースがないことに注意してください。 これは、開始タグと終了タグのすぐ内側ではなく 要素の外側に スペースを置き、 実用的な場合には、 明示的な埋め込みレベルではなく暗黙の双方向性に依存することで回避するのが最善です。

4.3.2. フェーズ II: トリミングと配置

次に、ブロック全体がレンダリングされます。 インラインは、 双方向並べ替えを考慮し、 text-wrap-mode および text-wrap-style プロパティで指定される 折り返しに従って レイアウトされます。 各行がレイアウトされる際、

  1. 行の先頭にある 折り畳み可能な スペースの連続は 削除されます。
  2. タブサイズが 0 の場合、 保持された タブはレンダリングされません。 それ以外の場合、各 保持された タブは、 次のグリフの開始端を次の タブ位置に揃える 水平方向の移動としてレンダリングされます。 この距離が 0.5ch 未満である場合、 代わりにその次の タブ位置が使用されます。 タブ 位置は、 保持された タブに最も近い ブロックコンテナー祖先の 開始コンテンツ端から、 タブサイズの倍数となる位置に発生します。 タブサイズtab-size プロパティによって与えられます。

    注: タブ(U+0009)が bidi とどのように相互作用するかについては、Unicode の 規則を参照してください。 [UAX9]

  3. 行末にある 折り畳み可能な スペースの連続は削除されます。 また、white-space-collapse プロパティが collapse または preserve-breaks である 末尾の U+1680   OGHAM SPACE MARK も削除されます。

    注: Unicode Bidirectional Algorithm の規則 L1 により、 双方向並べ替えの前に 行末に位置していた 折り畳み可能な スペースの連続は、 並べ替え後も行末にあります。 [UAX9] [CSS-WRITING-MODES-4]

  4. 行末に 空白その他の空白 区切り、 および/または 保持された タブの連続が残っている場合 (双方向並べ替え[CSS-WRITING-MODES-4]):
    • white-space-collapsecollapse または preserve-breaks である場合、 UA はこの連続を(無条件に) ぶら下げなければなりません。
    • white-space-collapsepreserve であり、 かつ text-wrap-modenowrap でない場合、 UA はこの連続を(無条件に) ぶら下げなければなりません。 ただし、その連続の後に 強制改行が続く場合は、 代わりにその連続を 条件付きでぶら下げなければなりません。 また、そうしなければオーバーフローするものについては、 文字の前進幅を視覚的に折り畳んでもよいです。

      注: 空白を折り畳むのではなく ぶら下げることで、 ユーザーはテキストを選択または編集するときにその空白を見ることができます。

    • white-space-collapsebreak-spaces に設定されている場合、 スペースタブ、および その他の空白 区切り は、他の可視文字と同じように扱われます: それらは ぶら下がることも、 前進幅を折り畳まれることもありません。

      注: したがって、そのような文字は 空間を占め、 利用可能な空間 および適用される行分割制御に応じて、 オーバーフローするか、行の折り返しを引き起こします。

    white-space-collapse: preserve-spaces の場合、 ここでは何が起こるべきか?

この例は、強制改行を伴う行末の空白を 条件付きでぶら下げることが、 行頭との対称性を提供することを示しています。 スペースを可視化しやすくするため、下線を追加しています。
p {
  white-space: pre-wrap;
  width: 5ch;
  border: solid 1px;
  font-family: monospace;
  text-align: center;
}
<p> 0 </p>

上記のサンプルは次のように描画されます:

0

最後の スペースは 強制改行の前にあり、 オーバーフローしないため、 ぶら下がらず、 中央揃えは期待どおりに機能します。

この例は、 強制改行のない行末で ぶら下がる スペースと、 強制改行を伴う行末でそれらを 条件付きで ぶら下げる場合の違いを示しています。 スペースを可視化しやすくするため、下線を追加しています。
p {
  white-space: pre-wrap;
  width: 3ch;
  border: solid 1px;
  font-family: monospace;
}
<p> 0 0 0 0 </p>

上記のサンプルは次のように描画されます:

0
0 0
0

p { text-align: right; } が追加された場合、 結果は次のようになります:

0
0 0
0

強制改行のない行末にある 保持された スペースぶら下がる必要があるため、 テキスト配置中に行の残りを配置するときには考慮されません。 末尾側へ揃える場合、 これはそのような スペースがオーバーフローし、 行の残りの内容が行の端に揃うことを妨げないことを意味します。 一方で、 強制改行を伴う行末にある保持されたスペースは、 条件付きで ぶら下がります。 この例では最後の行の末尾のスペースはオーバーフローしないため、 それは ぶら下がらず、 したがってテキスト配置中に考慮されます。

次の例では、 行末のスペースを収めるだけの余地がどの行にもないため、 それらはすべての行で ぶら下がります: 強制改行のない行のものはそうしなければならないためであり、 強制改行を伴う行のものも、 条件付きで ぶら下がり、かつオーバーフローするためです。 スペースを可視化しやすくするため、下線を追加しています。
p {
  white-space: pre-wrap;
  width: 3ch;
  border: solid 1px;
  font-family: monospace;
}
<p>0 0 0 0 </p>
0 0
0 0

最後の行は最後の 0 の前で折り返されません。 条件付きでぶら下がる文字は、 行の内容が収まるかどうかを測定するときに考慮されないためです。

4.3.3. セグメント区切り変換規則

white-space-collapsecollapse でない場合、 セグメント区切り折り畳み可能ではありません。 collapse または preserve-spaces (それらを スペースへ変換する) 以外の値では、 セグメント区切りは代わりに保持されたラインフィード (U+000A)へ変換されます。

white-space-collapsecollapse である場合、 セグメント区切り折り畳み可能であり、 次のように折り畳まれます:

  1. まず、別の折り畳み可能な セグメント区切りの直後にある 任意の折り畳み可能な セグメント区切りは 削除されます。
  2. 次に、残っている任意の セグメント 区切りは、 区切りの前後の文脈に応じて、 スペース(U+0020)へ変換されるか、 削除されます。 この操作の規則は、このレベルでは UA 定義です。

    これは レベル 4 で定義すべきか?

    注: この文脈が評価される前に、 空白処理規則は セグメント区切りの周囲にある 任意の タブおよび スペースを 既に削除しています。

セグメント区切り変換規則 (および一般に空白の折り畳み)の目的は、 文書ソースコードを扱いやすくするために セグメントへ分割されたテキストを 「分割されていない」状態に戻すことです。 英語や韓国語など、単語区切りを使用する言語では、 行を「分割されていない」状態に戻すには、2 つの行を スペースで結合する必要があります。
Here is an English paragraph
that is broken into multiple lines
in the source code so that it can
be more easily read and edited
in a text editor.

Here is an English paragraph that is broken into multiple lines in the source code so that it can be more easily read and edited in a text editor.

英語で改行を取り除くには、 その位置に スペースを維持する必要があります。

中国語など、単語区切りを持たない言語では、 行を「分割されていない」状態に戻すには、2 つの行を介在するスペースなしで結合する必要があります。

這個段落是那麼長,
在一行寫不行。最好
用三行寫。

這個段落是那麼長,在一行寫不行。最好用三行寫。

中国語で改行を取り除くには、 介在する 空白をすべて取り除く必要があります。

セグメント区切り変換規則は、隣接する文脈を使用して、 セグメント区切りをスペースへ変換するか、 それとも完全に取り除くかを決定できます。

注: 歴史的に、HTML と CSS は セグメント区切りを 無条件にスペースへ変換してきました。 これにより、中国語などの言語で作成された内容は、 ソース内で行を分割できない状態になっていました。 したがって、UA のヒューリスティックは、そのような言語への対応を改善しようとする一方で、 セグメント区切りを破棄する場所について 慎重である必要があります。

4.4. タブ文字のサイズ: tab-size プロパティ

名前: tab-size
値: <number [0,∞]> | <length [0,∞]>
初期値: 8
適用対象: テキスト
継承: する
パーセンテージ: 該当なし
算出値: 指定された数値または絶対長
正規順序: 該当なし
アニメーション型: 算出値型による

このプロパティは、保持されたタブ文字(U+0009)をレンダリングするために使用される タブ サイズを決定します。 <number> は、 保持された タブに最も近い ブロックコンテナー祖先の スペース文字(U+0020)の前進幅の倍数としての寸法を表します。 これには、それに関連する letter-spacing および word-spacing も含まれます。 負の値は許可されません。

5. テキストの折り返し

インラインレベルの内容が行へレイアウトされるとき、それはラインボックスをまたいで分割されます。 そのような分割は 改行と呼ばれます。 明示的な改行制御 (保持された改行文字など) によって行が分割される場合、 またはブロックの開始または終了によって分割される場合、 それは 強制改行です。 内容の 折り返しによって行が分割される場合 (すなわち、内容を寸法内に収めるために UA が強制されない改行を作成する場合)、 それは ソフト折り返し 改行です。 インラインレベルの内容を行に分割する処理は、行分割と呼ばれます。

折り返しは、許可された分割点でのみ行われます。 その点は ソフト折り返し 機会と呼ばれます。 折り返しが有効な場合(white-space を参照)、 UA は、ソフト折り返し機会が存在するなら、 そこで行を折り返すことにより、 行からオーバーフローする内容の量を最小化しなければなりません。 有効な ソフト折り返し機会は、 内容言語 および書記体系、 ならびにそれらを制御する CSS プロパティに依存します。 § 6 行分割と単語境界を参照してください。

テキストがどこで折り返せるかは、 行分割規則および制御によって制御されます。 それが折り返しを許可されるかどうか、 および行内の複数の ソフト折り返し機会がどのように優先されるかは、 text-wrap-modetext-wrap-stylewrap-beforewrap-after、 および wrap-inside プロパティによって制御されます。

5.1. 折り返すかどうかの決定: text-wrap-mode プロパティ

名前: text-wrap-mode
値: wrap | nowrap
初期値: wrap
適用対象: テキスト
継承: する
パーセンテージ: 該当なし
算出値: 指定されたキーワード
正規順序: 文法に従う
アニメーション型: 離散

このプロパティは、インラインレベル の内容が、 強制されない ソフト折り返し 機会折り返すかどうかを指定します。

注: このプロパティは、個別指定であり、 white-spacetext-wrap の双方の個別指定です。

可能な値:

wrap
有効な行分割規則によって決定される、許可された ソフト折り返し 機会で、 折り返しが行われてもよく、 これは インライン軸方向のオーバーフローを最小化するためです。

注: § 6.5 行分割の詳細では、 ソフト折り返し機会に関する規則および制約について、 より詳しい情報を示しています。

nowrap
行は 強制改行でのみ分割されます。 ブロックコンテナー内に収まらない内容は、それをオーバーフローします。

text-wrap-mode の値に関係なく、 保持された セグメント区切り、 および BKCRLFNL の行分割クラスを持つ任意の Unicode 文字は、 強制 改行として扱われなければなりません。 [UAX14]

注: そのような 強制改行の 双方向性への影響は、 Unicode Bidirectional Algorithm によって定義されます。 [UAX9]

5.2. ボックス内の分割制御: wrap-inside プロパティ

名前: wrap-inside
値: auto | avoid
初期値: auto
適用対象: インラインボックス
継承: しない
パーセンテージ: 該当なし
算出値: 指定されたキーワード
正規順序: 文法に従う
アニメーション型: 離散
auto
有効な行分割規則によって決定される、許可された分割点で、 ボックス内の行が分割されてもよいです。
avoid
ボックス内での行分割は抑制されます: UA は、その行に他の有効な分割点がない場合に限り、 ボックス内で分割してもよいです。 テキストが分割される場合、 行分割制約は auto の場合と同様に尊重されます。

avoid を持つボックスが入れ子になっており、 UA がこれらのボックス内で分割しなければならない場合、 内側のボックス内の分割を使用する前に、 外側のボックス内の分割を使用しなければなりません。

5.2.1. フッター表示における 'wrap-inside: avoid' の使用例

分割点の優先度は、 テキストの意図されたグループ化を反映するよう設定できます。

次の規則が与えられた場合

footer { wrap-inside: avoid; }
venue { wrap-inside: avoid; }
date { wrap-inside: avoid; }
place { wrap-inside: avoid; }

および次のマークアップ:

<footer>
<venue>27th Internationalization and Unicode Conference</venue>
&#8226; <date>April 7, 2005</date> &#8226;
<place>Berlin, Germany</place>
</footer>

狭いウィンドウでは、フッターは次のように分割される可能性があります

27th Internationalization and Unicode Conference •
April 7, 2005 • Berlin, Germany

または、より狭いウィンドウでは次のように

27th Internationalization and Unicode
Conference • April 7, 2005 •
Berlin, Germany

しかし、次のようにはなりません

27th Internationalization and Unicode Conference • April
7, 2005 • Berlin, Germany

5.3. ボックス間の分割制御: wrap-before/wrap-after プロパティ

名前: wrap-before, wrap-after
値: auto | avoid | avoid-line | avoid-flex | line | flex
初期値: auto
適用対象: インラインレベルボックスおよび フレックスアイテム
継承: しない
パーセンテージ: 該当なし
算出値: 指定されたキーワード
正規順序: 文法に従う
アニメーション型: 離散

これらのプロパティは、行分割 (および フレックス行分割 [CSS3-FLEXBOX]) における分割機会への変更を指定します。 可能な値:

auto
有効な行分割規則によって決定される、許可された分割点で、 ボックスの前後の行が分割されてもよいです。
avoid
ボックスの直前/直後での行分割は抑制されます: UA は、その行に他の有効な分割点がない場合に限り、 そこで分割してもよいです。 テキストが分割される場合、 行分割制約は auto の場合と同様に尊重されます。
avoid-line
avoid と同じですが、 行分割に対してのみです。
avoid-flex
avoid と同じですが、 フレックス行分割に対してのみです。
line
ボックスが インラインレベルボックスである場合、 その直前/直後に強制的に行分割します。
flex
ボックスが 複数行フレックスコンテナー内の フレックスアイテムである場合、 その直前/直後に強制的に フレックス行を分割します。

インラインレベルボックス上の強制行分割は、 ブロックレベルボックス上の 強制分割が、同じ 断片化コンテキスト内の任意の親 ブロックボックスを通じて上方へ伝播するのと同じ方法で、 任意の親 インラインボックスを通じて上方へ伝播します。 [CSS3-BREAK]

5.4. 折り返し方法の選択: text-wrap-style プロパティ

名前: text-wrap-style
値: auto | balance | stable | pretty | avoid-orphans
初期値: auto
適用対象: ブロックコンテナーのうち、インライン整形コンテキストを確立するもの
継承: する
パーセンテージ: 該当なし
算出値: 指定されたキーワード
正規順序: 文法に従う
アニメーション型: 離散

CSSWG は avoid-orphans のより良い名前を探しています。

折り返しが許可されている場合 (text-wrap-mode を参照)、 このプロパティは、行を折り返すための複数の方法の中から選択し、 速度、レイアウトの品質とスタイル、または安定性の間でトレードオフを行います。 これは、どの ソフト折り返し機会が存在するかを変えるものではなく、 ユーザーエージェントがそれらの中からどのように選択するかを変えます。 可能な値:

auto
どの ソフト 折り返し機会で分割するかを選択する正確なアルゴリズムは UA 定義です。 このアルゴリズムは、分割判断を行う際に複数行を考慮してもよいです。 UA は最良のレイアウトより速度を優先してもよいです。 UA は、balance の場合のように、 (最後の行を含む)すべての行を均等化しようとしてはなりません。 この値は、UA の推奨する(または最も Web 互換のある) 折り返しアルゴリズムを選択します。
balance
行分割は、各ラインボックス内に残る(空の)空間を バランスさせるように選択されます。 ただし、auto より良いバランスが可能な場合に限ります。 これは、text-wrapauto に設定されていた場合に そのブロックが含むであろうラインボックスの数を 変更しないようにするべきであり、5 行以下の場合は変更してはなりません。

注: それでも、 どの内容が同じ行に現れるかの変化により、 ラインボックスの高さが変わることがあります。

考慮する残りの空間とは、 float とインライン内容を配置した後、 ただしテキストの両端揃えによる調整の前に残る空間です。 各ラインボックス内の残り空間の平均 インラインサイズからの標準偏差が、 ブロック全体で (強制改行で終わる行を含めて) 減少した場合、ラインボックスはバランスされています。

強制改行で区切られた行のグループは、 個別に処理されます。 要素が line-clamp の影響を受ける場合、 まずクランプ効果が適用され、 その後、残りの行がバランスされます。

正確なアルゴリズムは UA 定義です。

UA は、バランスを取る行が 10 行を超える場合、 この値を auto として扱ってもよいです。

stable
後続の行の内容は、分割判断を行う際に 考慮されるべきではないことを指定します。 これにより、テキスト編集中にカーソルより前の内容が 安定したままになります。 それ以外は auto と等価です。
pretty
UA が速度よりもより良いレイアウトを優先すべきであり、 分割判断を行う際に複数行を考慮することが期待されることを指定します。 それ以外は auto と等価です。

ユーザーエージェントは、とりわけ、 avoid-orphans と同様に、 過度に短い最終行を避けようとしてもよいですが、 さらに追加の方法でレイアウトを改善すべきです。 改善の正確な集合はユーザーエージェント依存であり、 次のようなものを含む場合があります: 行間の長さのばらつきを減らすこと、 タイポグラフィ上のリバーを避けること、 異なる種類の ソフト折り返し機会ハイフネーション 機会、または 両端揃え機会を優先すること、 あまりにも多くの連続する行でハイフネーションを避けること…

必要な計算は高コストになる可能性があります。 特に大量のテキストに適用される場合はそうです。 著者は text-wrap-style: pretty を使用する際に パフォーマンスへの影響を評価し、 重要な箇所に限定して使用することが推奨されます。
avoid-orphans
UA が過度に短い最終行を避けるべきであり、 分割判断を行う際に複数行を考慮することが期待されることを指定します (たとえば、孤立語を「修正」するために 直前の行を短くしすぎることを避けるため)。 ユーザーエージェントは、 それによって前の行の一部が大きく不均衡になる場合、 最終行の改善を行わないと判断してもよいです。 ユーザーエージェントは、 それらの改善が大きなパフォーマンスコストを伴う場合、 auto を超えてレイアウトの他の側面を改善しようとすべきではありません。

注: 西洋の組版では、“orphan” は 段落の最終行に単一語だけがあることを指す場合があります。 しかし、すべての言語や書記体系が単語境界で行を折り返すわけではなく、 またそうする言語であっても、 最終行に数個の非常に短い語だけがあることは望ましくない場合があります。 特に利用可能なインライン空間が長い場合はそうです。 したがって、この仕様は、 行が単一語だけで構成される場合に限って短すぎるとは厳密に定義せず、 何が過度に短いかの判断をユーザーエージェントに委ねます。

注: 断片化の制御および “orphans” のもう一つの組版上の意味については、 orphans プロパティも参照してください。

たとえば、与えられた行長では、次のテキストは最終行に単一語を置いて 折り返されることになり、 これは短すぎると判断される可能性があります。
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα
πολλὰ πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον
ἔπερσεν.
text-wrap-style: avoid-orphans を適用すると、 代わりに次のような結果になり、 こちらの方がより好ましいと考えられます:
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς
μάλα πολλὰ πλάγχθη, ἐπεὶ Τροίης ἱερὸν
πτολίεθρον ἔπερσεν.
しかし、次の断片はより悩ましいものです:
Circumnavigating
the Mississippi
river
最終行を短すぎないようにするため、前の行を早めに折り返そうとすると、 次のような結果になります:
Circumnavigating
the
Mississippi river
最終行は確かに短くなくなりますが、 最後から 2 番目の行は見苦しくなります。 このような場合、ユーザーエージェントは、 text-wrap-style: avoid-orphans が設定されていても、 最初の描画を優先することが期待されます。

注: auto 値は通常、 Web ブラウザーの高速な従来の行分割に対応します。 これはこれまで first-fit/greedy アルゴリズムを使用してきており、 しばしば最適ではない結果を生じることがあります。 UA は、この既定値でより良い行分割アルゴリズムを試すことができますが、 最適な結果にはより多くの時間がかかることが多いため、 pretty および avoid-orphans は、 より良い結果のためにより多くの時間をかけることを選択する opt-in として提供されます。 どちらの値も本文向けであり、 最終行は平均的な行よりやや短いことが期待されます。 ただし avoid-orphans は、 パフォーマンスを保ちながら過度に短い最終行を避けることを目的とし、 一方 pretty は、 さらに良いレイアウトを追求するためにより多くの速度を犠牲にできます。 balance 値は、 同じ長さのテキスト行が好まれがちなタイトルやキャプション向けです。 そして stable は、 編集可能である、または編集可能へ切り替えられる可能性が高い部分向けです。

スレッドを参照。 課題は、行に対して最小長を要求することについてです。 一般的な尺度としては次のものが考えられます。

値空間の提案は match-indent | <length> | <percentage> です(そのユースケースを明確にする例として Xch が挙げられています)。 あるいは <integer> が実際に文字数を数えてもよいでしょう。

これが(上記の)テキストバランシングとどのように相互作用するかは不明です。 以前の提案の 1 つでは、これらを同じプロパティとしていました (100% は完全なバランシングを意味する)。

語ベースの制限を求める声もありますが、これは実際には 語の長さに依存するため、文字ベースの方が適しています。

5.5. 折り返しの統合制御: text-wrap 一括指定プロパティ

名前: text-wrap
値: <'text-wrap-mode'> || <'text-wrap-style'>
初期値: wrap
適用対象: 個々のプロパティを参照
継承: 個々のプロパティを参照
パーセンテージ: 個々のプロパティを参照
算出値: 個々のプロパティを参照
正規順序: 文法に従う
アニメーション型: 個々のプロパティを参照

このプロパティは、text-wrap-mode および text-wrap-style プロパティの一括指定です。 省略された任意の 個別指定は、その 初期値に設定されます。

6. 行分割と単語境界

ほとんどの書記体系では、 ハイフネーションがない場合、ソフト折り返し機会は通常、単語境界でのみ発生します。 そのような体系の多く(ラテンアルファベットで書かれた英語など)は、 単語を明示的に区切るために スペース または句読点を使用し、 ソフト折り返し機会はそれらの文字によって識別できます。

しかし、タイ語、ラオ語、クメール語などの文字体系では、 単語を区切るためにスペースや句読点を使用しません。 これらの文字体系では、ゼロ幅スペース(U+200B)を 明示的な単語区切りとして使用できますが、 この慣行は一般的ではありません。 その結果、そのようなテキスト中で ソフト折り返し機会を正しく識別するには、 語彙資源が必要です。

その他のいくつかの書記体系、 特にジャワ文字やバリ文字などのブラーフミー系文字では、 ソフト折り返し 機会は、単語境界ではなく正書法上の音節境界に基づきます。 正書法上の音節分割は、 内容言語 に依存せず、語彙資源も必要としませんが、 それでも分割機会を見つけるために テキストの解析を必要とします。

中国語(および日本語、イ語、ときには韓国語も)などの他の体系では、 各音節が単一の 組版上の字母単位に対応する傾向があり、 したがって行分割規約は、特定の文字組み合わせの間を除いて どこでも行を分割することを許可します。 さらに、これらの制約の厳密さの度合いは、 組版スタイルによって異なります。

CSS は、ソフト折り返し機会がどこで発生するかを完全には定義しませんが、 一般的な変種を区別するために、いくつかの制御を提供します:

注: Unicode Standard Annex #14: Unicode Line Breaking Algorithm は、Unicode のすべての文字体系に対する行分割の基礎的な挙動を定義しており、 これはさらに調整されることが期待されます。 [UAX14] 行分割規約に関する詳細情報は、 日本語については Requirements for Japanese Text Layout [JLREQ] および Formatting Rules for Japanese Documents [JIS4051]、 中国語については Requirements for Chinese Text Layout [CLREQ] および General Rules for Punctuation [ZHMARK] にあります。 追加の言語に関する詳細情報を含む Internationalization Working GroupLanguage Enablement Index も参照してください。 [TYPOGRAPHY] 追加で適切な参考文献に関する案内があれば、 大いに歓迎されます。

6.1. 字母の分割規則: word-break プロパティ

名前: word-break
値: normal | break-all | keep-all | manual | auto-phrase | break-word
初期値: normal
適用対象: テキスト
継承: する
パーセンテージ: 該当なし
算出値: 指定されたキーワード
正規順序: 該当なし
アニメーション型: 離散

このプロパティは、「単語」の間および内部の ソフト折り返し機会、 すなわちテキスト行を分割することが「通常」であり許容される場所を指定します。 これは字母間の分割に焦点を当てており、 空白および その他の空白 区切りによって ソフト折り返し 機会が作成されるかどうか、およびどのように作成されるか (ただし auto-phrase は一部を抑制する場合があります)、 また句読点の周囲については定義しません。 (句読点および小書き仮名に影響する制御については、 line-break を参照してください。)

特に、 word-break は、 隣接する 組版上の字母単位の間に ソフト折り返し機会が 一般に存在するかどうかを制御します。 この目的(のみ)のため、 NUALAI、 または ID の Unicode 行分割クラスに属する、字母でない 組版上の文字 単位組版上の字母単位として扱います。 [UAX14]

たとえば、 CJK 組版の一部のスタイルでは、 英単語はスペースやハイフネーション点でのみ分割されるのではなく、 任意の 2 つの字母の間で分割されることが許可されます。 これは word-break:break-all によって有効にできます。
A snippet of Japanese text with English in it.
			          The word 'caption' is broken into 'capt' and 'ion' across two lines.
日本語の中に埋め込まれた英語テキストが、 単語内の任意の位置で分割される例。

別の例として、韓国語には 2 つの行分割スタイルがあります: 任意の 2 つの韓国語音節の間 (word-break: normal) または、英語のように主にスペースで (word-break: keep-all)。

각 줄의 마지막에 한글이 올 때 줄 나눔 기
준을 “글자” 또는 “어절” 단위로 한다.
각 줄의 마지막에 한글이 올 때 줄 나눔
기준을 “글자” 또는 “어절” 단위로 한다.

エチオピア文字にも同様に 2 つの行分割スタイルがあり、 単語 区切りでのみ分割する (word-break: normal)か、 単語内の字母間の分割も許可する (word-break: break-all)かです。

ተወልዱ፡ኵሉ፡ሰብእ፡ግዑዛን፡ወዕሩያን፡
በማዕረግ፡ወብሕግ።ቦሙ፡ኅሊና፡ወዐቅል፡
ወይትጌበሩ፡አሐዱ፡ምስለ፡አሀዱ፡
በመንፈሰ፡እኍና።
ተወልዱ፡ኵሉ፡ሰብእ፡ግዑዛን፡ወዕሩያን፡በማ
ዕረግ፡ወብሕግ።ቦሙ፡ኅሊና፡ወዐቅል፡ወይትጌ
በሩ፡አሐዱ፡ምስለ፡አሀዱ፡በመንፈሰ፡እኍና።

注: オーバーフローの場合に限って 追加の分割機会を有効にするには、 overflow-wrap を参照してください。

値は次の意味を持ちます:

normal
単語は、上記で説明した慣習的な規則に従って分割されます。 一般に 2 つの異なる挙動を示す韓国語では、 任意の 2 つの連続するハングル/漢字の間での分割が許可されます。 同じく 2 つの異なる挙動を示すエチオピア文字では、 単語内のそのような分割は許可されません。

いくつかの書記体系では、慣習的に期待される ソフト折り返し機会を得るために、 § 6.1.1 解析的単語分割で説明するような 特定の処理が必要です。

break-all
「単語」内での分割が許可されます: 具体的には、 normal で許可される ソフト折り返し機会に加えて、 任意の 組版上の字母単位 (および、NU(“numeric”)、 AL(“alphabetic”)、 または SA(“Southeast Asian”) の行分割クラス [UAX14] に解決される任意の 組版上の文字単位)は、 行分割の目的では、代わりに ID (“ideographic characters”)として扱われます。 ハイフネーションは適用されません。

注: この値は、 句読点文字の周囲に ソフト折り返し機会 があるかどうかには影響しません。 任意の場所で分割を許可するには、 line-break: anywhere を参照してください。

注: このオプションは、 エチオピア文字に対するもう一つの一般的な挙動を有効にします。 また、テキストが主に CJK 文字で構成され、 短い非 CJK の抜粋だけを含み、 各行でテキストをよりよく分散させたい場合にもよく使用されます。

keep-all
「単語」内での分割は禁止されます: 組版上の字母単位 (または NUALAI、 または ID の Unicode 行分割クラス [UAX14] に属する、その他の 組版上の文字単位) の間にある暗黙の ソフト 折り返し機会は抑制されます。 すなわち、そのような文字の組の間の分割は禁止されます (line-break の設定が anywhere 以外であれば、その設定に関係なく) ただし § 6.1.1.1 語彙的単語分割によって機会が存在する場合を除きます。 それ以外では、このオプションは normal と等価です。 このスタイルでは、CJK 文字の連続は分割されません。

注: これは韓国語 (単語間に スペースを使用する) に対するもう一つの一般的な挙動であり、 CJK 断片が、区切りに スペースを使用する 別の言語に混在する混在文字体系テキストにも有用です。

manual
normal と同じように振る舞いますが、 § 6.1.1.1 語彙的単語分割を 実行してはなりません。 具体的には、 組版上の文字単位のうち [UAX14] におけるクラス SA を持つものは、 クラス AL を持つものとして扱わなければなりません (すなわち、line-break の値が anywhere 以外であると仮定すると、 そのような文字の組の間に ソフト折り返し機会 はありません)。

注: この値は、 バリ語などの言語における単語内の音節ベースの ソフト折り返し機会には影響しません。 (そのような書記体系に関する議論については § 6.1.1.2 正書法的分割 を参照してください。)

あるいは、 この値は normal ではなく keep-all を基準にしてもよいかもしれません。 さらに別の変種として、この挙動を keep-all と統合することも考えられます。

注: 一部の東南アジア言語は、ユーザーエージェントによって誤検出されることがよくあります。 word-break: normal では、 その場合、不適切な言語固有ロジックを適用して 折り返し機会を見つけ、 それらを不適切に配置してしまいます。

たとえば、 タイ語以外の多くの言語がタイ文字を使用して書かれますが、 それらをタイ語であるかのように行分割すると、 一般に不十分で、場合によっては混乱を招く結果になります。

これが発生した場合、 この値により、著者は word-break: normal に対してユーザーエージェントに組み込まれた 単語境界検出を無効にできます。 これにより、折り返し機会を示すようテキストを手動でマークアップし、 妥当な結果を得ることができます。

この値を使用する著者は、 東南アジア言語の単語境界を手動で示すことが期待されます。 そのためには wbr または U+200B を使用します。 そうしなければ、ソフト折り返し機会 は存在せず、テキストがオーバーフローする可能性があります。
auto-phrase
normal と同じように振る舞いますが、 この値は、自然なフレーズ(複数の単語から成る)をまとめて保持することを優先するために、 ユーザーエージェントへ言語固有の内容解析を行うよう指示します。

要素の 内容 言語が不明である場合、 またはユーザーエージェントがその特定の言語について フレーズ境界を検出する 方法を知らない場合、 この値は normal として振る舞わなければなりません。 それ以外の場合、 ユーザーエージェントは フレーズ境界を検出し、 各フレーズ内の ソフト折り返し機会 を抑制すべきです。

内容言語 および フレーズ境界検出のサポートに関係なく、 ハイフネーション機会は、 hyphens: none が指定されたかのように抑制されます。

注: ある言語向けに設計された単語境界検出システムが、 その言語の一部またはすべての方言に適しているかどうかは、 ある程度主観的であり、 この仕様はそれをユーザーエージェントの裁量に委ねます。 検出システムが特定の方言のすべての微妙な違いに対処できないとしても、 ほとんどの場合に単語境界を正しく認識できるなら、 サポートを主張することは妥当かもしれません。 しかし、ほとんどの単語境界を検出できない、 または高い誤り率を持つ言語についてサポートを主張するなら、 ユーザーエージェントは著者と利用者に不利益を与えることになります。
ユーザーエージェントが広範な中国語群には適さない 広東語用の単語境界検出システムを持っている場合、 auto-phrase は、 lang=yuelang=zh-yue、または lang=zh-HK とマークされた内容には効果を持つべきですが、 lang=zh または lang=zh-Hant には 効果を持つべきではありません。

しかし、ユーザーエージェントが中国語全般に適した 汎用の単語境界検出システムをサポートする場合、 auto-phrase は、 広い lang=zh 特性付けでマークされた内容にも効果を持つべきです。 また、lang=zh-yuelang=zh-Hant-HKlang=zh-Hans-SG、または lang=zh-hak など、より具体的なものにも効果を持つべきです。

特定のカテゴリの字母と同じ方法で行分割される記号は、 それらの字母と同じように影響を受けます。

以下は混在文字体系のサンプルテキストです:
这是一些汉字 and some Latin و کمی خط عربی และตัวอย่างการเขียนภาษาไทย በጽሑፍ፡ማራዘሙን፡አንዳንድ፡

分割点は次のように決定されます(‘·’ で示されています):

word-break: normal
这·是·一·些·汉·字·and·some·Latin·و·کمی·خط·عربی·และ·ตัวอย่าง·การเขียน·ภาษาไทย·በጽሑፍ፡·ማራዘሙን፡·አንዳንድ፡
word-break: break-all
这·是·一·些·汉·字·a·n·d·s·o·m·e·L·a·t·i·n·و·ﮐ·ﻤ·ﻰ·ﺧ·ﻁ·ﻋ·ﺮ·ﺑ·ﻰ·แ·ล·ะ·ตั·ว·อ·ย่·า·ง·ก·า·ร·เ·ขี·ย·น·ภ·า·ษ·า·ไ·ท·ย·በ·ጽ·ሑ·ፍ፡·ማ·ራ·ዘ·ሙ·ን፡·አ·ን·ዳ·ን·ድ፡
word-break: keep-all
这是一些汉字·and·some·Latin·و·کمی·خط·عربی·และ·ตัวอย่าง·การเขียน·ภาษาไทย·በጽሑፍ፡·ማራዘሙን፡·አንዳንድ፡

日本語は通常、単語内の音節間で行分割を許可するように組まれます。 しかし、これらの折り返し機会を抑制し、 特定の文節の末尾でのみ折り返しを許可することが好まれる場合があります。 これは、見出しや表・図のキャプションなど、 非常に短いテキスト片で最も一般的に行われます。

これは、許可された折り返し点を wbr または U+200B ZERO WIDTH SPACE で手動でマークし、 他のものを word-break: keep-all を使用して抑制することで実現できます。

あるいは、 日本語のフレーズ境界の検出をサポートするユーザーエージェントでは、 word-break: auto-phrase を使用することにより、同じ結果を自動的に実現できます (内容 言語が指定されていると仮定します)。

サンプルマークアップとスタイル規則 期待される描画 あなたのブラウザーでの結果
<h1>
窓ぎわの<wbr>トットちゃん
</h1>
h1 {
  word-break: normal;
}
窓ぎわのトッ
トちゃん
窓ぎわのトットちゃん
<h1>
窓ぎわの<wbr>トットちゃん
</h1>
h1 {
  word-break: keep-all;
}
窓ぎわの
トットちゃん
窓ぎわのトットちゃん
<h1 lang=ja>
窓ぎわのトットちゃん
</h1>
h1 {
  word-break: auto-phrase;
}
窓ぎわの
トットちゃん
窓ぎわのトットちゃん

ユーザーエージェントは、このプロパティのどの値に応じる場合でも、 次のような ソフト 折り返し機会を抑制してはなりません:

word-break の効果は、 内在的 サイズを計算するときに考慮されます。

従来の内容との互換性のため、 word-break プロパティは、 非推奨の break-word キーワードもサポートします。 指定された場合、これは、 word-break: normal および overflow-wrap: anywhere と同じ効果を持ちます。 実際の overflow-wrap プロパティの値には関係ありません。

6.1.1. 解析的単語分割

6.1.1.1. 語彙的単語分割

東南アジア言語に対して期待される normal の挙動を提供するため、 組版上の文字単位のうち、 [UAX14] における行分割クラス SA を持つものは、 クラス AL を持つものとして扱われなければなりません。 ただし、ユーザーエージェントはさらに、 そのような文字の連なりの内容を解析して 単語 境界を検出し、 各境界を ソフト折り返し機会として扱わなければなりません。

さまざまな言語が、 クラス SA を持つ文字を使用する文字体系で書かれる可能性があるため、 内容言語が既知である場合、 ユーザーエージェントはこの情報を使用して 解析を調整すべきです。

6.1.1.2. 正書法的分割

正書法上の音節に基づく行分割を使用する文字体系 (バリ文字など)について、 UA は、ソフト折り返し機会を挿入すべき正しい位置を見つけるために、 内容を解析しなければなりません。

注: 執筆時点では、 Unicode はこの解析をどのように行うかを定義しておらず、 これらの書記体系のすべての文字を行分割クラス AL として扱っています。 しかし、 その問題を解決するための 提案が行われています。 これは最終版ではありませんが、 参照すると有益な場合があります。 [L2-22-080R]

6.1.1.3. フォールバック分割

予期しないオーバーフローを避けるため、 ユーザーエージェントが、 それを必要とする任意の 内容言語に対して、 行分割のために必要な語彙的または正書法的解析を実行できない場合—​たとえば、 クラス SA の文字で書かれた言語用の辞書がない場合—​、 その書記体系内の 組版上の字母単位の組の間に ソフト折り返し機会 があるものと仮定しなければなりません。

注: この規定は、 UA が特定のテキストランで単語境界を見つけられないというだけでは発動しません。 そのテキストランは単一の分割不能な単語である可能性も十分あります。 これは、たとえば、テキストランがクメール文字(U+1780 から U+17FF)で構成されており、 ユーザーエージェントがクメール語の単語境界の決定方法を知らない場合に適用されます。

6.1.2. フレーズベースの行分割に対するユーザー設定の表現

ユーザーエージェントは、ユーザー設定に応じて、 auto-phrase で説明される言語固有の内容解析を有効にしてもよいです。 この挙動を持つユーザーエージェントは、 word-break宣言値を、ユーザー出自において auto-phrase に設定することによって、 これを行わなければなりません。

注: これにより、著者は getComputedStyle() を呼び出すことで、この機能が有効かどうかを検出できます。 また、適切な場合には 著者出自でこれを上書きできます。

6.2. 行分割の厳密さ: line-break プロパティ

名前: line-break
値: auto | loose | normal | strict | anywhere
初期値: auto
適用対象: テキスト
継承: する
パーセンテージ: 該当なし
算出値: 指定されたキーワード
正規順序: 該当なし
アニメーション型: 離散

このプロパティは、要素内に適用される行分割規則の厳密さを指定します: 特に、折り返しが 句読点および記号とどのように相互作用するかです。 値は次の意味を持ちます:

auto
UA は使用する行分割制約の集合を決定し、 行の長さに基づいて制約を変化させてもよいです。 例: 短い行にはより制約の少ない行分割規則の集合を使用する。
loose
最も制約の少ない行分割規則の集合を使用してテキストを分割します。 通常、新聞などの短い行に使用されます。
normal
最も一般的な行分割規則の集合を使用してテキストを分割します。
strict
最も厳格な行分割規則の集合を使用してテキストを分割します。
anywhere
任意の 組版上の文字 単位の周囲、 任意の句読点文字または 保持された 空白の周囲、 あるいは単語の途中に ソフト折り返し機会があります。 行分割に対するいかなる禁止も無視されます。 これには GLWJ、または ZWJ の行分割クラスを持つ文字によって 導入されるものや、 word-break プロパティによって義務付けられるものも含まれます。 [UAX14] 異なる折り返し機会には優先順位を付けてはなりません。 ハイフネーションは適用されません。

注: この値は、 端末で一般的に見られる行分割規則を引き起こします。

注: anywhere は、 white-spacebreak-spaces に設定されている場合にのみ、 行末の 保持された空白 を次の行へ折り返すことを許可します。 その他の場合は次のためです:

保持された空白に対して効果を持つ場合、 white-space: break-spaces では、 連続の最初のスペースの前で分割することを許可します。 これは break-spaces 単独では行わないことです。

CSS は、テキスト折り返しの規則における 4 つの厳密さの水準を区別します。 loosenormal、 および strict のそれぞれで有効となる正確な規則の集合は UA に委ねられており、 言語の慣習に従うべきです。 ただし、これら 3 つのキーワードについて、 この仕様は次を要求します:

注: 上に列挙された要件は、 CJK テキストにおいてのみ区別を生みます。 上記の規則のみに一致し、追加の規則を持たない実装では、 line-break は、書記体系が 中国語または 日本語として タグ付けされていない限り、CJK コードポイントにのみ影響します。 将来のレベルでは、要件が明らかになるにつれて、 他の書記体系および言語に対する追加の具体的な規則が追加される可能性があります。

UA は strict/normal/loose モード間に追加の区別を加えることができるため、 これらの値は他の書記体系でも違いを示す可能性があります。 たとえば、十分に高度なタイ語処理能力を持つ UA は、 タイ語の行分割における異なる厳密さの水準を これらのキーワードに対応付けることを選択できるでしょう。 たとえば strict モードでは複合語内の分割を禁止し (例: ตัวอย่างการเขียนภาษาไทย を ตัวอย่าง·การเขียน·ภาษาไทย として分割)、 一方 loose ではより多くの分割を許可する (ตัวอย่าง·การ·เขียน·ภาษา·ไทย)などです。

注: CSSWG は、仕様の将来版において、 高度な出版要件を満たすために、 行分割に対するより細かな制御が必要になる可能性があることを認識しています。

注: ユーザーエージェントは、行分割実装の出発点として [UAX14] を参照できますが、 既存実装との最大限の相互運用性のためには、 次の逸脱が望ましい場合があります:

6.3. ハイフネーション: 単語内の形態的分割

6.3.1. ハイフネーション制御: hyphens プロパティ

ハイフネーション とは、段落のレイアウトを改善するために、 通常は分割が許可されない場所で 単語を制御して分割することです。 通常は音節境界または形態素境界で単語を分割し、 多くの場合その分割を視覚的に示します (通常はハイフン、U+2010 を挿入します)。 場合によっては、ハイフネーションが単語の綴りを変更することもあります。 いずれにせよ、ハイフネーションはレンダリング効果にすぎません: これは基礎となる文書内容、 またはテキスト選択や検索に影響してはなりません。

ハイフネーションの慣行は言語によって異なり、 行分割の前にハイフンを挿入するだけでなく、 分割後にハイフンを挿入したり(またはその両方)、 U+2010 とは異なる文字を挿入したり、 単語の綴りを変更したりすることがあります。
言語 分割なし
英語 Unbroken Un‐ broken
オランダ語 cafeetje café‐ tje
ハンガリー語 Összeg Ösz‐ szeg
中国語(官話) tú’àn tú‐ àn
àizēng‐fēnmíng àizēng‐ ‐fēnmíng
ウイグル語  [isolated DAL + isolated ALEF + initial MEEM +
					          medial YEH  + final DAL +
					          isolated ALEF MAKSURA] [isolated DAL + isolated ALEF + initial MEEM +
					          final YEH + hyphen ] [ isolated DAL + isolated ALEF MAKSURA]
クリー語 [ᑲᓯᑕᓂᐘᓂᓂᐠ]
					          (CANADIAN SYLLABICS KA +
					          CANADIAN SYLLABICS SI +
					          CANADIAN SYLLABICS TA +
					          CANADIAN SYLLABICS NI +
					          CANADIAN SYLLABICS WEST-CREE WA +
					          CANADIAN SYLLABICS NI +
					          CANADIAN SYLLABICS NI +
					          CANADIAN SYLLABICS FINAL GRAVE) [ᑲᓯᑕᓂ᐀]
					          (CANADIAN SYLLABICS KA +
					          CANADIAN SYLLABICS SI +
					          CANADIAN SYLLABICS TA +
					          CANADIAN SYLLABICS NI +
					          CANADIAN SYLLABICS HYPHEN) [ᐘᓂᓂᐠ]
					          (CANADIAN SYLLABICS WEST-CREE WA +
					          CANADIAN SYLLABICS NI +
					          CANADIAN SYLLABICS NI +
					          CANADIAN SYLLABICS FINAL GRAVE)

ハイフネーションは、 有効な ハイフネーション機会で行が分割されるときに発生します。 これは、ハイフネーションが許可される単語内に存在する ソフト折り返し機会の一種です。 CSS では、ハイフネーション機会hyphens プロパティで制御されます。 CSS Text Level 3 は ハイフネーションの正確な規則を定義しませんが、 UA には、分割点の選択を最適化し、 言語に適したハイフネーション点を選択することが強く推奨されます。

注: U+002D - HYPHEN-MINUS 文字または U+2010 ‐ HYPHEN 文字によって導入される ソフト折り返し機会ハイフネーション機会ではありません。 折り返し時に分割の視覚的表示が作成されるわけではないためです: これらの文字は、その位置で行が折り返されるかどうかにかかわらず可視です。

ハイフネーション機会は、 min-content 内在サイズを計算するときに考慮されます

注: これにより、表はその包含ブロックを オーバーフローする代わりに内容をハイフネーションできるようになります。 これはドイツ語のような長い単語を持つ言語で特に重要です。

名前: hyphens
値: none | manual | auto
初期値: manual
適用対象: テキスト
継承: する
パーセンテージ: 該当なし
算出値: 指定されたキーワード
正規順序: 該当なし
アニメーション型: 離散

このプロパティは、ハイフネーションが、 テキスト行内で追加の ソフト折り返し 機会を作成できるかどうかを制御します。 値は次の意味を持ちます:

none
単語内の文字が ハイフネーション機会を明示的に定義している場合でも、 単語はハイフネーションされません。

注: これは、 U+002D - HYPHEN-MINUS または U+2010 ‐ HYPHEN などの常に可視の文字によって導入される、 既存の ソフト 折り返し機会を抑制しません。

manual
単語は、その内部に ハイフネーション機会を明示的に示す文字がある場所でのみ ハイフネーションされます。 UA は、同じ位置での自動ハイフネーションの場合と同様に、 適切な言語固有のハイフネーション文字を使用しなければならず、 適切な綴りの変更があれば適用すべきです。
Unicode では、U+00AD は条件付きの "soft hyphen" であり、 U+2010 は無条件のハイフンです。 Unicode Standard Annex #14 は、 Unicode 行分割における soft hyphen の役割を説明しています。 [UAX14] HTML では、 &shy; は soft hyphen 文字を表し、 これはハイフネーション機会を示します。
ex&shy;ample
auto
条件付きハイフンによって明示的に示されるものに加えて、 言語に適したハイフネーション資源によって自動的に決定される ハイフネーション機会で 単語を分割してもよいです。 単語が条件付きハイフン (&shy; または U+00AD SOFT HYPHEN)を含む場合、 単語内の他の場所にある自動 ハイフネーション機会は、 条件付きハイフンを優先して無視されなければなりません。 ただし、そのような機会で分割した後でも、 その単語の一部がまだ 1 行に収まらないほど長い場合は、 自動ハイフネーション機会を使用してもよいです。

正しい自動ハイフネーションには、 分割されるテキストの言語に適したハイフネーション資源が必要です。 したがって UA は、内容 言語が既知であり、 かつ適切なハイフネーション資源を持つテキストに対してのみ、 自動ハイフネーションを行わなければなりません。

正しい自動ハイフネーションを得るために、 著者は内容の言語を正しくタグ付けすべきです (たとえば HTML の lang 属性 または XML の xml:lang 属性を使用します)。

UA は、自動ハイフネーションから特定の単語を除外するために、 言語に合わせたヒューリスティックを使用してもよいです。 たとえば、UA は特定の大文字化および句読点パターンに一致する単語を除外することで、 固有名詞でのハイフネーションを避けようとするかもしれません。 そのようなヒューリスティックはこの仕様では定義されません。 (そのようなヒューリスティックは言語ごとに異なる必要がある点に注意してください: たとえば英語とドイツ語では大文字化の慣習が大きく異なります。)

hyphens プロパティの目的では、 何が「単語」を構成するかは UA 依存です。 ただし、単語境界を決定するときには、 インライン要素境界および 通常フロー外要素を 無視しなければなりません。

条件付きハイフン文字 (U+00AD SOFT HYPHEN など)によって作成された ハイフネーション機会での ハイフネーションにより表示される任意のグリフは、 その文字によって表され、 その文字に適用されるプロパティに従ってスタイル付けされます。

注: アラビア文字などのシェーピングを伴う文字体系が、 ハイフネーションによって単語内で分割されることを許可されている場合でも、 文字は単語が分割されていないかのようにシェーピングされます。

たとえば、ウイグル語の単語 “داميدى” が ハイフネーションされた場合、 次のように表示されます [isolated DAL + isolated ALEF + initial MEEM +
		          medial YEH + hyphen + line-break + final DAL +
		          isolated ALEF MAKSURA] 次のようにはなりません [isolated DAL + isolated ALEF + initial MEEM +
		          final YEH + hyphen + line-break + isolated DAL +
		          isolated ALEF MAKSURA]

6.3.2. ハイフン: hyphenate-character プロパティ

名前: hyphenate-character
値: auto | <string>
初期値: auto
適用対象: テキスト
継承: する
パーセンテージ: 該当なし
算出値: 指定されたキーワード
正規順序: 文法に従う
アニメーション型: 離散

このプロパティは、ハイフネーションされた単語の部分間に表示される 文字列を指定します。 値は次の意味を持ちます:

auto
内容 言語の組版上の慣習に基づいて、 ユーザーエージェントが適切な文字列を見つけるべきであることを指定します。 それはハイフネーション辞書と同じソースから得られる可能性があります。
<string>
ハイフネーション時のハイフネーション分割位置に現れる文字列を指定します。 (この文字列の位置は影響されません: UA は、内容言語の組版上の慣習に従って 文字列を挿入しなければならず、 既定ではハイフネーション分割の直前に挿入します。) UA は、使用値を 限られた数の 組版上の文字単位に切り詰めてもよいです。 ただし、組版上の 文字単位の一部だけを切り詰めてはなりません。

注: 空文字列 "" を指定することは有効であり、 UA は可視のハイフネーション文字を挿入せずに ハイフネーション機会で分割します。

ハイフン文字(U+2010)は、単語が分割されたことを示すために 最も一般的に使用されます。 しかし、hyphenate-character は、 必要に応じて異なる種類のハイフンを指定するために使用できます。
[lang]:lang(ojs) { hyphenate-character: "᐀" /* CANADIAN SYLLABICS HYPHEN (U+1400) */ }

注: 自動ハイフネーションによって発生するハイフンと、 soft hyphen によって発生するハイフンのどちらも、 hyphenate-character に従って描画されます。

6.3.3. ハイフネーションのサイズ制限: hyphenate-limit-zone プロパティ

名前: hyphenate-limit-zone
値: <length-percentage>
初期値: 0
適用対象: ブロックコンテナー
継承: する
パーセンテージ: ラインボックスの長さを参照
算出値: 算出された <length-percentage>
正規順序: 文法に従う
アニメーション型: 算出値型による

hyphenate-limit-zone は良い名前でしょうか? コメント/提案は?

このプロパティは、ハイフネーションが発生して 次の行から単語の一部を現在の行へ引き上げる前に、 ラインボックス内に残されてもよい未充填空間 (両端揃え前)の最大量を指定します。

6.3.4. ハイフネーションの文字数制限: hyphenate-limit-chars プロパティ

名前: hyphenate-limit-chars
値: [ auto | <integer> ]{1,3}
初期値: auto
適用対象: テキスト
継承: する
パーセンテージ: 該当なし
算出値: 3 つの値。それぞれ auto キーワードまたは整数
正規順序: 文法に従う
アニメーション型: 算出値型による

このプロパティは、ハイフネーションされる単語内の 最小文字数を指定します。 単語内 / ハイフンの前 / ハイフンの後に必要な最小文字数を その単語が満たさない場合、 その単語はハイフネーションされてはなりません。 非間隔結合記号(Unicode 一般カテゴリ Mn) および単語内句読点(Unicode 一般カテゴリ P*)は、 最小数には数えません。

3 つの値が指定された場合、 1 番目の値は単語内の総文字数に必要な最小値、 2 番目の値はハイフネーション点より前の文字数の最小値、 3 番目の値はハイフネーション点より後の文字数の最小値です。 3 番目の値が欠落している場合、2 番目と同じです。 2 番目の値が欠落している場合、それは auto です。 auto 値は、 UA が現在のレイアウトに適応する値を選択することを意味します。

注: UA がより良い値を計算できない限り、 auto は 前後については 2、単語全体については 5 を意味することが推奨されます。

次の例では、 ハイフネーションされる単語の最小サイズは UA に委ねられます (これは言語、行の長さ、またはその他の要因によって変わる可能性があることを意味します)が、 ハイフネーション点の前後の最小文字数は 3 に設定されています。
p { hyphenate-limit-chars: auto 3; }

6.3.5. ハイフネーションの行数制限: hyphenate-limit-lines および hyphenate-limit-last プロパティ

名前: hyphenate-limit-lines
値: no-limit | <integer>
初期値: no-limit
適用対象: ブロックコンテナー
継承: する
パーセンテージ: 該当なし
算出値: 指定されたキーワードまたは整数
正規順序: 文法に従う
アニメーション型: 算出値型による

このプロパティは、要素内で連続して ハイフネーションされる行の最大数を示します。 no-limit 値は、制限がないことを意味します。

場合によっては、ユーザーエージェントが指定された値を尊重できないことがあります。 (overflow-wrap を参照。) そのような緊急分割によって導入されたハイフネーションが 近くのハイフネーション点に影響するかどうかは定義されません。

名前: hyphenate-limit-last
値: none | always | column | page | spread
初期値: none
適用対象: ブロックコンテナー
継承: する
パーセンテージ: 該当なし
算出値: 指定されたキーワード
正規順序: 文法に従う
アニメーション型: 離散

このプロパティは、要素、段、ページ、および見開きの末尾における ハイフネーション挙動を示します。 見開きとは、読者に同時に見える 2 ページの集合です。 値は次の意味を持ちます:

none
制限は課されません。
always
要素の最後の完全な行、 または要素内の任意の段、ページ、見開き分割の前にある最後の行は、 ハイフネーションされるべきではありません。
column
要素内の任意の段、ページ、見開き分割の前にある最後の行は、 ハイフネーションされるべきではありません。
page
要素内のページまたは見開き分割の前にある最後の行は、 ハイフネーションされるべきではありません。
spread
要素内の任意の見開き分割の前にある最後の行は、 ハイフネーションされるべきではありません。
p { hyphenate-limit-last: always }
div.chapter {	hyphenate-limit-last: spread }

hyphenate-limit-last: none が設定されている場合、 段落は次のように整形されることがあります:

This is just a
simple example
to show Antarc-
tica.

'hyphenate-limit-last: always' では次のようになります:

This is just a
simple example
to        show
Antarctica.

6.4. オーバーフロー折り返し: overflow-wrapword-wrap)プロパティ

名前: overflow-wrap
値: normal | break-word | anywhere
初期値: normal
適用対象: テキスト
継承: する
パーセンテージ: 該当なし
算出値: 指定されたキーワード
正規順序: 該当なし
アニメーション型: 離散

このプロパティは、通常なら分割不能な文字列が長すぎて ラインボックス内に収まらない場合に、 オーバーフローを防ぐため、 UA が行内の通常は許可されない点で分割してよいかどうかを指定します。 これは white-space折り返しを許可する場合にのみ効果があります。 可能な値:

normal
行は、許可された分割点でのみ分割できます。 ただし、 word-break: keep-all によって導入された制約は、 その行に他に受け入れ可能な分割点がない場合、 word-break: normal と一致するよう 緩和されてもよいです。

また、word-break: auto-phrase によって導入された制約も、 その行に他に受け入れ可能な分割点がない場合には緩和されます:

  • 特定のフレーズ内の ソフト折り返し機会を抑制すると、 そのフレーズを他に何もない行に置いてもオーバーフローする場合、 ユーザーエージェントは、そのフレーズ内では normal と同じ ソフト折り返し機会に フォールバックしなければなりません。
  • それでもオーバーフローを防ぐのに十分でない場合、 オーバーフローする各行内で ハイフネーション機会の抑制も 放棄されなければなりません。
  • 中間的な措置として、 ユーザーエージェントは複数レベルのフレーズを検出し、 長いものがオーバーフローにつながる場合には より短いもの(場合によっては個々の単語まで)を選択してもよいです。

word-break: keep-all および word-break: auto-phrase によって導入された制約を緩和して得られた ソフト 折り返し機会は、 min-content 内在サイズを計算するときには 考慮されません

anywhere
通常なら分割不能な 文字の連続は、 その行に他に受け入れ可能な分割点がない場合、 任意の点で分割されてもよいです。 シェーピング文字は、単語が分割されていないかのように引き続きシェーピングされ、 書記素クラスタは 1 つの単位としてまとまっていなければなりません。 分割点にハイフネーション文字は挿入されません。 anywhere によって導入された ソフト折り返し 機会は、 min-content 内在サイズを計算するときに 考慮されます

word-break: auto-phrase の場合、 これらの追加の ソフト折り返し機会は、 overflow-wrap: normal で説明したように word-break: auto-phrase によって導入された制約を 緩和してもオーバーフローを防ぐのに不十分な場合にのみ導入されます。

break-word
anywhere と同様ですが、 break-word によって導入された ソフト折り返し 機会は、 min-content 内在サイズを計算するときに 考慮されません

overflow-wrapnone 値を追加して、 overflow-wrap: normal によって許可される keep-all および auto-phrase の制約緩和を opt out できるようにする必要がありますか?

従来の理由により、UA は word-wrapoverflow-wrap プロパティの 旧来名エイリアスとして扱わなければなりません。

6.5. 行分割の詳細

行分割を決定するとき:

7. 配置と両端揃え

配置と両端揃えは、 インライン内容がラインボックス内でどのように分配されるかを制御します。

7.1. テキスト配置: text-align 一括指定

名前: text-align
値: start | end | left | right | center | <string> | justify | match-parent | justify-all
初期値: start
適用対象: ブロックコンテナー
継承: する
パーセンテージ: 個々のプロパティを参照
算出値: 個々のプロパティを参照
アニメーション型: 離散
正規順序: 該当なし

この 一括指定プロパティは、 text-align-all および text-align-last プロパティを設定し、 内容がラインボックスを完全には満たさない場合に、 ブロックのインラインレベル内容が インライン軸に沿ってどのように配置されるかを記述します。 justify-all または match-parent 以外の値は、 text-align-all に割り当てられ、 text-align-lastauto にリセットします。

値は次の意味を持ちます:

start
インラインレベル内容は、ラインボックスの 始端側に配置されます。
end
インラインレベル内容は、ラインボックスの 終端側に配置されます。
left
インラインレベル内容は、ラインボックスの line-left 端に配置されます。 (縦書きモードでは、 writing-mode に応じて、 これは物理的な上または下のいずれかになり得ます。) [CSS-WRITING-MODES-4]
right
インラインレベル内容は、ラインボックスの line-right 端に配置されます。 (縦書きモードでは、 writing-mode に応じて、 これは物理的な上または下のいずれかになり得ます。) [CSS-WRITING-MODES-4]
center
インラインレベル内容はラインボックス内で中央揃えされます。
<string>
文字列は単一の文字でなければなりません。 そうでなければ宣言は無効であり、 無視されなければなりません。 表セルに適用された場合、そのセルの内容がその周囲で揃えられる 配置 文字を指定します。 詳細、およびこの値がキーワードとどのように組み合わされるかについては、 以下を参照してください。
justify
テキストは、ラインボックスを正確に満たすために、 text-justify プロパティで 指定された方法に従って両端揃えされます。 text-align-last によって 別途指定されない限り、 強制改行の前の最後の行は start 揃えです。
justify-all
text-align-alltext-align-last の両方を justify に設定し、 最後の行も強制的に両端揃えにします。
match-parent
この値は inherit (親の算出値へ算出される)と同じように振る舞いますが、 start または end継承値は、 親の direction 値に照らして解釈され、 left または right のいずれかの 算出値になります。 ルート要素に指定された場合は、 start に算出されます。

text-align 一括指定に指定された場合、 text-align-alltext-align-last の両方を match-parent に設定します。

テキストのブロックは、 ラインボックスの積み重ねです。 このプロパティは、各ラインボックス内のインラインレベルボックスが、 ラインボックスの始端側および終端側に対してどのように揃うかを指定します。 配置は ビューポート または包含ブロックに対するものではありません。

justify の場合、 UA は、テキストを調整することにより、 任意のインラインボックスを伸縮してもよいです。 (text-justify を参照。) 要素の 空白折り畳み可能でない場合、 UA は両端揃えの目的でそのテキストを調整する必要はなく、 代わりにそのテキストには 両端揃え機会がないものとして扱ってもよいです。 UA がテキストを調整することを選択した場合、 タブ位置空白処理規則によって要求されるとおりに 揃い続けることを保証しなければなりません。

(両端揃えがある場合はその後) ラインボックスのインライン内容が長すぎて収まらない場合、 その内容は 始端揃えされます: 収まらない内容は、 ラインボックスの 終端側からオーバーフローします。

ラインボックスの 始端および 終端を どのように決定するかの詳細については、 § 9.3 双方向性とラインボックスを参照してください。

7.2. 表の列における文字ベースの配置

列内の複数のセルに配置文字が指定されている場合、 その列内の各セルの配置文字は、 単一の列に平行な軸に沿って中央揃えされ、 列内の残りのテキストはそれに応じて移動されます。 (各セルで文字列が同じである必要はないことに注意してください。 通常は同じですが。)

これは、揃えられるべきなのは配置文字の中心である、 という意図なのでしょうか? そう述べているかは明確ではありませんが、 異なる配置文字の出現が異なるフォントにある場合に何が起こるかを 説明するためには、 それ(または異なる挙動)を指定する必要があります。 (さらに、それが意図された挙動なのでしょうか? おそらく考慮すべき最も重要なユースケースは太字と非太字のテキストであり、 幅はわずかにしか異なりません。) [フィードバック] [minutes face-to-face 2016-02-02 10:00 AM]

次のスタイルシート:

TD { text-align: "." center }

は、次の HTML 表内のドル金額の列を:

<TABLE>
<COL width="40">
<TR> <TH>Long distance calls
<TR> <TD> $1.30
<TR> <TD> $2.50
<TR> <TD> $10.80
<TR> <TD> $111.01
<TR> <TD> $85.
<TR> <TD> N/A
<TR> <TD> $.05
<TR> <TD> $.06
</TABLE>

小数点に沿って揃えます。表は次のように描画されるかもしれません:

+---------------------+
| Long distance calls |
+---------------------+
|         $1.30       |
|         $2.50       |
|        $10.80       |
|       $111.01       |
|        $85.         |
|        N/A          |
|          $.05       |
|          $.06       |
+---------------------+

<string> 値と組み合わせてキーワード値を指定してもよいです。 指定されていない場合、既定は right です。 この値は次の場合に使用されます:

注: 文字ベースの配置では既定で右揃えが使用されます。 これは、ほとんどすべての数体系が、 右から左の書記体系であっても左から右であり、 文字ベースの配置の主なユースケースが数値配置であるためです。

配置文字がテキスト内に複数回現れる場合、 最初の出現が配置に使用されます。 配置文字がセル内にまったく現れない場合、 その文字列は、配置文字がその内容の末尾に挿入されたかのように揃えられます。

これは、配置文字を検索する対象のテキストを指定する必要があります。 それは包含ブロックがセルである in-flow テキストだけでしょうか? それとも、セルによって確立されたブロック整形コンテキスト内の 任意の in-flow 子孫内のテキストも考慮されるのでしょうか? その場合、それはその text-align プロパティが セルのものと一貫している限りでのみ考慮されるのでしょうか? (配置文字について一貫しているのか、完全に一貫しているのか?)

配置文字がセル内容の末尾に挿入されたかのように揃えるこの挙動は、 文字中心の配置と組み合わさると、 <string> テキスト配置を持つ行が単独で 1 行にある場合に、 行の終端側に隙間を生じます。 これは、列のどの行にも配置文字がない場合、 または、より重要な場合として、 一部の行には配置文字があるが、 列が max-content 幅でレイアウトされていない場合に発生します。 これはおそらく望ましくありません。

配置文字が内容の末尾に挿入される場合、 どのフォントが使用されるのでしょうか? (特に、配置文字が子孫ブロック内にある可能性がある場合、 それはブロックのフォントでしょうか、それとも表セルのフォントでしょうか? または、挿入がインライン内の強制分割位置で行われる場合、 インラインのフォントを使用するのでしょうか、 それともブロックまたはセルのフォントを使用するのでしょうか?)

文字ベースの配置は、表セル幅の計算前に発生します。 これにより、自動幅計算は配置に十分な空間を残すことができます。 列にまたがるセルが幅計算の前または後に配置へ参加するかどうかは未定義です。 セル内容に対する幅制約により 列全体で完全な配置が妨げられる場合、 結果として得られる配置は未定義です。

これは、文字配置が (表列および表列内に入り得るすべての内容の) min-content および max-content 内在幅にどのように影響するかについて、 形式的な定義を持つべきです。 Max-content 内在幅は、 (配置文字の中心が揃えられると仮定すると) 3 つの数値に分割する必要があります: 配置文字を持たない幅、 配置文字の中心のインライン始端側の幅、 配置文字の中心のインライン終端側の幅です。 これは max-content 幅について、強制分割間のすべてのテキスト区間に基づいて動作します。 Min-content 幅については、 強制分割間のテキスト区間でその内部に任意分割を含むものは、 配置文字なしの幅にのみ寄与することは明らかです。 しかし、すべての min-content 幅がこのように動作すべきか、 それとも強制分割間の区間で任意分割を持たないもの (おそらく実際に配置文字を含むものだけ)が、 代わりに配置文字の始端側および終端側の min-content 幅に寄与すべきかは、 あまり明確ではありません。 この選択は、表の min-content サイズ決定が最も狭い妥当なサイズを意味することと、 より多くの場合に配置文字を尊重することとの間のトレードオフです。 別の選択肢として、任意分割の行分割が許可されるかどうかを、 どちらの挙動を使用するかの制御として用いることも考えられます。

<string> 値を持つ text-align の列またがりセルの 内在幅寄与を形式的に定義することは、 列またがりでないセルの内在幅寄与について行われた判断の 複雑な(ただし単純な)拡張であり、 これも形式的に定義されるべきです。 寄与は、配置に使用される始端側または終端側の列の 分割された内在幅に対して行われ、 他のまたがる列の配置文字なし内在幅にも行われることになります。

7.3. 既定のテキスト配置: text-align-all プロパティ

名前: text-align-all
値: start | end | left | right | center | <string> | justify | match-parent
初期値: start
適用対象: ブロックコンテナー
継承: する
パーセンテージ: 該当なし
算出値: match-parent を除き、指定されたキーワード。 match-parent は上で定義されたとおりに算出される
正規順序: 該当なし
アニメーション型: 離散

text-align 一括指定プロパティのこの個別指定は、 text-align-last の非 auto 値によって上書きされる最後の行を除き、 ブロックコンテナー内のインライン内容のすべての行の インライン配置を指定します。 値の完全な説明については text-align を参照してください。

著者は、このプロパティではなく text-align 一括指定を使用すべきです。

7.4. 最終行の配置: text-align-last プロパティ

名前: text-align-last
値: auto | start | end | left | right | center | justify | match-parent
初期値: auto
適用対象: ブロックコンテナー
継承: する
パーセンテージ: 該当なし
算出値: match-parent を除き、指定されたキーワード。 match-parent は上で定義されたとおりに算出される
正規順序: 該当なし
アニメーション型: 離散

このプロパティは、ブロックの最後の行、または 強制 改行の直前にある行が どのように配置されるかを記述します。

auto が指定された場合、 影響を受ける行の内容は text-align-all に従って配置されます。 ただし text-align-alljustify に設定されている場合は、 start 揃えになります。 その他のすべての値は、text-align について説明したとおりに解釈されます。

7.5. 両端揃え方法: text-justify プロパティ

名前: text-justify
値: [ auto | none | inter-word | inter-character | ruby ] || no-compress
初期値: auto
適用対象: テキスト
継承: する
パーセンテージ: 該当なし
算出値: 指定されたキーワード(旧来値 distribute を除く)
正規順序: 該当なし
アニメーション型: 離散

このプロパティは、行の配置が justify に設定されたときに使用される両端揃え方法を選択します (text-align を参照)。 このプロパティはテキストに適用されますが、 ブロックコンテナーから、そのインラインレベル内容を含む ルートインラインボックスへ継承されます。 これは次の値を取ります:

auto
UA は、性能と十分な表示品質とのバランスに基づいて、 従うべき両端揃えアルゴリズムを決定します。 両端揃え規則は 書記体系 および 言語 によって異なるため、 UA は可能な場合、テキストに適した両端揃えアルゴリズムを使用すべきです。
たとえば、 UA は既定で、すべての書記体系に対する単純で汎用的な妥協案である 両端揃え方法を使用できます—​たとえば主に 単語区切り および CJK の 組版上の字母単位の間を拡張し、 さらに副次的に 東南アジアの 組版上の字母単位の間を 拡張する、といった方法です。 その後、段落の 内容言語が既知である場合には、 より言語に合わせた両端揃え挙動を選択できます。 たとえば、日本語については Requirements for Japanese Text Layout [JLREQ] に従う、 アラビア語では筆記体的伸長を使用する、 ドイツ語では inter-word を使用する、 などです。

Two lines of calligraphic Arabic end together
				          due to a mix of compressed and swash forms.

筆記体的に両端揃えされたアラビア語テキストの例で、 Tasmeem によって描画されています。 英語と同様に、 アラビア語は単語間の間隔を調整することで両端揃えできますが、 ほとんどのスタイルでは、 字形そのものをカリグラフィ的に伸長または圧縮することによって 両端揃えすることもできます。 この例では、 上のテキストは伸長された(カシーダ)形とスワッシュ形の使用によって 行を満たすように拡張されており、 下の行は ت と م の間の文字に対して 積み重ねられた組み合わせを使用することでわずかに圧縮されています。 伝統的なカリグラフィ技法を用いることで、 組版者は流れと濃淡を保ちながら行を両端揃えでき、 非常に高品質な両端揃え効果を提供できます。 しかしこれは本質的に、非常に文字体系固有の効果です。
Extra space is partly to spaces and partly among CJK and Thai letters.
text-justify: auto を持つ混在文字体系テキスト: この解釈では、汎用的な妥協型の両端揃え方法を使用し、 スペースに加えて CJK および東南アジア文字の間も拡張します。 これは、単語区切りおよび/または CJK 文字を持つ行には inter-word + inter-ideograph 間隔を実質的に使用し、 それらを持たない行、またはスペースが伸びすぎる行では inter-cluster 挙動へフォールバックします。
none
両端揃えは無効になります: テキスト内に 両端揃え機会はありません。
No extra space is inserted.
text-justify: none を持つ混在文字体系テキスト

注: この値は、ユーザースタイルシートで 可読性の改善またはアクセシビリティ目的に使用することを意図しています。

inter-word
両端揃えは 単語区切りでのみ間隔を調整します (実質的に、その行で使用される word-spacing を変化させます)。 この挙動は、英語や韓国語のように、 スペースを使って単語を区切る言語で典型的です。
Extra space is equally distributed mainly to spaces.
text-justify: inter-word を持つ混在文字体系テキスト
inter-character
両端揃えは、 隣接する 組版上の文字単位の各組の間の 間隔を調整します (実質的に、その行で使用される letter-spacing を変化させます)。 この値は、日本語などの東アジア体系で使用されることがあります。
Extra space is equally distributed
				          at points between spaces and letters of all writing systems.
text-justify: inter-character を持つ混在文字体系テキスト

従来の理由により、 UA は代替キーワード distribute もサポートしなければなりません。 これは inter-character に算出されなければならず、 したがってまったく同じ意味と挙動を持ちます。 UA はこれを 旧来値エイリアスとして扱ってもよいです。

ruby
両端揃えは auto と同様に間隔を調整します。 ただし次を除きます:

注: この値は ルビ注釈で使用することを意図しており、 妥当な既定配置を提供します。 [CSS-RUBY-1] を参照してください。

no-compress
両端揃えは、 text-spacing-trim または text-autospace によって制御される間隔を 圧縮してはなりません。 (この値が指定されていない場合、 両端揃え処理は、その間隔が行の先頭または末尾にある場合を除き、 そのような間隔を縮小してもよいです。)

注: 圧縮規則の例は、 日本語について [JLREQ] の 3.8 行の調整に示されています。

このキーワードは以前 text-spacing の一部でした。 ここに置かれた現在では、より具体的にするために改名が必要かもしれません。 たとえば U+0020 は圧縮できない、という含意を持つためです。 [Issue #7079]

最適な両端揃えは言語依存であるため、 著者は最良の結果を得るために内容へ正しく言語タグを付けるべきです。

注: このレベルの CSS における指針は、 完全な両端揃えアルゴリズムを記述していません。 これは完全なアルゴリズムが満たすべき 最小限の要件集合にすぎません。 要件集合を限定することで、UA は、 自身の必要性および品質・速度・複雑さの望ましいバランスを満たす 両端揃えアルゴリズムを選択する余地を持ちます。

7.5.1. テキストの拡張と圧縮

テキストを両端揃えする際、 ユーザーエージェントは、 行内容の端とそのラインボックスの端との間の残り空間を取り、 その空間を内容全体に分配して、 内容がラインボックスを正確に満たすようにします。 ユーザーエージェントは、代わりに負の空間を分配し、 通常の間隔条件では収まらないほど多くの内容を 行に置いてもよいです。

両端揃え機会とは、 両端揃えアルゴリズムがテキスト内の間隔を変更し得る点です。 両端揃え機会は、単一の 組版上の文字 単位単語区切りなど) によって提供されることもあれば、 2 つの 組版上の文字 単位の並置によって提供されることもあります。 ソフト折り返し機会の制御と同様に、 組版上の文字単位両端揃え機会を提供するかどうかは、 その親の text-justify 値によって制御されます。 同様に、 2 つの連続する 組版上の文字単位の間に 両端揃え機会が存在するかどうかは、 それらの最も近い共通祖先の text-justify 値によって 決定されます。

両端揃えによって分配される空間は、 letter-spacing または word-spacing プロパティによって定義される間隔に 加えて適用されます。 そのような追加空間が 単語区切り両端揃え機会へ分配される場合、 それは word-spacing と同じ規則の下で適用されます。 同様に、空間が 2 つの 組版上の文字単位の間の 両端揃え機会へ分配される場合、 letter-spacing と同じ規則の下で適用されるべきです。

両端揃えアルゴリズムは、両端揃え機会を 異なる優先度レベルに分割してもよいです。 あるレベル内のすべての 両端揃え機会は、 どの 組版上の文字単位がその機会を作成したかに関係なく、 同じ優先度で拡張または圧縮されます。 たとえば、 2 つの漢字の間の 両端揃え機会と 2 つのラテン文字の間のものが同じレベルにあると定義されている場合 (inter-character の両端揃えスタイルではそうです)、 それらは異なる 組版上の文字 単位に由来するからといって別扱いされません。 このレベルでは、 その他の要因 (フォントサイズ、letter-spacing、グリフ形状、行内位置など)が 行内の 両端揃え 機会への空間分配に影響し得るかどうか、またどのように影響するかは定義されません。

UA は、任意の方法でテキストの両端揃えを助けるために、 任意合字を有効化または解除してもよく、 代替グリフやグリフ圧縮などの他のフォント機能を使用してもよいです。 この挙動は、このレベルの CSS では制御されません。 ただし、 UA は必須合字を解除してはならず、 複雑な文字体系を正しくシェーピングするために必要な機能を その他の方法で無効にしてはなりません

行内に 両端揃え機会が存在し、 かつ テキスト配置がその行について完全な両端揃え (justify) を指定している場合、 その行は両端揃えされなければなりません。

7.5.2. 記号と句読点の扱い

両端揃え機会を決定する際、 Unicode の記号(S*)および句読点(P*)クラスに属する 組版上の文字単位は、 一般に同じ文字体系の 組版上の字母単位と同じように扱われます (または、その文字の script プロパティが Common である場合、 支配的な文字体系の 組版上の字母単位として扱われます)。

しかし、組版上の伝統により、 記号および句読点の両端揃えを制御する追加規則が存在することがあります。 したがって UA は、 記号および句読点を含む 両端揃え機会を扱うために、 特定の文字を再割り当てしたり、 追加の優先順位レベルを導入したりしてもよいです。

たとえば、伝統的に、連続する U+2014 — EM DASH、 U+2015 ― HORIZONTAL BAR、 U+2026 … HORIZONTAL ELLIPSIS、 または U+2025 ‥ TWO DOT LEADER 文字の間には 両端揃え機会がありません [JLREQ]。 したがって UA は、これらの文字を「never」優先度レベルに割り当てるかもしれません。 別の例として、特定の全角句読点文字 (U+301A 〚 LEFT WHITE SQUARE BRACKET など)は、 日本語では内部に 両端揃え機会を含むと見なされます。 そのため UA は、これらの文字を、 表意文字間の機会より高い優先度レベルに割り当てるかもしれません。

7.5.3. 拡張できないテキスト

行のインライン内容をラインボックスの全幅まで伸ばすことができない場合、 それらは text-align-last プロパティで 指定されたとおりに配置されなければなりません。 (text-align-lastjustify である場合、 それらは center と同様に配置されなければなりません。)

7.5.4. 筆記体文字体系

両端揃えは、アラビア文字などの 筆記体文字体系の 結合された 組版上の字母単位の間に 隙間を導入してはなりません。 可能であれば、 UA は、そのような 組版上の字母単位の連なり内の 両端揃え機会へ分配される空間を、 その連なりに対する何らかの筆記体的伸長へ変換してもよいです。 それ以外の場合、UA は、 筆記体文字体系における 任意の 2 つの 組版上の字母単位の間には (それらが結合するかどうかに関係なく) 両端揃え 機会が存在しないと仮定しなければなりません。

以下は、許容できない両端揃えの例です:
アラビア文字の各組の間に隙間を追加する
結合していないアラビア文字の各組の間に隙間を追加する

一部のフォント設計では、両端揃えのためにタトウィール文字を使用できます。 タトウィールに基づく両端揃えを行う UA は、 その使用規則を適切に扱わなければなりません。 タトウィール文字の正しい挿入は文脈に依存し、 関係する文字の組み合わせ、 単語内の位置、 および行内の単語の位置を含むことに注意してください。

7.5.5. auto 両端揃えの最小要件

auto 両端揃えについて、 この仕様は、すべての 両端揃え機会が何であるか、 それらがどのように優先順位付けされるか、 また複数レベルの 両端揃え 機会がいつ、どのように相互作用するかを定義しません。 しかし、次を要求します:

テキストの両端揃えに関する追加情報は、 “Approaches to Full Justification” にあります(またはそこへ提出できます)。 これは書記体系と言語別に索引化されており、 W3C Internationalization Working Group によって保守されています。 [JUSTIFY]

7.6. コンテナー内でのテキストブロックの配置: text-group-align プロパティ

名前: text-group-align
値: none | start | end | left | right | center
初期値: none
適用対象: ブロックコンテナー
継承: しない
パーセンテージ: 該当なし
算出値: 指定されたキーワード
正規順序: 文法に従う
アニメーション型: 離散

このプロパティは、テキスト配置を維持しながら、 ラインボックスの内容をグループとして配置します。

グループ配置は、 残り空間が最も短いラインボックスを見つけ、 その量の空間をラインボックスの片側または両側へパディングとして追加し、 その内容に利用できる空間の量を減らすことで行われます。 その後、テキスト配置が、 残りの空間内でその内容に適用されます。 同じ ブロック整形コンテキスト内の すべての子孫 in-flow ラインボックスは、 最短の残り空間を探す場合にも、 パディングを追加する場合にも考慮されます。 独立整形コンテキストを確立する子孫の内容は スキップされます。

このプロパティの変種は 継承され、 各ブロックコンテナーに個別に適用され、 そのブロックの直接の子であるラインボックスにのみ影響します。 これは有用性は低いですが、おそらく実装は容易です。

同じブロックコンテナーに 由来する float も 同じ量だけ何らかの方法で移動できれば、 より美しく揃うでしょう。 これは CJK レイアウトで特に有用です。 それが正確にどのように機能するか、 および祖先要素から侵入する float とどのように相互作用するかは、 読者への課題として残されています。

値は次の意味を持ちます:

none
テキスト配置は通常どおり行われます: グループ配置は行われません。
start
インラインレベル内容は、各ラインボックスの インライン終端側にパディングを加えることで、 インライン 始端側へ グループ配置されます。
end
インラインレベル内容は、各ラインボックスの インライン始端側にパディングを加えることで、 インライン終端 側へ グループ配置されます。
left
インラインレベル内容は、各ラインボックスの line-right 側にパディングを加えることで、 line-left 側へ グループ配置されます。
right
インラインレベル内容は、各ラインボックスの line-left 側にパディングを加えることで、 line-right 側へ グループ配置されます。
center
インラインレベル内容は、 各ラインボックスの両側にそれぞれ半分ずつ間隔をパディングすることで、 中央へ グループ配置されます。

8. 間隔

CSS は、通常のテキスト間隔を word-spacingletter-spacing、および line-padding プロパティによって制御できます。 これらはそれぞれ、 単語区切りの周囲、 組版上の文字単位の間、 または行の先頭/末尾に追加の空間を指定します。 また、text-spacing-trim プロパティによって、 間隔の文脈的制御も提供します。 これは CJK 句読点の文脈的な全角対半角設定を可能にします。 さらに text-autospace プロパティは、 文字体系の変化位置または句読点の周囲に 追加空間を自動挿入できるようにします。

8.1. 単語間隔: word-spacing プロパティ

名前: word-spacing
値: normal | <length-percentage>
初期値: normal
適用対象: テキスト
継承: する
パーセンテージ: 使用値の font-size に相対
算出値: 絶対長および/またはパーセンテージ
正規順序: 該当なし
アニメーション型: 算出値型による

このプロパティは、「単語」間の追加間隔を指定します。 値は次のように解釈されます:

normal
追加間隔は適用されません。 0 に算出されます。
<length-percentage>
フォントによって定義される本来の単語間隔に 加えて追加間隔を指定します。

注: パーセンテージはそのまま継承され、 現在の要素の使用値の font-size に対して解決されます (したがって、それらが適用されるテキストのサイズに相対するサイズを表します)。 これは、継承元の要素の算出された font-size に対して 絶対長として解決される em 単位とは異なります。

追加間隔は、 空白処理規則が適用された後に テキスト内に残る各 単語区切りに適用され、 組版上の伝統によって別途指示されない限り、 その文字の両側に半分ずつ適用されるべきです。 値は負でもよいですが、実装依存の制限がある場合があります。

単語区切り文字とは、 主な目的および一般的な用法が単語を区切ることである 組版上の文字単位です。 Unicode では、これには (網羅的に定義されるわけではありませんが) スペース(U+0020)、 ノーブレークスペース(U+00A0)、 エチオピア語単語スペース(U+1361)、 エーゲ語単語区切り(U+10100,U+10101)、 ウガリット語単語分割記号(U+1039F)、 およびフェニキア語単語区切り(U+1091F)が含まれます。 [UNICODE]

注: 一般的な句読点も、 固定幅スペース(U+3000 および U+2000 から U+200A など)も、 単語区切り 文字とは見なされません。 それらは単語を区切ることが頻繁にあっても、 主な目的が単語を区切ることではないためです。

単語区切り 文字が存在しない場合、 または単語を区切る文字の前進幅が 0 である場合 (U+200B ZERO WIDTH SPACE など)、 ユーザーエージェントは単語間に追加間隔を作成してはなりません。

8.2. トラッキング: letter-spacing プロパティ

名前: letter-spacing
値: normal | <length-percentage>
初期値: normal
適用対象: インラインボックスおよびテキスト
継承: する
パーセンテージ: 使用値の font-size に相対
算出値: 絶対長および/またはパーセンテージ
正規順序: 該当なし
アニメーション型: 算出値型による

このプロパティは、隣接する 組版上の文字単位の間の 追加間隔 (一般に トラッキングと呼ばれます) を指定します。 Letter-spacing は bidi 並べ替えの後に適用され、 カーニング および word-spacing に加えて適用されます。 [CSS-WRITING-MODES-4] [CSS-FONTS-3] 有効な両端揃え規則に応じて、 ユーザーエージェントは、 テキストを両端揃えするために、 組版上の文字単位間の空間を さらに増減させてもよいです。

値は次の意味を持ちます:

normal
追加間隔は適用されません。0 に算出されます。
<length-percentage>
組版上の文字単位の間に 追加の間隔を指定します。 値は負でもよいですが、 実装依存の制限がある場合があります。

注: パーセンテージはそのまま継承され、 現在の要素の使用値の font-size に対して解決されます (したがって、それらが適用されるテキストのサイズに相対するサイズを表します)。 これは、継承元の要素の算出された font-size に対して 絶対長として解決される em 単位とは異なります。

従来の理由により、 0 の算出 letter-spacing は、 解決値getComputedStyle() の戻り値)として normal を返します。

letter-spacing の目的では、 アトミックインライン (画像やインラインブロックなど)の各連続する並びは、 単一の 組版上の文字単位として扱われます。

Letter-spacing は行頭に適用されてはなりません。 Letter-spacing が行末に適用されるかどうかは、このレベルでは未定義です。

Letter-spacing が行頭または行末に適用されない場合、 テキストは常にブロックの端にぴったり合います。
p { letter-spacing: 1em; }
<p>abc</p>

a b c

a b c

したがって UA は、行の右側または末尾側の端に letter spacing を追加することを本当にすべきではありません [RFC6919]:

a b c 

2 つの 組版上の文字単位の間の letter spacing は、 その 2 つの 組版上の文字単位を含む 最も内側の要素に実質的に「属します」: 2 つの隣接する 組版上の 文字単位間の合計 letter spacing (bidi 並べ替え後)は、 その 2 つの 組版上の文字単位の境界を 含む最も内側の要素によって指定され、その内部で描画されます。 しかし UA は、代わりに要素境界で letter-spacing を その包含要素に関係する letter-spacing 値を使用して 一方または他方の 組版上の文字単位に 付与してもよいです。

注: この二次的な挙動は、 Web 互換性の懸念により、このレベルで許可されています。

インラインボックスは、その要素に完全に含まれる文字間の letter spacing のみを含むことが期待されます。 したがって、その要素の右側または末尾側の端の letter spacing は除外されます:
p { letter-spacing: 1em; }
<p>a<span>bb</span>c</p>

a b b c

a b b c

したがって、letter-spacing の ある値は、それが指定された要素内に完全に含まれる 文字間の間隔にのみ影響することが期待されます:

p    { letter-spacing: 1em; }
span { letter-spacing: 2em; }
<p>a<span>bb</span>c</p>

a b  b c

これはさらに、単一の文字だけを含む要素に letter-spacing を 適用しても、描画結果に影響しないことを意味します:

p    { letter-spacing: 1em; }
span { letter-spacing: 2em; }
<p>a<span>b</span>c</p>

a b c

Letter spacing は RTL 並べ替えのに挿入されるため、 下の内側の span に適用された letter spacing も同様に効果を持ちません。 並べ替え後に "c" が "א" の隣に来ないためです:

p    { letter-spacing: 1em; }
span { letter-spacing: 2em; }
<!-- abc followed by Hebrew letters alef (א), bet (ב) and gimel (ג) -->
<!-- Reordering will display these in reverse order. -->
<p>ab<span></span>בג</p>

a b c א ב ג

Letter spacing は、不可視のゼロ幅整形文字 (Unicode Cf カテゴリの文字など)を無視します。 間隔は、それらの文字が文書内に存在しないかのように追加されなければなりません。

たとえば、A&#x200B;B に適用された letter-spacing は、 要素境界がどこにあるかに関係なく AB と同一です。

2 つの文字間の有効な間隔が 0 でない場合 (両端揃え、または letter-spacing の非ゼロ値による場合)、 ユーザーエージェントは任意合字を適用すべきではありません。 すなわち、本質的に正しいグリフシェーピングに必須と定義されていない合字です。 ただし、低水準の font-feature-settings プロパティによって 指定された合字およびその他のフォント機能は、 この規則より優先されます。 CSS Fonts Module Level 3 § feature-precedence を参照してください。

たとえば、単語 “filial” に letter-spacing が適用されている場合、 “fi” 合字は使用されるべきではありません。 それはテキストの均等な間隔を妨げるためです。
filial vs filial

注: OpenType では、必須合字は rlig 機能に関連付けられることが期待されます。 したがって、その他のすべての合字は任意と見なされます。 ただし場合によっては、UA またはプラットフォームのヒューリスティックが、 壊れたフォントを扱うために追加の合字を適用します。 この仕様は、そのような例外的な扱いを定義も上書きもしません。

8.2.1. 筆記体文字体系

可能であれば、 UA は、筆記体文字体系に letter spacing を適用する際、 そのような文字の連なりへ分配される合計追加空間を、 その連なりの同等の合計拡張(または圧縮)をもたらす 何らかの筆記体的伸長 (または負のトラッキング値の場合は圧縮) へ変換してもよいです。 それ以外の場合、 UA が 筆記体文字体系のテキストを 筆記体接続を壊さずに拡張できないなら、 その文字体系の任意の 2 つの 組版上の字母単位の間に 間隔をまったく適用してはなりません (letter-spacing の目的では、実質的に各単語を単一の 組版上の字母 単位として扱います)。 どちらの場合も、そのような字母間の有効な間隔は 0 になります。 ただし前者は、テキストを引き伸ばす感覚を保持します。

以下は、アラビア語テキストの間隔付けに関する適切な例と不適切な例です。
元のテキスト
BAD 各文字間に空間を均等に分配する。 これにより筆記体の接続が壊れることに注意!
OK letter-spacing を 組版上適切な筆記体的伸長によって分配する。 結果のテキストは、前の均等間隔の例と同じ長さです。
OK アラビア文字間の letter-spacing を抑制する。 letter-spacing は、それでも 非アラビア文字(スペースなど)には適用されることに注意。
BAD 結合していない字母の間にのみ letter-spacing を適用する。 これは組版上の濃淡を歪め、単語境界を曖昧にします。

注: テキストの適切な筆記体的伸長または圧縮は、 文字体系、 書体、 言語、 単語内の位置、 行内の位置、 実装の複雑さ、 フォントの能力、 およびカリグラフィ上の好みによって変わることがあり、 特定の場合にはまったく不可能なこともあります。 これには短縮合字、 スワッシュ変種、 文脈形、 U+0640 ـ ARABIC TATWEEL などの伸長グリフ、 またはその他のマイクロタイポグラフィの使用が含まれる場合があります。 これらの効果に関する規則を定義することは CSS の範囲外です。 著者は、相互運用できない結果を受け入れる用意がない限り、 筆記体文字体系に letter-spacing を 適用することを避けるべきです。

8.3. 行頭/行末のパディング: line-padding プロパティ

名前: line-padding
値: <length>
初期値: 0
適用対象: インラインボックス
継承: する
パーセンテージ: 該当なし
算出値: 絶対長
正規順序: 文法に従う
アニメーション型: 算出値型による

letter-spacing組版上の文字単位の間の間隔を調整し、 行の先頭または末尾には適用されませんが、 このプロパティは行の先頭/末尾だけの間隔を調整します。 追加間隔は、ラインボックスの先頭/末尾にある 最も内側の インラインボックスによってのみ適用され、 その インラインボックスの内容端と、 隣接する インラインレベル内容 (テキストまたはアトミック インライン) の間に挿入されます。 この追加空間は 両端揃え機会ではありません。

次の HTML と CSS が与えられた場合:
p    { line-padding: 0.5em; line-height: 1; text-align: center }
span { background: black; color: white; }
em   { background: green; color: white; }

<p><span>Here is <em>some text</em></span>

Line-padding は、 各行の両側に追加の 0.5em のインライン背景が見えるように挿入されます。 “some” と “text” の間で分割されるように描画される場合、 追加のパディングは、 1 行目では左側が黒、右側が緑となり、 2 行目では両側が緑になります。

Here is some
text

8.4. 自動文脈間隔: text-autospace プロパティ

名前: text-autospace
値: normal | <autospace> | auto
初期値: normal
適用対象: テキスト
継承: する
パーセンテージ: 該当なし
算出値: 指定されたキーワード
正規順序: 文法に従う
アニメーション型: 離散

同じ インライン整形コンテキスト内の同じ行にある 隣接文字間の間隔を、 文字クラスに基づく規則の集合を用いて制御し、 文字体系間の間隔および句読点周囲の間隔を 自動的に制御できるようにします。

値は次のように定義されます:

<autospace> = no-autospace |
              [ ideograph-alpha || ideograph-numeric || punctuation ]
              || [ insert | replace ]
normal
ideograph-alpha ideograph-numeric と同じ挙動です。
no-autospace
自動空間は挿入されません。
insert
そこにどの種類の空白文字(Unicode 一般カテゴリ Z)も まだ存在しない場合、 指定された間隔が自動的に挿入されます。

insertreplace も 指定されていない場合、 挙動は insert と同じです。

replace
その位置にすでに スペース (U+0020)が存在する場合でも、 指定された間隔が自動的に挿入されます。 さらに、その スペース(U+0020)は削除されます。 他の種類の空白文字(Unicode 一般カテゴリ Z)は、 insert の場合と同様に 自動間隔を抑制します。

注: これは、適切な間隔の代わりに 入力しやすい U+0020 を使用しているテキストを修正するためのものです。

ideograph-alpha
表意文字の並びと 非表意文字の字母の並びとの間に 追加間隔を作成します。 § 8.4.1 文字体系間間隔を参照してください。
ideograph-numeric
表意文字の並びと 非表意文字の数字の並びとの間に 追加間隔を作成します。 § 8.4.1 文字体系間間隔を参照してください。
punctuation
言語固有の組版慣習によって必要とされるとおりに、 句読点の周囲に追加の非分割間隔を作成します。

このレベルでは、要素の内容言語がフランス語である場合、 フランス語 組版ガイドラインによって必要とされる位置に、 狭いノーブレークスペース(U+202F)およびノーブレークスペース(U+00A0)が挿入されます。 それ以外の場合、この値は効果を持ちません。 ただし将来の仕様では、他の言語の自動間隔挙動が追加される可能性があります。

auto
ユーザーエージェントは、組版上高品質な間隔値の集合を選択します。 異なるプラットフォーム上で動作する異なるユーザーエージェントは、 異なる値を選択する場合があります。

注: これらの間隔値は、 OS プラットフォームの慣習と一致する場合も、一致しない場合もあります。

このプロパティは、word-spacing および letter-spacing プロパティと加算的です。 つまり、letter-spacing 設定によって寄与される間隔量 (存在する場合)は、text-autospace によって 作成される間隔に加算されます。 同じことが word-spacing にも適用されます。

要素境界では、文字間に導入される追加間隔の量は、 その境界を含む最も内側の要素によって決定され、その内部で描画されます。

8.4.1. 文字体系間間隔

ideograph-alpha および ideograph-numeric 値は、 特定の文字クラス間の境界に、 それらが行上で直接隣接している場合、 すなわち、間に非ゼロの marginborder、または padding や介在する文字(引用符やスペースなど)がない場合に、 間隔を導入します。 これらのキーワードによって導入される空間量は CJK 前進幅の 1/8 です。 すなわち、使用値font-size がその 算出値と 同じである場合、0.125ic です。

注: 間隔の慣習はさまざまですが、 値は典型的には 1/4ic から 1/8ic 程度までの範囲であり、 金属活字の制約により歴史的文脈では 1/4ic がより一般的で、 プロポーショナル組版では 1/6ic またはそれより細い値がより一般的です。 これらの空間は既定で (初期値 normal を通じて)挿入されるため、 CSS は干渉を控えめにするために 1/8ic を使用します。 このモジュールの将来レベルでは、 間隔量の制御が導入される可能性があります。

8.5. CJK 句読点間隔: text-spacing-trim プロパティ

名前: text-spacing-trim
値: <spacing-trim> | auto
初期値: normal
適用対象: テキスト
継承: する
パーセンテージ: 該当なし
算出値: 指定されたキーワード
正規順序: 文法に従う
アニメーション型: 離散

同じ インライン整形コンテキスト内の同じ行にある CJK 句読点文字の周囲の間隔を、 文字クラスに基づく規則の集合を用いて制御し、 行内での位置および隣接文字に基づいて、 それらを半角または全角として設定できるようにします。

値は次のように定義されます:

<spacing-trim> = space-all | normal | space-first | trim-start | trim-both | trim-all
space-all
すべての全角句読点文字は、全角グリフ(空きあり)で設定されます。
normal
各行の先頭では、全角始め句読点を全角グリフ (空きあり)で設定します。 各行の末尾では、全角終わり句読点を、 両端揃え前に他の方法では収まらない場合は半角グリフ (詰め)で設定し、 そうでなければ句読点を全角グリフで設定します。 さらに句読点グリフ間の間隔を 下で説明するように畳み込みます。
trim-both
各行の先頭では、全角始め句読点を半角グリフ (詰め)で設定します。 各行の末尾では、全角終わり句読点を半角グリフ (詰め)で設定します。 さらに句読点グリフ間の間隔を 下で説明するように畳み込みます。
space-first
全角始め句読点を、 ブロック コンテナーの最初の行、 および 強制改行の後の各行では 全角グリフ(空きあり)で設定します。 それ以外は normal と同じです。
この値は互換性要件のために存在します。

この値は、既存の中国語および日本語コンテンツの一部の整形を管理するために存在します。 それらでは trim-both が 組版上は適切であったはずですが、 最初の行が space-all と同様に設定されることを 期待してすでに書かれています。

具体的には、 UA 全体で信頼できる hanging-punctuation サポートがないため、 既存コンテンツ(特に ePub コンテンツ)は text-indent の代わりに U+3000 表意文字スペースを使用しますが、 段落が句読点で始まり、 それをインデント内にぶら下げたい場合にはこれを省略し、 ぶら下げ句読点効果を作り出します。 そのようなコンテンツの最初の行に trim-both を使用すると、 実効的なインデントが削り取られ、 その行が新しい段落の最初の行であるという区別が 不明瞭になります。

表意文字スペースをインデントに使用する この組版慣行 (時々、かつ必ずしも常にではない)は、 HTML と CSS が提供する内容とスタイルの分離に反することに注意してください。 文書のテキスト内容を微調整するのではなく、 hanging-punctuation および text-indent を使用して段落整形を制御することで、 文書ソース内のテキストの真の意味を保持し、 スタイルシート設計者が内容を変更する必要なく、 さまざまな間隔/インデントスタイルを自由に切り替えられるようになります。 例については § 8.5.3 CSS における日本語段落開始規約を参照してください。

さらに、行末での挙動は、 normal および trim-start 値と整合しており、 trim-both とは異なります。 つまり、両端揃え前に他の方法では収まらない場合にのみ、 グリフを詰めます。 組版を改善する場合は少なくなりますが、 互換性上の懸念を減らす space-all の旧来の挙動に より近いものです。

trim-start
各行の先頭では、全角始め句読点を半角グリフ (詰め)で設定します。 それ以外は normal と同じです。
trim-all
全角始め句読点全角終わり句読点、 および 全角中点句読点を、 行内での位置にも 隣接文字にも関係なく、 半角グリフで設定します。
auto
ユーザーエージェントは、組版上高品質な間隔値の集合を選択します。 異なるプラットフォーム上で動作する異なるユーザーエージェントは、 異なる値を選択する場合があります。

注: これらの間隔値は、 OS プラットフォームの慣習と一致する場合も、一致しない場合もあります。

auto は必要でしょうか? 著者が最初の行の先頭で プラットフォーム依存の挙動を選ぶのは奇妙であり、 それ以外では trim-both を使用すべきです。

各値が何を行うかについて、非公式な要約を以下に示します:
行頭で詰める 行末で詰める 隣接ペアを詰める あらゆる場所で詰める
space-all いいえ
normal いいえ 収まらない場合のみ はい いいえ
space-first 最初の行を除き、はい
trim-start はい
trim-both はい
trim-all はい
auto ユーザーエージェント固有 / プラットフォーム依存

8.5.1. 全角句読点の畳み込み

通常、全角文字は標準的な漢字(例: 水 U+6C34)と同じ前進幅の グリフを持ちます。 しかし、多くの全角句読点グリフは、 全角デザイン空間の一部のみを占めます。 したがって、そのような句読点は常に全角で設定されるわけではありません。 text-spacing-trim のいくつかの値は、 そのような文字がいつ半角 (通常は表意文字の半分の幅)で設定され、 いつ全角で設定されるかを著者が制御できるようにします。

指定されたとおりにテキストを設定するために、UA は次のいずれかを行う必要があります

UA は、特定のグリフに必要な詰めを行うために、 フォントによって実装されている場合、 OpenType の halt および vhal 機能を使用してもよいです。 UA は hwid 機能を使用してはならず、 その他の方法で半角形を代替してはなりません。 半角グリフへ切り替えるとグリフ形状が変わる可能性があり、 ここでは許容されないためです。

一部のフォントは、全角句読点文字にプロポーショナルグリフを使用します。 フォント内に全角対半角のグリフ形状を区別するためのサポート (たとえばフォント機能を通じたもの)がない場合、 そのようなプロポーショナルグリフについては、 与えられた前進幅は 同時に全角かつ半角であると見なされます: UA はこれらのグリフに空間を追加したり削除したりしてはなりません。

注: 標準的な漢字の前進幅は、 反対の書字モードに対する OpenType の ideo および idtp ベースラインなどの フォントメトリクスから決定するか、 水 U+6C34 のような漢字の前進幅を取ることで決定できます。 (一部のフォントは文字が正方形でなくなるように圧縮されているため、 反対の書字モードを使用しなければなりません。) OpenType メトリクスに関する詳細情報は、 OpenType 仕様にあります。 水 U+6C34、卜 U+535C、および 一 U+4E00 がすべて同じ前進幅を持たない場合、 そのフォントはプロポーショナル表意文字を持ち、 グリフを測定して全角前進幅を信頼性高く決定することはできないことに注意してください。

一部のフォントには、詰める(カーンする)には空白が小さすぎる 全角句読点文字があります。 UA は、グリフ境界ボックス、グリフメトリクス、またはフォント機能を通じて、 詰め(カーニング)がグリフの切れ、衝突、または過度なカーニングを引き起こす可能性があると 判断した場合、 詰め(カーン)ないことを選択してもよいです。

text-spacing-trimtrim-all である場合、 UA は、そのような全角グリフに通常関連付けられる空間を、 それらが現れる文脈に関係なく畳み込まなければなりません。 それ以外の場合、text-spacing-trimspace-all に設定されている場合 (またはフォントがプロポーショナル全角句読点グリフを持つ場合)を除き、 UA は、そのような全角グリフに通常関連付けられる空間を、 行上で隣接して置かれたとき、 次のように畳み込まなければなりません:

次の例表は、隣接ペア詰めの影響を受ける句読点ペアを示しています。 これは、詰め効果を近似するために半角相当を使用しています。
隣接ペア句読点詰めのデモ
組み合わせ サンプルペア 見た目
始め—始め + (
中点—始め + (
終わり—始め + (
表意文字スペース—始め  +  (
終わり—終わり + )
終わり—中点 + )
終わり—表意文字スペース +  ) 

8.5.2. テキスト間隔文字クラス

このプロパティの文脈では、次の定義が適用されます:

クラスと Unicode コード ポイントは検討中であり、 Unicode へのより最近の追加に対応するには、少なくともいくつかの変更が必要です。 [Issue #9503]

表意文字
基底文字が以下に列挙される、すべての 組版上の文字単位 [CSS-TEXT-3] を含みます:
  • U+3041 から U+30FF の範囲内のすべての文字。 ただし Unicode 句読点 [P*] 一般 カテゴリに属するものを除く。
  • CJK Strokes(U+31C0 から U+31EF)。
  • Katakana Phonetic Extensions(U+31F0 から U+31FF)。
  • Han script プロパティを持つすべての文字。
非表意文字の 字母
Unicode 字母 [L*] および記号 [M*] 一般カテゴリに属する すべての 組版上の文字単位を含みます。 ただし、次のいずれかの条件を満たす場合を除きます:
非表意文字の 数字
Unicode 十進数字 [Nd] 一般カテゴリに属する すべての 組版上の文字単位を含みます。 ただし、次のいずれかの条件を満たす場合を除きます:
  • [UAX11] によって East Asian Fullwidth (F) と分類されている。
  • text-orientation プロパティ または text-combine-upright プロパティを用いた 縦書きテキストフローで正立している。
全角 始め句読点
Unicode カテゴリ Ps の任意の始め句読点文字のうち、 CJK Symbols and Punctuation ブロック(U+3000–U+303F)に属するもの、 または [UAX11] によって East Asian Fullwidth (F) と分類されるものを含みます。 LEFT SINGLE QUOTATION MARK(U+2018)および LEFT DOUBLE QUOTATION MARK(U+201C)も含みます。 詰められる場合、左半分(横書きテキストの場合)または上半分(縦書きテキストの場合)がカーンされます。
全角 終わり句読点
Unicode カテゴリ Pe の任意の終わり句読点文字のうち、 CJK Symbols and Punctuation ブロック(U+3000–U+303F)に属するもの、 または [UAX11] によって East Asian Fullwidth (F) と分類されるものを含みます。 RIGHT SINGLE QUOTATION MARK(U+2019)および RIGHT DOUBLE QUOTATION MARK(U+201D)も含みます。 全角コロン句読点および/または 全角ドット句読点も含む場合があります (下記参照)。 詰められる場合、右半分(横書きテキストの場合)または下半分(縦書きテキストの場合)がカーンされます。
全角中点句読点
MIDDLE DOT(U+00B7)、HYPHENATION POINT(U+2027)、および KATAKANA MIDDLE DOT(U+30FB)を含みます。 全角コロン句読点および/または 全角ドット句読点も含む場合があります (下記参照)。
全角 コロン句読点
FULLWIDTH COLON(U+FF1A)および FULLWIDTH SEMICOLON(U+FF1B)を含みます。
全角ドット 句読点
次を含みます: IDEOGRAPHIC COMMA(U+3001)、 IDEOGRAPHIC FULL STOP(U+3002)、 FULLWIDTH COMMA(U+FF0C)、 FULLWIDTH FULL STOP(U+FF0E)。

全角コロン句読点および 全角ドット句読点全角終わり句読点と見なすべきか、または 全角中点 句読点と見なすべきかは、 句読点がグリフのボックス内のどこに描かれるかに依存します。 句読点が中央に配置されている場合、 それは中点句読点と見なされるべきです。 句読点が片側(横書きテキストでは左、縦書きテキストでは上)に描かれ、 したがってもう半分が空白である場合、 その句読点は終わり句読点と見なされ、それに応じて詰められるべきです。

UA は、全角コロン句読点および 全角ドット句読点を、 適切に 全角終わり句読点カテゴリまたは 全角中点句読点カテゴリのいずれかに 分類しなければなりません。 UA は、この分類を決定するために、 言語慣習および書字モード(横書き対縦書き)、 および/またはフォント情報に依存してもよいです。 UA はまた、適切に任意のカテゴリへ追加の文字を加えてもよいです。

次の参考表は、 全角コロンおよびドット句読点を分類するための言語慣習を要約します:
コロン句読点 ドット句読点
簡体字中国語(横書き) 終わり 終わり
簡体字中国語(縦書き) 終わり 終わり
繁体字中国語 中点 中点
韓国語 中点 終わり
日本語 中点 終わり

少なくとも中国語フォントについては、 著者は標準的な慣習がしばしば従われていないことを観察しています。

8.5.3. CSS における日本語段落開始規約

日本語には一般的な開始端の組版方式が 3 つあり、 それらは始め括弧の扱いによって区別されます。
The first scheme aligns opening brackets flush with the indent edge
			          on the first line and with the start edge of other lines.
			          The second scheme gives the opening bracket its full width,
			          so that it is effectively indented half an em from the indent edge
			          and from the start edge of other lines.
			          The third scheme aligns the opening brackets flush with the
			          start edge of lines, but hangs them inside the indent on the
			          first line (resulting in an effective half-em indent instead
			          of the full em for paragraphs that begin with an opening bracket).

行頭における始め括弧の配置 [JLREQ]

p { margin: 1em 0; } という UA スタイルシートを仮定すると、 CSS は次の規則で日本語の組版スタイルを実現できます:

8.6. 文字クラス間隔の一括指定: text-spacing プロパティ

名前: text-spacing
値: none | auto | <spacing-trim> || <autospace>
初期値: 個々のプロパティを参照
適用対象: テキスト
継承: する
パーセンテージ: 該当なし
算出値: 指定されたキーワード
アニメーション型: 離散
正規順序: 文法に従う

このプロパティは、 text-spacing-trimtext-autospace を 単一の宣言で設定するための一括指定です。 値は次のように定義されます:

none
すべての text-spacing 機能を無効にします: text-spacing-trimspace-all に設定し、 text-autospaceno-autospace に設定します。
auto
text-spacing-trimtext-autospace の両方を auto に設定します。
<spacing-trim>
text-spacing-trim を指定された値に設定します。 <autospace> 値が与えられていない場合、 text-autospace はその 初期 値に設定されます。
<autospace>
text-autospace を指定された値に設定します。 <spacing-trim> 値が与えられていない場合、 text-spacing-trim はその 初期 値に設定されます。

注: normaltext-spacing-trimtext-autospace の両方の初期値であるため、 text-spacing: normal は両方を初期値にリセットします。

8.7. 要素境界をまたぐシェーピング

2 つの 組版上の文字単位を分離する境界を持つ任意のボックスについて、 次のいずれかが真である場合、 テキストシェーピングはインラインボックス境界で分断されなければなりません:

整形に実効的な変化がない場合、 または唯一の整形変化がグリフに影響しない場合 (テキスト装飾の適用など)、 テキストシェーピングはインラインボックス境界をまたいで 分断されてはなりません

それ以外の場合、 フォント技術の制約を考慮してその事例で合理的かつ可能であるなら、 テキストシェーピングはインラインボックス境界をまたいで 分断されるべきではありません

境界をまたぐ合理的かつ可能なシェーピングの例は、 アラビア語シェーピングです: 多くのシステムでは、これはフォントエンジンによって行われ、 フォントが非常に高度な文脈シェーピングを伴う 変種グリフを提供できます。 フォントエンジンが文脈を提供する API を持たない限り、 フォント変更をまたいでこのシステムに依存することは一般に不可能ですが、 エンジンがこの制約を回避することは簡単であり、したがって十分合理的です。 たとえば、必要に応じてゼロ幅結合子(U+200D)またはゼロ幅非結合子(U+200C)を使用して、 語頭/語中/語末/独立グリフの正しい選択を促すことができます。

境界をまたぐシェーピングが可能ではあるが合理的ではない例は、 グリフを選択するために両側 20 文字の文脈に敏感なフォントを扱う場合です: 対象の文字列の前および後のすべてのテキストを、 整形変更を伴う複数のインライン境界をまたいで渡すことは複雑です。 UA はそのような事例を処理してもよいですが、 それらは典型的ではなく、現代の書記体系によって本質的に要求されるものでもないため、 必須ではありません。

境界をまたぐシェーピングが不可能な例は、 “and” という単語の途中でフォントウェイトが変化する場合です。 そのフォントでは、合字が “and” という単語の 3 文字すべてを アンパサンドグリフ(“&”)に置き換えることになります。

9. 端の効果

端の効果は、 ブロック内の他の行に対する行のインデント (text-indent) および行の先頭端と末尾端で内容がどのように測定されるか (hanging-punctuation) を制御します。

9.1. 最初の行のインデント: text-indent プロパティ

名前: text-indent
値: [ <length-percentage> ] && hanging? && each-line?
初期値: 0
適用対象: ブロックコンテナー
継承: する
パーセンテージ: ブロックコンテナー自身の インライン軸内側サイズを参照
算出値: 算出された <length-percentage> 値、および指定された キーワード
正規順序: 文法に従う
アニメーション型: 算出値型による

このプロパティは、 ブロック内のインライン内容の行に適用されるインデントを指定します。 インデントは、ラインボックスの 始端側に適用される マージンとして扱われます。

each-line および/または hanging キーワードによって 別途指定されない限り、 要素の 最初の整形済み行である行のみが影響を受けます。 [CSS-PSEUDO-4] たとえば、匿名ブロックボックスの最初の行は、 それが親要素の最初の子である場合にのみ影響を受けます。

値は次の意味を持ちます:

<length>
インデント量を絶対長として与えます。
<percentage>
ブロックコンテナー自身の 論理 幅に対するパーセンテージとして、 インデント量を与えます。

パーセンテージは、内在サイズ寄与を計算する目的では 0 として扱われなければなりませんが、 レイアウトを行うときは常に通常どおり解決されます。

注: これは要素のオーバーフローにつながることがあります。 パーセンテージインデントと内在サイズ決定を一緒に使用することは推奨されません。

each-line
インデントは、各ブロックコンテナーの最初の行と、 強制改行の後の各行に影響します (ただし ソフト 折り返し分割後の行には影響しません)。
hanging
影響を受ける行を反転します。

text-alignstart であり、text-indent が、float が存在しない左横書きテキストで 5em の場合、最初のテキスト行は ブロックの 5em 内側から始まります:

     Since CSS1 it has been possible to
indent the first line of a block element
5em by setting the 'text-indent' property 
to '5em'.

hanging キーワードを追加すると、 最初の行は端に揃って始まりますが、 他の行は 5em インデントされます:

In CSS3 we can instead indent all other
     lines of the block element by 5em
     by setting the 'text-indent' property
     to 'hanging 5em'.
text-indent プロパティは “first formatted line” にのみ影響するため、 強制分割の後の行はインデントされません。
   For example, in the middle of
this paragraph is an equation,
which is centered:
             x + y = z
The first line after the equation
is flush (else it would look like
we started a new paragraph).

しかし、詩やコードのように、 折り返すほど長い各行をインデントするのが適切な場合があります。 次の例では、text-indent3em hanging each-line の値が与えられており、 詩の 3 行目がブロックの右境界でソフト折り返しする位置に ぶら下げインデントを与えます:

In a short line of text
There need be no wrapping,
But when we go on and on and on  
   and on,
Sometimes a soft break
Can help us stay on the page.

注: text-indent プロパティは継承されるため、 ブロック要素に指定された場合、子孫の inline-block 要素に影響します。 このため、display: inline-block が指定された要素には、 text-indent: 0 を指定するのが 多くの場合賢明です。

9.2. ぶら下がるグリフ

行の先頭端または末尾端にあるグリフが ぶら下がる場合、 それは、行内容が収まるか、配置されるか、両端揃えされるかを測定する際に 考慮されません。 行の配置/両端揃えによっては、 その記号がラインボックスの外側に置かれる結果になることがあります。 ぶら下がるグリフは、 内在サイズmin-content サイズ および max-content サイズ) およびそれらから派生する任意のサイズを計算する際にも考慮されません。 (この測定とカーニングの相互作用は現在 UA 定義です。 CSSWG はこの点について 助言を歓迎します。)

ぶら下がるグリフは、 なお親インラインボックスの内側に含まれ、 テキスト両端揃えにも参加します: その文字の前進幅が、 行にどれだけの内容が収まるか、 両端揃えのために行内容をどれだけ拡張または圧縮する必要があるか、 またはテキスト配置のためにラインボックス内で内容をどのように配置するかを決定する際に、 測定されないだけです。 実質的に、ぶら下がるグリフの文字前進幅は、 影響を受ける親 インラインボックスの端における 追加の負のマージンとして再解釈されます。 行はそれ以外は通常どおりレイアウトされます。 オーバーフローする ぶら下がるグリフは、 不要なスクロールバーを作成しないように、通常は インクオーバーフローと見なされるべきです。 ただし UA は、内容が編集可能である場合、 またはそれを スクロール可能オーバーフローとして扱うことが 利用者に有用であるその他の状況では、 スクロール可能オーバーフローとして扱ってもよいです。 [CSS-OVERFLOW-3]

場合によっては、行末のグリフは 条件付きで ぶら下がることがあります: 両端揃え前にそれが他の方法では行に収まらない場合にのみ、 それはぶら下がります。 それは、行内容が収まるかを測定する際に考慮されません。 しかし、収まらない任意の部分は ぶら下がるものと見なされます。 条件付きでぶら下がるグリフは、 min-content サイズ およびそれらから派生する任意のサイズを計算する際には考慮されませんが、 max-content サイズ およびそれらから派生する任意のサイズでは考慮されます。

ぶら下がり可能なグリフと 行端との間に非ゼロのインライン軸方向の border または padding がある場合、 そのグリフはぶら下がれません。 たとえば、末端パディングを持つインラインボックスの末尾にあるピリオドは、 行の末端で ぶら下がりません。

複数の隣接するグリフは一緒にぶら下がることができます。 ただし、ぶら下がりを許可される数に対する具体的な制限が指定される場合があります (例: 行の各端で最大 1 つの句読点文字だけが ぶら下がることができる)。

9.2.1. ぶら下げ句読点: hanging-punctuation プロパティ

名前: hanging-punctuation
値: none | [ first || [ force-end | allow-end ] || last ]
初期値: none
適用対象: テキスト
継承: する
パーセンテージ: 該当なし
算出値: 指定されたキーワード
正規順序: 文法に従う
アニメーション型: 離散

このプロパティは、句読点記号が存在する場合に、 それがテキスト行の先頭または末尾で ぶら下がり、 ラインボックスの外側 (またはインデント内) に配置されてもよいかどうかを決定します。

注: ブロックコンテナーに十分なパディングがない場合、 hanging-punctuation はオーバーフローを引き起こすことがあります。

値は次の意味を持ちます:

none
どの句読点文字も ぶら下がるようにはされません。
first
要素の 最初の整形済み行の先頭にある 始め括弧、引用符、または表意文字スペースが ぶら下がります。 これは Unicode カテゴリ Ps、Pf、Pi のすべての文字に加え、 ASCII 引用符 U+0027 ' APOSTROPHE および U+0022 " QUOTATION MARK、 ならびに IDEOGRAPHIC SPACE U+3000 に適用されます。
last
要素の最後の整形済み行の末尾にある 終わり括弧または引用符が ぶら下がります。 これは Unicode カテゴリ Pe、Pf、Pi のすべての文字に加え、 ASCII 引用符 U+0027 ' APOSTROPHE および U+0022 " QUOTATION MARK に適用されます。
force-end
行末の 終止符またはコンマぶら下がります
allow-end
行末の 終止符またはコンマ条件付きでぶら下がります

行の各端で、最大 1 つの句読点文字だけが ぶら下がることができます。

終止符 およびコンマのうち、ぶら下がりが許可されるものは次を含みます:

U+002C , COMMA
U+002E . FULL STOP
U+060C ، ARABIC COMMA
U+06D4 ۔ ARABIC FULL STOP
U+3001 IDEOGRAPHIC COMMA
U+3002 IDEOGRAPHIC FULL STOP
U+FF0C FULLWIDTH COMMA
U+FF0E FULLWIDTH FULL STOP
U+FE50 SMALL COMMA
U+FE51 SMALL IDEOGRAPHIC COMMA
U+FE52 SMALL FULL STOP
U+FF61 HALFWIDTH IDEOGRAPHIC FULL STOP
U+FF64 HALFWIDTH IDEOGRAPHIC COMMA

UA は適切に他の文字を含めてもよいです。

注: CSS Working Group は、 他の文字を含める UA が そのような追加についてワーキンググループへ通知することを歓迎します。

allow-endforce-end は、東アジアで使用される ぶら下げ句読点の 2 つの変種です。
hanging-punctuation: allow-end
p {
  text-align: justify;
  hanging-punctuation: allow-end;
}
hanging-punctuation: force-end
p {
  text-align: justify;
  hanging-punctuation: force-end;
}

allow-end では、 1 行目の末尾にある句読点はぶら下がりません。 ぶら下げなくても収まるためです。 しかし、force-end が使用される場合、 それは強制的にぶら下がります。 両端揃えは、ぶら下がる句読点を含めずに行を測定します。 したがって行が拡張されると、句読点は行の外側へ押し出されます。

9.3. 双方向性とラインボックス

ラインボックスの 始端 および 終端 側は、 そのラインボックスの インライン基底方向によって決定されます。 通常は一致しますが、 ラインボックスインライン基底方向は、 包含ブロックまたは bidi 段落インライン基底方向とは別個です。 ラインボックスインライン基底 方向は、 text-align-alltext-align-lasttext-indent、 および hanging-punctuation—​すなわち、その端に対する内容の位置と配置— に影響します。 インライン内容の整形または順序には影響しません (これは Unicode Bidirectional Algorithm によって制御され、 CSS Writing Modes によって適用されます [UAX9] [CSS-WRITING-MODES-4])。

ほとんどの場合、ラインボックスインライン基底方向は、 その 包含ブロックの算出された direction によって与えられます。 しかし、その 包含ブロックunicode-bidi: plaintext を持つ場合 [CSS-WRITING-MODES-4]:

次の例では、 <block> が始端揃えの整形済みブロック (display: block; white-space: pre; text-align: start) であると仮定すると、 1 行おきに右揃えされます:
<block style="unicode-bidi: plaintext">
français
فارسی
français
فارسی
français
فارسی
</block>
プレーンテキスト bidi 段落の インライン基底方向を見つける際には、 中立文字(句読点など)および隔離された並びはスキップされるため、 次の例のラインボックスは左から右になります (したがって text-align: start が与えられているので左揃えされます)。 これは最初の強い文字 ‘h’ によって決定されます:
<para style="display: block; direction: rtl; unicode-bidi:plaintext"><quote style="unicode-bidi:plaintext">שלום!</quote>”, they said.
</para>
<textarea style="direction: rtl; unicode-bidi:plaintext">

Hello!

</textarea>

unicode-bidi: plaintext のため、 “Hello!” は LTR で組版され (すなわち感嘆符が右側にあり)、 左揃えされ、 包含ブロックの RTL direction を無視します。 これにより、その後に続く空行も LTR になり、 その行のキャレットは左端に表示されるべきであることを意味します。 しかし空の最初の行は右揃えされます: 先行する行を持たないため、 包含ブロックの RTL 方向を仮定するからです。

付録 A: テキスト処理の処理順序

この付録は規範的です。

次のリストは、テキスト操作の順序を定義します。 (結果として得られるレイアウトが同じである限り、実装はこの順序に拘束されません。)

  1. § 4.2 空白のトリミング: white-space-trim プロパティ
  2. 空白処理 第 I 部(事前折り返し)
  3. § 2.2 単語間の拡張: word-space-transform プロパティ および テキスト変換
  4. テキスト結合 [CSS-WRITING-MODES-4]
  5. テキストの向き [CSS-WRITING-MODES-4]
  6. 行ごとに次を適用しながら テキスト折り返し:
    1. インデント

    2. 双方向並べ替え [CSS2] / [CSS-WRITING-MODES-4]

    3. 空白処理 第 II 部

    4. line-paddingletter-spacingword-spacing、および text-spacing

    5. フォント/グリフ選択と配置 [CSS-FONTS-3]

    6. ぶら下げ句読点

    注: これらの操作は、 行にどれだけのテキストが収まるかに影響し、 したがって折り返しへループバックする場合があります。

  7. 両端揃え (グリフ選択および/またはテキスト折り返しに影響し、そのステップへループバックする場合があります)
  8. テキスト配置
  9. テキストグループ配置

付録 B: プレーンテキストへの変換

この付録は、プレーンテキストのコピー&ペースト操作の目的において規範的です。

CSS で描画された文書がプレーンテキスト形式へ変換される場合、 次が期待されます:

付録 C: 既定の UA スタイルシート

この付録は参考情報です。 HTML の既定スタイルシートを実装する UA 開発者を支援するためのものですが、 UA 開発者は適切に無視または変更して構いません。

/* make option elements align together */
option { text-align: match-parent; }

/* do not allow white space to collapse in textarea */
textarea { white-space-collapse: preserve !important; }

/* preserve character grid in preformatted text */
pre, code, kbd, samp, tt, listing, xmp, plaintext { text-spacing: none; }

/* Avoid hanging punctuation inheriting into preformatted blocks */
pre { hanging-punctuation: none; }

付録 D: 文字体系と間隔

この付録は規範的です。

組版上の挙動は言語によって多少異なりますが、 書記体系によって大きく異なります。 この付録は、Unicode 6.0 における一般的な script の一部を、 その両端揃えおよび間隔挙動に従って分類します。 カテゴリの説明は記述的であり、規定的ではありません。 決定要因は、両端揃え機会の優先順位付けです。

ブロック文字体系
CJK および拡張としてすべての Wide 文字 (East Asian Width [UAX11] を参照)。 次の Unicode script が含まれます: Bopomofo、Han、Hangul、Hiragana、Katakana、および Yi。 East Asian Width プロパティWide および Fullwidth の文字も含まれますが、 Ambiguous 文字は、 書記体系ChineseKorean、 または Japanese である場合にのみ含まれます。
クラスタ化 文字体系
クラスタ化文字体系は離散的な単位を持ち、 単語境界でのみ分割しますが、 可視の単語区切りを使用しません。 空間の伸長を優先しますが、 両端揃えのために文字間隔を快適に受け入れます。 クラスタ化文字体系には、 次の Unicode script が含まれますが、これらに限定されません: Khmer、 Lao、 Myanmar、 New Tai Lue、 Tai Le、 Tai Tham、 Tai Viet、 Thai
筆記体文字体系
筆記体文字体系は、両端揃えまたは letter-spacing の いずれについても、 字母間の隙間を認めません。 次の Unicode script が含まれます: Arabic、 Hanifi Rohingya、 Mandaic、 Mongolian、 N’Ko、 Phags Pa、 Syriac

注: ベースライン接続子を持つインド系文字体系 (Devanagari や Gujarati など)は 筆記体文字体系とは見なされ組版上の文字単位の間に そのような隙間を認めますIndic Layout Requirements を参照してください。 [ILREQ]

ユーザーエージェントは、 Unicode サポートを更新する際にこのリストを更新して、 Unicode の将来バージョンでまだ符号化されていない筆記体文字体系に対応すべきであり、 CSSWG にこの仕様をそれに応じて更新するよう求めることが推奨されます。

付録 E: 文字とプロパティ

この付録は規範的です。

Unicode は、CSS 組版で参照される 4 つのコードポイントレベルのプロパティを定義します:

East Asian width プロパティ
Unicode Standard Annex #11 [UAX11] で定義され、 Unicode Character Database では East_Asian_Width プロパティとして与えられます [UAX44]
一般カテゴリ
Unicode Standard Annex #44 [UAX44] で定義され、 Unicode Character Database では General_Category プロパティとして与えられます [UAX44]
script プロパティ
Unicode Standard Annex #24 [UAX24] で定義され、 Unicode Character Database では Script プロパティとして与えられます [UAX44]。 (UA は、この対応付けに ScriptExtensions.txt の割り当てをすべて含めなければなりません。)
Vertical Orientation
Unicode Standard Annex #50 [UAX50] で、 Unicode Character Database における Vertical_Orientation プロパティとして定義されます [UAX44]

Unicode は個々のコードポイントのプロパティを定義しますが、 組版上の文字単位のプロパティを 決定する必要がある場合もあります。 CSS Text の目的では、 組版上の文字単位のプロパティは、 最初の 書記素クラスタの基底文字によって与えられます—​ただし 2 つの場合を除きます:

付録 F: 内容書記体系の識別

この付録は規範的です。

ほとんどの言語には好まれる書記体系がありますが、 複数を持つものもあり、 また多くは 1 つ以上の外来書記体系へ転写できます。 一般的な例として、多くの言語は少なくとも 1 つのラテン文字転写を持ち、 したがってラテン文字書記体系で書くことができます。 転写されたテキストは通常、その書記体系の組版慣習を採用します: たとえば日本語の “romaji” や中国語の Pinyin はラテン字母と単語スペースを使用し、 それに応じてラテン文字の行分割および両端揃え慣行に従います。 別の例として、歴史的な表意文字韓国語 (ko-Hani) は単語スペースを使用せず、 したがって現代韓国語ではなく中国語に近い形で組版されるべきです。

HTML またはその他の 文書言語において、 内容言語を宣言するために BCP47 タグを使用する場合、 著者は script サブタグによって、 非典型的な書記体系の使用を曖昧さなく示したり、指示したりできます。 [BCP47] たとえば、ネイティブには使用しない言語に対して ラテン文字書記体系の使用を示すには、 -Latn script サブタグを追加できます。 例: 日本語ローマ字には ja-Latn。 他の書記体系には他のサブタグが存在します。 ISO の Code for the Representation of Names of Scripts および ISO15924 script tag registry を参照してください。 [ISO15924]

script サブタグ付きの BCP47 タグを使用する一般的/歴史的な例:
zh-Latn
ラテン文字転写で書かれた中国語。
ko-Hani
漢字(中国語の表意文字)で書かれた韓国語。
tr-Arab
アラビア文字で書かれたトルコ語。
mn-Cyrl
キリル文字で書かれたモンゴル語。
mn-Mong
伝統的なモンゴル文字で書かれたモンゴル語。

しかし、BCP47 の script サブタグは、 単一の書記体系と強く関連付けられる言語では通常使用されず (実際には推奨されません)、 代わりに他が指定されていない場合、 その書記体系が暗黙であることが期待されます。 [BCP47] IANA はこの目的のため、 language subtag registry 内の Suppress-Script フィールドを通じて、 さまざまな言語の最も一般的な書記体系のデータベースを保守しています。

注: 言語タグ付けに関するさらなる助言は、 Internationalization Working Group“Language tags in HTML and XML” および “Choosing a Language Tag” にあります。

書記体系が明示的に示されていない場合、 UA は、宣言された 内容 言語の最も一般的な書記体系を、 行分割や両端揃えなどの言語依存組版挙動に対して仮定すべきです。 しかし、著者が異なるものを明示的に宣言している場合、 UA はその書記体系を仮定してはなりません。 UA が特定の言語と書記体系の組み合わせについて 言語固有の知識を持たない場合、 宣言された書記体系の組版慣習を使用しなければならず (必要であれば別の言語の慣習を仮定して)、 宣言された言語を仮定された書記体系で用いる場合の慣習を使用してはなりません。 それは宣言された書記体系に対して不適切になるためです。

言語とその最も一般的な書記体系との完全な対応は、 この文書の範囲外です。 しかし、ユーザーエージェントは少なくとも次を仮定しなければなりません:

付録 G: 小書き仮名のマッピング

この付録は規範的です。

小書き仮名から通常サイズの仮名への対応
小書き 通常サイズ
ぁ U+3041 あ U+3042
ぃ U+3043 い U+3044
ぅ U+3045 う U+3046
ぇ U+3047 え U+3048
ぉ U+3049 お U+304A
ゕ U+3095 か U+304B
ゖ U+3096 け U+3051
𛄲 U+1B132 こ U+3053
っ U+3063 つ U+3064
ゃ U+3083 や U+3084
ゅ U+3085 ゆ U+3086
ょ U+3087 よ U+3088
ゎ U+308E わ U+308F
𛅐 U+1B150 ゐ U+3090
𛅑 U+1B151 ゑ U+3091
𛅒 U+1B152 を U+3092
ァ U+30A1 ア U+30A2
ィ U+30A3 イ U+30A4
ゥ U+30A5 ウ U+30A6
ェ U+30A7 エ U+30A8
ォ U+30A9 オ U+30AA
ヵ U+30F5 カ U+30AB
ㇰ U+31F0 ク U+30AF
ヶ U+30F6 ケ U+30B1
𛅕 U+1B155 コ U+30B3
ㇱ U+31F1 シ U+30B7
ㇲ U+31F2 ス U+30B9
ッ U+30C3 ツ U+30C4
ㇳ U+31F3 ト U+30C8
ㇴ U+31F4 ヌ U+30CC
ㇵ U+31F5 ハ U+30CF
ㇶ U+31F6 ヒ U+30D2
ㇷ U+31F7 フ U+30D5
ㇸ U+31F8 ヘ U+30D8
ㇹ U+31F9 ホ U+30DB
ㇺ U+31FA ム U+30E0
ャ U+30E3 ヤ U+30E4
ュ U+30E5 ユ U+30E6
ョ U+30E7 ヨ U+30E8
ㇻ U+31FB ラ U+30E9
ㇼ U+31FC リ U+30EA
ㇽ U+31FD ル U+30EB
ㇾ U+31FE レ U+30EC
ㇿ U+31FF ロ U+30ED
ヮ U+30EE ワ U+30EF
𛅤 U+1B164 ヰ U+30F0
𛅥 U+1B165 ヱ U+30F1
𛅦 U+1B166 ヲ U+30F2
𛅧 U+1B167 ン U+30F3
ァ U+FF67 ア U+FF71
ィ U+FF68 イ U+FF72
ゥ U+FF69 ウ U+FF73
ェ U+FF6A エ U+FF74
ォ U+FF6B オ U+FF75
ッ U+FF6F ツ U+FF82
ャ U+FF6C ヤ U+FF94
ュ U+FF6D ユ U+FF95
ョ U+FF6E ヨ U+FF96

付録 H: 単語とフレーズの検出

この付録は規範的です。

この仕様のいくつかの操作は、 自動化された 単語境界検出 または フレーズ境界検出 に依存します。

どちらの操作も似ています: ユーザーエージェントはテキストの言語解析を行い、 言語固有の意味のある文字列を識別します。 それらは、対象とするテキスト単位が 単語かフレーズかだけが異なります。

広い意味では容易に理解できますが、 単語とフレーズの両概念を正確に定義することは難しく、 特に複数の言語にまたがって機能する方法では困難です。 それでも、この文脈では:

検出された各単語またはフレーズの開始位置と終了位置は、 単語 境界または フレーズ 境界と呼ばれます。 単語境界およびフレーズ境界はそれ自体では観測できませんが、 word-space-transformword-break などのプロパティが、それらの位置で可視効果を引き起こすことがあります。

単語またはフレーズを検出し、 その境界を配置する具体的なアルゴリズムは UA 依存であり、 辞書ベースの語彙解析、 句読点またはその他の区切り文字の識別、 形態素解析、 機械学習手法… など、さまざまな要因または手法を考慮してもよいです。

それでも、次の制約は尊重されなければなりません:

プライバシーに関する考慮事項

この仕様は、ユーザーにインストールされているハイフネーション辞書および行分割辞書を漏えいさせます。

セキュリティに関する考慮事項

この仕様は新しいセキュリティ上の考慮事項を導入しません。

謝辞

この仕様は、以下の方々の助力なしには実現できませんでした: Addison Phillips, Aharon Lanin, Alan Stearns, Ambrose Li, Arnold Schrijver, Arye Gittelman, Ayman Aldahleh, Ben Errez, Bert Bos, Chris Lilley, Chris Pratley, Chris Thrasher, Chris Wilson, Dave Hyatt, David Baron, Emilio Cobos Álvarez, Eric LeVine, Etan Wexler, Frank Tang, Håkon Wium Lie, IM Mincheol, Ian Hickson, James Clark, Javier Fernandez, John Daggett, Jonathan Kew, Ken Lunde, Laurie Anna Edlund, Marcin Sawicki, Martin Dürst, Martin Heijdra, Masafumi Yabe, Masayasu Ishikawa, Michael Jochimsen, Michel Suignard, Mike Bemford, Myles Maxfield, Nat McCully, Paul Nelson, Pierre-Anthony Lemieux, Rahul Sonnad, Randy Edmunds, Richard Ishida, Shinyu Murakami, Stephen Deach, Steve Zilles, Takao Suzuki, Tantek Çelik, Xidorn Quan, Yaniv Feinberg。

変更点

この草案は [CSS-TEXT-3] と同期して維持されています。CSS Text 3 § Changesを参照してください。
レベル 4 固有の変更点を以下に示します。

2024 年 5 月 29 日の作業草案以降の重要な変更点は次のとおりです:

2024 年 2 月 19 日の作業草案以降の重要な変更点は次のとおりです:

2023 年 10 月 20 日の作業草案以降の重要な変更点は次のとおりです:

2023 年 3 月 29 日の作業草案以降の重要な変更点は次のとおりです:

2023 年 3 月 1 日の作業草案以降の重要な変更点は次のとおりです:

2022 年 12 月 31 日の作業草案以降の重要な変更点は次のとおりです:

2022 年 5 月 5 日の作業草案以降の重要な変更点は次のとおりです:

2019 年の作業草案以降の重要な変更点は次のとおりです:

レベル 3 以降の追加

レベル 4 の新機能:

適合性

文書の慣例

適合性要件は、記述的な表明と RFC 2119 の用語の組み合わせによって表現されます。この文書の規範的部分における “MUST”、 “MUST NOT”、 “REQUIRED”、 “SHALL”、 “SHALL NOT”、 “SHOULD”、 “SHOULD NOT”、 “RECOMMENDED”、 “MAY”、および “OPTIONAL” というキーワードは、 RFC 2119 で説明されるように解釈されます。 ただし、読みやすさのため、 この仕様ではこれらの語はすべて大文字では表示されません。

この仕様のすべてのテキストは、 非規範的であると明示的に示された節、例、および注を除き、規範的です。 [RFC2119]

この仕様の例は、“for example” という語で導入されるか、 次のように class="example" によって 規範的テキストから分離されます:

これは参考情報としての例の一例です。

参考情報の注は “Note” という語で始まり、 次のように class="note" によって 規範的テキストから分離されます:

Note, これは参考情報としての注です。

助言は、特別な注意を促すようにスタイル付けされた規範的な節であり、 次のように <strong class="advisement"> によって 他の規範的テキストから分離されます: UA はアクセシブルな代替を提供しなければなりません。

適合クラス

この仕様への適合性は、 3 つの適合クラスについて定義されます:

スタイルシート
CSS スタイルシート
レンダラー
スタイルシートの意味を解釈し、 それらを使用する文書を描画する UA
オーサリングツール
スタイルシートを書く UA

スタイルシートは、 このモジュールで定義された構文を使用するすべての文が、 汎用 CSS 文法およびこのモジュールで定義された各機能の個別文法に従って妥当である場合、 この仕様に適合します。

レンダラーは、適切な仕様で定義されるように スタイルシートを解釈することに加えて、 この仕様で定義されるすべての機能を正しく解析し、 それに応じて文書を描画することでサポートする場合、 この仕様に適合します。ただし、デバイスの制限により UA が文書を正しく描画できないことは、 その UA を非適合にはしません。(たとえば、UA は モノクロモニター上で色を描画することを要求されません。)

オーサリングツールは、 汎用 CSS 文法およびこのモジュール内の各機能の個別文法に従って 構文的に正しいスタイルシートを書き、 かつこのモジュールで説明されるスタイルシートのその他すべての適合性要件を満たす場合、 この仕様に適合します。

部分的実装

著者が前方互換の解析規則を利用して フォールバック値を割り当てられるようにするため、 CSS レンダラーは、利用可能なサポートレベルを持たない 任意の @ 規則、プロパティ、プロパティ値、キーワード、 およびその他の構文構造を、無効として扱い(かつ 適切に 無視しなければなりません。特に、ユーザーエージェントは、 単一の複数値プロパティ宣言内で、 サポートされない構成値を選択的に無視し、サポートされる値を尊重してはなりません: いずれかの値が無効と見なされる場合 (サポートされない値はそうでなければなりません)、 CSS は宣言全体を無視することを要求します。

不安定機能および独自機能の実装

将来の安定した CSS 機能との衝突を避けるため、 CSSWG は、CSS の 不安定な機能および 独自拡張の実装について、 ベストプラクティスに従うことを推奨します。

非実験的実装

仕様が勧告候補段階に達すると、 非実験的実装が可能になり、実装者は、 仕様に従って正しく実装されていることを示せる任意の CR レベル機能について、 接頭辞なしの実装を公開すべきです。

実装間での CSS の相互運用性を確立し維持するため、 CSS ワーキンググループは、非実験的な CSS レンダラーが、任意の CSS 機能の接頭辞なし実装を公開する前に、 実装報告書(および必要であれば、その実装報告書で使用したテストケース)を W3C に提出することを求めています。W3C に提出されたテストケースは、 CSS ワーキンググループによるレビューおよび修正の対象となります。

テストケースおよび実装報告書の提出に関する詳細情報は、 CSS ワーキンググループの Web サイト https://www.w3.org/Style/CSS/Test/ にあります。 質問は public-css-testsuite@w3.org メーリングリスト宛てに送ってください。

索引

この仕様で定義される用語

参照によって定義される用語

参考文献

規範的参考文献

[CSS-BACKGROUNDS-3]
Elika Etemad; Brad Kemper. CSS Backgrounds and Borders Module Level 3. 2024 年 3 月 11 日. CRD. URL: https://www.w3.org/TR/css-backgrounds-3/
[CSS-BOX-4]
Elika Etemad. CSS Box Model Module Level 4. 2024 年 8 月 4 日. WD. URL: https://www.w3.org/TR/css-box-4/
[CSS-BREAK-4]
Rossen Atanassov; Elika Etemad. CSS Fragmentation Module Level 4. 2018 年 12 月 18 日. FPWD. URL: https://www.w3.org/TR/css-break-4/
[CSS-CASCADE-5]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. CSS Cascading and Inheritance Level 5. 2022 年 1 月 13 日. CR. URL: https://www.w3.org/TR/css-cascade-5/
[CSS-COLOR-HDR-1]
Chris Lilley. CSS Color HDR Module Level 1. 2026 年 3 月 3 日. WD. URL: https://www.w3.org/TR/css-color-hdr-1/
[CSS-DISPLAY-3]
Elika Etemad; Tab Atkins Jr.. CSS Display Module Level 3. 2023 年 3 月 30 日. CR. URL: https://www.w3.org/TR/css-display-3/
[CSS-DISPLAY-4]
Elika Etemad; Tab Atkins Jr.. CSS Display Module Level 4. 2025 年 11 月 6 日. WD. URL: https://www.w3.org/TR/css-display-4/
[CSS-FONTS-3]
John Daggett; Myles Maxfield; Chris Lilley. CSS Fonts Module Level 3. 2018 年 9 月 20 日. REC. URL: https://www.w3.org/TR/css-fonts-3/
[CSS-FONTS-4]
Chris Lilley. CSS Fonts Module Level 4. 2026 年 4 月 22 日. WD. URL: https://www.w3.org/TR/css-fonts-4/
[CSS-INLINE-3]
Elika Etemad. CSS Inline Layout Module Level 3. 2024 年 12 月 18 日. WD. URL: https://www.w3.org/TR/css-inline-3/
[CSS-OVERFLOW-3]
Elika Etemad; Florian Rivoal. CSS Overflow Module Level 3. 2025 年 10 月 7 日. WD. URL: https://www.w3.org/TR/css-overflow-3/
[CSS-OVERFLOW-4]
David Baron; Florian Rivoal; Elika Etemad. CSS Overflow Module Level 4. 2023 年 3 月 21 日. WD. URL: https://www.w3.org/TR/css-overflow-4/
[CSS-PSEUDO-4]
Elika Etemad; Alan Stearns. CSS Pseudo-Elements Module Level 4. 2025 年 6 月 27 日. WD. URL: https://www.w3.org/TR/css-pseudo-4/
[CSS-RUBY-1]
Elika Etemad; et al. CSS Ruby Annotation Layout Module Level 1. 2022 年 12 月 31 日. WD. URL: https://www.w3.org/TR/css-ruby-1/
[CSS-SIZING-3]
Tab Atkins Jr.; Elika Etemad. CSS Box Sizing Module Level 3. 2021 年 12 月 17 日. WD. URL: https://www.w3.org/TR/css-sizing-3/
[CSS-TEXT-3]
Elika Etemad; Koji Ishii; Florian Rivoal. CSS Text Module Level 3. 2024 年 9 月 30 日. CRD. URL: https://www.w3.org/TR/css-text-3/
[CSS-TEXT-4]
Elika Etemad; et al. CSS Text Module Level 4. 2024 年 5 月 29 日. WD. URL: https://www.w3.org/TR/css-text-4/
[CSS-VALUES-3]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 3. 2024 年 3 月 22 日. CRD. URL: https://www.w3.org/TR/css-values-3/
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 4. 2024 年 3 月 12 日. WD. URL: https://www.w3.org/TR/css-values-4/
[CSS-WRITING-MODES-3]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 3. 2019 年 12 月 10 日. REC. URL: https://www.w3.org/TR/css-writing-modes-3/
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 4. 2019 年 7 月 30 日. CR. URL: https://www.w3.org/TR/css-writing-modes-4/
[CSS2]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 2011 年 6 月 7 日. REC. URL: https://www.w3.org/TR/CSS2/
[CSS3-BREAK]
Rossen Atanassov; Elika Etemad. CSS Fragmentation Module Level 3. 2018 年 12 月 4 日. CR. URL: https://www.w3.org/TR/css-break-3/
[CSS3-FLEXBOX]
Elika Etemad; Tab Atkins Jr.; Rossen Atanassov. CSS Flexible Box Layout Module Level 1. 2025 年 10 月 14 日. CRD. URL: https://www.w3.org/TR/css-flexbox-1/
[CSSOM-1]
Daniel Glazman; Emilio Cobos Álvarez. CSS Object Model (CSSOM). 2021 年 8 月 26 日. WD. URL: https://www.w3.org/TR/cssom-1/
[HTML]
Anne van Kesteren; et al. HTML Standard. Living Standard. URL: https://html.spec.whatwg.org/multipage/
[INFRA]
Anne van Kesteren; Domenic Denicola. Infra Standard. Living Standard. URL: https://infra.spec.whatwg.org/
[MATHML-CORE]
David Carlisle; Frédéric Wang. MathML Core. 2025 年 6 月 24 日. CR. URL: https://www.w3.org/TR/mathml-core/
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. 1997 年 3 月. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119
[UAX11]
Ken Lunde 小林剣. East Asian Width. 2025 年 7 月 24 日. Unicode Standard Annex #11. URL: https://www.unicode.org/reports/tr11/tr11-44.html
[UAX14]
Robin Leroy. Unicode Line Breaking Algorithm. 2025 年 9 月 5 日. Unicode Standard Annex #14. URL: https://www.unicode.org/reports/tr14/tr14-55.html
[UAX24]
Ken Whistler. Unicode Script Property. 2025 年 7 月 31 日. Unicode Standard Annex #24. URL: https://www.unicode.org/reports/tr24/tr24-39.html
[UAX29]
Josh Hadley. Unicode Text Segmentation. 2025 年 8 月 17 日. Unicode Standard Annex #29. URL: https://www.unicode.org/reports/tr29/tr29-47.html
[UAX44]
Ken Whistler. Unicode Character Database. 2025 年 8 月 27 日. Unicode Standard Annex #44. URL: https://www.unicode.org/reports/tr44/tr44-36.html
[UAX50]
Ken Lunde 小林剣; Koji Ishii 石井宏治. Unicode Vertical Text Layout. 2025 年 7 月 24 日. Unicode Standard Annex #50. URL: https://www.unicode.org/reports/tr50/tr50-33.html
[UAX9]
Manish Goregaokar मनीष गोरेगांवकर; Robin Leroy. Unicode Bidirectional Algorithm. 2025 年 8 月 13 日. Unicode Standard Annex #9. URL: https://www.unicode.org/reports/tr9/tr9-51.html
[UNICODE]
The Unicode Standard. URL: https://www.unicode.org/versions/latest/

非規範的参考文献

[BCP47]
A. Phillips, Ed.; M. Davis, Ed.. Tags for Identifying Languages. 2009 年 9 月. Best Current Practice. URL: https://www.rfc-editor.org/rfc/rfc5646
[CLREQ]
Fuqiao Xue; Richard Ishida. Requirements for Chinese Text Layout - 中文排版需求. 2026 年 5 月 3 日. DNOTE. URL: https://www.w3.org/TR/clreq/
[CSS-TEXT-DECOR-3]
Elika Etemad; Koji Ishii. CSS Text Decoration Module Level 3. 2022 年 5 月 5 日. CRD. URL: https://www.w3.org/TR/css-text-decor-3/
[DOM]
Anne van Kesteren. DOM Standard. Living Standard. URL: https://dom.spec.whatwg.org/
[ILREQ]
Swaran Lata. Indic Layout Requirements. 2020 年 5 月 29 日. WD. URL: https://www.w3.org/TR/ilreq/
[ISO15924]
Code for the representation of names of scripts.. 1998. ISO 15924:1998. Draft International Standard.
[JIS4051]
Formatting rules for Japanese documents (日本語文書の組版方法).. 2004. JIS X 4051:2004. In Japanese.
[JLREQ]
Hiroyuki Chiba; et al. Requirements for Japanese Text Layout 日本語組版処理の要件(日本語版). 2020 年 8 月 11 日. NOTE. URL: https://www.w3.org/TR/jlreq/
[JUSTIFY]
Elika Etemad; Richard Ishida. Approches to Full Justification. URL: https://www.w3.org/International/articles/typography/justification
[L2-22-080R]
Norbert Lindenberg; Elika Etemad; Vaishnavi Murthy Yerkadithaya. Line breaking at orthographic syllable boundaries. Proposal. URL: https://www.unicode.org/L2/L2022/22080r-line-break-ortho-bnd.pdf
[RFC6919]
R. Barnes; S. Kent; E. Rescorla. Further Key Words for Use in RFCs to Indicate Requirement Levels. 2013 年 4 月 1 日. Experimental. URL: https://www.rfc-editor.org/rfc/rfc6919
[TYPOGRAPHY]
Richard Ishida. Language enablement index. 2024 年 11 月 15 日. DNOTE. URL: https://www.w3.org/TR/typography/
[XML10]
Tim Bray; et al. Extensible Markup Language (XML) 1.0 (Fifth Edition). 2008 年 11 月 26 日. REC. URL: https://www.w3.org/TR/xml/
[ZHMARK]
General Rules for Punctuation (《标点符号用法》).. 2011. GB/T 15834―2011. In Chinese..

プロパティ索引

名前 初期値 適用対象 継承 % アニメーション型 正規順序 算出値
hanging-punctuation none | [ first || [ force-end | allow-end ] || last ] none テキスト する 該当なし 離散 文法に従う 指定されたキーワード
hyphenate-character auto | <string> auto テキスト する 該当なし 離散 文法に従う 指定されたキーワード
hyphenate-limit-chars [ auto | <integer> ]{1,3} auto テキスト する 該当なし 算出値型による 文法に従う 3 つの値。それぞれ auto キーワードまたは整数
hyphenate-limit-last none | always | column | page | spread none ブロックコンテナー する 該当なし 離散 文法に従う 指定されたキーワード
hyphenate-limit-lines no-limit | <integer> no-limit ブロックコンテナー する 該当なし 算出値型による 文法に従う 指定されたキーワードまたは整数
hyphenate-limit-zone <length-percentage> 0 ブロックコンテナー する ラインボックスの長さを参照 算出値型による 文法に従う 算出された <length-percentage> 値
hyphens none | manual | auto manual テキスト する 該当なし 離散 該当なし 指定されたキーワード
letter-spacing normal | <length-percentage> normal インラインボックスおよびテキスト する 使用値の font-size に相対 算出値型による 該当なし 絶対長および/またはパーセンテージ
line-break auto | loose | normal | strict | anywhere auto テキスト する 該当なし 離散 該当なし 指定されたキーワード
line-padding <length> 0 インラインボックス する 該当なし 算出値型による 文法に従う 絶対長
overflow-wrap normal | break-word | anywhere normal テキスト する 該当なし 離散 該当なし 指定されたキーワード
tab-size <number [0,∞]> | <length [0,∞]> 8 テキスト する 該当なし 算出値型による 該当なし 指定された数値または絶対長
text-align start | end | left | right | center | <string> | justify | match-parent | justify-all start ブロックコンテナー する 個々のプロパティを参照 離散 該当なし 個々のプロパティを参照
text-align-all start | end | left | right | center | <string> | justify | match-parent start ブロックコンテナー する 該当なし 離散 該当なし match-parent は上で定義されたとおりに算出される点を除き、指定されたキーワード
text-align-last auto | start | end | left | right | center | justify | match-parent auto ブロックコンテナー する 該当なし 離散 該当なし match-parent は上で定義されたとおりに算出される点を除き、指定されたキーワード
text-autospace normal | <autospace> | auto normal テキスト する 該当なし 離散 文法に従う 指定されたキーワード
text-group-align none | start | end | left | right | center none ブロックコンテナー しない 該当なし 離散 文法に従う 指定されたキーワード
text-indent [ <length-percentage> ] && hanging? && each-line? 0 ブロックコンテナー する ブロックコンテナー自身のインライン軸の内側サイズを参照 算出値型による 文法に従う 算出された <length-percentage> 値と、指定された任意のキーワード
text-justify [ auto | none | inter-word | inter-character | ruby ] || no-compress auto テキスト する 該当なし 離散 該当なし 指定されたキーワード(distribute 旧来値を除く)
text-spacing none | auto | <spacing-trim> || <autospace> 個々のプロパティを参照 テキスト する 該当なし 離散 文法に従う 指定されたキーワード
text-spacing-trim <spacing-trim> | auto normal テキスト する 該当なし 離散 文法に従う 指定されたキーワード
text-transform none | [capitalize | uppercase | lowercase ] || full-width || full-size-kana | math-auto none テキスト する 該当なし 離散 該当なし 指定されたキーワード
text-wrap <'text-wrap-mode'> || <'text-wrap-style'> wrap 個々のプロパティを参照 個々のプロパティを参照 個々のプロパティを参照 個々のプロパティを参照 文法に従う 個々のプロパティを参照
text-wrap-mode wrap | nowrap wrap テキスト する 該当なし 離散 文法に従う 指定されたキーワード
text-wrap-style auto | balance | stable | pretty | avoid-orphans auto インライン整形コンテキストを確立するブロックコンテナー する 該当なし 離散 文法に従う 指定されたキーワード
white-space normal | pre | pre-wrap | pre-line | <'white-space-collapse'> || <'text-wrap-mode'> || <'white-space-trim'> normal テキスト 個々のプロパティを参照 該当なし 離散 該当なし 指定されたキーワード
white-space-collapse collapse | discard | preserve | preserve-breaks | preserve-spaces | break-spaces collapse テキスト する 該当なし 離散 文法に従う 指定されたキーワード
white-space-trim none | discard-before || discard-after || discard-inner none インラインボックスおよびブロックコンテナー しない 該当なし 離散 文法に従う 指定されたキーワード
word-break normal | break-all | keep-all | manual | auto-phrase | break-word normal テキスト する 該当なし 離散 該当なし 指定されたキーワード
word-space-transform none | [ space | ideographic-space ] && auto-phrase? none テキスト する 該当なし 離散 文法に従う 指定どおり
word-spacing normal | <length-percentage> normal テキスト する 使用値の font-size に相対 算出値型による 該当なし 絶対長および/またはパーセンテージ
wrap-after auto | avoid | avoid-line | avoid-flex | line | flex auto インラインレベルボックスおよび flex アイテム しない 該当なし 離散 文法に従う 指定されたキーワード
wrap-before auto | avoid | avoid-line | avoid-flex | line | flex auto インラインレベルボックスおよび flex アイテム しない 該当なし 離散 文法に従う 指定されたキーワード
wrap-inside auto | avoid auto インラインボックス しない 該当なし 離散 文法に従う 指定されたキーワード

課題索引

この節はまだ議論中であり、将来の草案で変更される可能性があります。
これは行分割機会を保持するのでしょうか、それとも保持しないのでしょうか? 別個の "hide" 値が必要でしょうか? 行分割機会を保持するなら、 word-space-transform 値で置き換えるべきかもしれません。
white-space-collapse: preserve-spaces ではここで何が起こるべきでしょうか?
これを Level 4 で定義すべきでしょうか?
CSSWG は avoid-orphans のより良い名前を探しています。
スレッドを参照してください。 課題は、行に最小長を要求することに関するものです。 一般的な尺度は次のようです:

値空間の提案は match-indent | <length> | <percentage> です(そのユースケースを明確にする例として Xch が示されています)。 あるいは、<integer> が実際に文字数を数えてもよいでしょう。

これがテキスト均衡(上記)とどのように相互作用するかは不明です。 以前の提案の 1 つでは、それらは同じプロパティでした (100% が完全な均衡を意味する)。

単語ベースの制限も求められていますが、 これは実際には単語の長さに依存するため、文字ベースの方がよいです。

あるいは、この値は normal ではなく keep-all に基づくこともできます。 さらに別の変種は、この挙動を keep-all と統合することです。
hyphenate-limit-zone は良い名前でしょうか? コメント/提案はありますか?
overflow-wrap: normal によって許可されるように keep-all および auto-phrase 制約の緩和を オプトアウトするために、 overflow-wrapnone 値を追加する必要がありますか?
これは、揃え文字の中心を揃えるべきだと言っているのでしょうか? そのように書かれているかは明確ではありませんが、 異なる出現箇所の揃え文字が 異なるフォントにある場合に何が起こるかを説明するため、 それ(または別の挙動)を指定する必要があります。 (さらに、それは意図された挙動でしょうか? おそらく考慮すべき最も重要なユースケースは 太字と非太字のテキストであり、 これは幅がわずかに異なるだけです。) [フィードバック] [minutes face-to-face 2016-02-02 10:00 AM]
これは、揃え文字を検索する対象テキストを指定する必要があります。 セルを包含ブロックとする in-flow テキストだけでしょうか? それとも、セルによって確立されるブロック整形コンテキスト内の 任意の in-flow 子孫内のテキストも考慮されるのでしょうか? もしそうなら、その text-align プロパティが セルのものと整合している限りにおいてのみ考慮されるのでしょうか? (揃え文字における整合性か、完全な整合性か?)
この、揃え文字がセルの内容の末尾に挿入されたかのように揃える挙動は、 文字中心の揃えと組み合わさることで、 <string> テキスト配置を持つ行が単独で 1 行にある場合、 列内のどの行も揃え文字を持たない場合、 または、より重要なことに、いくつかの行は揃え文字を持つが、 その列が max-content 幅でレイアウトされていない場合に、 行の終端側に隙間を生成します。 これはおそらく望ましくありません。
揃え文字が内容の末尾に挿入されるとき、 どのフォントが使用されるのでしょうか? (特に、揃え文字が子孫ブロック内にあり得る場合、 それはブロックのフォントでしょうか、それとも表セルのフォントでしょうか? または、挿入がインライン内の強制分割位置で行われる場合、 インラインのフォントを使用するのでしょうか、それともブロックまたはセルのフォントでしょうか?)
これは、文字揃えが min-content および max-content の内在幅 (表列、および表列内に入り得るすべての内容の)にどのように影響するかについて、 形式的な定義を持つべきです。 max-content 内在幅は、 3 つの数値に分割される必要があります (揃え文字の中心が揃えられると仮定した場合): 1 つは揃え文字を持たない幅、 1 つは揃え文字の中心のインライン始端側の幅、 1 つは揃え文字の中心のインライン終端側の幅です。 これは max-content 幅について、 強制分割の間にあるすべてのテキストセグメントに基づいて動作します。 min-content 幅については、 その内部に任意分割を含む強制分割間のテキストセグメントは、 明らかに揃え文字なし幅にのみ寄与すべきです。 しかし、すべての min-content 幅がこのように機能すべきか、 それとも任意分割を持たない強制分割間のセグメント (おそらく実際に揃え文字を含むものだけ)が、 代わりに揃え文字の始端側および終端側の min-content 幅に寄与すべきかは、 あまり明確ではありません。 この選択は、表の min-content サイズ決定が最も狭い合理的なサイズを意味することと、 より多くの場合に揃え文字を尊重することとの間のトレードオフです。 別の選択肢として、任意分割での行分割が許可されるかどうかを、 どちらの挙動を使用するかの制御に用いることも考えられます。
<string> 値の text-align を持つ 列またぎセルの内在幅寄与を形式的に定義することは、 列をまたがないセルの内在幅寄与について行われた決定を 複雑ではあるものの単純に拡張するものです。 これも形式的に定義されるべきです。 寄与は、揃えに使用される最始端または最終端の列の 分割された内在幅に対して行われ、 その他のまたがれた列の揃え文字なし内在幅にも行われます。
このキーワードは以前 text-spacing の一部でした。 今ここに置かれたので、より具体的にするために改名が必要かもしれません。 たとえば U+0020 は圧縮できない、という含意を持つためです。 [Issue #7079]
このプロパティの変種は継承され、 各ブロックコンテナーに個別に適用され、 そのブロックの直接の子であるラインボックスにのみ影響します。 これは有用性は低いですが、おそらく実装は容易です。
同じブロックコンテナーに由来する float も 同じ量だけ何らかの方法で移動できれば、 より美しく揃うでしょう。 これは CJK レイアウトで特に有用です。 それが正確にどのように機能するか、 および祖先要素から侵入する float とどのように相互作用するかは、 読者への課題として残されています。
auto は必要でしょうか? 著者が最初の行の先頭で プラットフォーム依存の挙動を選ぶのは奇妙であり、 それ以外では trim-both を使用すべきです。
クラスと Unicode コードポイントは検討中であり、 Unicode へのより最近の追加に対応するには、少なくともいくつかの変更が必要です。 [Issue #9503]