Homepage-Webhilfe Event-Banner

Textformatierung

Schrift-Icon In XSL-FO gibt es einige Attribute, mit welchen Texte formatiert und Schrifteinstellungen festgelegt werden können. Diese Typografie-Attribute wollen wir in diesem Thema genauer erläutern. Verwendet werden diese Attribute entweder in block- oder in inline-Elementen. Zudem sind in einigen weiteren Elementen diese Attribute ebenfalls gültig. Falls Sie sich bereits mit CSS auskennen, werden Ihnen einige Attribute bekannt vorkommen.


Die Schriftfarbe lässt sich über das Attribut color festlegen. Als Werte sind Hex-RGB-Werte (#RRGGBB oder in der Kurzform #RGB), RGB-Funktionswerte (rgb(r, g, b)) und englische Farbnamen möglich. Die unterstützten Farbnamen sind vom FO-Prozessor abhängig, jedoch kann man davon ausgehen, dass grundlegende Farbnamen, wie z. B. red, blue oder lime, unterstützt werden.

XSL-FO-Code:

<?xml version="1.0" encoding="UTF-8" ?>

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
    <fo:layout-master-set>
        <fo:simple-page-master master-name="DIN-A4" page-height="297mm" page-width="210mm">
            <fo:region-body region-name="inhalt" margin="2cm" />
        </fo:simple-page-master>
    </fo:layout-master-set>
    
    <fo:page-sequence master-reference="DIN-A4">
        <fo:flow flow-name="inhalt">
            <fo:block>
                In diesem Dokument stehen alle Farben des 
                    <fo:inline color="#FF0000">R</fo:inline>
                    <fo:inline color="#00FF00">G</fo:inline>
                    <fo:inline color="#0000FF">B</fo:inline> Farbraums zur Verfügung!
            </fo:block>
        </fo:flow>
    </fo:page-sequence>
</fo:root>
VorschauPDF:

Um die Schriftart, also den Namen der Schrift, festzulegen, verwenden wir das Attribut font-family. Auch hier hängt es wieder vom FO-Prozessor ab, welche Schriften zur Verfügung stehen. Es ist jedoch zu empfehlen, nur Schriftarten zu verwenden, die laut der PostScript-Spezifikation in jedem PDF-Reader enthalten sein müssen: Helvetica, Times, Courier, Symbol und ZapfDingbats. Die Größe der Schrift wird über das Attribut font-size festgelegt. Hier wird ein Zahlenwert in Verbindung mit einer Maßeinheit angegeben.

XSL-FO-Code:

<?xml version="1.0" encoding="UTF-8" ?>

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
    <fo:layout-master-set>
        <fo:simple-page-master master-name="DIN-A4" page-height="297mm" page-width="210mm">
            <fo:region-body region-name="inhalt" margin="2cm" />
        </fo:simple-page-master>
    </fo:layout-master-set>
    
    <fo:page-sequence master-reference="DIN-A4">
        <fo:flow flow-name="inhalt">
            <fo:block font-family="Times" font-size="24px">Schriftart und Schriftgröße</fo:block>
            <fo:block font-family="Times" font-size="18px">
                XSL-FO unterstützt verschiedene Schrifarten (z. B. 
                    <fo:inline font-family="Courier">Courier</fo:inline> oder 
                    <fo:inline font-family="Helvetica">Helvetica</fo:inline>)
                und verschiedene Schriftgrößen (z. B. 
                    <fo:inline font-size="14px">14px</fo:inline>,
                    <fo:inline font-size="17px">17px</fo:inline> oder 
                    <fo:inline font-size="20px">20px</fo:inline>).
            </fo:block>
        </fo:flow>
    </fo:page-sequence>
</fo:root>
VorschauPDF:

Mit dem Attribut font-style können Sie die Schriftlage festlegen. Mögliche Werte für das Attribut sind normal (Normallage / gerade Schrift, Standardwert), italic (Kursiv-Schrift) und oblique (schräg gestellte Schrift). Oftmals ist zwischen italic und oblique kein Unterschied zu erkennen.

Die Schriftbreite bzw. Schriftdicke lässt sich über das Attribut font-weight festlegen. Als Werte können normal (normale Breite, Standardwert), bold (fette Schrift), light (dünne Schrift) sowie Zahlenwerte zwischen 100 und 900 (immer in 100er-Schritten), bolder und lighter angegeben werden. Keine der gängigen Schriftarten unterstützt jedoch andere Werte als normal und bold.

Mit Hilfe des Attributs text-decoration können Sie einem Text eine „Dekoration“ hinzufügen, gemeint sind damit Linien, um einen Text zu unterstreichen (underline), zu überstreichen (overline) oder durchzustreichen (line-through). Die Standardeinstellung ist none, welche keine Linie erzeugt.

Um die Groß- und Kleinschreibung in einem Text zu manipulieren, gibt es das Attribut text-transform. Mit dem Wert uppercase werden alle Buchstaben in Großbuchstaben umgewandelt und mit dem Wert lowercase werden alle Buchstaben in Kleinbuchstaben umgewandelt. Neben dem Standardwert none gibt es noch einen weiteren möglichen Wert: capitalize. Der Wert capitalize erzeugt Kapitälchen, dabei wird der erste Buchstabe jedes Wortes in einen Großbuchstaben und alle anderen Buchstaben in Kleinbuchstaben umgewandelt.

XSL-FO-Code:

<?xml version="1.0" encoding="UTF-8" ?>

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
    <fo:layout-master-set>
        <fo:simple-page-master master-name="DIN-A4" page-height="297mm" page-width="210mm">
            <fo:region-body region-name="inhalt" margin="2cm" />
        </fo:simple-page-master>
    </fo:layout-master-set>
    
    <fo:page-sequence master-reference="DIN-A4">
        <fo:flow flow-name="inhalt">
            <fo:block font-style="italic">Dieser Text wird kursiv dargestellt!</fo:block>
            <fo:block font-family="Times" font-weight="bold">Dieser Text wird fett dargestellt!</fo:block>
            <fo:block>
                Dieser Text wird 
                    <fo:inline text-decoration="underline">unterstrichen</fo:inline>, 
                    <fo:inline text-decoration="overline">überstrichen</fo:inline> und
                    <fo:inline text-decoration="line-through">durchgestrichen</fo:inline> angezeigt!
            </fo:block>
            <fo:block text-transform="uppercase">Dieser Text verwendet nur Großbuchstaben!</fo:block>
            <fo:block text-transform="lowercase">Dieser Text verwendet nur Kleinbuchstaben!</fo:block>
            <fo:block text-transform="capitalize">Dieser Text verwendet Kapitälchen!</fo:block>
        </fo:flow>
    </fo:page-sequence>
</fo:root>
VorschauPDF:

Um einen Text auszurichten, wird das Attribut text-align verwendet. Für die letzte Zeile kann mit Hilfe des Attributs text-align-last eine gesonderte Ausrichtung durchgeführt werden. Mögliche Werte für diese beiden Attribute sind left (linksbündig), right (rechtsbündig), start (bündig mit dem start-Region), end (bündig mit der end-Region), inside (bündig zum Bund), outside (bündig zum äußeren Rand), justify (Blocksatz) und center (zentriert).

Um einen Block einzurücken, gibt es die Attribute start-indent, end-indent, text-indent und last-line-indent. Die Attribute start-indent und end-indent werden dazu verwendet, den kompletten Absatz einzurücken. text-indent wird für die Einrückung der ersten Zeile verwendet, last-line-indent hingegen für die letzte Zeile. Als Wert für diese Attribute wird eine Zahl zusammen mit einer Maßeinheit verwendet. Auch negative Zahlen sind möglich.

Das Attribut line-height legt die Zeilenhöhe fest. Auch hier wird eine Zahl mit einer Maßeinheit als Wert angegeben. Der Abstand zwischen Wörtern und Zeichen lässt sich ebenfalls steuern. Dafür werden die Attribute word-spacing und letter-spacing verwendet.

Möchten Sie einen Text hoch- oder tiefstellen, so können Sie das Attribut baseline-shift verwenden. Neben nummerischen Angaben (zusammen mit einer Maßeinheit) sind auch die Schlüsselwörter super (hochgestellt) und sub (tiefgestellt) möglich. Der Standardwert ist baseline und erzeugt keine Verschiebung nach oben oder unten.

XSL-FO-Code:

<?xml version="1.0" encoding="UTF-8" ?>

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
    <fo:layout-master-set>
        <fo:simple-page-master master-name="DIN-A4" page-height="297mm" page-width="210mm">
            <fo:region-body region-name="inhalt" margin="2cm" />
        </fo:simple-page-master>
    </fo:layout-master-set>
    
    <fo:page-sequence master-reference="DIN-A4">
        <fo:flow flow-name="inhalt">
            <fo:block text-align="left">Dieser Text wird linksbündig dargestellt!</fo:block>
            <fo:block text-align="right">Dieser Text wird rechtsbündig dargestellt!</fo:block>
            <fo:block text-align="center">Dieser Text wird zentriert dargestellt!</fo:block>
            <fo:block text-align="justify">
                Dieser Text wird als Blocksatz dargestellt: ...
            </fo:block>
            <fo:block start-indent="20mm" end-indent="20mm" text-indent="5mm">
                Dieser Text wird mit einem Einzug von 5mm (erste Zeile) dargestellt: ...
            </fo:block>
            <fo:block line-height="10mm">
                Dieser Text wird mit einer Zeilenhöhe von 10mm dargestellt: ...
            </fo:block>
            <fo:block letter-spacing="1mm" word-spacing="3mm">
                Dieser Text wird mit einem Zeichenabstand von 1mm und einem Wortabstand von 3mm dargestellt: ...
            </fo:block>
            <fo:block>Dieser Text wird <fo:inline baseline-shift="1mm">hochgestellt</fo:inline> und <fo:inline baseline-shift="-1mm">tiefgestellt</fo:inline>!</fo:block>
        </fo:flow>
    </fo:page-sequence>
</fo:root>
VorschauPDF:

Übrigens: Die vertikale Ausrichtung lässt sich mit Hilfe des Attributs vertical-align steuern. Verwendet werden kann das Attribut aber nicht bei normalen Blöcken. Der Einsatz des Attributs vertical-align findet sich hauptsächlich bei Tabellenzellen. Mögliche Werte für das Attribut sind unter anderem top (Ausrichtung oben), bottom (Ausrichtung unten) und middle (Ausrichtung mittig).


Eine horizontale Linie lässt sich mit dem Element leader erzeugen. Das Element leader wird innerhalb des block-Elements platziert. Oft werden die horizontalen Linien dazu verwendet, Führungslinien (z. B. wie in Inhaltsverzeichnissen) zu erzeugen. Als Attribute stehen unter anderem leader-pattern (Füllmuster: space für Leerzeichen, dots für Punkte, rule für eine Linie oder use-content für beliebigen Inhalt, der innerhalb des leader-Elements angegeben wird), rule-thickness (Dicke der Linie) und color (Farbe der Linie) zur Verfügung.

XSL-FO-Code:

<?xml version="1.0" encoding="UTF-8" ?>

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
    <fo:layout-master-set>
        <fo:simple-page-master master-name="DIN-A4" page-height="297mm" page-width="210mm">
            <fo:region-body region-name="inhalt" margin="2cm" />
        </fo:simple-page-master>
    </fo:layout-master-set>
    
    <fo:page-sequence master-reference="DIN-A4">
        <fo:flow flow-name="inhalt">
            <fo:block text-align-last="justify">Grundlagen <fo:leader leader-pattern="dots" />Seite 1</fo:block>
            <fo:block text-align-last="justify">Seitenlayout <fo:leader leader-pattern="dots" />Seite 2</fo:block>
            <fo:block text-align-last="justify">Textformatierung <fo:leader leader-pattern="dots" />Seite 3</fo:block>
        </fo:flow>
    </fo:page-sequence>
</fo:root>
VorschauPDF:

Übrigens: Ein leader-Element ohne Angabe weiterer Attribute kann dazu verwendet werden, eine leere Zeile zu erzeugen. Das hier verwendete Attribut text-align-last und der Wert justify ist zwingend erforderlich, sodass sich der Inhalt über die komplette Zeile erstreckt.

Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu. Weitere Informationen OK