“CSS Text Module”

概要

“CSS Text Module”はCSSにおけるテキストの組版、レイアウトについて定義している仕様書です。

改行、テキストの揃え方、ホワイトスペースの処理などによってソースコードにあるテキストを整形されて折り返されたテキストにする方法ついて定義されています。

仕様書

定義されているプロパティ

text-transform
white-space
tab-size
word-break
line-break
hyphens
overflow-wrap
word-wrap
text-align
text-align-all
text-align-last
text-justify
word-spacing
letter-spacing
text-indent
hanging-punctuation
word-boundry-detection
word-boundry-expansion
text-space-collapse
text-space-trim
wrap-before
wrap-after
wrap-inside
hyphenate-character
hyphenate-limit-zone
hyphenate-limit-chars
hyphenate-limit-lines
hyphenate-limit-last
text-group-align
line-padding
text-spacing

言語と組版

多くの組版の手法は言語的な文脈によってその方法が異なり、テキストに使用される言語や表記体系はライン・ブレイクやハイフネーション、両端揃えなどをどのようにして行うかに影響を与えます。CSSでは言語特有の組版の手法は“コンテント言語(Content Language)”がわかっている場合にだけ適用されます。要素のコンテント言語は文書言語の規則に則った方法で宣言されたその要素が含まれる人間の言語です。

要素が含まれるコンテント言語は、言語の特定の表記方法 (“コンテント表記体系(Content Writing System)”)を識別するのためにも使用されます。コンテント表記体系の情報が明示されるのか暗黙的に認識されるのかは文書言語におけるコンテント言語の識別方法によって異なります。

表記体系の識別

多くの言語はその言語を表記するための望ましい表記体系がありますが、言語によっては複数の表記体系があったり、他の言語の表記体系で書き換えることが可能であったりします。例えば、多くの言語はラテン文字による書き換えであり、日本語のローマ字や中国語の拼音もこの例に該当します。一般的に書き換えられた表記は書き換え後の表記体系の組版の慣習にしたがって表記されますが、現代の中国語のように分かち書きされない朝鮮語の漢字表記など、そうでない例もあります。

HTMLなどのBCP47で定義されたタグでコンテント言語を宣言する文書言語では、下位タグによって表記体系を明示することができます。例えば、本来ラテン文字で表記されない言語の表記体系を示す場合は、“ja-Latn(日本語のローマ字)”のように表すことができます。

しかし、単一の表記体系に強く結びついている言語の場合、一般的には下位タグによって表記体系を明示することはしません。代わりに、他の表記体系を明示しないことで暗黙的にその表記体系であることが示されることが望まれます。表記体系が明示されない場合、ユーザー・エージェントは宣言されたコンテント言語でもっとも一般的な表記体系から推測して言語特有の組版の慣習に則って求められています。ただし、別の表記体系が明示されている場合は除きます。もし、ユーザー・エージェントが特定の言語と表記体系の組み合わせた時の組版の慣習についての情報を持たない場合は、言語の慣習ではなく、表記体系の慣習に則って組版を行うことが求められています。

言語とそれぞれのもっとも一般的な表記体系の組み合わせについての完全な定義は“CSS Text Module”ではしていませんが、ユーザー・エージェントは少なくとも以下の規則に則って表記体系を推測しなければなりません。

• コンテント言語が中国語で表記体系が明示されない場合、もしくはコンテント言語にかかわらず表記体系が“Hant”、“Hans”、“Hani”、“Hanb”か“Bopo”のいずれかである場合、表記体系は中国語です。
• コンテント言語が日本語で表記体系が明示されない場合、もしくはコンテント言語にかかわらず表記体系が“Jpan”、“Hrkt”、“Hira”か“Kana”のいずれかである場合、表記体系は日本語です。
• コンテント言語が朝鮮語で表記体系が明示されない場合、もしくはコンテント言語にかかわらず表記体系が“Kore”、“Hang”、“Jamo”のいずれかである場合、表記体系は朝鮮語です。
• コンテント言語が不明であるか不明な表記体系が明示されている場合、表記体系は不明です。

より高い品質でテキストを整形するためには文書の制作者はテキストの言語的な文脈を正しくユーザー・エージェントに伝える必要があります。なお、要素は必ずしもコンテント言語に含まれるわけではありません。例えば、タグ付けされていないコンテンツや言語をタグ付けする方法を持たない文書言語で記述されたコンテンツなどはコンテント言語が不明となります。

制御文字

タブ文字(U+0009)と行送り(U+000A)、復帰(U+000D)を除くUnicodeの仕様の汎用カテゴリ“Cc(Control)”に分類される制御文字については使用されるフォントにその制御文字を表す視覚可能なグリフがなければユーザー・エージェントはフォントに用意されている代替のグリフの使用や図形表現、その他何らかの手段によって視覚可能な字として表示しなければなりません。そうでなければ、Unicodeの仕様の汎用カテゴリ“So(Other Symbol)”に分類される記号と同様に扱われます。

なお、復帰(U+000D)については常に半角スペース(U+0020)と同じように扱われます。

セグメント・ブレイク

CSSで処理される際、文書の記述言語で定義された改行方法は“セグメント・ブレイク(Segment break)”として扱われます。

HTMLの場合は以下の文字が改行として扱われます。

なお、これらの文字は通常文書がCSSで処理される前にユーザー・エージェントによってパースされる時に行送り(U+000A)に置き換えられます。

ホワイトスペース

多くの場合、HTMLなどの文書のソースコードにはコードの見栄えを整えて編集しやすくするためのスペースやタブ文字、改行などが挿入されますが、このような実際に文書が描画される時に必要ない文字は“ホワイトスペース(White space)”と呼ばれます。

別途定義されていなければ、CSSでのホワイトスペースの処理は“ドキュメント・ホワイトスペース(Document White Space)”として扱われる以下の文字に加えて、セグメント・ブレイクのみが対象となります。

その他のスペース・セパレータ

以下のユニコードに含まれる空白文字は“ホワイトスペース”には含まれませんが、“その他のスペース・セパレータ(Other space separators)”として定義されています。

ホワイトスペースの処理

ホワイトスペースの折り畳みと置き換え

はじめに、インライン整形コンテキストに含まれるインライン・レベルのホワイトスペースは下記の処理が行われます。この処理はライン・ブレイク処理と双方向(bidi)のテキストの並べ替えの前に行われます。

“white-space”プロパティの値が“normal”、“nowrap”、“pre-line”のいずれかである場合、ホワイトスペースは折り畳み可能と判断され、以下の手順で処理されます。

1. セグメント・ブレイクの直前、もしくは直後にある連続する半角スペース(U+0020)とタブ文字(U+0009)は取り除かれます。
2. 次に、セグメント・ブレイクの処理(詳細は次項)が行われます。
3. 次に、タブ文字はすべて折り畳み可能な半角スペースに置き換えられます。
4. 次に、別の折り畳み可能な半角スペース直後にある折り畳み可能な半角スペースは送り幅が“0”になるように折り畳まれます。

“white-space”プロパティの値が“pre”、“pre-wrap”、“break-spaces”のいずれかである場合、すべての連続する半角スペースは連続するノーブレーク・スペースとして扱われます。ただし、“pre-wrap”の場合は連続する半角スペースとタブ文字の後にソフト・ラップの機会があります。また、“break-spaces”の場合はすべての半角スペースとタブ文字の後にソフト・ラップの機会があります。

セグメント・ブレイクの処理

“white-space”プロパティの値が“pre”、“pre-wrap”、“break-spaces”、“pre-line”のいずれかである場合、セグメント・ブレイクは折り畳まれず、温存される行送り(U+000A)に置き換えられます。

“white-space”プロパティの値が上記以外の場合はセグメント・ブレイクは折り畳みが可能であり、次の手順で処理されます。

1. 別のセグメント・ブレイクの直後にあるセグメント・ブレイクは取り除かれます。
2. 次に、残るすべてのセグメント・ブレイクは前後の文脈に応じて半角スペースに置き換えられるか取り除かれます。

セグメント・ブレイクを半角スペースに置き換えるか取り除くかはユーザー・エージェントによって判断されます。歴史的にはセグメント・ブレイクは常に半角スペースに置き換えられてきましたが、言語によってはこのように取り扱うと文章が不自然になるのでユーザー・エージェントはテキストの性質に応じて処理方法を変えるように求められています。

ホワイトスペースの整理と配置

インライン・レベルのコンテンツは“white-space”プロパティによって指定されたライン・ブレイク処理と双方向(bidi)のテキストの並べ替えを行いながら、次のように行に配置されます。

1. 行の最初にある折り畳み可能な半角スペースは取り除かれます。
2. “tab-size”プロパティによって指定されるタブ・サイズが“0”である場合、温存されるタブ文字は表示されません。そうでなければ温存されるタブ文字はその次にある文字を次のタブ・ストップに揃えるために移動させます。この移動の距離が“0.5ch”未満である場合は代わりにその後続のタブ・ストップに揃えられます。
3. 行の最後にある連続する折り畳み可能な半角スペースは取り除かれます。また、“white-space”プロパティの値が“normal”、“nowrap”、“pre-line”のいずれかである場合、最後にあるオガム文字のスペース(U+1680)も取り除かれます。
4. 連続するホワイトスペースやその他のスペース・セパレータ、温存されるタブ文字が行の最後に残っていれば、“white-space”プロパティの値によってぶら下げや折り畳みが行われます。
   • 行の最初にある折り畳み可能な半角スペースは取り除かれます。
   • “normal”、“nowrap”、“pre-line”のいずれかの場合、連続するこれらの文字は無条件にぶら下げられます。
   • “pre-wrap”の場合、連続するこれらの文字は強制ライン・ブレイクが直後にある場合を除き、ぶら下げられます。強制ライン・ブレイクが直後にある場合は条件付のぶら下げを行うか、折り畳みます。
   • “break-spaces”の場合、半角スペースやタブ文字、その他のスペース・セパレータは他の視覚可能な文字と同じように扱われ、ぶら下げや折り畳みは行われません。

“タブ・ストップ(Tab Stop)”は温存されるタブ文字の最も近い祖先であるブロック・コンテナのコンテント・ボックスの端からタブ・サイズの整数倍の位置に生成されます。

ライン・ブレイク

インライン・レベルのコンテンツが行として配置される時、複数の行ボックスに分割されて配置されます。このことを“ライン・ブレイク(Line Break)”と呼び、分割についての規則を“改行規則(Line Breaking Rules)”と言います。

ライン・ブレイクには2種類あります。行が明示的な改行によって分割される場合や、ブロックの開始や終了によって行が分割されることは“強制ライン・ブレイク(Forced Line Break)”と言い、折り返しによって行が分割されることは“ソフト・ラップ・ブレイク(Soft Wrap Break)”と言います。

行の折り返しは“ソフト・ラップの機会(Soft Wrap Opportunity)”と呼ばれる折り返しが認められている箇所でのみ行われます。“white-space”プロパティの値が“pre”と“nowrap”以外である場合、ユーザー・エージェントは行を折り返すことで行から溢れるコンテンツを最小限にします。

英語などの多くの言語ではハイフネーションがされていない限り行の折り返しは単語と単語の間でのみ行われます。このような言語の多くはスペースや句読点によって単語同士が分割されていますが、タイ語やラオス語、クメール語など、明確に単語同士が分割されていない言語もあります。このような言語でソフト・ラップの機会が挿入される箇所を正しく識別されるにはユーザー・エージェントがその言語の語彙情報を利用して解析しなければなりません。

他の言語では音節と音節の間で行の折り返しが許容されます。ジャワ語やバリ語などはソフト・ラップの機会が挿入される箇所の識別には語彙情報を利用した解析が必要です。一方、日本語や中国語などは一部の文字の前後を除いて行の折り返しが許容され、組版の方法によって折り返しについての規則の厳密さが異なります。

日本語の改行規則

日本語ではどこで行を折り返すかを決める際に以下のような規則があります。これらの規則が守られるように字間を調整したり、文字を次の行へ送ったりすることで適切な箇所で改行が挿入されるようにユーザー・エージェントがテキストを処理します。

行の最初になってはいけない文字 (行頭禁則文字)

終わり括弧類：’ ” ） 〕 ］ ｝ 〉 》 」 』 】 ｠ 〙 〗 » 〟

ハイフン類：‐ 〜 ゠ –

区切り約物：！ ？ ‼ ⁇ ⁈ ⁉

中点類：・ ： ；

句点類：。 ．

読点類：、 ，

繰返し記号：ヽ ヾ ゝ ゞ 々 〻

長音記号：ー

小書きの仮名：ぁ ぃ ぅ ぇ ぉ ァ ィ ゥ ェ ォ っ ゃ ゅ ょ ゎ ゕ ゖ ッ ャ ュ ョ ヮ ヵ ヶ ㇰ ㇱ ㇲ ㇳ ㇴ ㇵ ㇶ ㇷ ㇸ ㇹ ㇺ ㇻ ㇼ ㇽ ㇾ ㇿ ㇷ゚

割注終わり括弧類：） 〕 ］

行の最後になってはいけない文字 (行末禁則文字)

始め括弧類： ‘ “ （ 〔 ［ ｛ 〈 《 「 『 【 ｟ 〘 〖 « 〝

割注始め括弧類：（ 〔［

途中で改行してはいけない箇所 (分離禁則)

連続する“—”、“…”、“‥”の間

“〳”、“〴”と“〵”の間

連続する数字の字間

前置省略記号(“￥”、“＃”や“№”など)と数字の間

数字と後置省略記号(“°”、“℃”や“％”など)の間

欧文の単語や単位記号の字間

グループルビを配置した文字列の字間

親文字と添え字の字間

特に日本語でこの規則通りに文字が配置されるようにするための処理のことを“禁則処理”と言います。禁則処理の方法は印刷物などの文書の組版を規定したJIS規格である“JIS X 4051”で示されており、CSSなどで求められる日本語文書の組版方法はこのJIS規格をもとにW3Cが策定した“Requirements for Japanese Text Layout”で定義されています。

なお、CSSではそれぞれの言語の改行規則については完全には定義されていませんが、一般的な行の折り返しを制御する“line-break”プロパティ、“word-break”プロパティ、“hyphens”プロパティ、“overflow-wrap”プロパティといったプロパティが定義されています。

ハイフネーション

“ハイフネーション(Hyphenation)”は通常は行の折り返しを行う時に分割することが認められていない単語を段落全体の見栄えを改善するために分割する方法です。通常ハイフネーションを行う場合、単語は音節や形態素の間で分割され、ハイフン(“‐”、U+2010)によって分割された箇所が示されます。どのようにハイフネーションを行うかについての規則は言語によって異なり、言語によってはハイフネーションによって単語の綴りが変化する場合があります。

ハイフネーションはテキストの視覚的な描画にだけ影響し、内部的なコンテンツ、テキストを選択してコピー・ペーストした時や検索する時はハイフネーションは反映されません。

ハイフネーションが認められる箇所は“ハイフネーションの機会(Hyphenation Opportunity)”と呼ばれます。ハイフネーションの機会は単語内にあるソフト・ラップの機会の一つであり、その箇所でライン・ブレイクが起きる場合にハイフネーションが行われます。ハイフネーションについての規則はCSSの仕様では定義されていませんが、“hyphens”プロパティによって制御することができます。

ハイフネーションの機会は“width”プロパティなどで内在的寸法を計算する時、“min-content”では考慮されます。

前述の通り、ハイフネーションが認められる箇所は音節の間だったり、形態素の間だったりと言語によって異なり、言語によってはハイフネーションによって単語の綴りが変化します。そのため、正しいハイフネーションが行われるためにはユーザー・エージェントがその言語の語彙情報を使用してどこでハイフネーションを行って良いか解析する必要があります。

ぶら下げ

“ぶら下げ(Hanging)”が行われる場合、行の最初、もしくは最後の文字は行のコンテンツを文字揃えする時にその大きさが考慮されません。場合によってはぶら下げられた文字は行ボックスの外側に表示されます。また、“width”プロパティなどで内在的寸法(“min-content”や“max-content”)を計算する時にも考慮されません。

ぶら下げられた文字は行ボックスに含まれるものとして扱われ、テキストの文字揃えに参加しますが、行ボックスに収まる量のコンテンツを測ったり、文字揃えを行う時にはその送り幅が考慮されません。ぶら下げられた文字は通常はインキ・オーバーフローとして扱われ、ぶら下げによってスクロールバーが表示されることを防ぎます。ただし、コンテンツが編集可能な場合など、ユーザーの利便性を高められるとユーザー・エージェントによって判断される場合はスクロール可能オーバーフローとして扱われることがあります。

行末にある文字は“条件付のぶら下げ(Conditional Hanging)”が行われる場合があり、そのような文字は文字揃えが行われる前に、その文字をぶら下げなければ行に収まらない場合にだけぶら下げが行われます。条件付のぶら下げが行われる文字は行に収まるコンテンツを測る時には考慮されませんが、一部でも行に収まらない部分があればぶら下げられます。条件付のぶら下げが行われる文字は、“width”プロパティなどで内在的寸法を計算する時、“min-content”ではその大きさが考慮されませんが、“max-content”では考慮されます。

ぶら下げ可能な文字と行の端の間にある幅が“0”でないボーダーやパディングはぶら下げを妨げます。

両端揃え

両端揃えにする場合、ユーザー・エージェントは行ボックスの中で余った部分をその行ボックスにあるコンテンツに分配して行ボックスがちょうど埋まるように調整します。ユーザー・エージェントは逆にコンテンツを詰めて通常なら収まらない量のコンテンツを行ボックスに収めることもできます。

両端揃えにする時に文字の間隔を調整することが認められる箇所は“両端揃えの機会(Justification Opportunity)”と呼ばれます。両端揃えの機会はワード・セパレータなどの文字や文字の組み合わせによって示されます。2つの文字の間に両端揃えの機会が挿入されるかはそれらの文字の共通の祖先ボックスの“text-justify”プロパティの値によって判断されます。

文字間の間隔の調整は“letter-spacing”プロパティ、単語間の間隔の調整は“word-spacing”プロパティによる間隔の調整と同じように行われ、両端揃えに伴って文字の間に挿入される空間は“letter-spacing”プロパティや“word-spacing”プロパティによって指定された文字間の距離に付け加えられます。

両端揃えの機会には優先順位がつけられる場合があります。同じ優先順位が与えられた両端揃えの機会はどの文字によって挿入されたものかに関係なく同じように扱われます。句読点や記号については基本的には他の一般の文字と同じように扱われますが、伝統的に両端揃えにする時の扱いが異なる句読点や記号もあり、ユーザー・エージェントはそのような文字の両端揃えの機会に異なる優先度を与えることができます。

ユーザー・エージェントは両端揃えにする際に任意である合字は分離や結合、もしくは使用されているフォントに用意された代替のグリフを使用することができます。ただし、必須の合字は分離することは認められず、そのような合字を分離しなければ両端揃えにできない場合にはユーザー・エージェントは両端揃えを無効としなければなりません。

アラビア文字のような続け書きにする文字の間には両端揃えによって空間を追加することはできません。カシーダなどによって文字を分離せずに引き延ばすことができない場合には両端揃えの機会はないものとして扱われます。

行に含まれるインライン・レベルのコンテンツが行ボックスの大きさいっぱいに引き延ばすことができない場合には“text-align-last”プロパティで指定された方法で揃えられます。“text-align-last”プロパティの値が“justify”の場合は“center”の場合と同じように扱われます。

ワード・セパレータ

“ワード・セパレータ(Word-separator characters)”は英語などで単語と単語を隔てるために置かれる欧文の半角スペース(“ ”、U+0020)のような、主に単語を隔てるために使用される文字です。

ユニコードには以下の文字がワード・セパレータとして含まれています。

プロパティ