CODEWITHSUNDEEP
xsl-foapache-fop
Christine VACHER
Christine VACHER

Reputation: 137

Position a scaled-down background image at the bottom of the body region

I need to display a large background image on the cover page. That image needs:

  1. To be shrunk to the width of region-body.
  2. To be positioned exactly at the bottom of region-body.

Using background-image is not an option since the image needs to be scaled. So I print the image in a long region-before that extends below the region-body. It works.

Then I try to position the image at the bottom of region-before using absolute-position="absolute" and bottom="0cm". Unfortunately, bottom does not work the way I expected. (The image stays to the top.)

<?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="section1-cover" page-height="11in" page-width="8.5in"
            margin-top="1cm" margin-bottom="0">
            <fo:region-before region-name="xsl-region-before" extent="11in - 1cm  - .75in"
                background-color="beige"/>
            <fo:region-body margin-top="1cm" margin-bottom=".75in" margin-right=".395in"
                margin-left=".395in"/>
            <fo:region-after region-name="xsl-region-after" extent=".75in" background-color="orange"/>
        </fo:simple-page-master>
    </fo:layout-master-set>
    <fo:page-sequence master-reference="section1-cover">
        <fo:static-content flow-name="xsl-region-before">
            <fo:block-container margin-right=".395in" margin-left=".395in"
                absolute-position="absolute" bottom="0cm">
            <!-- I expected that block-container to go down to the bottom -->
                <fo:block line-height=".5">
                <!-- line-height="1" seems more logical but yields unwanted extra space -->
                    <fo:external-graphic src="url('cover-background.jpg')" width="100%"
                        content-width="scale-down-to-fit"/></fo:block>
            </fo:block-container>
        </fo:static-content>
        <fo:flow flow-name="xsl-region-body">
            <fo:block font-size="28pt">Title</fo:block>
        </fo:flow>
    </fo:page-sequence>
</fo:root>

Does anyone have a solution?

Note: I don’t want to position that image from the top, since I cannot reliably compute the image height after scaling.

Note: It has to work in FOP.

Upvotes: 1

Views: 1952

Answers (2)

Tony Graham
Tony Graham

Reputation: 8068

Use <fo:region-before display-align="after" /> (and omit the fo:block-container). See https://www.w3.org/TR/xsl11/#display-align.

The FOP conformance page (https://xmlgraphics.apache.org/fop/compliance.html) states that FOP has partial conformance, so YMMV.

In the words of Larry Wall, there is more than one way to do it:

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
  <fo:layout-master-set>
    <fo:simple-page-master
        master-name="section1-cover"
        page-height="11in" page-width="8.5in">
      <fo:region-body
          margin-top="1cm"
          margin-bottom="0.75in"
          background-color="beige" />
      <fo:region-after
          region-name="xsl-region-after"
          extent=".75in"
          background-color="orange" />
    </fo:simple-page-master>
  </fo:layout-master-set>
  <fo:page-sequence master-reference="section1-cover">
    <fo:flow flow-name="xsl-region-body">
      <fo:block-container
          absolute-position="absolute"
          bottom="0in"
          left="0.395in"
          right="0.395in"
          display-align="after">
        <fo:block line-height="0">
          <fo:external-graphic
              src="url('cover-background.jpg')"
              width="100%"
              content-width="scale-down-to-fit"/>
        </fo:block>
      </fo:block-container>
      <fo:block
          margin-left="0.375in"
          margin-right="0.375in"
          font-size="28pt">Title</fo:block>
    </fo:flow>
  </fo:page-sequence>
</fo:root>

Tested with both AH Formatter V6.5 and FOP.

Upvotes: 2

Hobbes
Hobbes

Reputation: 2115

You can use background-image if you modify the image a bit. You can, for example create an empty background image of the same size as your page, and place your image in the correct position in this empty background.

And to find the image height after scaling:

  1. Open the image in any image editor that supports working in real-world sizes (mm/in). Illustrator, Inkscape for example.
  2. Scale the image to the width you want.
  3. Measure the height (in Inkscape: by drawing a vertical line across the image).

Or to calculate it: you know the width (x) you want the image to have, and the native size of the image (height h and width w). The height (y) you want is (x/w)*h.

Upvotes: 0

Related Questions