Splitting page vertically in xslfo region-body and setting background color for one section

Question

I have been trying from many hours to achieve a very simple use case in xslfo which is very similar to the one as described in this question css background color with floating elements. Below is a sample of the code that I have tried so far.

<fo:page-sequence master-reference="A4">
    <fo:flow flow-name="xsl-region-body">
        <fo:block background-color="yellow">
            <fo:float float="left">
                <fo:block width="30%" background-color="red">Hello there
                </fo:block>
            </fo:float>
            <fo:float float="right">
                <fo:block width="70%" background-color="blue">Lorem Ipsum is
                    simply dummy text of the printing and typesetting industry. Lorem
                    Ipsum has been the industry's standard dummy text ever since the
                    1500s, when an unknown printer took a galley of type and
                    scrambled it to make a type specimen book. It has survived not
                    only five centuries, but also the leap into electronic
                    typesetting, remaining essentially unchanged. It was popularised
                    in the 1960s with the release of Letraset sheets containing Lorem
                    Ipsum passages, and more recently with desktop publishing
                    software like Aldus PageMaker including version
                </fo:block>
            </fo:float>
        </fo:block>
        <fo:block clear="both" />       
    </fo:flow>
</fo:page-sequence>

Basically I am trying to split the main page into two vertical sections and then depending on the height of the section which has more content vertically, I would like the assign the left section a background color occupying this height. Something like this:

Similarly, if the left section's content had more height, I would be having green background for that vertical height of the left section.

From the screenshot it looks like you got what you wanted. What is your question? — Hobbes, Mar 28 '18 at 14:26
That's actually output from a browser window, not pdf output from xslfo — Saurabh Gour, Mar 28 '18 at 14:30

Tony Graham · Accepted Answer · 2018-03-29T09:19:46.067

You could do it with an fo:table:

        <fo:table background-color="yellow">
            <fo:table-column column-width="30.0%" />
            <fo:table-column column-width="70.0%" />
            <fo:table-body>
                <fo:table-cell background-color="red">
                    <fo:block>Hello there </fo:block>
                </fo:table-cell>
                <fo:table-cell background-color="blue">
                    <fo:block>Lorem Ipsum is simply dummy text of the printing and
                        typesetting
                        industry. Lorem Ipsum has been the industry's standard
                        dummy text ever
                        since the 1500s, when an unknown printer took a
                        galley of type
                        and
                        scrambled it to make a type specimen book. It
                        has survived not only five
                        centuries, but also the leap into
                        electronic typesetting,
                        remaining
                        essentially unchanged. It was
                        popularised in the 1960s with the release
                        of Letraset sheets
                        containing Lorem Ipsum passages, and more
                        recently
                        with desktop
                        publishing software like Aldus PageMaker including
                        version
                    </fo:block>
                </fo:table-cell>
            </fo:table-body>
        </fo:table>

Getting the text in the right places by using only floats isn't hard. The hard part is getting the background color of the shorter text to cover its entire side.

Floats, but some yellow background:

<fo:block-container background-color="yellow">
    <fo:float float="left">
        <fo:block-container width="30%" background-color="red"><fo:block>Hello there</fo:block>
        </fo:block-container>
    </fo:float>
    <fo:float float="right">
        <fo:block-container width="70%" background-color="blue"><fo:block>Lorem Ipsum is
            simply dummy text of the printing and typesetting industry. Lorem
            Ipsum has been the industry's standard dummy text ever since the
            1500s, when an unknown printer took a galley of type and
            scrambled it to make a type specimen book. It has survived not
            only five centuries, but also the leap into electronic
            typesetting, remaining essentially unchanged. It was popularised
            in the 1960s with the release of Letraset sheets containing Lorem
            Ipsum passages, and more recently with desktop publishing
            software like Aldus PageMaker including version</fo:block>
        </fo:block-container>
    </fo:float>
</fo:block-container>

Using a fixed height on the shorter text and relying on overflow="hidden", as in the CSS question that you refer to, is a hack IMO. You can do that if you want:

<fo:block-container background-color="yellow" overflow="hidden">
        <fo:block-container width="30%" background-color="red">
            <fo:block>Lorem Ipsum is simply dummy text of the printing and typesetting
                industry. Lorem Ipsum has been the industry's standard dummy text ever
                since the 1500s, when an unknown printer took a galley of type and
                scrambled it to make a type specimen book. It has survived not only five
                centuries, but also the leap into electronic typesetting, remaining
                essentially unchanged. It was popularised in the 1960s with the release
                of Letraset sheets containing Lorem Ipsum passages, and more recently
                with desktop publishing software like Aldus PageMaker including version
            </fo:block>
        </fo:block-container>
        <fo:block-container width="70%" absolute-position="absolute" right="0" background-color="blue" height="300px">
            <fo:block>Hello there </fo:block>
        </fo:block-container>
</fo:block-container>

You can, however, combine both to get what you want:

<fo:block-container background-color="yellow" overflow="hidden">
    <fo:float float="left">
        <fo:block-container width="30%">
            <fo:block-container absolute-position="absolute" background-color="red" />
            <fo:block>Hello there</fo:block>
        </fo:block-container>
    </fo:float>
    <fo:float float="right">
        <fo:block-container width="70%">
            <fo:block-container absolute-position="absolute" background-color="blue" />
            <fo:block>Lorem Ipsum is simply dummy text of the printing and typesetting
                industry. Lorem Ipsum has been the industry's standard dummy text ever
                since the 1500s, when an unknown printer took a galley of type and
                scrambled it to make a type specimen book. It has survived not only five
                centuries, but also the leap into electronic typesetting, remaining
                essentially unchanged. It was popularised in the 1960s with the release
                of Letraset sheets containing Lorem Ipsum passages, and more recently
                with desktop publishing software like Aldus PageMaker including
                version</fo:block>
        </fo:block-container>
    </fo:float>
</fo:block-container>

Hi Tony, thank you for your answer. I just ran the code through apache fop and was able to get the desired output with some minor modifications which I will put in the edit. Just out of curiosity, could this have been achieved using fo:float also ? — Saurabh Gour, Mar 28 '18 at 18:06

Splitting page vertically in xslfo region-body and setting background color for one section

1 Answers1