前へ 次へ

第21章 サイドフロート

fo:floatのfloatプロパティを、start、end、left、right、inside、outsideのいずれかに指定すると、fo:floatの内容（画像など）は本文の流れとは切り離して脇に寄せて配置される。これをサイドフロートという。サイドフロートを使うことで、図を左右に寄せて本文は図を回り込ませたり、あるいは図を本文の左インデント内に配置して本文は図の右側に流したりできる。サイドフロートは直近先祖の参照エリアを基準に配置される。

21–1 フロートのプロパティ

プロパティfloatプロパティの値は配置基準とする参照エリアのどちらの辺にフロートを寄せるかを制御する。

表21･1 floatプロパティ
プロパティ値説明
beforefo:floatが生成するブロックエリアは前方フロート参照エリアの子孫になる（20–2 前方フロートを参照）。
startfo:floatが生成するブロックエリアはサイドフロートで、参照エリアの開始辺の方向にフロートする。
endfo:floatが生成するブロックエリアはサイドフロートで、参照エリアの終了辺の方向にフロートする。
leftfloat='start'と解釈する。
rightfloat='end'と解釈する。
insidefo:floatが生成するブロックエリアはサイドフロートで、のど側（綴じる辺）の方向にフロートする。
outsidefo:floatが生成するブロックエリアはサイドフロートで、小口側（外側の辺）の方向にフロートする。
none（初期値）fo:floatは通常のブロックエリアを生成する。

サイドフロートの配置方法は主にCSS2に由来している。

次の例はページの先頭に左フロートで画像を配置した。画像の上辺と本文の上辺を一致させるために画像を含むブロックの上マージンとハーフレディングをゼロにし、line-height.conditionality="discard"によりページ先頭行のline-heightを捨てている。

<fo:block text-indent="1em" 
          text-align="justify" 
          line-height.conditionality="discard">
  <fo:float float="start">
    <fo:block text-indent="0em" 
              margin="0em 0.5em 0.5em 0em" 
              line-height="1.0">
      <fo:external-graphic alignment-baseline="ideographic" 
                           height="5.6em" 
                           content-height="scale-to-fit" 
                           src="url(image-144.png)"/>
    </fo:block>
  </fo:float>脚注と前方フロートは設定の方法が異なるが配置方法は似ている。
  …略…
</fo:block>

images/side-float-1.png

図21･1 サイドフロートの配置例

サイドフロートは次の制約が適用される。

21–2 フロートの解除

エリアが、そのエリアのボーダー領域の前方辺がサイドフロートの後方辺の後に配置されるか、あるいは、サイドフロートの親の参照エリアの子孫ではないとき、エリアはサイドフロートを解除（クリア）するという。ブロックレベルのFOが生成するすべてのエリアがサイドフロートを解除するなら、そのFOはサイドフロートを解除するという。

プロパティclearプロパティをnone以外とするとサイドフロートを解除できる。このプロパティはブロックレベルのFOとfo:floatに適用する。同じ側のサイドフロートが連続すると横に並ぶが、二つ目のサイドフロートにclearを適用すると縦に並ぶ。

表21･2 clearプロパティ
プロパティ値説明
startこのFOが生成する各エリアは、このFOよりも前にあるfo:floatが生成したもので、かつ、各エリアの直近の先祖の参照エリアの子供になっているstart-floatをすべてクリアしなければならない。さらに、このFOが生成する各エリアの直近の先祖の参照エリアを含む参照エリアのチェーンは、このFOよりも前にあるfo:floatの生成するstart-floatの親の参照エリアを後ろに含んではならない。
endこのFOが生成する各エリアは、このFOよりも前にあるfo:floatが生成したもので、かつ、各エリアの直近の先祖の参照エリアの子供になっているend-floatをすべてクリアしなければならない。さらに、このFOが生成する各エリアの直近の先祖の参照エリアを含む参照エリアのチェーンは、このFOよりも前にあるfo:floatの生成するend-floatの親の参照エリアを後ろに含んではならない。
leftclear='start'と解釈する
rightclear='end'と解釈する
insideinside側のサイドフロートをクリアする。
outsideoutside側のサイドフロートをクリアする。
both両サイドのサイドフロートをクリアする。
none特に制約を課さない。

clearプロパティは、前方フロートには適用されない。

次の例は、二つの開始辺側のサイドフロートを二つ設定した。組版結果では二つのサイドフロートが縦方向で重なるため、二つ目のサイドフロートは一つ目の右側に配置される。

<fo:block text-indent="1em" 
          text-align="justify" 
          line-height.conditionality="discard">
  <fo:float float="start">
    <fo:block text-indent="0em" 
              margin="0em 0.5em 0.3em 0em" 
              line-height="1.0">
      <fo:external-graphic alignment-baseline="ideographic" 
                           height="5.8em" 
                           content-height="scale-to-fit" 
                           src="url(image-144.png)"/>
    </fo:block>
  </fo:float>脚注と前方フロートは設定の方法が異なるが配置方法は似ている。
  <fo:float float="start">
    <fo:block text-indent="0em" 
              margin="0.3em 0.5em 0.3em 0em" 
              line-height="1.0">
      <fo:external-graphic alignment-baseline="ideographic" 
                           height="5.8em" 
                           content-height="scale-to-fit" 
                           src="url(image-144.png)"/>
    </fo:block>
  </fo:float>ページが生成されたとき、脚注は本文区画内の下部に、前方フロートは本文区画内の上部に、それぞれ脚注参照エリアまたは前方フロート参照エリアを生成する。

images/sidefloat-2float.png

図21･2 二つのサイドフロート

次の例は、二つ目のサイドフロートに clear="start"を設定した。組版結果では二つのサイドフロートが縦方向に並ぶ。

<fo:block text-indent="1em" 
          text-align="justify" 
          line-height.conditionality="discard">
  <fo:float float="start">
    <fo:block text-indent="0em" 
              margin="0.0em 0.5em 0.3em 0" 
              line-height="1.0">
      <fo:external-graphic alignment-baseline="ideographic" 
                           height="5.8em" 
                           content-height="scale-to-fit" 
                           src="url(image-144.png)"/>
    </fo:block>
  </fo:float>脚注と前方フロートは設定の方法が異なるが配置方法は似ている。
  <fo:float float="start" clear="start">
    <fo:block text-indent="0em" 
              margin="0.3em 0.5em 0.3em 0em" 
              line-height="1.0">
      <fo:external-graphic alignment-baseline="ideographic" 
                           height="5.8em" 
                           content-height="scale-to-fit" 
                           src="url(image-144.png)"/>
    </fo:block>
  </fo:float>ページが生成されたとき、脚注は本文区画内の下部に、前方フロートは本文区画内の上部に、それぞれ脚注参照エリアまたは前方フロート参照エリアを生成する。

images/sidefloat-clear.png

図21･3 サイドフロートのクリア

21–3 侵入による移動

サイドフロートを配置したとき、本文内容テキストをサイドフロートと重ならないように移動することを侵入による移動という。プロパティintrusion-displaceは、サイドフロートの侵入によってラインエリアやブロックエリアを移動するときの、移動量の調整方法を設定する。ブロックレベルのFO並びにfo:table-captionとfo:list-itemに適用できる。

表21･3 intrusion-displaceプロパティ
プロパティ値説明
auto（初期値）参照エリアについては、blockが指定されたときと同じ。その他のエリアについてはlineが指定されたときと同じ。
noneラインエリアもブロックエリアも、サイドフロートの侵入による移動はしない。フロートはエリアの内容に影響を与えることなく重なる。但し、clearプロパティがnone以外のときは重ならない。
lineフロートの侵入が当該ラインエリアの内容領域と交差することがないよう、ラインエリアの開始辺（終了辺）を移動する。また、ラインエリアにtext-indentを適用する前の段階で判断する。結果としてラインエリアのインライン方向の幅が小さくなる。
indentこのプロパティが適用されるブロックエリアの中の各ラインエリアの開始辺（終了辺）を(a)最低限intrusion-displace='line'を指定したのと同じ量を移動する。(b)それに加えて、現在のラインの移動を引き起こす全ての侵入による他のすべてのラインの開始辺（終了辺）の移動との相対的な差異分を移動する。
blockブロックの開始辺（終了辺）を次の(a)(b)を満たす最小限の量だけ移動する。(a)当該のブロックと重なる全ての開始側（終了側）の侵入と、ブロックの開始辺（終了辺）が交差しないようにする。(b)親のエリアが参照エリアではないブロックエリアの場合、移動量は最低限、その親のエリアの移動量以上。なお、そのブロックと侵入の両方の配置矩形を横切るインライン方向の線が存在する場合、ブロックと侵入が重なるという。

前へ 次へ