このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

“CSS Text Module”

記事Aug.18th, 2021
CSS3でテキストの扱いについての仕様を定義した“CSS Text Module”について。

仕様書の概要

概要

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

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

用語など

制御文字

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

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

セグメント・ブレイク

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

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

ユニコード 名称 説明
U+000D CARRIAGE RETURN 復帰(CR)
U+000A LINE FEED 行送り(LF)
U+000DU+000A CARRIAGE RETURN + LINE FEED 復帰 + 行送り(CR+LF)

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

ホワイトスペース

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

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

ユニコード 名称 説明
U+0020 SPACE 半角スペース
U+0009 CHARACTER TABULATION タブ文字
U+000A LINE FEED 行送り

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

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

ユニコード 名称 説明
U+1680 OGHAM SPACE MARK オガム文字のスペース
U+2000 EN QUAD 1enの幅のスペース
U+2001 EM QUAD 1emの幅のスペース
U+2001 EN SPACE 1enの幅のスペース
U+2003 EM SPACE 1emの幅のスペース
U+2004 THREE-PER-EM SPACE 1/3emの幅のスペース
U+2005 FOUR-PER-EM SPACE 1/4emの幅のスペース
U+2006 SIX-PER-EM SPACE 1/6emの幅のスペース
U+2007 FIGURE SPACE 図形スペース
U+2008 PUNCTUATION SPACE 句読点スペース
U+2009 THIN SPACE 狭い幅のスペース
U+200A HAIR SPACE とても狭い幅のスペース
U+202F NARROW NO-BREAK SPACE 狭い幅のノーブレークスペース
U+205F MEDIUM MATHEMATICAL SPACE 数学用スペース
U+3000 IDEOGRAPHIC SPACE 全角スペース

ホワイトスペースの処理

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

はじめに、インライン整形コンテキストに含まれるインライン・レベルのホワイトスペースは下記の処理が行われます。この処理はライン・ブレイク処理と双方向(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”の場合と同じように扱われます。

定義されているCSSルール

プロパティ

プロパティ 説明
text-transform: テキストを大文字や小文字に置き換える
word-boundary-detection:
word-boundary-expansion:
white-space: ホワイトスペースの処理と行の折り返しの可否を指定する
text-wrap: 行の折り返しを指定する
wrap-before:
wrap-after:
wrap-inside:
tab-size:
text-space-collapse: ホワイトスペースの処理方法を指定する
text-space-trim:
word-break: 単語途中での改行を許容するかを指定する
line-break: 改行規則の適用方法を指定する
hyphens: ハイフネーションを行うかを指定する
hyphenate-character:
hyphenate-limit-zone:
hyphenate-limit-chars:
hyphenate-limit-lines:
hyphenate-limit-last:
hanging-punctuation:
overflow-wrap: 要素からはみ出してしまう単語を途中で改行するかを指定
word-wrap: 要素からはみ出してしまう単語を途中で改行するかを指定
letter-spacing: 文字の間隔を調整する
text-align: 文字揃えの指定
text-align-all: 最終行以外の文字揃えの指定
text-align-last: 最終行の文字揃えの指定
text-group-align:
text-justify: 両端揃えの方法を指定する
line-padding:
text-spacing:
text-indent: 字下げを指定する
word-spacing: 単語間の間隔を調整する
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク