[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]] 版) * レンダリング ** 水平方向 *** 幅と左右の位置 [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]] 版) [19] [CITE@en[Gloss the CSS term "line box" · whatwg/html@59ffb6e]] ([TIME[2016-03-02 15:14:01 +09:00]] 版)