在 Apache FOP2 中的图像之间内联文本
Inlining Text between images in Apache FOP2
我正在尝试在图像之间嵌入文本 test
,但是一旦我添加文本,文本的顶部和底部就会出现间距。
正如我 一样,为了摆脱那些破坏图像布局的顶部和底部间距,我需要将字体大小设置为 0:
但是如果你想显示文本,字体大小为零是非常无用的。
<fo:block font-size="0" >
<fo:external-graphic src=" http://www.mycee.com/image/20135-Test-Mockup-V1.0-01_13.jpg"/>
</fo:block>
<fo:block background-color="pink" font-size="0pt" >
<fo:external-graphic src="http://www.mycee.com/image/20135-Test-Mockup-V1.0-01_14.jpg"/>
test
<fo:external-graphic src="http://www.mycee.com/image/20135-Test-Mockup-V1.0-01_16.jpg"/>
</fo:block>
<fo:block background-color="magenta" font-size="0" >
<fo:external-graphic src=" http://www.mycee.com/image/20135-Test-Mockup-V1.0-01_17.jpg"/>
</fo:block>
将文本放在 fo-inline
中,我至少可以去掉顶部的填充,但底部的填充仍然会破坏我的布局。
<fo:inline font-size="10pt">
test
</fo:inline>
在图像之间插入文本而不导致文本在顶部或底部出现填充的正确方法是什么?
更新
终于成功了
<fo:block background-color="pink" line-height="2.4mm" line-stacking-strategy="none" font-size="11pt">
<fo:table>
<fo:table-column/>
<fo:table-column/>
<fo:table-column/>
<fo:table-body>
<fo:table-row>
<fo:table-cell text-align="left">
<fo:block>
<fo:external-graphic
src="http://www.mycee.com/images/20135-Test-Mockup-V1.0-01_14.jpg"/>
</fo:block>
</fo:table-cell>
<fo:table-cell text-align="right">
<fo:block>
12345678.90
</fo:block>
</fo:table-cell>
<fo:table-cell text-align="right">
<fo:block>
<fo:external-graphic
src="http://www.mycee.com/images/20135-Test-Mockup-V1.0-01_16.jpg"/>
</fo:block>
</fo:table-cell>
</fo:table-row>
</fo:table-body>
</fo:table>
</fo:block>
如果缩放足够大,您最终会看到一条线,但对于打印而言,这是完美的。
您看到的"padding"可能是由于行高的计算方式所致。
行高由两个不同的 FO 属性控制:
line-height
设置起始值,该值源自方块的文本内容;它的默认值为 normal
,FOP 将其计算为 1.2 * font-size
line-stacking-strategy
控制如果 fo:block
除简单文本外还包含内联元素(fo:inline
s、图像...)时如何修改起始值;它默认为 max-height
,这意味着(粗略地说)增加行高以适应具有更大字体大小的图像和内联
现在,让我们看看您的具体情况:
font-size
默认为12pt,即行高的初始值为1.2 * 12pt = 14.4pt;如果您的图像的高度小于该高度,它们将在顶部和底部显示一些 space
- 设置
font-size="0pt"
有点管用,因为初始行高为 0pt,随后会增加到图像的高度
建议更改:
- 尝试在包含文本和图像的
fo:block
元素中使用 line-height="x" line-stacking-strategy="font-height"
(其中 x
是图像的高度);这些属性的综合效果是将行高设置为精确的给定值
(披露:我是一名 FOP 开发人员,虽然现在不是很活跃)
我正在尝试在图像之间嵌入文本 test
,但是一旦我添加文本,文本的顶部和底部就会出现间距。
正如我
但是如果你想显示文本,字体大小为零是非常无用的。
<fo:block font-size="0" >
<fo:external-graphic src=" http://www.mycee.com/image/20135-Test-Mockup-V1.0-01_13.jpg"/>
</fo:block>
<fo:block background-color="pink" font-size="0pt" >
<fo:external-graphic src="http://www.mycee.com/image/20135-Test-Mockup-V1.0-01_14.jpg"/>
test
<fo:external-graphic src="http://www.mycee.com/image/20135-Test-Mockup-V1.0-01_16.jpg"/>
</fo:block>
<fo:block background-color="magenta" font-size="0" >
<fo:external-graphic src=" http://www.mycee.com/image/20135-Test-Mockup-V1.0-01_17.jpg"/>
</fo:block>
将文本放在 fo-inline
中,我至少可以去掉顶部的填充,但底部的填充仍然会破坏我的布局。
<fo:inline font-size="10pt">
test
</fo:inline>
在图像之间插入文本而不导致文本在顶部或底部出现填充的正确方法是什么?
更新
终于成功了
<fo:block background-color="pink" line-height="2.4mm" line-stacking-strategy="none" font-size="11pt">
<fo:table>
<fo:table-column/>
<fo:table-column/>
<fo:table-column/>
<fo:table-body>
<fo:table-row>
<fo:table-cell text-align="left">
<fo:block>
<fo:external-graphic
src="http://www.mycee.com/images/20135-Test-Mockup-V1.0-01_14.jpg"/>
</fo:block>
</fo:table-cell>
<fo:table-cell text-align="right">
<fo:block>
12345678.90
</fo:block>
</fo:table-cell>
<fo:table-cell text-align="right">
<fo:block>
<fo:external-graphic
src="http://www.mycee.com/images/20135-Test-Mockup-V1.0-01_16.jpg"/>
</fo:block>
</fo:table-cell>
</fo:table-row>
</fo:table-body>
</fo:table>
</fo:block>
如果缩放足够大,您最终会看到一条线,但对于打印而言,这是完美的。
您看到的"padding"可能是由于行高的计算方式所致。
行高由两个不同的 FO 属性控制:
line-height
设置起始值,该值源自方块的文本内容;它的默认值为normal
,FOP 将其计算为 1.2 *font-size
line-stacking-strategy
控制如果fo:block
除简单文本外还包含内联元素(fo:inline
s、图像...)时如何修改起始值;它默认为max-height
,这意味着(粗略地说)增加行高以适应具有更大字体大小的图像和内联
现在,让我们看看您的具体情况:
font-size
默认为12pt,即行高的初始值为1.2 * 12pt = 14.4pt;如果您的图像的高度小于该高度,它们将在顶部和底部显示一些 space- 设置
font-size="0pt"
有点管用,因为初始行高为 0pt,随后会增加到图像的高度
建议更改:
- 尝试在包含文本和图像的
fo:block
元素中使用line-height="x" line-stacking-strategy="font-height"
(其中x
是图像的高度);这些属性的综合效果是将行高设置为精确的给定值
(披露:我是一名 FOP 开发人员,虽然现在不是很活跃)