Edit

Page

Page title:

Page body:

[4] [[行内書式付け文脈]]において[[行内箱]]は[[水平]]方向に順に配置され、[RUBYB[[[行]]]@en[line]]を形成します。
この時、1つの[[行]]を形成する[[行内箱]]を含んだ[RUBYB[[[矩形]]の領域]@en[rectangular area]]のことを[DFN[[RUBYB[[[行箱]]]@en[line box]]]]といいます。

* 仕様書

- [[CSS 2.1]]
-- [3] [CITE@en[Visual formatting model]] ([TIME[2009-09-04 22:00:16 +09:00]] 版) <http://www.w3.org/TR/CSS21/visuren.html#inline-formatting>

* レンダリング

** 水平方向

*** 幅と左右の位置

[5] [[行箱]]の[RUBYB[[[幅]]]@en[width]]は[[包含ブロック]]と、[RUBYB[[[浮動]]]@en[float]]が存在するか否かによって決まります。 [SRC[>>3]]

[10] [RUBYB[[[左辺]]]@en[left edge]]は[[包含ブロック]]の[[左辺]]に接します。
[RUBYB[[[右辺]]]@en[right edge]]は[[包含ブロック]]の[[右辺]]に接します。
ただし、[RUBYB[[[浮動箱]]]@en[floating box]]が[[包含ブロック]]の[[辺]]と[[行箱]]の[[辺]]の間に入ることもあります。
[SRC[>>3]]

;; ですから、同じ[[行内書式付け文脈]]にある[[行箱]]は通常はすべて同じ[[幅]]で、[[包含ブロック]]の[[幅]]と同じになるわけですが、
[RUBYB[[[浮動]]]@en[float]]によって利用可能な[[水平]]方向の空間が限られているなら、
[[行幅]]同士で変わってくることもあります。[SRC[>>3]]

*** 字揃え

[13] [[行]]内の[[行内箱]]の[[幅]]の和が[[行箱]]の[[幅]]よりも小さい時には[[行箱]]の中身の[[水平]]方向の分布は
[CODE(CSS)@en['[[text-align]]']] [[特性]]によって決まります。
[CODE(CSS)@en['[[justify]]']] なら[[利用者エージェント]]は[[行内箱]]
([RUBYB[[[行内表箱]]]@en[inline-table box]]や[RUBYB[[[行内ブロック箱]]]@en[inline-block box]]を除きます。)
の中の[RUBYB[[[間隔]]]@en[space]]や[RUBYB[[[語]]]@en[word]]を[RUBYB[伸長]@en[stretch]]して[['''構いません''']]。
[SRC[>>3]] [CODE(CSS)@en['[[left]]']] なら[[左]]に、 [CODE(CSS)@en['[[right]]']]
なら[[右]]に詰めて配置されます。

** 垂直方向

*** 高さ

[12] [[行箱]]は[[包含ブロック]]の[RUBYB[上]@en[top]]から順に並べられます。

[6] [[行箱]]の[RUBYB[[[高さ]]]@en[height]]は、
@@ ...

[7] [[行箱]]の[[高さ]]はそれに含まれる[[箱]]のいずれよりも大きいです。
各[[箱]]の[[高さ]]が[[行箱]]より小さい時の[[垂直方向]]の揃え方は [CODE(CSS)@en['[[vertical-align]]']] 
[[特性]]で決まります。
[WEAK[揃え方によっては一番[[高さ]]の大きな[[箱]]の高さよりも[[行箱]]の[[高さ]]の方が大きくなることもあります。]]
[SRC[>>3]]

[11] 同じ[[行内書式付け文脈]]にある[[行箱]]は、通常はそれぞれ違った高さを持ちます。
[SRC[>>3]]

*** 積み重ね

[8] 1つの[[行箱]]の中で[[行内箱]]を[[水平]]方向に収めることができない時には、
複数の[[行箱]]を[[垂直]]方向に[RUBYB[積み重ねて]@en[stack]]、そこに分けて当てはめます。
[SRC[>>3]]

[9] [[行箱]]を積み重ねる場合には、互いに重ならずに隙間も開けずに配置されます。
[SRC[>>3]]

** 行内箱の分割

[14] [[行内箱]]の[[幅]]が[[行箱]]の[[幅]]を超える場合には、[[行内箱]]は複数の[[箱]]に[RUBYB[分割]@en[split]]されて、
それぞれが複数の[[行箱]]にわたって配置されます。[[行内箱]]が分割できない場合、例えば
- [[行内箱]]が1[[文字]]だけの場合
- [[言語]]依存の[RUBYB[[[語]]分割規則]@en[word breaking rule]]が[[行内箱]]中での[RUBYB[分割]@en[break]]を認めていない場合
- [[行内箱]]が [CODE(CSS)@en['[[white-space]]']] の [CODE(CSS)@en['[[nowrap]]']] や
[CODE(CSS)@en['[[pre]]']] の影響を受ける場合

... などには[[行内箱]]は[[行箱]]を[RUBYB[溢れる]@en[overflow]]ことになります。
[SRC[>>3]]

[15] [[行内箱]]が分割される時に[[余白]]、[[境界線]]、[[詰め]]の見た目は変化しません。[SRC[>>3]]
従って、例えば周囲に[[境界線]]が描かれる[[行内箱]]が2つに分割された場合、分割されることによって生じた辺は[[境界線]]が描かれません。

[16] [[行内箱]]は[RUBYB[[[双方向性テキスト処理]]]@en[bidirectional text processing]]によって同じ[[行箱]]の中であっても複数に分割されることがあります。
[SRC[>>3]]

** 零高行箱

[17] [[行箱]]は、
- [RUBYB[[[テキスト]]]@en[text]]を含まない
- [RUBYB[保持]@en[preserve]]される[RUBYB[[[空白]]]@en[white space]]がない
- [[余白]]、[[境界線]]、[[詰め]]が0ではない[[行内要素]]がない
- 他の[RUBYB[[[フロー内内容]]]@en[in-flow content]] ([[画像]]、[[行内ブロック]]、[[行内表]]など) がない
- [RUBYB[[[改行]]]@en[line feed]]で終わらない

... なら、[RUBYB[[[零高行箱]]]@en[zero-height line box]]として扱わなければ[['''なりません''']]。
[[余白]]の [[collapse]] においては[[零高行箱]]は無視しなければ[['''なりません''']]。
[SRC[>>3]]

* 関連

[18] [[相対配置]]による移動は一旦[[通常フロー]]で配置が行われた後に行われます。
従って、移動は[[行箱]]の高さが確定した後に行われるため、[[相対配置]]の垂直方向の移動によって[[箱]]が[[行箱]]からはみ出すこともあります。

* メモ

[1]
[CITE@en[CSS3 module: line]] ([TIME[2008-02-24 16:22:04 +09:00]] 版) <http://dev.w3.org/cvsweb/~checkout~/csswg/css3-linebox/Overview.html?content-type=text/html;%20charset=utf-8>

[19] [CITE@en[Gloss the CSS term "line box" · whatwg/html@59ffb6e]]
([TIME[2016-03-02 15:14:01 +09:00]] 版)
<https://github.com/whatwg/html/commit/59ffb6e5774f34c307022b832893f38e701f2c36>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)