rappot
rappot

Reputation: 89

Rendering multiple block-container as inline in FO

I'm a FO newbie.

I want to convert a XML document into a PDF file by using Xalan and FOP 1.1

I made a XSL stylesheet that convert source XML document into FO document. The XSL stylesheet works well except one thing;

Source XML

<?xml version="1.0" encoding="utf-8"?>
<root>
    ...
    <order>....</order>
    <books>...</book>
    <location>...</location>
    <item img="a.png" caption="caption1" />
    <item img="b.png" caption="caption2" />
    <books>...</book>
    <books>...</book>
    <item img="c.png" caption="caption1" />
    <location>...</location>
    ...
</root>

I want render adjacent 'item' elements in one line with Image(external graphic) and caption. However I can not sure how it can be done.

For example, below FO is rendered as separated lines. And when I use a line area element, it is not rendered at all. I also tried to use table-cells for each 'item' elements and it works perfectly. However I don't want to use table/table-cell. (There is complex reasons that related with source XML document and can not explain here...) I think there is some way to force block-container as 'line area', not 'block area'. Can you help me please? (Apache FOP 1.1)

<?xml version="1.0" encoding="utf-8"?>

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
<fo:layout-master-set>
<fo:simple-page-master master-name="main">
<fo:region-body />
</fo:simple-page-master>
</fo:layout-master-set>
<fo:page-sequence master-reference="main">
<fo:flow flow-name="xsl-region-body">
<fo:block>

    <!-- rendered as separated lines -->
    <fo:block>
        <!-- Component#1  -->
        <fo:block-container>
            <fo:block background-color="blue"><fo:external-graphic src="a.png" width="30mm" content-width="scale-down-to-fit" scaling="uniform" /></fo:block>
        <fo:block>Caption1</fo:block>
        </fo:block-container>
        <!-- Component#2  -->
        <fo:block-container>
        <fo:block background-color="blue"><fo:external-graphic src="b.png" width="30mm" content-width="scale-down-to-fit" scaling="uniform" /></fo:block>
        <fo:block>Caption2</fo:block>
        </fo:block-container>
    </fo:block>

    <!-- Using inline-container for each 'item' element, but nothing displaied -->
    <!-- Component#1  -->
    <fo:inline-container>
        <fo:block-container>
        <fo:block background-color="blue"><fo:external-graphic src="a.png" width="30mm" content-width="scale-down-to-fit" scaling="uniform" /></fo:block>
        <fo:block>Caption1</fo:block>
        </fo:block-container>
    </fo:inline-container>
    <!-- Component#2  -->
    <fo:inline-container>
        <fo:block-container>
        <fo:block background-color="blue"><fo:external-graphic src="b.png" width="30mm" content-width="scale-down-to-fit" scaling="uniform" /></fo:block>
        <fo:block>Caption2</fo:block>
        </fo:block-container>
    </fo:inline-container>

    <!-- Using table, work well. but it can not be used for source XML. -->
    <fo:table>
        <fo:table-body>
        <!-- Component#1 -->
        <fo:table-cell>
                <fo:block-container>
            <fo:block background-color="blue"><fo:external-graphic src="a.png" width="30mm" content-width="scale-down-to-fit" scaling="uniform" /></fo:block>
            <fo:block>Caption1</fo:block>
            </fo:block-container>
        </fo:table-cell>
        <!-- Component#2 -->
        <fo:table-cell>
            <fo:block-container>
            <fo:block background-color="blue"><fo:external-graphic src="b.png" width="30mm" content-width="scale-down-to-fit" scaling="uniform" /></fo:block>
            <fo:block>Caption2</fo:block>
            </fo:block-container>
        </fo:table-cell>

        </fo:table-body>
    </fo:table>

</fo:block>
</fo:flow>
</fo:page-sequence>
</fo:root>

Upvotes: 3

Views: 8957

Answers (1)

leisurelarry
leisurelarry

Reputation: 353

This is an old question, but maybe somebody can use the answer.

To put multiple images with label in the same "line" use the following code:

<fo:block>
  <fo:inline-container inline-progression-dimension="49.9%">
    <fo:block>image1</fo:block>
    <fo:block>label1</fo:block>
  </fo:inline-container>
  <fo:inline-container inline-progression-dimension="49.9%">
    <fo:block>image2</fo:block>
    <fo:block>label2</fo:block>
  </fo:inline-container>
</fo:block>

inline-progression-dimension obviously depends on the number of containers you want to place.

Upvotes: 7

Related Questions