我需要在封面上显示一个大的背景图像。该映像需要:
- 缩小到
region-body
的宽度。 - 要准确地定位在
region-body
的底部。
使用background-image
不是一个选项,因为图像需要缩放。所以我用长region-before
打印图像,延伸到region-body
下方。它有效。
然后我尝试使用 absolute-position="absolute"
和 bottom="0cm"
将图像定位在region-before
的底部。不幸的是,bottom
并没有按照我预期的方式工作。(图像保留在顶部。
<?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>
有人有解决方案吗?
注意:我不想从顶部定位该图像,因为我无法在缩放后可靠地计算图像高度。
注意:它必须在 FOP 中工作。
使用 <fo:region-before display-align="after" />
(并省略fo:block-container
(。 请参阅 https://www.w3.org/TR/xsl11/#display-align。
FOP 一致性页面 (https://xmlgraphics.apache.org/fop/compliance.html( 指出 FOP 具有部分一致性,因此 YMMV。
用拉里·沃尔的话来说,有不止一种方法可以做到这一点:
<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>
使用 AH 格式化程序 V6.5 和 FOP 进行测试。
如果您稍微修改一下图像,则可以使用背景图像。例如,您可以创建一个与页面大小相同的空背景图像,并将图像放置在此空背景中的正确位置。
并找到缩放后的图像高度:
- 在支持以实际尺寸 (mm/in( 工作的任何图像编辑器中打开图像。插画师,例如Inkscape。
- 将图像缩放到所需的宽度。
- 测量高度(在 Inkscape 中:通过在图像上绘制一条垂直线(。
或者计算一下:您知道希望图像具有的宽度 (x( 以及图像的本机大小(高度 h 和宽度 w(。所需的高度 (y( 是 (x/w(*h。