CSSインラインレイアウトモジュール レベル3

W3C作業草案,

この文書の詳細
このバージョン:
https://www.w3.org/TR/2024/WD-css-inline-3-20241218/
最新公開バージョン:
https://www.w3.org/TR/css-inline-3/
編集者草案:
https://drafts.csswg.org/css-inline-3/
以前のバージョン:
履歴:
https://www.w3.org/standards/history/css-inline-3/
フィードバック:
CSSWG課題リポジトリ
仕様内の課題一覧
編集者:
Elika J. Etemad / fantasai (Apple)
前編集者:
(Hachette Livre)
(Adobe)
この仕様の編集リクエスト:
GitHubエディタ
課題一覧:
GitHub上のCSS3インラインレイアウト課題

概要

CSSの整形モデルは、コンテナー内の要素やテキストを行に折り返して流す仕組みを提供します。本モジュールはこのインラインレイアウトモデルのボックスモデルを説明し、[CSS2]で定義されているモデルを拡張して、インラインレベルコンテンツのブロック軸での整列・サイズ指定を定義します。また、ドロップキャップ用の特別なレイアウトモードも追加します。

CSSは、構造化文書(HTMLやXMLなど)の画面表示・印刷などの描画を記述するための言語です。

この文書の位置付け

このセクションは公開時点での文書の状況を説明します。 現在のW3C出版物の一覧や、この技術レポートの最新版は W3C技術レポートインデックス https://www.w3.org/TR/ で確認できます。

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

本文書はドラフトであり、 随時更新、置換、廃止される可能性があります。 作業中の文書以外として引用するのは不適切です。

フィードバックは GitHubで課題登録(推奨。タイトルに "css-inline" を含めてください:[css-inline] …コメント要約…) でお願いします。 すべての課題・コメントは アーカイブされます。 または(アーカイブあり)の公開メーリングリスト www-style@w3.org へ送付も可能です。

本書は2023年11月3日付W3Cプロセス文書に従います。

本書はW3C特許ポリシーに基づき運営されているグループにより作成されました。 W3Cはグループ成果物に関連する特許開示の公開リストを管理しています。 そのページには特許開示方法も記載されています。 特許に関する実際の知識を持つ個人は、 W3C特許ポリシー第6節に従い情報を開示する必要があります。

以下の機能はリスクがあり、CR期間中に削除される可能性があります:

「At-risk」はW3Cプロセスの用語であり、必ずしも機能が削除や延期される危険があることを意味しません。WG(ワーキンググループ)は機能の相互運用可能な実装が迅速に行われない可能性があると考えており、At-riskとしてマークすることで、必要に応じて提案勧告への移行時に機能を削除できるようにしています(削除のためだけに新しいCRを公開する必要がなくなります)。

1. はじめに

このモジュールは、インラインレイアウトを定義します。 これはCSSにおける、テキストとインラインレベルボックスの混在ストリームをレイアウトするモデルです。 また、この内容を各行内でブロック軸に沿って整列・サイズ指定するための制御方法も定義します。 さらに、ドロップキャップや類似の頭文字スタイリング用の特別なレイアウトモードも追加しています。

注: 行分割、均等割付、その他インライン軸でのインラインレベルコンテンツの位置決めは、CSS Text Moduleで扱われます。

ここでのレイアウトの多くはフォントメトリクスに依存しています。 関連するメトリクスはOpenTypeではラテン・キリル・ギリシャ文字やCJK向けには存在しますが、他の多くの書記体系では不足しています。 例えば、ヘブライ語の視覚的な上端メトリクスはOpenTypeテーブルに存在しません。 このモジュールが世界中で適切に機能するには、すべての書記体系について適切なメトリクスをフォントが提供する必要があります。そのためにはOpenTypeがそのようなメトリクスを許容する必要があり、フォントデザイナーが正確な数値を提供しなければなりません。 詳細は課題リエゾン声明を参照してください。

1.1. モジュール間の関係

このモジュールは、[CSS2] の10.8節で定義されているCSSインラインレイアウトモデルと機能を置き換え・拡張します。

1.2. 値の定義

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

各プロパティ定義に記載された値以外にも、本仕様で定義されるすべてのプロパティは、 CSS全域キーワードを値として受け付けます。 可読性のため、明示的には繰り返していません。

2. インライン レイアウトモデル

インラインレイアウトでは、 テキストとインラインレベルボックスが混在し再帰的に流れるストリームが、インライン整形コンテキストを形成し、ブロックコンテナー内で、 断片化によって行ボックスのスタックへとレイアウトされます。 各行ボックス内では、インラインレベルボックス互いに整列され、ブロック軸に沿って配置されます。 通常はそのテキストのベースラインに基づいて整列されます。

任意のブロックコンテナーが直接インラインレベルコンテンツ (たとえばインラインボックスアトミックインラインテキストシーケンスなど)を含む場合、 インライン整形コンテキストを確立し、 インラインレイアウトで内容をレイアウトします。 ブロックコンテナー内容エッジは、 そのインラインレベルボックス包含ブロックとなります。

ブロックコンテナーは、 ルートインラインボックスも生成します。 これは匿名インラインボックスで、 すべてのインラインレベルコンテンツを保持します。 (つまり、インライン整形コンテキスト内の全テキストは、 インラインボックスによって直接保持されます。 それがルートインラインボックスか、子孫ボックスかは問いません。) ルートインラインボックスは親のブロックコンテナーから継承しますが、それ以外のスタイルは適用できません。

インライン整形コンテキストでは、 コンテンツはインライン軸に沿ってレイアウトされ、 Unicode双方向アルゴリズムとその制御 [CSS-WRITING-MODES-3] に従って順序付けされ、[CSS-TEXT-3]の組版制御に従って分配されます。 インライン軸マージンボーダーパディングは、 インラインレベルボックス間で尊重され、そのマージンは折り畳みされません。 こうして、インラインレベルコンテンツの1行分のボックスを含む矩形領域が行ボックスと呼ばれます。

注: 行ボックスインラインボックスインラインレベルボックスはそれぞれ異なる概念です! 詳しくは[CSS-DISPLAY-3]でボックス型と関連用語について解説しています。

2.1. 行ボックスのレイアウト

行ボックスは、 インラインレベルコンテンツを インライン整形コンテキスト内で保持するために必要に応じて作成されます。 インラインボックス行ボックス論理幅を超える場合や、 強制改行を含む場合は、 (CSS Text 3 § 5 行分割と単語境界参照) 複数の断片 [CSS-BREAK-3]に分割され、 複数の行ボックスに分配されます。 マルチカラムレイアウト [CSS-MULTICOL-1]カラムボックスのように、 行ボックス断片化コンテナーとして、 整形コンテキストによって生成され、 CSSのボックスツリーの一部ではありません。

注: インラインボックスは、双方向テキスト処理により同じ行ボックス内で複数の断片に分割されることもあります。 [CSS-WRITING-MODES-3]参照。

行ボックスは、 ブロックコンテナーボックスの直接内容として ブロックフロー方向に積み重ねられ、 align-content [CSS-ALIGN-3]で指定された方法でコンテナー内に整列されます。 したがって、インライン整形コンテキストは、 行ボックスのスタックで構成されます。 行ボックスは原則として分離なしに積み重ねられます (他の場所で指定された場合を除く、 例:フロートクリアランスなど) また、決して重なりません。

一般的に、 line-left端は、行ボックスline-left端がその包含ブロックの端に接し、 line-right端が line-right端に接します。 したがって、行ボックスの論理幅は、 内側論理幅と等しくなります(包含ブロック、すなわちブロックコンテナー内容ボックス)。 ただし、フロートボックスや頭文字ボックス包含ブロック端と行ボックス端の間に来る場合は、 その分だけ利用可能なスペース、つまり論理幅が減少します。 (CSS2.1 § visuren#inline-formattingCSS2.1 § visuren#floats§ 7 頭文字も参照。)

論理高さは、行ボックスの内容がブロック軸整列された後に合わせて決定されます。 この調整はline-heightline-fit-edgeで制御されます。 ブロックコンテナーの最初/最後の行ボックスは、さらにtext-box-trimでトリムされる場合があります。

diagram showing inline boxes split across line boxes as described above
インラインレイアウトボックスモデル

2.2. 行ボックス内のレイアウト

上記参照の通り、 ユーザーエージェントはインラインレベルボックス行ボックスのスタックに流し込みます。 各行ボックス内のレイアウトは、 各ボックス断片行ボックスごとに個別にサイズ指定・位置決めされ、以下の通りです:

  1. ベースライン整列: インフローインラインレベルボックスは、行ボックス内でブロック軸に沿って互いに整列されます。 dominant-baselinevertical-alignによって整列されます。 これをベースライン整列と呼びます。 line-relative値baseline-shiftを指定したものは、行ボックスの高さが最小になるように整列されるものとします。

  2. コンテンツサイズ寄与の計算:インラインレベルボックスレイアウト境界(サイズ寄与)を計算します:

  3. 行ボックスのサイズ指定: 行ボックス論理高さは、 すべての整列されたレイアウト境界を正確に含むようにサイズ指定されます。

  4. コンテンツの位置決め: ルートインラインボックス整列サブツリーline-relative値baseline-shiftを指定したボックスは、行ボックス内で位置決めされます。

    他のコンテンツより高いtop/bottom/center整列ボックスの扱いを定義する必要があります。

注: 空のインラインボックスmarginpaddingborderline-heightを持ち、 内容があるボックス同様にこれらの計算に影響します。

2.3. 幻想行ボックス

行ボックスにテキストが無く、 保存された空白も無く、 インライン軸に非ゼロのmarginpaddingborderを持つインラインボックスも無く、 他のインフローコンテンツ (アトミックインラインルビ注釈など)も無く、 最後が強制改行で終わらないものは、 幻想行ボックスです。 これらのボックスは、子孫コンテンツ(例:絶対位置指定ボックスなど)の位置決定用途ではゼロ高さ行ボックスとして扱い、 それ以外のレイアウトや描画用途では、行ボックスおよびそのインフローコンテンツは存在しないものとして扱います。

何が不可視か?

このような幻想行ボックスは、 未スタイルの空インラインボックスアウトオブフローボックス、 折り畳まれた文書空白などを含むことがありますが、以下の用途では無視されます:

Firefoxでは幻想行ボックス内のインラインボックスにoutlineを適用でき、フォーカスリングを表示できます。 他のブラウザ同様、要素を可視化する他のプロパティ(例:box-shadow) は無視されるようです。

2.4. 描画順序

positioned box(詳細は[CSS-POSITION-3])に特別な指定がある場合を除き、インラインレベルボックス文書順で描画されます。 z-indexプロパティは一般的には適用されません。

3. ベースラインと整列メトリクス

3.1. ベースラインの概要

ベースラインは、インライン軸に沿った行ボックス上の線であり、テキストの個々のグリフがこの線に整列されます。ベースラインはフォントのグリフデザインの基準となります (例えば、ほとんどのアルファベットグリフの下端はアルファベットベースラインに揃えられます)、 また、異なるフォントやフォントサイズのグリフを組版する際の整列にも利用されます。

Picture of alphabetic text in two font sizes with the baseline and em-boxes

2つのフォントサイズにおけるアルファベットテキストのベースラインとemボックス

書記体系によって、好まれるベースラインは異なります。

Latin prefers the alphabetic baseline,
		          on top of which most letters rest,
		          though some letters have descenders that dangle below it.
		          Indic scripts are sometimes typeset with a hanging baseline,
		          since their glyph shapes appear to be hanging from a horizontal line.
		          Han-based systems, whose glyphs are designed to fill a square,
		          tend to align on their bottoms or through their centers.

各種書記体系の好まれるベースライン

よく設計されたフォントには、ベースラインテーブルが含まれ、 フォント設計座標空間における1つ以上のベースラインの位置を示します。 (設計座標空間はフォントサイズに合わせてスケールされます。)

よく設計された多言語混在フォントでは、 グリフは座標空間で調和するよう配置され、 ベースラインテーブルはグリフ形状に合わせて構築されます。 各ベースラインは、そのスクリプトのグリフ形状に合うよう位置付けされます。

ベースラインテーブルはフォントのプロパティであり、 複数のベースラインの位置はフォント内のすべてのグリフに適用されます。

異なるベースラインテーブルは、 横書き・縦書きそれぞれの整列用に提供できます。 UAは縦書き組版モードでは縦用テーブルを、 それ以外では横用テーブルを使うべきです。

注: フォントは各軸ごとに複数のベースラインテーブルを持つことができます。 UAはfont-language-overrideコンテンツの言語を考慮して適切なテーブルを選択する責任があります。

3.2. ベースラインとメトリクス

CSSは、整列・ボックスサイズ指定・頭文字レイアウトなど、インラインレイアウトの機能において、以下のテキストベースのメトリクスをベースラインとして使用します。

CSSWGは、各プロパティ(dominant-baselinealignment-baselinetext-box-edgeline-fit-edgeinitial-letter-align)ごとに、どのベースライン値が必要か、不要なもの・追加すべきものがあるか知りたいと考えています。 Issue 859参照。

alphabetic
ラテン・キリル・ギリシャなど多くの書記体系で使われる。 多くの(すべてではない)文字の下端(“m”, “Ш”, “Δ”など)に対応。 フォント設計座標系でゼロとして表されることが多い。 OpenTypeではromn、TrueType AATではbsln値ゼロとして割り当て。
cap-height
ラテン・キリル・ギリシャなどの大文字(“T”、 “Б”、 “Σ”など)の上端に対応。 OpenTypeのsCapHeightで算出。
x-height
ラテン・キリル・ギリシャなどの小文字(“m”、 “л”、 “α”など)の上端に対応。 OpenTypeのsxHeightで算出。
x-middle
alphabeticx-heightベースラインの中間。
ideographic-over
CJK(漢字・ハングル・かな)テキストのline-over設計端に対応。 OpenTypeではidtpに割り当て。
ideographic-under
CJK(漢字・ハングル・かな)テキストのline-under設計端に対応。 OpenTypeではideoに割り当て。
central
表意文字の中央ベースライン。ideographic-underideographic-overの中間。 TrueType AATではbsln値1。
ideographic-ink-over
CJK(漢字・ハングル・かな)テキストのline-overインク端に対応。 OpenTypeではicftに割り当て。
ideographic-ink-under
CJK(漢字・ハングル・かな)テキストのline-underインク端に対応。 OpenTypeではicfbに割り当て。
hanging
チベットや類似の単一ケース書記体系で、文字が「ぶら下がっている」ように見える上端の基準線。 OpenTypeではhang、TrueType AATではbsln値3に割り当て。
math
数式文字の設計中心ベースライン。 OpenTypeではmath、TrueType AATではbsln値4。
text-over
line-over端として使われるメトリクス。インライン内容ボックスに対応。[CSS2]参照。
text-under
line-under端として使われるメトリクス。インライン内容ボックスに対応。[CSS2]参照。
em-over
1em の距離となるよう正規化された理論的ascentに対応。 A.1: Em-overとEm-underの計算参照。
em-under
1em の距離となるよう正規化された理論的descentに対応。 A.1: Em-overとEm-underの計算参照。

注: これらのメトリクスは光学設計メトリクスであり、必ずしもグリフのアウトラインと完全に一致するわけではありません。

一般的に、これらのメトリクスは適切なフォントから取得しますが、欠落している場合やボックスから導出する必要がある場合は、合成する必要があります。 § 3.3 グリフとボックスのベースライン付録A:整列メトリクスの合成参照。

3.2.1. アセント・ディセントメトリクス

CSSは、すべてのフォントにベースライン上の特徴的な高さ(アセントメトリクス)と、下側の特徴的な深さ(ディセントメトリクス)があることを仮定し、インライン整形コンテキストにおけるテキストやボックスのレイアウトに使用します。 これらはフォント全体のメトリクスであり、個々のグリフのアセンダーやディセンダーと一致する必要はありません。

注: OpenTypeやTrueTypeフォントを使用する実装では、OS/2テーブルのsTypoAscendersTypoDescenderを(現在の要素のフォントサイズにスケール後)CSSレイアウト用のアセントメトリクスディセントメトリクスとして使うことを推奨します。これらがない場合は、HHEAテーブルの"Ascent"および"Descent"メトリクスを使うべきです。

3.2.2. ラインギャップメトリクス

フォント形式には、フォント推奨の「ラインギャップ」または「外部リーディング」メトリクスを持つ場合があります。 このメトリクスはラインギャップメトリクスと呼び、 行ボックス論理高さ計算時 line-heightnormalの場合に組み込まれることがあります(§ 5.3 インラインボックスの論理高さ(レイアウト境界)の計算参照)。

注: OpenTypeではラインギャップメトリクスsTypoLineGapまたはhhea.lineGapとして見つかります。

UAはラインギャップメトリクスをゼロ以上で切り捨てる必要があります。

3.3. グリフとボックスのベースライン

各フォント・グリフ・インラインレベルボックスは、各ベースラインタイプのベースライン座標を持つと仮定され、そのベースラインが該当するブロック軸上での位置を示します。 それらのベースラインの集合をベースラインセットと呼びます。 このセットから、ボックスまたはグリフを自身の整列コンテキスト内で整列するために使うものが整列ベースライン、 自身の内容を自身内で整列するために使うものが優先ベースラインです。

個々のグリフの場合、 ベースラインセットはフォントのベースラインテーブルから導出されます。 インラインボックスの場合は、 最初に利用可能なフォントから導出され、実際にそのフォントのグリフを含むか否かに関係ありません。 必要なメトリクスがフォントにない場合は、UAが合成する必要があります。 A.2: テキストのベースライン(および他のフォントメトリクス)の合成参照。

その他のボックスについては、 そのベースラインセットは、内容物に従い、 baseline-sourceや、参加している整形コンテキストのルールに従って導出されます。 また、アトミックインラインボックスインライン整形コンテキストインライン軸にベースラインセットを持たない場合、 その整列ベースラインmargin boxから合成されます。 詳しくはA.3: アトミックインラインのベースライン合成を参照してください。

4. ベースライン整列

ほとんどのCSS整形コンテキストでは、ボックスをコンテナーの端基準で整列しますが、インラインレイアウトでは、ブロック軸にて、 ボックス同士を互いのベースライン基準で整列します。

より具体的には、 (line-relativeシフト値を使わない場合) 各グリフやインラインレベルボックスは、ブロック軸で 自身の整列ベースラインが 親の対応するベースラインと一致するように位置決めされます (親は整列コンテキスト)。 その後、必要に応じてpost-alignment shift値で位置が調整されます。

注: ベースライン整列は必ず対応するベースライン同士で行います。 alphabeticはalphabetic、hangingはhanging、mathematicalはmathematicalなど。

ボックスを整列する場合、整列ベースラインalignment-baselinebaseline-source値(ショートハンドvertical-align参照)によって選択され、 デフォルトでは親のdominant-baselineに一致します。 グリフの場合、整列ベースラインは常に親の優先ベースラインで決定されます。

以下のサンプルマークアップ:

<p><span class="outer">Ap <span class="inner">ਜੀ</span></span></p>

および以下のスタイルルール:

.inner { font-size: 75%; }

親(.outer)と子(.inner)のベースラインセットはフォントサイズの違いにより一致しません。 子ボックスは親とalphabeticベースラインを揃えることで整列されます。

この例では、ベースラインセット内の各ベースライン間距離が75%フォントサイズのspanに圧縮されますが、alphabeticベースライン自体は揃っています。

ここではalphabeticベースラインが使われています。 なぜなら、デフォルトでボックスの整列ベースラインは親の優先ベースラインと一致し、 横書きtypographic modeでは 優先ベースライン自体がalphabeticベースラインにデフォルト設定されるためです。

もし上記の.inner要素にvertical-align: superを追加すると、 同じ規則で.inner子要素が親と整列されますが、ベースライン整列に加えて子が上付き位置にシフトされます。

この例では、結果的な整列は、親のベースラインテーブルを上付きオフセット分だけ上にシフトし、
			             子のalphabeticベースラインをシフトされた親のalphabeticベースライン位置に揃えるのと同等になる。

4.1. 支配的ベースライン: dominant-baseline プロパティ

名前: dominant-baseline
値: auto | text-bottom | alphabetic | ideographic | middle | central | mathematical | hanging | text-top
初期値: auto
適用対象: ブロックコンテナー、インラインボックス、テーブル行、グリッドコンテナー、フレックスコンテナー、SVG text content elements
継承: yes
パーセンテージ: N/A
算出値: 指定されたキーワード
正規順序: 文法通り
アニメーション型: 離散

このプロパティは、支配的ベースライン(dominant baseline)を指定します。 これはボックス内のコンテンツを整列する際のデフォルトのベースラインタイプです。

インラインボックスの場合、 支配的ベースラインはボックス内のテキストの整列 (および、vertical-alignで特に指定がなければ、すべてのインラインレベル子ボックス) の整列時に、各グリフ/ボックスの対応するベースラインをボックス自身の支配的ベースラインに揃えるために使われます。 その他のボックスでは、ボックス内で整列ベースラインを用いてベースライン整列に参加するボックスのデフォルト整列ベースラインとなります。 詳しくは(alignment-baseline: baseline[CSS-ALIGN-3])を参照してください。

各値の意味は以下の通りです:

auto
alphabetic(横書きモードおよびtext-orientationsidewaysの縦書きモード)と同等。 縦書きモードtext-orientationmixedまたはuprightの場合はcentralと同等。

ただし、SVGテキストの場合は、グリフの原点座標(座標ベース配置に使用)は縦書きモードで常にcentralとして扱います。

text-bottom
text-underベースラインを使用します。
alphabetic
alphabeticベースラインを使用します。
ideographic
ideographic-underベースラインを使用します。
middle
x-middleベースラインを使用します。 ただし、text-orientation: uprightの下では(alphabeticやx-heightベースラインが意味を持たない場合) centralベースラインを使用します。
central
centralベースラインを使用します。
mathematical
mathベースラインを使用します。
hanging
hangingベースラインを使用します。
text-top
text-overベースラインを使用します。

支配的ベースラインの説明は [CSS-WRITING-MODES-3] を参照してください。

指定ベースラインがcentralでない場合に意味不明にならないような混在縦方向の挙動を定義する必要があります。

4.2. 横方向ボックス整列: vertical-align プロパティ

名前: vertical-align
値: [ first | last] || <'alignment-baseline'> || <'baseline-shift'>
初期値: baseline
適用対象: 各プロパティ参照
継承: no
パーセンテージ: N/A
算出値: 各プロパティ参照
アニメーション型: 各プロパティ参照
正規順序: 文法通り

このショートハンドプロパティは、 インラインレベルボックスが行内でどのように整列されるかを 整列ベースラインタイプ(alignment-baseline)、ベースライン整列優先baseline-source)、 および整列後シフトbaseline-shift) を一括して指定します。

firstlastが指定された場合は、 baseline-sourceを設定します(それ以外はautoにリセット)。 その他の値は対応するロングハンドプロパティと同様です。詳細は下記参照。

著者はこのショートハンド(vertical-align)を利用し、 ロングハンドを個別にカスケードする必要がある場合や(SVG要素で)レガシーSVG実装をサポートしたい場合以外は、ロングハンドより本プロパティを使うべきです。

注: vertical-alignalign-contentnormalの場合、テーブルセルの整列にも影響します。 具体的には、topbaseline-shift: top)は startbottombaseline-shift: bottom)は end、 その他middlealignment-baseline: middle) は centerに対応します。 詳しくは CSS Box Alignment 3 § 5.1.1 ブロックコンテナー(テーブルセル含む) を参照してください。

4.2.1. 整列ベースラインソース: baseline-source ロングハンド

名前: baseline-source
値: auto | first | last
初期値: auto
適用対象: インラインレベルボックス
継承: no
パーセンテージ: N/A
算出値: 指定されたキーワード
正規順序: 文法通り
アニメーション型: 離散

インラインレベルボックスが複数のベースライン情報ソースを持つ場合 (たとえば複数行のインラインブロックやインラインフレックスコンテナーなど)、 このプロパティでfirst baseline setlast baseline setのどちらを整列に優先するかを指定します。 これによりボックスのベースライン整列優先が決まります。 各値の意味は以下の通りです:

auto
last-baseline整列inline-blockに、その他はfirst-baseline整列に指定します。
first
first-baseline整列を指定します。
last
last-baseline整列を指定します。

インラインボックス以外のボックスのベースラインの求め方は CSS Box Alignment 3 § 9.1 ボックスのベースラインの決定 を参照してください。

4.2.2. 整列ベースラインタイプ: alignment-baseline ロングハンド

名前: alignment-baseline
値: baseline | text-bottom | alphabetic | ideographic | middle | central | mathematical | text-top
初期値: baseline
適用対象: インラインレベルボックス、フレックスアイテム、グリッドアイテム、テーブルセル、SVG text content elements
継承: no
パーセンテージ: N/A
算出値: 指定されたキーワード
正規順序: 文法通り
アニメーション型: 離散

このプロパティはボックスの整列ベースラインを指定します。 ベースラインは、(必要なら)整列後シフトを適用する前にボックスを整列する際に利用されます。

値の定義は以下の通りです:

baseline
親の支配的ベースラインの選択を使用します。
text-bottom
text-underベースラインを使用します。
alphabetic
alphabeticベースラインを使用します。
ideographic
ideographic-underベースラインを使用します。
middle
通常はx-middleベースラインを使用します。 ただし、text-orientation: upright(alphabeticやx-heightベースラインが本質的に意味を持たない場合)は、 centralベースラインを使用します。
central
centralベースラインを使用します。
mathematical
mathベースラインを使用します。
text-top
text-overベースラインを使用します。

ベースライン整列を行う際、 これらの値は、ボックスのどのベースラインを 親の対応するベースラインに揃えるかを指定します。 (インライン整形コンテキストでは、インラインレベルボックス断片やグリフは 親インラインボックス断片のインライン軸で確立された整列コンテキストを共有します。 他の整形コンテキストについては CSS Box Alignment 3 § 9.2 ベースライン整列グループ化を参照してください。) SVGテキストレイアウトでは、 これらの値はSVGの現在のテキスト位置に揃えるベースラインを指定します。

4.2.2.1. SVG向けのレガシー値

SVG実装はレガシーコンテンツへの対応のため、次のエイリアスをサポートしてもよいmayです:

これらの値はvertical-alignショートハンドでは許可されません。

4.2.3. 整列後シフト: baseline-shift ロングハンド

名前: baseline-shift
値: <length-percentage> | sub | super | top | center | bottom
初期値: 0
適用対象: インラインレベルボックス、SVG text content elements
継承: no
パーセンテージ: line-heightの使用値に対して
算出値: 指定されたキーワードまたは算出済み<length-percentage>
正規順序: 文法通り
アニメーション型: 算出値型による

このプロパティはボックスの整列後シフト(post-alignment shift)を指定します。 ベースライン相対シフト値である<length-percentage>subsuperは、ベースライン整列位置から相対的にシフトします。 一方、行相対シフト値であるtopcenterbottomは、 インラインボックスおよびその内容を 行ボックスの境界に対してシフトします。

著者はCSS1以来存在するvertical-alignショートハンドを利用し、 SVGコンテンツ以外ではこのbaseline-shiftロングハンドよりショートハンドを推奨します。 (SVGでは逆にbaseline-shiftの方がレガシーユーザーエージェントで広くサポートされています。)

各値の意味は下記の通りです:

<length>
指定された長さ分だけ上昇(正値)または下降(負値)します。
<percentage>
指定されたパーセンテージ分、line-heightに対して上昇(正値)または下降(負値)します。
sub
親ボックスの下付き文字として適切なオフセット分下降します。 UAは親のフォントメトリクスからこのオフセットを算出してもよいですが、 そうでない場合は親の使用font-sizeの1/5だけ下降します。
super
親ボックスの上付き文字として適切なオフセット分上昇します。 UAは親のフォントメトリクスから算出してもよいですが、 そうでない場合は親の使用font-sizeの1/3だけ上昇します。
top
line-over端に整列サブツリーのline-over端を揃えます。
center
整列サブツリーの中心を行ボックスの中心に揃えます。
bottom
line-under端に整列サブツリーのline-under端を揃えます。

整列サブツリー(aligned subtree)は、 インラインボックスレイアウト境界と、 すべての子インラインボックスの算出alignment-baseline値が 行相対シフト値でないものの整列サブツリーを含みます。 整列サブツリーline-over端はサブツリー内のover端の最上部、 line-under端は最下部になります。

行相対シフト値alignment-baselinebaseline-shiftの二分法に完全には収まりません。 妥当議論がどちらにもあります。 現状はここでドラフトされていますが、強い移動提案があれば課題提出をお願いします。

4.2.3.1. SVG向けのレガシー値

ユーザーエージェントは、レガシーSVGコンテンツ対応のため、キーワードbaseline0に算出することを追加サポートしてもよいmayです。 この値はvertical-alignショートハンドでは許可されません。

baseline値は削除したいと考えており、SVGユーザーエージェントから必要性についてフィードバックを募集しています。

5. 論理的高さと行間隔

ブロック軸での行ボックスのサイズ指定は、その整列インラインレベル内容のサイズに依存します。 このサイズ指定はline-heightline-fit-edgeプロパティで制御されます。

5.1. 行間隔: line-heightプロパティ

名前: line-height
値: normal | <number [0,∞]> | <length-percentage [0,∞]>
初期値: normal
適用対象: 非置換インラインボックス、SVG text content elements
継承: yes
パーセンテージ: 算出は1emに対して
算出値: 指定キーワード、数値、または算出済み<length>
正規順序: 文法通り
アニメーション型: 算出値型による

このプロパティはボックスの希望行間(preferred line height)を指定します。 これは「レイアウト境界」の計算、 つまりボックスが行ボックスの論理的高さに寄与する値の計算に使われます。 (詳細は§ 5.3 インラインボックスの論理高さ(レイアウト境界)の計算を参照。)

注: ルートインラインボックスに対してブロックコンテナーで指定した場合、line-heightはブロックの行ボックスの最小高さを事実上決定します。

このプロパティの各値の意味は以下の通りです:

normal
フォントメトリクスに基づき希望行間を自動決定します。
<length [0,∞]>
指定された長さを希望行間として用います。 負値は不正です。
<number [0,∞]>
希望行間はこの数値に 要素の算出font-sizeを掛けたもの。 負値は不正です。 算出値指定値と同じ。
<percentage [0,∞]>
このプロパティの希望行間および算出値は 要素の算出font-sizeにこのパーセンテージを掛けた値。 負値は不正です。

注: 最初に利用可能なフォント以外のフォントのメトリクスは、レイアウト境界にのみ影響し、 インラインボックスline-height: normalの場合のみ考慮されます。

下記例の三つのルールは同じ使用行間になります:
div { line-height: 1.2; font-size: 10pt }     /* number */
div { line-height: 1.2em; font-size: 10pt }   /* length */
div { line-height: 120%; font-size: 10pt }    /* percentage */

ただし、継承時の挙動が異なります。 最初のものは数値として継承され、子孫のfont-sizeが異なる場合は異なる行間となります。 後の二つは絶対長さとして継承され、子孫のfont-sizeの影響を受けません。

パーセンテージが長さに算出されるのは悩ましい。 Issue 3118Issue 2165も参照。

注: line-fit-edgeleadingの時、 インラインボックスのmargin、border、paddingは 行ボックスの高さ計算に影響しません。 ただし、これらはボックス周囲にレンダリングされます。 したがってline-heightで指定したサイズがボックスのサイズより小さい場合、 背景や枠線が隣接する行ボックスに「はみ出し」、前の内容が隠れる可能性があります。

5.2. テキスト端メトリクス: line-fit-edge プロパティ

名前: line-fit-edge
値: leading | <text-edge>
初期値: leading
適用対象: インラインボックス
継承: yes
パーセンテージ: N/A
算出値: 指定されたキーワード
正規順序: 文法通り
アニメーション型: 離散

これは初期ドラフトの提案です。 設計レビューやユースケースの登録によって大きく変更される可能性があります。 他プロパティとの詳細や相互作用も今後調整されます。まだ出荷しないでください。

インラインボックス(主目的がテキストを含むもの)は、 ブロック軸のサイズがフォントメトリクスに基づき決定されます。 line-fit-edgeプロパティはどのメトリクスを使うかを制御します。 選ばれたメトリクスは、インラインボックスルートインラインボックスでない場合)に対するレイアウト境界の根拠として使われます。 またデフォルトでは、text-box-trimにも使われます。

<text-edge>値は 特定のフォントメトリクスを指定し、 以下に展開されます:

<text-edge> = [ text | ideographic | ideographic-ink ]
              | [ text | ideographic | ideographic-ink | cap | ex ]
                [ text | ideographic | ideographic-ink | alphabetic ]

最初の値はテキストのover端を指定します。 二番目の値はテキストのunder端を指定します。 1つだけ指定された場合、両端に同じキーワードが可能なら割り当てます。不可の場合は不足値にtextを使います。

ロングハンドが必要か、このショートハンドだけで十分か? [Issue #5236]

各値の意味:

leading
ascent/descentに加え、正のhalf-leadingを用いる。 サイズ計算時、margin/padding/borderは無視される(行ボックスのサイズ指定に関して)。
text
text-overベースライン/text-underベースラインover/under端として用いる。
cap
cap-heightベースラインover端として用いる。
ex
x-heightベースラインover端として用いる。
ideographic
ideographic-overベースライン/ideographic-underベースラインover/under端として用いる。
ideographic-ink
ideographic-ink-overベースライン/ideographic-ink-underベースラインover/under端として用いる。
alphabetic
alphabeticベースラインunder端として用いる。

textはascent/descentメトリクス名として妥当か? もっと良い名前は?同様にleadingキーワードも。 [Issue #8067]

line-fit-edgeleadingの場合(ボックス自身のline-heightでスペーシング追加)を除き、ボックスのmargin/padding/borderもレイアウト境界に加算されます。

注: leadingtext値は フォントのascentdescentに頼ってテキストが収まるようにしています。 その他の値は、指定メトリクスを超えるアセント(例:ダイアクリティカルマーク)による重なりやオーバーフローが起きやすいので、 これらの値を使う場合は、特に多言語コンテキストでは十分なスペースを確保するよう注意が必要です。

Three different values of the line-fit-edge property.
line-fit-edgeプロパティの値例。leadingcapex。 赤線はインラインボックスのレイアウト境界を示します。

この図は実際のフォントメトリクスと一致しません。実際にはcap-heightを示していて、ascentではありません。 [Issue #11364]

line-fit-edgeleadingの場合、 段落内でフォントメトリクスや縦位置整列が変化すると垂直リズムが崩れる可能性があります。

その他の値は、十分なリーディング(行間)が追加されていれば一貫した行間を得やすいです。 ルートインラインのhalf-leadingが子孫の指定メトリクスを収容できる程度に大きければOKです。 ただし、内容がオーバーフローする場合は行ボックスが拡大され、行同士が重ならないようになります。

注: 正のleading値のみがpositivehalf-leadingを追加しますが、 テキストをタイトに配置するため、 どの値も負のhalf-leadingを適用します。 詳細は§ 5.3 インラインボックスの論理高さ(レイアウト境界)の計算参照。 half-leadingはテキスト両端に均等に適用されます。 より精密な重なり制御にはline-fit-edge: textと 負のmarginを併用してください。

5.3. インラインボックスの論理的高さ寄与(「レイアウト境界」)の算出

インラインボックスが自身の論理高さに対して行ボックスに 寄与する値(本節ではレイアウト境界という)、 は常に自身のテキストメトリクスに基づき算出されます(以下参照)。 算定はline-fit-edgeおよびline-heightプロパティで制御されます。 子ボックスのサイズや位置は、 自身のレイアウト境界(および自身の論理高さ)には影響しません。 詳しくはinline-sizing参照。

注: レイアウト境界は必ずしもボックスのと一致する必要はありません。

レイアウト境界を算出するには、 UAはまずインラインボックス直接含む全てのグリフを 互いにその支配的ベースラインで整列させます。 (§3.3 グリフとボックスのベースライン参照。) インラインボックスに全くグリフが含まれない場合や、フォールバックフォントのグリフのみ含む場合は、 そのボックスのfirst available fontのメトリクスを持つ「strut」(幅0の不可視グリフ)が含まれているとみなします。

各グリフ(strutも含む)について、Aはベースライン上の上昇(ascent)、Dはベースライン下の下降(descent)を表します。 line-fit-edgeで他のメトリクス指定がなければ、Aは フォント・サイズに応じたアセントメトリクスDディセントメトリクスとなり、 それぞれ支配的ベースラインのゼロからのオフセットを考慮して調整されます。 line-heightnormalで、 line-fit-edgeleadingまたはルートインラインボックスの場合は、 フォントのline gap metricADにhalf-leadingとして半分ずつ加算できます。

算出line-heightnormalの場合、 インラインボックスのレイアウト境界は全グリフを囲み、 一番高いAから一番深いDまでが範囲となります。 (1つのボックス内のグリフが異なるフォント由来の場合、ADが全て同じではないこともあります。)

算出line-heightnormalでない場合レイアウト境界first available fontのメトリクスのみから導出され(他のフォント由来グリフは無視)、 使用line-height値と合計するよう リーディングADを調整します。 leading LL = line-height - (A + D) で算出。 leadingの半分(half-leading)を first available fontのAの上側とDの下側にそれぞれ加算し、 有効な上昇値A′ = A + L/2、 有効な下降値D′ = D + L/2 となります。 ただしline-fit-edgeleadingでない場合かつルートインラインボックスでない場合、 half-leadingが正値ならゼロ扱い。 レイアウト境界はこの有効A′D′を正確に囲みます。

注: Lは負値になる場合もあります。

さらに、 line-fit-edgeleadingでない場合、 レイアウト境界は 各辺のmarginborderpaddingの合計で水増しされます。 負のmargin値も有効に機能するよう、 負のmarginも同じインライン整形コンテキストに参加する 子孫インラインボックスレイアウト境界にも加算されます。

Quirksモード [QUIRKS]では、 インラインボックス 断片が border/paddingがゼロかつ直接テキストや保存空白 [CSS-TEXT-3]を含まない場合、 行ボックスline boxのサイズ計算で無視されます。

6. テキスト上下のトリム

通常の流しテキストで一貫したスペースを確保するために、 CSS行レイアウトは各行のテキスト内容の上下に必要に応じてリーディング(行間)を導入し、 line-heightを確保します。 さらに、フォントのアセント・ディセントメトリクス自体も、 典型的なグリフ形状よりも上下に余分なスペースを含むことが多く、 これは時折現れる文字やダイアクリティカルマーク(記号)が通常の範囲を超えて上下に伸びるのに対応するためです。 これにより隣接するテキスト行が重なり合うのを防ぎます。 しかし、これらの余分なスペースは視覚的な揃えや見た目上のスペース制御を妨げます。

text-boxプロパティにより、 ブロックの最初と最後の行の上下の余分なスペースをトリム(削除)し、 グリフ周囲のスペースをより精密に制御できます。 フォントメトリクスに依拠することで、ハードコードの長さに頼らず、 コンテンツのリサイズ・改行・様々なフォントでの描画でも精密なスペースを維持できます。

よくある問題が垂直方向の中央揃えです。 テキストコンテナをアイコンに縦方向で中央揃えするのは簡単ですが、 ラテン文字の見た目の境界はcap-heightとalphabeticベースラインであり、 アセント・ディセントではないため、 視覚的な意図と異なる結果になることが多いです。

画像の右にラテンテキストを置き、上下中央揃えしようとする例。
			          画像上端からテキストボックス上端まで13px、
			          画像下端からテキストボックス下端まで13pxで理論上は中央揃え。
			          しかし画像上端からcap-heightは21px、下端からalphabeticベースラインは19pxとなり、
			          実際には視覚的に中央でないことが分かる。
テキストの上下端で測ると等しくても、 視覚的境界で測ると中央揃えになっていないことが分かる。

視覚的にテキストを中央揃えするには、 上端をcap-height、下端をalphabeticベースラインとみなす必要があります。

視覚的に中央揃えした場合、
			          画像上端からcap-heightまで20px、
			          下端からalphabeticベースラインまで20pxとなり、等しくなる。
アセント・ディセントではなくcap-height/alphabeticベースラインで距離を揃えることで、 視覚的に中央揃えされる。

text-box-trimでcap-height上部とalphabeticベースライン下部の余白を除去すると、 ボックス中央揃えが実際にテキスト中央揃えとなり、 どんなフォントでも確実に期待通りの結果が得られます。

フォントごとにcap-heightは異なるが、 マジックナンバーではなくフォントメトリクスを使うことで、 フォント変更時もレイアウト意図が守られる。

6.1. テキストボックストリム用ショートハンド: text-box プロパティ

名前: text-box
値: normal | <'text-box-trim'> || <'text-box-edge'>
初期値: normal
適用対象: ブロックコンテナーおよびインラインボックス
継承: no
パーセンテージ: N/A
算出値: 指定されたキーワード
正規順序: 文法通り
アニメーション型: 離散

このプロパティはショートハンドであり、 text-box-trimおよびtext-box-edgeプロパティを 一括して設定できます。

単一キーワードnormalを指定した場合、 text-box-trimnonetext-box-edgeautoに設定されます。 それ以外の場合、text-box-trim値を省略するとboth(初期値ではない)、 text-box-edge値を省略するとauto(初期値)となります。

例を追加すること。

6.2. テキスト上下トリム: text-box-trim プロパティ

名前: text-box-trim
値: none | trim-start | trim-end | trim-both
初期値: none
適用対象: ブロックコンテナーおよびインラインボックス
継承: no
パーセンテージ: N/A
算出値: 指定されたキーワード
正規順序: 文法通り
アニメーション型: 離散

インラインボックスに適用した場合、 内容ボックスを指定したtext-box-edgeメトリクスに揃えてトリムするかどうか指定します。 詳細は§5.3 インラインボックスの論理高さ(レイアウト境界)の計算参照。

ブロックコンテナーや、 マルチカラムコンテナーの各カラムにも適用した場合、 ボックス内容の開始/終了時(start/end)のhalf-leadingをトリムし、 内容エッジとテキスト内容をより近づけます。 この場合のトリム端は、 該当text-box-edge値で決まります(該当行ボックス包含ブロックのstart/end text-box-edge値)。

各値の意味:

none
行ボックスブロックコンテナーに適用された場合、特別な処理はなし。

インラインボックスに適用した場合は、 上下の内容エッジtext-over/text-underベースラインと一致し、 text-box-edge値によらず固定されます。

trim-start
ブロックコンテナーカラムボックスの場合: block-start側で、 最初の整形行ルートインラインボックスの指定メトリクスにトリム。 そのような行がなければ、あるいは間に非ゼロのpaddingやborderがあれば、効果なし。

インラインボックスの場合: ボックスのblock-start側をトリムし、 内容エッジtext-box-edgeで指定されたメトリクスに一致させる。

trim-end
ブロックコンテナーカラムボックスの場合: 最後の整形行のblock-end側を指定メトリクスにトリム。 そのような行がなければ、あるいは間に非ゼロのpaddingやborderがあれば、効果なし。

インラインボックスの場合: ボックスのblock-end側をトリムし、 内容エッジtext-box-edgeで指定されたメトリクスに一致させる。

trim-both
trim-starttrim-endの両方の挙動を指定。

注: ::first-line同様、 このプロパティはflex, grid, table整形コンテキストには適用・伝搬されません。

注: block-end側は、 line-under側と一致しません(writing-modevertical-lrのとき)。

複数の祖先が同じ行ボックスにトリム指定した場合、 使われるメトリクスは該当側でトリム指定した最も内側のブロックコンテナーのものです。

注: text-box-trimの初期値以外でボックスから内容やインクが溢れた場合、 通常のオーバーフロー処理と同じく扱われます。

::first-lineと異なり、 マルチカラムコンテナーの最初(または最後)の整形行に適用した場合、 マルチカラムコンテナー内の各カラムの最初(または最後)の整形行それぞれに適用されます。

カラムがspannerで分割された場合の挙動は? [Issue #11363]

text-box-trimを適用したボックスが断片化された場合([CSS-BREAK-3])、 トリムが断片ごとに適用されるか最初/最後の断片だけに適用されるかは、 box-decoration-breakで決まります。

印刷時、行ボックスのトリムで内容がクリップされそうな場合、 UAはその行ボックスの該当端でtext-box-trimを無視してもよいです。

6.3. テキストトリムメトリクス: text-box-edge プロパティ

名前: text-box-edge
値: auto | <text-edge>
初期値: auto
適用対象: ブロックコンテナーおよびインラインボックス
継承: yes
パーセンテージ: N/A
算出値: 指定キーワード
正規順序: 文法通り
アニメーション型: 離散

このプロパティはtext-box-trim効果に使うメトリクスを指定します。 値の意味はline-fit-edgeと同じです。 autoキーワードは line-fit-edgeの値を使用します。 ただしleading初期値)はtextとして解釈されます。

注: このプロパティはtext-box-trimtext-boxショートハンドで同時設定可能です。 line-fit-edgeとは異なり継承されませんが、 初期値は 継承されるline-fit-edgeの値をコピーします。

6.4. インラインボックス描画高さ: inline-sizing プロパティ

名前: inline-sizing
値: normal | stretch
初期値: normal
適用対象: インラインボックス(ただしルビコンテナボックス内部ルビボックスには適用されません)
継承: yes
パーセンテージ: n/a
算出値: 指定キーワード
正規順序: 文法通り
アニメーション型: 離散

この名前は紛らわしいため、変更が必要です。 あるいはtext-box-trimに統合する? [Issue #5189]

このプロパティは論理高さ内容領域(content area)の インラインボックスについて 内容に対してどう測定するかを指定します。 ボックス内容・行ボックス・他コンテンツのサイズや位置には影響しません。

各値の意味:

normal
内容領域は、インラインボックスfirst available fontの仮想テキストに合わせてサイズ・配置されます。 text-box-trimでトリム指定があれば、指定メトリクスを使うこと。 そうでない場合、仕様では方法の指定がありません。 UAは例えばフォントの最大ascender/descenderを使ってもよい。 (これでem-box外のグリフも内容領域に収まるが、フォントごとにボックスサイズが異なることになる)

注: 複数のフォントが使われた場合(グリフが異なるフォント由来の場合)でも、 論理高さはフォールバックフォントのグリフには影響されず、 first available fontのみに依存します。 ただしこれらフォールバックグリフは、行ボックスのサイズには影響する場合があります(line-heightnormalの場合)。 詳細は§5.3 インラインボックスの論理高さ(レイアウト境界)の計算参照。

stretch
行ボックスのサイズ指定・内容配置が normal同様に行われた後、 インラインボックスボックス端行ボックスの端と一致するようにシフトされ、 インラインボックス内側論理高さが、外側サイズとして 行ボックスを埋めるよう拡張されます。 (子要素のサイズや位置は影響されません)

注: heightプロパティはインラインボックスには適用されません。

注: line-heightインラインボックスのサイズには影響しません。行ボックス論理高さへの寄与のみに影響します。

7. 頭文字(イニシャルレター)

編集者は、特にインド系文字など非西洋文字でのドロップキャップの例を求めています。

7.1. 頭文字の概要

この節は規範的ではありません。

大きく装飾的な文字は、印刷技術が発明される以前から新しい段落の開始に使われてきました。実際、こういった文字使いは小文字の登場よりも古い歴史を持っています。

7.1.1. ドロップキャップ(頭文字)

ドロップキャップ(または「ドロップイニシャル」)は、段落の先頭に現れる通常より大きな文字であり、そのベースラインは段落の最初のベースラインより少なくとも一行分下に位置します。ドロップキャップのサイズは通常、その文字が占める行数で示されます。2行・3行分のドロップキャップが一般的です。

3-line drop cap with E Acute
3行分のEアキュート付きドロップキャップ。ドロップキャップのcap-heightが本文のcap-heightと揃うため、アクセント記号が段落の上にはみ出します。

ドロップキャップの正確なサイズや位置は、そのグリフの整列によって決まります。ドロップキャップの基準点は本文の基準点と正確に揃える必要があります。整列の制約は書記体系によって異なります。

西洋書記体系では、上端の基準は頭文字のcap-heightと本文1行目のcap-heightです。下端の基準は頭文字のalphabeticベースラインとN行目本文のベースラインです。下図は2行ドロップキャップの例で、関連する基準線が描かれています。

drop cap showing alignment
2行ドロップキャップのベースライン(緑)、cap-height(赤)、アセンダー(シアン)を示す。

漢字系書記体系では、頭文字は1行目のグリフのblock-start端からN行目のグリフのblock-end端まで伸びます。

Japanese Vertical Initial
縦書きモードでの2行ドロップキャップの例

インド系文字の一部では、上端の整列点はハンギングベースライン、下端の整列点はtext-after-edgeです。

Devanagari initial letter
デーバナーガリー頭文字がハンギングベースラインに揃えられています。赤色が整列点。

7.1.2. 沈み頭文字(サンケンキャップ)

ドロップキャップのスタイルによっては、1行目本文に揃えない場合もあります。沈み頭文字(サンケンキャップ)は、ベースラインより下へ沈み、さらに1行目本文より上へもはみ出します。

sunken drop initial
サンケンキャップ。文字は2行分落ちていますが、サイズは3行分の頭文字です。

7.1.3. 浮かし頭文字(レイズドキャップ)

浮かし頭文字(レイズドキャップまたはスティックアップキャップ)は、1行目のベースラインまで沈みます。

注: 適切な浮かし頭文字は、単純に最初の文字のフォントサイズを大きくするより多くの利点があります。段落の他の行間は変化せず、大きなディセンダーがあってもテキスト回りが除外されます。また、浮かし頭文字のサイズを整数行数で定義すれば、暗黙のベースライングリッドを維持できます。

raised cap
浮かし頭文字。サイズは3行分ですが、落下はしません。

7.2. 頭文字の選択

この節は規範的ではありません。

頭文字は通常1文字ですが、句読点やユーザーが一つのタイポグラフィ単位と認識する文字列を含むこともあります。::first-letter擬似要素([SELECT][CSS-PSEUDO-4]で定義)は、頭文字として整形する文字を選択できます。

より細かな文字選択や、置換要素・複数単語に頭文字スタイリングを適用したい場合は、ブロックコンテナーの最初のインラインレベル子要素にinitial-letterプロパティを直接指定できます。

<p>この段落はドロップキャップTを持ちます。
<p><img alt="H" src="illuminated-h.svg">ここでは装飾されたHがあります。
<p><span>単語にも</span> 段落冒頭で頭文字スタイリングを適用できます。
::first-letter, /* 最初の段落のTにスタイル */
img, /* 装飾Hにスタイル */
span /* span内の語にスタイル */
{ initial-letter: 2; }

注意:::first-letterは最初の文字の前後の句読点も選択するため、::first-letter使用時はこれらも頭文字に含まれます。

Paragraph showing both opening quote and first letter set as three-line drop cap
::first-letter擬似要素は引用符と“M”両方を選択します。

この挙動を避ける方法が必要か? GitHub Issue 310参照。

7.3. 頭文字の作成:initial-letterプロパティ

名前: initial-letter
値: normal | <number [1,∞]> <integer [1,∞]> | <number [1,∞]> && [ drop | raise ]?
初期値: normal
適用対象: 特定のインラインレベルボックス、::first-letter::markerボックス(詳細は本文参照
継承: no
パーセンテージ: N/A
算出値: normalキーワードまたは数値+整数
正規順序: 文法通り
アニメーション型: 算出値型による

このプロパティは、ドロップキャップ・浮かし頭文字・沈み頭文字のサイズ沈み量(sink)を行数で指定します。

例えば、以下のコードは、h2の直後の段落先頭に2行分のドロップキャップを作成します:
h2 + p::first-letter { initial-letter: 2; }

主な値は以下の通り:

normal
特別な頭文字効果なし。通常のテキストとして扱う。
<number [1,∞]>
第一引数は頭文字のサイズ(占める行数)を指定します。1未満は不正です。
<integer [1,∞]>
第二引数(オプション)は、頭文字の沈み量(sink、何行下まで沈むか)を指定します。 1は浮かし頭文字、1より大きいと沈み頭文字になります。1未満は不正です。
raise
sink値が1として算出されます。
drop
sink値はサイズの整数切り捨てとなります。

sink値を省略した場合、dropが指定されたとみなされます。

normal以外の値を指定すると、対象ボックスは頭文字ボックスとなり、 特別なレイアウト動作を持つin-flowインラインレベルボックスになります。

initial-letterの使用例:
initial-letter: 3
initial-letter: 3 3
initial-letter: 3 drop
initial-letter: drop 3
3行高・3行沈みのドロップキャップです。

3 lines high, 3 lines deep

initial-letter: 3 2
3行高・2行沈みの沈み頭文字です。

3 lines high, 2 lines deep

initial-letter: 3 1
initial-letter: 3 raise
initial-letter: raise 3
3行高・1行沈みの浮かし頭文字です。

3 lines high, 1 line deep

initial-letter: 2.51 3
頭文字のサイズは整数行でなくてもよく、この場合は上端のみ揃います。

Non-integral initial letter that only aligns at base

他のCSSプロパティと併用して、initial-letterで「隣接頭文字」(テキスト横に頭文字を配置)も作成できます:
p::first-letter {
  initial-letter: 3;
  color: red;
  width: 5em;
  text-align: right;
  margin-left: -5em;
}

p {
  margin-left: 5em;
}
Initial letter adjacent to text

7.3.1. 適用範囲

著者がどの文字を頭文字としてスタイリングするかをより細かく制御できるようにし、複数文字の頭文字(単語やフレーズのスタイリングなど)も可能にするため、 initial-letterプロパティはCSSで定義された::first-letter擬似要素だけでなく、 inside配置の::marker擬似要素や、 インラインレベルボックスで行頭に配置されたものにも適用されます。 具体的には、initial-letterは、 親ボックスの最初の子であり、 祖先(あれば)はその包含ブロックの子孫で、 すべて最初の子かつインラインボックスで、 算出された initial-letter値がnormalのものに適用されます。

例えば、 次の例中の<span><em><b>要素は <p>の「first-most inline-level descendants」となりますが、 <strong>要素は該当しません:
<p><span><em><b>This</b> phrase</em> is styled
<strong>specially</strong>.</span> …

以下のルールを適用した場合:

em { initial-letter: 2; }
b, strong { initial-letter: 3; }

initial-letterプロパティが有効になるのは <em>のみです。 <b>へのスタイリングは、祖先がすでに頭文字としてスタイリングされているので無視され、 <strong>へのスタイリングは、2番目の兄弟要素なので無視されます。

結果のレンダリング例:

“This phrase” が2行にまたがるドロップキャップとなり、残りのテキストが横に回り込む

initial-letterインラインレベルボックスに適用されていても、 ビディ再順序や他のインラインレベル内容により 行頭に配置されていない場合、 使用値normalとなり、 頭文字として整形されません。

initial-letterプロパティの効果は、 ルビベースコンテナボックスの子や、 ルビコンテナボックスの子では未定義です。

注: initial-letterプロパティは、 floatnoneでない要素や positionstaticでない要素には適用できません。 なぜならこれらの値はdisplayblockに算出させるためです。

7.4. 頭文字の整列: initial-letter-align プロパティ

前述の通り、頭文字の整列は使用する書記体系によって異なります。 initial-letter-alignプロパティで適切な整列方法を指定できます。

名前: initial-letter-align
値: [ border-box? [ alphabetic | ideographic | hanging | leading ]? ]!
初期値: alphabetic
適用対象: 特定のインラインレベルボックス、::first-letter::markerボックス(詳細は本文参照
継承: yes
パーセンテージ: N/A
算出値: 指定キーワード
正規順序: 文法通り
アニメーション型: 離散

このプロパティは頭文字のサイズ・位置決め時に使う整列点を指定します。 整列点は2セット必要です: 頭文字overunder整列点を、ルートインラインボックスの対応するoverunder点に揃える形になります。

各値の意味:

alphabetic
周囲テキストのcap-heightalphabeticベースラインを使って頭文字を整列。
ideographic
周囲テキストのideographic-ink-overideographic-ink-underベースラインで頭文字を整列。
hanging
周囲テキストのhangingalphabeticベースラインで頭文字を整列。
leading
周囲テキストのover/under half-leading端(ascent/descenthalf-leading)で頭文字を整列。

注: これは頭文字の端を影響する最初/最後の行の行間中央に揃える形となり、インド系組版の一部などで使われる効果です。 詳細 [ILREQ].

border-box
頭文字ボックスline-underline-overborder edgeをover/under整列点に使う。
前述の縦書き例(§ 7.1 頭文字の概要)は次のように記述できます:
span.initial {
  initial-letter: 2;
  initial-letter-align: ideographic;
}

border-box指定時以外は、 頭文字の整列点は内容から自動決定されます:

  1. 頭文字がアトミックインラインなら、over/under内容ボックス端を使う。
  2. 頭文字がHan, Hangul, Kana, Yi Unicode scriptプロパティを持つ文字を含む場合は、 ideographic-ink-overideographic-ink-underベースラインを使う。
  3. 頭文字がHan, Hangul, Kana, Yi Unicode scriptプロパティを持つ文字を含む場合は、 hangingalphabeticベースラインを使う。
  4. それ以外はcap-heightalphabeticベースラインを使う。
ヘブライ語・タイ語など一部書記体系の頭文字整列は、現状OpenTypeメトリクスが未定義のため正確に指定できません。 (Issue 5244)
Hebrew 2-line drop-letter alignment using the hebrew-top and alphabetic baselines

注: このプロパティのキーワード順は固定であり、border-box[ border-box | alphabetic | ideographic | hanging ]のように展開される場合、頭文字の整列点を明示的に指定できるようになります。

7.4.1. UAデフォルトスタイルシートの initial-letter-align

より適切な既定動作を提供するために、 UAはデフォルトUAスタイルシートに以下のルールを含める必要があります:

[lang]:lang(zh, ja, ko, ii) {
  initial-letter-align: ideographic;
}
[lang]:lang(hi, mr, ne, pi, kok, brx, mai, sd, sa) {
  initial-letter-align: hanging;
}
/* Script tags override language tags */
[lang]:lang('*-Latn', '*-Cyrl') {
  initial-letter-align: alphabetic;
}
[lang]:lang('*-Hani', '*-Hant', '*-Hans') {
  initial-letter-align: ideographic;
}

これは主要な言語横断転写体系のみをカバーしています。 他のスクリプトタグもUAスタイルシートに含めるべきでしょうか?

7.5. 頭文字レイアウト

頭文字ボックスには2種類あります: 非置換のインラインボックス由来のものと、 アトミックインライン由来のものです。

非アトミックなインライン頭文字の場合、 そのボックスと内容は 行が属するインライン整形コンテキストに参加し、 期待通りのサイズや整列になるよう多くの特別な規則が適用されます。

アトミック頭文字の場合は、 置換要素であるか、 内容に対して独立整形コンテキストを確立するものであり、 ボックスのサイズ(自動サイズ以外のブロック軸)や ボックス内の内容レイアウトは通常通りであり、 主にボックスの位置決めが特別になります。

7.5.1. 頭文字に適用されるプロパティ

インラインボックスに適用可能なプロパティは、 インライン頭文字にも適用されますが、 vertical-alignとそのサブプロパティfont-sizeline-heightline-fit-edgeinline-sizingは除外されます。 さらにサイズ指定プロパティbox-sizing頭文字に適用されます([css-sizing-3]参照)。

アトミックインラインに適用可能なプロパティは、 アトミックインライン頭文字としてスタイリングされた場合も適用されますが、 vertical-alignとそのサブプロパティは除外されます。

7.5.2. マージン・ボーダー・パディング

頭文字には他のボックス同様にmarginpaddingborderを指定できます。 ただしinitial-letter-alignborder-boxでなければ、 垂直整列やフォントサイズ指定には影響しません。 ただし実効的な除外領域(通常は頭文字margin boxinitial-letter-wrap参照))には影響します。

paddingとborderがゼロの場合、頭文字はカーニングされる場合があります(下記参照)。

7.5.3. 頭文字のフォントサイズ

インライン頭文字の場合、 頭文字内容のフォントサイズは、 指定されたサイズinitial-letter参照)に整列点(initial-letter-align参照)をアンカーとして合うように算出します。 この計算にはレイアウトは不要で、算出値とフォントメトリクスのみで決まります。 この使用フォントサイズ算出は、算出font-sizeには影響しません。 そのためem長さ値等の計算にも影響しません。

子孫への継承はどう扱うか? [Issue #4988]

この計算で使う行間は、包含ブロックのline-heightです。 (ベースライングリッド使用時は、ベースライングリッドで定義されたベースライン間隔 [CSS-LINE-GRID-1]) 行で跨がれる内容や行の高さ・位置の変動は計算に含みません。

Text underlay shows how initial letter alignment
		          is not affected by the content of the spanned lines.

西洋書記体系でN行ドロップキャップの場合、 頭文字のcap-heightは(N – 1) × line-height + 本文のcap-height となります。 この高さは頭文字自体のフォントサイズではありません

実際のフォントサイズ計算は難しく、 N行ドロップキャップのフォントサイズは次式で求められます:

Font size of drop cap = ((N-1) * line-height + [cap-height of para] * [font size of paragraph])/[cap-height ratio of drop initial font]

この計算式はa)書記体系・整列点によらず一般化すること b)非整数サイズにも対応することが必要です。

Adobe Minion Proで3行ドロップキャップの場合、 12ptテキスト・16pt line-height・cap-height 651/1000(フォントのOS/2テーブルより)でフォントサイズは61.2ptとなります。

アトミック頭文字では、 使用フォントサイズは通常通り算出された値になります。

7.5.4. 字形形成とグリフ選択

initial-letternormal以外の場合、 インライン頭文字は 字形形成のために分離されますが、 その後のテキストは本来インライン頭文字ボックスの境界をまたいで字形形成されるべきです。 (CSS Text 3 § 7.3 要素境界を跨ぐ字形形成参照) 例えば「يحق」の最初の文字をinitial-letter: 2 1でスタイリングすると、 最初の文字は孤立形「ي」として頭文字となり、 後続の「ﺤﻖ」は通常通り頭文字の内容の後に続くものとして形が決まります。

Two-line Arabic drop-cap showing isolated form of the first letter, connected form of the rest of the word.
2行のアラビア語ドロップキャップ

7.5.5. 頭文字ボックスのサイズ指定

インライン頭文字の場合、 頭文字希望幅/希望高さ明示的であれば、 その値(必要に応じて最小サイズ最大サイズプロパティでクランプし、 box-sizingも考慮)がボックスのその寸法に使われます。

そうでなければ、その寸法は自動サイズとみなし、 内容ボックスは以下両方を収容するようにサイズ決定されます:

ただし、block-startpaddingborderが両方ゼロの場合、 block-start内容エッジは over整列点と完全に一致し、その上にあふれる内容はレイアウト上無視されます。

注: インライン頭文字にアセンダーがあり、 それがover整列点より上に伸びている場合、著者がmarginを頭文字か包含ブロック側のどちらにも指定しないと、 そのアセンダーが前の内容と衝突する可能性があります。

注: このようなアセンダーに必要なスペースを自動でmarginとして扱い、 包含ブロックmarginと折り畳めるようにすれば、 必要になるまで余分なスペースを課さず、必要な時だけ確保できるため便利です。 実装の複雑さ次第で将来的な検討も可能ですが、現状は著者が明示的にスペースを指定する必要があります。

hanging-punctuationをボックス内に含めるべきか? (border/backgroundで見える場合はボックスをpunctuation含めて描画し、位置決め時のみ除外?flush配置でpunctuationだけぶら下げる形?) 議論参照。

アトミック頭文字は、 そのアトミックインライン型に通常通りサイズ指定されます。 ただし、ボックスが自動ブロックサイズauto)の場合は、 block sizeインライン頭文字のborder-box整列に準じて決まり、 明示的となります。

7.5.6. 頭文字ボックス内の整列

デフォルト(自動サイズ時)は、 インライン頭文字の内容ボックスは内容にぴったり合わせてサイズ決定され、 text-alignalign-contentは適用されません。 ただしボックスが自動サイズでない場合:

7.6. 頭文字の位置決めとスペーシング

7.6.1. ブロック軸での配置

ブロック軸では、頭文字は その行ボックスoriginates)に対し、 整列(initial-letter-align)と指定沈み量initial-letter)に従って配置されます:

注: 頭文字は本質的に、 initial-letterの第2引数で指定された行数分沈み、 必要なunder整列点に揃うよう配置されます。 これは包含ブロックに頭文字だけがあり、その後に無限のプレーンテキストが ルートインラインボックスの直接内容として続く場合を仮定した位置です。 影響を受ける行ボックスの内容による行間不整合は頭文字の位置に影響しません。

Constant-sized text underlay shows how initial letter alignment
		          is not affected by the content of the spanned lines.

頭文字は、それが参加する行ボックスの論理高さを増やすことはありません。 上下にはみ出てもよいです。 自身のblock-startmargin edge包含ブロックblock-startcontent edgeより下になるよう配置され、 その結果、originating line box(や後続内容)がそのエッジから遠ざかることもあります。

7.6.2. インラインカーニング

頭文字が非アトミックインラインで、 自動インラインサイズかつ パディング・ボーダーがゼロの場合、 そのmargin boxはカーニング(負方向インセット)されます。 これは内容ボックスの開始端から、本来頭文字でなければline boxの開始端に置かれるはずの内容までの距離(つまりグリフ外接ボックスと開始サイドベアリングの差分)だけです。 このインセットは実質的に ボックスへの追加のinline-start marginとなります。

7.7. 頭文字回り込み:initial-letter-wrap プロパティ

注: initial-letter-wrapはリスクあり。

名前: initial-letter-wrap
値: none | first | all | grid | <length-percentage>
初期値: none
適用対象: 特定のインラインレベルボックス、::first-letter::markerボックス(詳細は本文参照
継承: yes
パーセンテージ: (頭文字の最後の断片の)論理幅に対する割合
算出値: 指定キーワードまたは算出済み<length-percentage>
正規順序: 文法通り
アニメーション型: 算出値型による

このプロパティは、頭文字によって影響を受ける行が、 頭文字ボックスの矩形かグリフ輪郭に合わせて短縮されるかどうかを指定します。

none
輪郭フィッティングは実施されません。 影響行はすべて inline-endmargin edge頭文字に揃えて短縮されます。
first
noneと同じ挙動だが、 頭文字直後の最初のtypographic character unitがUnicode General Category Zsなら適用。 そうでなければ、頭文字を含むブロックの1行目はallと同じ、その他はnoneになる。
この例はなぜ1行目だけ輪郭フィットが必要か、また頭文字直後がスペースの時はなぜ不要かを示します:
optical kerning in the presence or absence of a space after the initial letter
上段は頭文字"A"の後に単語スペースがあり、Aの上と次文字の間に十分な空間ができます。 下段はAが単語の一部なので、Aの上と次文字の間に空間を残すと単語内で不自然な空白が生じます。 この場合、1行目だけ頭文字のインクにめり込んでカーニングすべきです。

無条件のfirstは必要か? (値名をautoに変更し、スペースチェックしないfirst値を追加?)GitHub issue 410参照

all
頭文字に影響される各テキスト行について、 頭文字に隣接する行ボックスは 頭文字のグリフ輪郭と重ならない最も開始端から始まる。

shape-outsidenoneでない場合は、グリフ輪郭の代わりにshape-outsideが使われる。

いずれの場合もshape-marginで輪郭が拡張され、 その輪郭は頭文字margin edgeでクリップされます。

注: この値はリスクあり。

grid
この値はnoneと同じですが、 影響行の除外領域の終端が文字グリッドに揃うように拡大されます。 すなわち、(1icletter-spacing)の倍数になるように 包含ブロック上で計算されます。 justify-selfで 頭文字ボックスを除外領域内で整列できます。
Diagram of Japanese initial letter in vertical writing mode
縦書き日本語での頭文字の除外領域例

注: この例では、ドロップキャップの除外領域はグリフより大きくなり、インライン軸の揃えを維持します。

注: この値もリスクあり。

<length>
<percentage>
この値はfirstと同様ですが、 1行目の調整量をグリフ形状から推定するのではなく明示的に指定します。

フォント相対長さ指定は使用サイズ基準であるべき。

注: この値は実装が容易なため存在します。 著者はfirst値と marginでスペーシングを制御し、グリフ検出のフォールバックとして本値を使うことを推奨します。

次の例では、UAがfirstをサポートすればグリフ輪郭+指定marginで1行目位置決めし、 <length><percentage>値のみサポートなら 頭文字幅の40%分1行目を引き込み、marginを加えます。
h1 + p:first-letter {
  initial-letter: 3; /* 3-line drop-cap */
  initial-letter-wrap: first;
  margin-right: 0.1em;
}
@supports (not (initial-letter-wrap: first)) {
  /* Classes auto-generated on paragraphs to match first letter. */
  p.A:first-letter {
    initial-letter-wrap: -40%; /* Start of glyph outline, assuming correct font. */
  }
}

これらの値や関連する煩雑さは、Blinkがfirstサポートすれば不要になる可能性あり。

auto値の挙動を様々な文脈で示す図を編集すること

p::first-letter {
  initial-letter: 3;
  initial-letter-wrap: none;
}
regular dropcap A
回り込みなしの普通の頭文字。
p::first-letter {
  initial-letter: 3;
  initial-letter-wrap: all;
}

text wrapping around dropcap A

テキストは頭文字の形状に沿って回り込みます。 各行ボックスは文字インクにちょうど触れるよう(灰色ボックスで表現)配置されます。

p::first-letter {
  initial-letter: 3;
  initial-letter-wrap: first;
}

text wrapping around dropcap A but only on first line

最初の行だけが頭文字インクにめり込んで配置されます。

p::first-letter {
  initial-letter: 3;
  initial-letter-wrap: all;
}

text wrapping around dropcap V

text wrapping around dropcap P

text wrapping around dropcap W

7.8. 行レイアウト

頭文字ボックスは、 in-flowとして ブロック整形コンテキストに属し、 その出現した行ボックスoriginating line box)の内容の一部となります。 垂直軸以外(§ 7.6.1 ブロック軸での配置参照)は、 行の他の内容との相互作用は インラインレベル内容と同様ですが、 一部に特別な詳細があります…

7.8.1. インラインフローレイアウト:整列・ジャスティフィケーション・空白処理

頭文字ボックスは、 そのインラインレベル内容と同様に originating line boxで 整列・ジャスティフィケーション・空白処理に参加します。

ただし、影響行の整列を一貫させるため、折り畳み可能な空白沈み頭文字と その後の内容との間のoriginating line上で 折り畳まれます。 また、通常は沈み頭文字と後続内容の並びで生じる letter-spacingjustification opportunityは抑制されます。 (ただし、word-spacingjustification opportunity単語区切りで生じる場合は影響しません。 これは空白自体がtypographic character unitとして供給され、 隣接文字との並びで生じるものではないためです。)

7.8.2. 行端効果:インデントとぶら下がり句読点

text-indenthanging-punctuation頭文字originating line boxに通常通り適用され、 行頭(頭文字自身も含む)の内容がシフトします。 除外影響を受ける後続行も通常通り短縮されますが、 頭文字の位置によってはその度合いが変わることもあります。

initial letter with text indent
インデント付き頭文字

initial-letterhanging-punctuationの相互作用は 議論中です。

7.8.3. 祖先インライン

頭文字ボックスインラインボックス祖先に含まれる場合、 それらインラインボックスの境界は 頭文字ボックスを除外する形で描画されます。 これは純粋な幾何的操作であり、 プロパティの継承や letter-spacingの有効値等には影響しません。

7.8.4. 複数行頭文字

頭文字が1行に収まらない場合、通常の折り返し規則に従って改行され、 各行は頭文字が長すぎて後続テキストが入らない場合の1行目と同じように埋められ、整形されます。 頭文字の後の通常テキストはその最終行から始まり、 その行が1行目であった場合と同じように影響を受けます。

multi-line drop cap
ドロップキャップが2行にまたがる例。

7.9. 頭文字のクリア(回避)

7.9.1. 浮かし頭文字・沈み頭文字

頭文字のmargin boxは包含要素のサイズに寄与します。 1行目より上に伸びる頭文字("浮かしキャップ"や"沈みキャップ"として知られる)は前要素に食い込むことはありません。 頭文字のcontent boxにはグリフインク全体が含まれるため、 頭文字のcap-heightより上のアクセント記号やインクも前要素に影響しません。

raised cap para after normal para
右:浮かし頭文字(initial-letter: 3 1)。 “C”の位置は両例で同じですが、 右では全テキストが頭文字に対し下に移動しています。

フォントのcap-height上のグリフインク処理。 提案:これを除外領域とし、行ボックス・border boxにも適用。頭文字marginも除外領域に含めてスペーシング制御。

ボックスモデル図を追加すること。頭文字marginはコンテナと折り畳まれるか?

7.9.2. 短い段落と頭文字

頭文字付き段落は、頭文字が占める行数より本文が少ない場合もあります。 この場合でも頭文字の上端整列は維持され、 除外領域は後続ブロックにも継続します。 そのため後続インライン内容は頭文字の周りに回り込むことになり(まるでそのブロックテキストが自身の包含ブロックの一部であるかのように)、 フロートが後続ブロック内容を除外するのと同様です。

short para with initial letter
赤字が頭文字付き短い段落。 後続段落も頭文字の周りに回り込む。

後続ブロックが頭文字から始まる場合、 独立整形コンテキストを確立する場合、 あるいは頭文字の包含ブロックの開始方向で clear指定がある場合、 先行ブロックの頭文字をクリア(回避)する必要があります。

short para with initial letter followed by para with initial
赤字が頭文字付き短い段落。 後続段落も頭文字があるためクリアされる。

7.9.3. フロートとの相互作用

頭文字floatではありません。 in-flowインラインレベル内容で、 行ボックスに属します。 したがって:

initial letter interacting with floats
頭文字がなければ、最初の行は青floatに接することができる。 しかし頭文字があるため、テキストは移動する。

floatと隣接内容のレイアウトについてはCSS2§9.5参照。 [CSS2]

後続行由来のinline-end floatも頭文字をクリアすべきか?(inline-start float同様) 議論中。 美的理由はないが、基礎レイアウトモデルで両者を区別できるかは未定。

7.9.4. 断片化(ページ分割)との相互作用

単一グリフは断片化して ページ(やカラム、その他断片化コンテナ)を跨ぐことはできないため、 頭文字は ブロック軸断片化(ページ・カラム・領域分割等)に関しては monolithicとみなされます([CSS-BREAK-3])。 また、頭文字と並ぶin-flow行の間での分割も避けられます(widows, orphansの回避と同様)。 ただし、 頭文字ボックスの横で強制分割があればそちらが優先され、 頭文字ボックス自体には影響ありません。

他のmonolithicオブジェクトと同様、 頭文字ボックスが 断片化コンテナfragmentation containerの先頭に現れ、 その断片化コンテナが頭文字ボックスを収容するには短すぎる場合、 頭文字ボックスは切り詰め・切断される場合もあります。 ただし隣接内容は独自の規則に従って断片化され、 頭文字と一緒に切り詰め・切断されることはありません。

付録A: 整列メトリクスの合成

A.1: Em-overEm-underの算出

注: em-overおよびem-underベースラインはCSSで使用されません。 これらの定義は、Canvas TextMetrics APIで使われる他のメトリクスとの一貫性のために本モジュールに含まれています。

em-overおよびem-underメトリクスは以下のように算出します:

注: この計算により、em-overem-underは常に正確に1em離れ、 グリフ輪郭の「重心」がちょうど中間になるよう調整されます。

A.2: テキストのベースライン(他のフォントメトリクス)の合成

一部のフォントには、本モジュールで説明した適切なテキスト整列に必要なメトリクス情報が含まれていない場合があります。 UAは必要なメトリクスがない場合、以下の方法を用いてもよい:

関連メトリクスの利用
特定のメトリクスには典型的な関係性があり、この関係性を使って欠損メトリクスを(少なくともヒューリスティックに)導出できます。 フォントフォーマット自体に具体的な計算方法がなければ、以下の規則を利用できます:
  1. central baselineは、 ideographic-overideographic-underベースラインの中間点と定義されるので、 いずれか2つが分かれば残り1つも決定できる。
  2. ideographic-overideographic-underベースラインは通常1em離れているので、 ideographic-over/ideographic-under/centralのいずれか1つしかない場合も、この関係から残り2つが算出できる。
  3. CJKフォントではascentdescentideographic-overideographic-underベースラインに一致することが多いので、 両方とも欠損している場合は代用できる。
フォントの計測
メトリクスはグリフ形状から導出してもよい。 例えば:
  1. マイナス記号(U+2212)の中心を数学ベースラインとみなす。
  2. 小文字「o」がalphabeticベースラインより下にどれだけ伸びているかをその最高点から引くことで x-heightを測る。
    measuring the x height of the letter o
    x-heightの測定例。
  3. 大文字「O」がalphabeticベースラインより下にどれだけ伸びているかをその最高点から引くことでcap-heightを測る。
  4. 永(U+6C38)の外接ボックスを使い、表意文字の文字面端を求める。
  5. ヘブライ語He(U+05D4 “ה”)の中心の上端をヘブライ語のhangingベースラインとみなす。
  6. Ka文字の中心上端をhangingベースラインとみなす。 どのKaを使うかは内容言語による:
    言語 スクリプト 文字
    デーヴァナーガリー क U+0915 KA
    ベンガル ক U+0995
    グルムキー ਕ U+0A15
    チベット ཀ U+0F40

    デフォルトを決めること。

    finding the position of the hanging baseline of the letter ka
    hangingベースラインは文字インクの上端。
  7. 課題: ここにさらに注記を追加する?

これらのヒューリスティックの妥当性チェックをお願いします。

フォールバック値の利用
以下のフォールバック値を推奨します:
  • x-height: .5em;
  • cap-height: .66em;
  • hangingベースライン: .6em;

A.3: アトミックインラインのベースライン合成

アトミックインライン(inline-block, inline-table, 置換要素等)が、 参加するインライン整形コンテキストインライン軸で 内容由来のbaseline setを持たない場合、 UAは以下のようにベースラインを合成して整列しなければなりません。

これらのベースラインは、 そのline-undermargin edge上にあるとみなされます:

これらのベースラインは、 そのline-underline-overmargin edgeの ちょうど中間点にあるとみなされます:

これらのベースラインは、 そのline-overmargin edgeにあるとみなされます:

注: 著者はmargin(正・負)を使って置換コンテンツの行内整列を調整できます。

この例では、著者は未収録文字を表示するため画像を利用しています。
img[src^="/text/"] {
  height: 1em; /* Adjacentテキストに合わせてサイズ調整 */
  margin-bottom: -0.2em; /* ベースラインを下端より20%上に調整 */
}
...
<p>これは未符号化文字で単語を書いたテキストです:
<img src="/text/ch3439.png" alt="...">
  <img src="/text/ch3440.png" alt="...">
  <img src="/text/ch3442.png" alt="...">

注: CSSの将来レベルでは、置換要素に完全なbaseline tableを指定する方法が追加されるかもしれません。 (この場合、baseline-tableプロパティで[<baseline-keyword> <percentage>]+のような指定ができる見込みです。)

変更点

2024年8月12日版ワーキングドラフト以降の変更:

2024年8月8日版ワーキングドラフト以降の変更:

2023年4月1日版ワーキングドラフト以降の変更:

2022年11月14日版ワーキングドラフト以降の変更:

2020年8月28日版ワーキングドラフト以降の変更:

2020年6月18日版ワーキングドラフト以降の変更:

2020年6月4日版ワーキングドラフト以降の変更:

2018年8月8日版ワーキングドラフト以降の変更:

さらに以前の2016年5月24日版以降の変更も参照。

謝辞

初期著者Eric A. MeyerとMichel Suignardに特別な感謝を。

著者以外にも、次の方々の協力がなければ本仕様は成立しませんでした:

David Baron、 Mike Bremford、 David M Brown、 Oriol Brufau、 John Daggett、 Stephen Deach、 Sylvain Galineau、 David Hyatt、 Myles Maxfield、 Shinyu Murakami、 Jan Nicklas、 Tess O’Connor、 Sujal Parikh、 Florian Rivoal、 Alan Stearns、 Weston Thayer、 Bobby Tung、 Chris Wilson、 Grzegorz Zygmunt。

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

本仕様に関して新たなプライバシー上の考慮事項は報告されていません。

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

本仕様に関して新たなセキュリティ上の考慮事項は報告されていません。

適合性

文書上の慣例

適合要件は記述的な断言と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"で規範文から区別されます。例:

注:これは情報提供用の注記です。

アドバイスは規範的なセクションであり、特別な注意を喚起するスタイルで他の規範文と区別され、<strong class="advisement">で示されます。例: UAはアクセシブルな代替手段を提供しなければなりません。

適合クラス

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

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

スタイルシートが本仕様に適合するためには、本モジュールで定義される構文を使ったすべての文が、汎用CSS文法および各機能の個別文法に従って有効でなければなりません。

レンダラーが本仕様に適合するためには、スタイルシートを適切な仕様どおりに解釈することに加え、本仕様で定義されるすべての機能を正しくパースし、文書をその通りにレンダリングすることが必要です。ただし、デバイスの制限によりUAが文書を正しくレンダリングできない場合でも、そのUAが非適合となるわけではありません(例:UAがモノクロモニター上で色をレンダリングする必要はありません)。

オーサリングツールが本仕様に適合するためには、汎用CSS文法および本モジュールの各機能の個別文法に従って構文的に正しいスタイルシートを書き出し、かつ本モジュールで述べるスタイルシートの他の適合要件も満たす必要があります。

部分的な実装

著者が将来互換性のあるパース規則を利用してフォールバック値を指定できるように、CSSレンダラーは、利用可能なレベルのサポートがないatルール、プロパティ、プロパティ値、キーワード、その他構文要素を無効として扱い、適切に無視しなければなりません。特に、UAは未サポート値(無効値)は選択的に無視せず、1つの複数値宣言内でサポート値のみを尊重してはなりません。いずれかの値が無効(未サポート値は必ずそうなる)とみなされる場合、CSSの規則に従い宣言全体が無視されなければなりません。

不安定機能・独自拡張の実装

将来の安定CSS機能との競合を避けるため、CSSWGはベストプラクティスに従い、不安定な機能独自拡張CSSの実装を推奨します。

実験的でない実装

仕様が候補勧告段階(CR)に達した後は、実験的でない実装が可能となり、実装者は仕様どおりに正しく実装できると証明できるCRレベル機能については、プレフィックスなしでリリースすべきです。

CSSの実装間で相互運用性を確立・維持するため、CSSワーキンググループは、実験的でないCSSレンダラーがCSS機能のプレフィックスなし実装をリリースする前に、実装レポート(必要なら使用したテストケースも)をW3Cに提出することを要請します。W3Cに提出されたテストケースはCSSワーキンググループによるレビュー・修正の対象となります。

テストケースおよび実装レポートの提出方法については、CSSワーキンググループのWebサイトhttps://www.w3.org/Style/CSS/Test/を参照してください。 質問はpublic-css-testsuite@w3.orgメーリングリストまで。

索引

本仕様で定義される用語

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

参考文献

規範的参考文献

[CSS-ALIGN-3]
Elika Etemad; Tab Atkins Jr.. CSS Box Alignment Module Level 3. 2023年2月17日. WD. URL: https://www.w3.org/TR/css-align-3/
[CSS-BACKGROUNDS-3]
Elika Etemad; Brad Kemper. CSS Backgrounds and Borders Module Level 3. 2024年3月11日. CR. URL: https://www.w3.org/TR/css-backgrounds-3/
[CSS-BOX-3]
Elika Etemad. CSS Box Model Module Level 3. 2024年4月11日. REC. URL: https://www.w3.org/TR/css-box-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-3]
Rossen Atanassov; Elika Etemad. CSS Fragmentation Module Level 3. 2018年12月4日. CR. URL: https://www.w3.org/TR/css-break-3/
[CSS-BREAK-4]
Rossen Atanassov; Elika Etemad. CSS Fragmentation Module Level 4. 2018年12月18日. WD. 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-COUNTER-STYLES-3]
Tab Atkins Jr.. CSS Counter Styles Level 3. 2021年7月27日. CR. URL: https://www.w3.org/TR/css-counter-styles-3/
[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-FONTS-4]
Chris Lilley. CSS フォントモジュール レベル4。2024年2月1日。作業草案(WD)。URL: https://www.w3.org/TR/css-fonts-4/
[CSS-LISTS-3]
Elika Etemad; Tab Atkins Jr.. CSS リスト・カウンターモジュール レベル3。2020年11月17日。作業草案(WD)。URL: https://www.w3.org/TR/css-lists-3/
[CSS-MULTICOL-1]
Florian Rivoal; Rachel Andrew. CSS マルチカラムレイアウトモジュール レベル1。2024年5月16日。勧告候補(CR)。URL: https://www.w3.org/TR/css-multicol-1/
[CSS-PAGE-FLOATS-3]
Johannes Wilm. CSS ページフロート。2015年9月15日。作業草案(WD)。URL: https://www.w3.org/TR/css-page-floats-3/
[CSS-POSITION-3]
Elika Etemad; Tab Atkins Jr.. CSS 配置レイアウトモジュール レベル3。2024年8月10日。作業草案(WD)。URL: https://www.w3.org/TR/css-position-3/
[CSS-PSEUDO-4]
Daniel Glazman; Elika Etemad; Alan Stearns. CSS 疑似要素モジュール レベル4。2022年12月30日。作業草案(WD)。URL: https://www.w3.org/TR/css-pseudo-4/
[CSS-RUBY-1]
Elika Etemad; 他. CSS ルビ注釈レイアウトモジュール レベル1。2022年12月31日。作業草案(WD)。URL: https://www.w3.org/TR/css-ruby-1/
[CSS-SHAPES-1]
Rossen Atanassov; Alan Stearns. CSS シェイプモジュール レベル1。2022年11月15日。勧告候補(CR)。URL: https://www.w3.org/TR/css-shapes-1/
[CSS-SIZING-3]
Tab Atkins Jr.; Elika Etemad. CSS ボックスサイズモジュール レベル3。2021年12月17日。作業草案(WD)。URL: https://www.w3.org/TR/css-sizing-3/
[CSS-TEXT-3]
Elika Etemad; Koji Ishii; Florian Rivoal. CSS テキストモジュール レベル3。2024年9月30日。勧告候補(CR)。URL: https://www.w3.org/TR/css-text-3/
[CSS-TEXT-4]
Elika Etemad; 他. CSS テキストモジュール レベル4。2024年5月29日。作業草案(WD)。URL: https://www.w3.org/TR/css-text-4/
[CSS-VALUES-3]
Tab Atkins Jr.; Elika Etemad. CSS 値と単位モジュール レベル3。2024年3月22日。勧告候補(CR)。URL: https://www.w3.org/TR/css-values-3/
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad. CSS 値と単位モジュール レベル4。2024年3月12日。作業草案(WD)。URL: https://www.w3.org/TR/css-values-4/
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii. CSS ライティングモード レベル4。2019年7月30日。勧告候補(CR)。URL: https://www.w3.org/TR/css-writing-modes-4/
[CSS2]
Bert Bos; 他. Cascading Style Sheets レベル2 リビジョン1 (CSS 2.1) 仕様書。2011年6月7日。勧告(REC)。URL: https://www.w3.org/TR/CSS21/
[CSS22]
Bert Bos. Cascading Style Sheets レベル2 リビジョン2 (CSS 2.2) 仕様書。2016年4月12日。作業草案(WD)。URL: https://www.w3.org/TR/CSS22/
[QUIRKS]
Simon Pieters. Quirks モード標準。リビングスタンダード。URL: https://quirks.spec.whatwg.org/
[RFC2119]
S. Bradner. RFCs における要件レベルを示すキーワード。1997年3月。現行最良プラクティス。URL: https://datatracker.ietf.org/doc/html/rfc2119
[SVG2]
Amelia Bellamy-Royds; 他. スケーラブル・ベクター・グラフィックス (SVG) 2。2018年10月4日。勧告候補(CR)。URL: https://www.w3.org/TR/SVG2/

参考情報文献

[CSS-LINE-GRID-1]
Elika Etemad; 石井宏治; Alan Stearns. CSSライングリッドモジュール レベル1。2014年9月16日。作業草案(WD)。URL: https://www.w3.org/TR/css-line-grid-1/
[CSS-WRITING-MODES-3]
Elika Etemad; 石井宏治. CSSライティングモード レベル3。2019年12月10日。勧告(REC)。URL: https://www.w3.org/TR/css-writing-modes-3/
[ILREQ]
Swaran Lata. インド系組版要件。2020年5月29日。作業草案(WD)。URL: https://www.w3.org/TR/ilreq/
[SELECT]
Tantek Çelik; 他. セレクター レベル3。2018年11月6日。勧告(REC)。URL: https://www.w3.org/TR/selectors-3/

プロパティ一覧

名前 初期値 適用対象 継承 %指定 アニメーション型 正規順序 算出値
alignment-baseline baseline | text-bottom | alphabetic | ideographic | middle | central | mathematical | text-top baseline インラインレベルボックス、フレックスアイテム、グリッドアイテム、テーブルセル、SVGテキスト内容要素 no N/A 離散 文法通り 指定キーワード
baseline-shift <length-percentage> | sub | super | top | center | bottom 0 インラインレベルボックス、SVGテキスト内容要素 no line-heightの使用値を参照 算出値型による 文法通り 指定キーワードまたは算出済み<length-percentage>値
baseline-source auto | first | last auto インラインレベルボックス no N/A 離散 文法通り 指定キーワード
dominant-baseline auto | text-bottom | alphabetic | ideographic | middle | central | mathematical | hanging | text-top auto ブロックコンテナ、インラインボックス、テーブル行、グリッドコンテナ、フレックスコンテナ、SVGテキスト内容要素 yes N/A 離散 文法通り 指定キーワード
initial-letter normal | <number [1,∞]> <integer [1,∞]> | <number [1,∞]> && [ drop | raise ]? normal 特定のインラインレベルボックス、::first-letterおよび::markerボックス内(詳細は本文参照) no N/A 算出値型による 文法通り normalキーワードまたは数値+整数
initial-letter-align [ border-box? [ alphabetic | ideographic | hanging | leading ]? ]! alphabetic 特定のインラインレベルボックス、::first-letterおよび::markerボックス内(詳細は本文参照) yes N/A 離散 文法通り 指定キーワード
initial-letter-wrap none | first | all | grid | <length-percentage> none 特定のインラインレベルボックス、::first-letterおよび::markerボックス内(詳細は本文参照) yes initial letterの(最後の断片の)論理幅に対する割合 算出値型による 文法通り 指定キーワードまたは算出済み<length-percentage>値
inline-sizing normal | stretch normal インラインボックス(ただしルビコンテナボックスおよび内部ルビボックスは除く) yes n/a 離散 文法通り 指定キーワード
line-fit-edge leading | <text-edge> leading インラインボックス yes N/A 離散 文法通り 指定キーワード
line-height normal | <number [0,∞]> | <length-percentage [0,∞]> normal 非置換インラインボックス、SVGテキスト内容要素 yes 1em基準で算出 算出値型による 文法通り 指定キーワード、数値、または算出済み<length>値
text-box normal | <'text-box-trim'> || <'text-box-edge'> normal ブロックコンテナおよびインラインボックス no N/A 離散 文法通り 指定キーワード
text-box-edge auto | <text-edge> auto ブロックコンテナおよびインラインボックス yes N/A 離散 文法通り 指定キーワード
text-box-trim none | trim-start | trim-end | trim-both none ブロックコンテナおよびインラインボックス no N/A 離散 文法通り 指定キーワード
vertical-align [ first | last] || <'alignment-baseline'> || <'baseline-shift'> baseline 個別プロパティ参照 no N/A 個別プロパティ参照 文法通り 個別プロパティ参照

課題一覧

レイアウトの多くの側面はフォントメトリクスに依存しています。 ラテン・キリル・ギリシャおよびCJKについてはOpenTypeに関連メトリクスがありますが、 他の多くの書記体系には不足しています。 例えば、ヘブライ語の視覚的な上端メトリクスはOpenTypeテーブルにありません。 このモジュールが世界中でうまく機能するには、すべての書記体系に対してフォントが関連メトリクスを提供する必要があります。 つまりOpenTypeがこうしたメトリクスを許容し、フォントデザイナーが正確な数値を提供する必要があります。 詳細はissueリエゾンステートメント参照。
top/bottom/center整列ボックスが他の内容より背が高い場合の処理を定義してください。
Firefoxはphantom line box内のインラインボックスがoutlineを受け入れることを許容し、フォーカスリングを表示できます。 他のブラウザーと同様、要素を可視化する他のプロパティ(例:box-shadowなど)は無視されるようです。
CSSWGは各プロパティでどのベースライン値が必要か知りたいです (dominant-baselinealignment-baselinetext-box-edgeline-fit-edgeinitial-letter-align): 削除できるものや追加が必要なものがあれば教えてください。 Issue 859参照。
指定ベースラインがcentralでない場合、縦書き混在の整列挙動が意味不明にならないよう定義してください。
line-relative shift valuesは、 alignment-baselinebaseline-shiftの二分法に完全には当てはまりません。 議論議論もあります。 現時点ではこの仕様で扱っていますが、移動の強い理由があればissueで提案してください。
baseline値は削除したいと考えており、SVG UAからフィードバックを求めています。
パーセンテージが長さに算出されるのは煩わしいです。 Issue 3118Issue 2165も参照。
これは初期ドラフトであり、 デザイン批評やユースケースの登録によって大きく変わる可能性があります。 また他のプロパティとの詳細な相互作用も調整中です。まだ出荷しないでください。
longhandsは必要ですか?このショートハンドだけで十分ですか?[Issue #5236]
textは アセンダ・ディセンダメトリクスに適した命名でしょうか。他に良い案は? leadingキーワードも同様。 [Issue #8067]
この図は実際のフォントメトリクスと一致せず、cap-heightを示していてascentではありません。[Issue #11364]
例を追加してください。
カラムがspannerで分割された場合どうなりますか?[Issue #11363]
この名称は分かりづらいです。新名称が必要です。 あるいはtext-box-trimに統合しますか?[Issue #5189]
編集者は西洋以外のスクリプト、とくにインド系でのドロップキャップの例を求めています。
この挙動をオプトアウトできる手段は必要でしょうか?GitHub Issue 310参照。
ヘブライ語やタイ語など一部書記体系で頭文字の正しい整列はOpenTypeに対応メトリクスがなく現状不可能です。 (Issue 5244)
Hebrew 2-line drop-letter alignment using the hebrew-top and alphabetic baselines
これは主要な言語横断転写体系のみをカバーしています。 UAスタイルシートに他の/全てのスクリプトタグも含めるべきでしょうか?
子孫への継承はどう扱うべきですか?[Issue #4988]
この計算式を a) 書記体系・整列点に依存せず汎用化すること、b) 非整数サイズを扱えるようにしてください。
hanging-punctuationをボックス内に含めるべきか? (borderやbackgroundで表示される場合はボックスでpunctuationも囲み、位置決め時のみ除外? 頭文字はflush配置、punctuationは正しくぶら下げる形?) 議論参照。
無条件のfirstは必要ですか? (この値名をautoに変更し、スペース判定しないfirst値を追加?)GitHub issue 410参照。
本来はフォント相対長さが使用サイズ基準である必要があります。
Blinkがfirstをサポートすれば、これらの値や煩雑さは不要になる可能性があります。
auto値の挙動を様々な文脈で示す図を編集してください。
initial-letterhanging-punctuationの相互作用は議論中です。
フォントのcap-height上のグリフインク処理。 提案:これを除外領域とし、行ボックス・border boxも含める。頭文字のmarginも除外領域に含めてスペーシングを制御。
ボックスモデル図を追加してください。頭文字のmarginはコンテナと折り畳まれるか?
後続行由来のinline-end floatも頭文字をクリアすべきか?(inline-start float同様) 議論中。 美的理由はないが、基礎レイアウトモデルで両者を区別できるかは未定。
デフォルト値を決めてください。
これらのヒューリスティックの妥当性チェックをお願いします。