Reputation: 2669
I'm trying to write a small XSL-FO file with absolutely positioned elements. One of them is a label in the corner. I've managed to get it pretty close to but not quite what I want. Here it is:
I want to center the text vertically and horizontally. The horizontal position is OK, but the vertical is maybe centered according to the font metrics, but visually it's slightly to the top, so I'd like to move it a couple points down. But how do I do that? Here's the XSL-FO file:
<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>
I've tried to use baseline-shift
, alignment-adjust
, space-before
, etc., but neither of them seems to have any effect on the label.
The FO processor is Apache FOP in case that matters.
Upvotes: 1
Views: 1272
Reputation: 8068
If you know the font metrics, you could be a bit more accurate with the technique by @tmakita and set the padding to the difference between the font's altitude and cap-height. (I got these figures from AH Formatter GUI, but you could use FontForge or similar.)
<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>
If you were using AH Formatter, you could instead set text-altitude
and 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>
You may also be able to achieve the result just using 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>
I also tried inline SVG without much success:
<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>
Upvotes: 1
Reputation: 1304
How abou using @padding-before
to adjust vertical dimension spacing? Here is sample FO and the results both in FOP 2.6 and 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>
Upvotes: 1