Sizing a graphic to the font size in XSL FO

Making a poster about XSLT usage in xmlroff for XML Prague, the fun moment was replacing the uses of “xmlroff” with the xmlroff logo.

xmlroff-logo-font-size

To do the deed, I added some XSL attributes to the <inline-graphic> element in my well-formed XML. I also made an entity declaration for &xmlroff; so I wouldn’t have to repeat the markup each time (and so, having got it right once, it would be right everywhere).

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE poster [
<!ENTITY xmlroff '<inline-graphic src="xmlroff.svg" alignment-adjust="-22.5&#37;"
height="from-parent(&apos;font-size&apos;)"/>' >
]>
<poster>
<title>Using XSLT in &xmlroff; for C Code Generation and XSL FO Testing</title>
<body>
<intro>
<para>&xmlroff; (http://xmlroff.org) is a fast, free, high-quality,...

where:

  • height="from-parent(&apos;font-size&apos;)" sets the graphic height to the current font-size
  • alignment-adjust="-22.5&#37;" (where “&#37;” is the numeric reference for “%”) moves the bottom of the graphic down so the baseline of the logo text lines up with the baseline of the regular text. When the alignment-adjust value is a percentage, it is calculated relative to the height, so it remains correct when the font size changes.

The XSL attributes are just copied through when transforming to XSL FO:

<xsl:template match="inline-graphic">
  <fo:external-graphic
    src="url('{@src}')"
    xsl:use-attribute-sets="graphic-atts"
    content-height="scale-to-fit"
    content-width="scale-to-fit"
    scaling-method="resample-any-method">
    <xsl:copy-of select="@height | @width | @content-height | @content-width |
@scaling-method | @alignment-adjust"/>
  </fo:external-graphic>
</xsl:template>

The result is slightly more interesting text, but also more readable where sentences and paragraphs that started with the all-lowercase “xmlroff” now start with the xmlroff logo.