Using fonts

Embedding fonts in the common formats is very easy. The formats Type1 (files .pfb and .afm) as well as TrueType and OpenType (files .ttf and .otf) are supported.

Loading fonts

To make fonts known and used by XTS, two steps are necessary. The first step is to load a font family:

<Stylesheet>
  @font-face {
        font-family: "Minion Pro";
        src: url("MinionPro-Regular.otf");
  }

  @font-face {
      font-family: "Minion Pro";
      src: url("MinionPro-Bold.otf");
      font-weight: bold;
  }
  @font-face {
      font-family: "Minion Pro";
      src: url("MinionPro-BoldIt.otf");
      font-weight: bold;
      font-style: italic;
  }
  @font-face {
      font-family: "Minion Pro";
      src: url("MinionPro-It.otf");
      font-style: italic;
  }
</Stylesheet>

This defines a font family with the name “Minion Pro” (including the space) with four different font files.

The last three fonts (bold, italic and bold italic) do not have to be specified if they are not used in the layout.

font size and leading

Font size and line height

Selecting fonts

The font can now be used by setting a style in a stylesheet:

layout.xml

<Stylesheet>
  body {
    font-family: serif;
  }
  .preface {
    font-family: sans;
  }
</Stylesheet>

<Paragraph>
    <Span class="preface">
      <Value>Preface</Value>
    </Span>
  <Value> more text</Value>
</Paragraph>

Text markup in the layout file

There are several ways to switch to the fonts bold, italic and bold-italic. The most direct one is to switch with the commands  and , these can also be nested within each other:

layout.xml

<PlaceObject>
  <Textblock>
    <Paragraph>
      <Value>A wonderful </Value>
      <B><Value>serenity</Value></B>
      <Value> has taken possession </Value>
      <I><Value>of my</Value>
        <Value> </Value>
        <B><Value>entire soul,</Value></B>
      </I>
      <Value> like these sweet mornings.</Value>
    </Paragraph>
  </Textblock>
</PlaceObject>

text markup in layout

Text markup in layout. Underline (not shown) is possible with the command 

Text markup in the layout file using HTML

You can use HTML markup directly within <Value>:

<PlaceObject>
  <Textblock>
    <Paragraph>
      <Value>A wonderful <b>serenity</b>
          has taken possession
          <i>of my <b>entire soul,</b></i>
          like these sweet mornings.
      </Value>
    </Paragraph>
  </Textblock>
</PlaceObject>

Text markup in the data

If there are markups in the data (e.g. as HTML tags), then this works in principle in exactly the same way:

<PlaceObject>
  <Textblock>
    <HTML select="."/>
  </Textblock>
</PlaceObject>

with the corresponding data:

<data>A wonderful <b>serenity</b> has taken possession
  <i>of my <b>entire soul,</b></i> like these sweet
  mornings.</data>

The result is the same as above. The tags can also be written in capital letters in the data:  instead of . Nesting is also allowed and again  is underlined.

ℹ️

If the data is not in well-formed XML but in HTML format for example, you can use the layout function sd:decode-html() to interpret it.

OpenType Features

The OpenType format knows so-called OpenType features, such as old style figures or small caps.

<Layout xmlns="urn:speedata.de/2021/xts/en"
    xmlns:sd="urn:speedata.de/2021/xtsfunctions/en">

    <Stylesheet>
        p {
            font-family: serif;
        }
        .regular {
            font-feature-settings: "lnum","tnum" ;
        }
        .smcp {
            font-feature-settings: "smcp" ;
        }
    </Stylesheet>

    <Record element="data">
        <PlaceObject>
            <Textblock>
                <Paragraph class="regular">
                    <Value>Text with table figures 1234567890</Value>
                </Paragraph>
                <Paragraph class="smcp">
                    <Value>Text with small caps 1234567890</Value>
                </Paragraph>
            </Textblock>
        </PlaceObject>
    </Record>
</Layout>

open type features

Table figures (above) have the same width and are often used in tabular typesetting. Real small caps (below) differ significantly from mathematically reduced capital letters. The line width and proportions must be adjusted. Depending on the font used, smallcaps also switches to “old style figures” which makes reading more pleasant.

The OpenType features can be set directly with the element, for example

layout.xml

<Layout xmlns="urn:speedata.de/2021/xts/en"
    xmlns:sd="urn:speedata.de/2021/xtsfunctions/en">

    <Record element="data">
        <PlaceObject>
            <Textblock>
                <Paragraph>
                    <Value>Use 1/4 cup of milk.</Value>
                </Paragraph>
                <Paragraph style="font-feature-settings: 'frac';">
                    <Value>Use 1/4 cup of milk.</Value>
                </Paragraph>
            </Textblock>
        </PlaceObject>
    </Record>
</Layout>

$frac opentype feature$ { width=“66.6%” }

Upper text without the frac feature, lower text with the feature.

A complete description of the OpenType features can be found in the OpenType spec. . The default features are the ones that are mentioned in the harfbuzz manual but without liga.

In which directory must the font files be located?

The organization of the files, and thus the fonts, is described in the directory File Organization. With xts --systemfonts when calling xts, you can access the system-wide font files.

Tips and tricks

In order to save yourself work in defining fonts, you can use the command

$ xts list-fonts

This will then list all font files found, together with a line that can be used directly in the stylesheet.

$ xts list-fonts
@font-face { font-family: "CamingoCode"; src: url("CamingoCode-Bold.ttf"); font-weight: bold; }
@font-face { font-family: "CamingoCode"; src: url("CamingoCode-BoldItalic.ttf"); font-weight: bold;  font-style: italic;}
@font-face { font-family: "CamingoCode"; src: url("CamingoCode-Italic.ttf"); font-style: italic;}
@font-face { font-family: "CamingoCode"; src: url("CamingoCode-Regular.ttf");}

ℹ️

If no font is specified for a paragraph or text block (etc.), the system uses the text font family, which is also predefined in XTS and can be overwritten. See the defaults in the reference.

XPath Using HTML and CSS