调整块容器内块的垂直位置

Question

我正在尝试编写一个包含绝对定位元素的小型 XSL-FO 文件。其中之一是角落里的标签。我已经设法让它非常接近但不完全是我想要的。这是：

我想将文本垂直和水平居中。水平位置没问题，但垂直位置可能根据字体指标居中，但从视觉上看它略微偏向顶部，所以我想将它向下移动几个点。但是我该怎么做呢？这是 XSL-FO 文件：

<root xmlns="http://www.w3.org/1999/XSL/Format">
  <layout-master-set>
    <simple-page-master master-name="master">
      <region-body margin="0"/>
    </simple-page-master>
  </layout-master-set>

  <page-sequence master-reference="master">
    <flow flow-name="xsl-region-body">
      <block-container absolute-position="absolute" left="0" top="0" 
          width="42pt" height="42pt" background-color="#ed4a46" 
          display-align="center">
        <block font-family="Iosevka" font-size="24" color="white" 
            text-align="center">K3</block>
      </block-container>
    </flow>
  </page-sequence>
</root>

我尝试过使用baseline-shift、alignment-adjust、space-before等，但似乎都对标签没有任何影响。

如果重要的话，FO 处理器是 Apache FOP。

Answer 1

使用@padding-before调整垂直尺寸间距如何？这是示例 FO 以及 FOP 2.6 和 AH Formatter V7.1 GUI 中的结果。

<root xmlns="http://www.w3.org/1999/XSL/Format">
  <layout-master-set>
    <simple-page-master master-name="master">
      <region-body margin="0"/>
    </simple-page-master>
  </layout-master-set>

  <page-sequence master-reference="master">
    <flow flow-name="xsl-region-body">
      <block-container absolute-position="absolute" left="0" top="0" 
          width="42pt" height="42pt" background-color="#ed4a46" 
          display-align="center">
        <block font-family="Iosevka" font-size="24pt" color="white" 
            text-align="center" padding-before="2pt">K3</block>
      </block-container>
    </flow>
  </page-sequence>
</root>

Answer 2

如果您知道字体规格，使用@tmakita 的技术可能会更准确一些，并将填充设置为字体高度和大写高度之间的差值。（我从 AH Formatter GUI 获得了这些数字，但您可以使用 FontForge 或类似软件。）

<page-sequence master-reference="master">
  <flow flow-name="xsl-region-body">
    <block-container absolute-position="absolute" left="0" top="0" 
        width="42pt" height="42pt" background-color="#ed4a46" 
        display-align="center" color="white">
      <block line-stacking-strategy="line-height" font-family="Iosevka" font-size="24pt" 
             text-align="center" padding-before="0.783691em - 0.669103em">K3</block>
    </block-container>
  </flow>
</page-sequence>

如果您使用的是 AH Formatter，则可以改为设置 text-altitude 和 text-depth:

<page-sequence master-reference="master">
  <flow flow-name="xsl-region-body">
    <block-container absolute-position="absolute" left="0" top="0" 
        width="42pt" height="42pt" background-color="#ed4a46" 
        display-align="center" color="white">
      <block line-stacking-strategy="line-height" font-family="Iosevka" font-size="24pt" 
             text-align="center"
           text-depth="0" text-altitude="0.669103em">K3</block>
    </block-container>
  </flow>
</page-sequence>

您也可以使用 dominant-baseline:

获得结果

<page-sequence master-reference="master">
  <flow flow-name="xsl-region-body">
    <block-container absolute-position="absolute" left="0" top="0" 
        width="42pt" height="42pt" background-color="#ed4a46" 
        display-align="center">
      <block line-stacking-strategy="line-height" font-size="42pt"
           line-height="42pt" dominant-baseline="middle"
           text-align="center"
           ><inline font-family="Iosevka" font-size="24pt"
            color="white">K3</inline></block>
    </block-container>
  </flow>
</page-sequence>

我也试过内联 SVG，但没有成功：

<page-sequence master-reference="master">
  <flow flow-name="xsl-region-body">
    <block-container absolute-position="absolute" left="0" top="0" 
        width="42pt" height="42pt" background-color="#ed4a46" 
        display-align="center">
      <block color="white" 
             text-align="center" line-stacking-strategy="max-height" text-depth="0"><instream-foreign-object width="42pt" height="42pt" border="thin solid black"><s:svg xmlns:s="http://www.w3.org/2000/svg" width="42pt" height="42pt" style="-ah-alttext: 'K3'">
<s:g>
  <s:text x="21pt" y="21pt" fill="white" font-family="Iosevka" font-size="24pt" text-anchor="middle">K3</s:text>
</s:g>
s:svg></instream-foreign-object></block>
    </block-container>
  </flow>
</page-sequence>

调整块容器内块的垂直位置

Adjust the vertical position of a block inside a block-container

xsl-fo

apache-fop