E-Book Startseite Karteikarten-Programm
0

Schriftart, Schriftgröße und Schriftfarbe

XSL-FO hat viele verschiedene Schrift- und Textformatierungen, die als Attribute in verschiedenen Elementen, wie z. B. fo:block oder fo:inline, eingesetzt werden können. Viele der Formatierungen ähneln der Stylesheetsprache CSS. Wir beginnen mit den Formatierungen für Schriftart, Schriftgröße und Schriftfarbe. Die Schriftart wird mit dem Attribute font-family angegeben. Als Werte sind die Namen der Schriftarten erlaubt. Doch bei den Schriftarten gibt es noch etwas Wichtiges zu beachten, PDF-Reader müssen nur ein paar Schriften können, d. h. die Schriftart die Sie nutzen wollen kann evtl. nicht in jedem Reader angezeigt werden. Empfehlenswert ist deshalb die Schriftart Times, da Sie von jedem PDF-Reader rechtlich gesehen unterstützt werden muss. Die Schriftgröße wird mit dem Attribut font-size bestimmt. Als Werte werden positive Zahlen mit einer Maßeinheit (alle Web-Maßeinheiten erlaubt) angegeben. Die Schriftfarbe wird ganz einfach mit dem Attribut color festgelegt. Sowohl englische Farbbegriffe (red, blue, green, ...) als auch Hex-Dezimal-Werte (#FF0000, #0000FF, #00FF00, ... ) sind erlaubt.

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<?xml-stylesheet href="foschrift1.xsl" type="text/xsl"?>
 
<wurzel>Test<wurzel>
<?xml version="1.0" encoding="ISO-8859-1"?>
 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:template match="/">
  <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
    <fo:layout-master-set>
      <fo:simple-page-master master-name="seite" page-height="29.7cm" page-width="21cm" margin-top="1cm" margin-bottom="1cm" margin-left="1cm" margin-right="1cm">
        <fo:region-body margin-top="2.5cm" margin-bottom="2cm" margin-left="5.5cm" margin-right="1.5cm" />
        <fo:region-before region-name="top" extent="2cm" precedence="true" background-color="#FF0000" />
        <fo:region-after region-name="bottom" extent="1.5cm" precedence="true" background-color="#00FFFF" />
        <fo:region-start region-name="left" extent="5cm" background-color="#FFFF00" />
        <fo:region-end region-name="right" extent="1cm" background-color="#0000FF" />
      </fo:simple-page-master>
    </fo:layout-master-set>
    <fo:page-sequence master-reference="seite">
      <fo:static-content flow-name="top">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="left">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="right">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="bottom">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:flow flow-name="xsl-region-body">
        <fo:block><xsl:value-of select="." /></fo:block>
        <fo:block font-family="Times">Schriftart Times</fo:block>
        <fo:block font-size="25px">Schriftgröße 25px</fo:block>
        <fo:block color="red">Schriftfarbe red</fo:block>
      </fo:flow>
    </fo:page-sequence>
  </fo:root>
</xsl:template>
</xsl:stylesheet>
Anzeigebeispiel
Anzeigebeispiel (XML-Datei)



Anzeigebeispiel
Anzeigebeispiel (PDF-Datei)



Textausrichtung

Um die Textausrichtung einzustellen gibt es das Attribut text-align. Als Wert kann folgendes verwendet werden: left (linksbündig), right (rechtsbündig), center (zentriert), justify (Blocksatz), start (Bündig zur start-region), end (Bündig zur end-region), inside (zentriert zum Bund) oder outside (zentriert zum Beschnittrand (außen)). Ein interessantes Attribut ist text-align-last, mit dem eine besondere Einstellung für die letzte Zeile vorgenommen werden kann. Als Wert sind hier alle Werte möglich, die oben genannt worden sind.

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<?xml-stylesheet href="foschrift2.xsl" type="text/xsl"?>
 
<wurzel>Test<wurzel>
<?xml version="1.0" encoding="ISO-8859-1"?>
 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:template match="/">
  <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
    <fo:layout-master-set>
      <fo:simple-page-master master-name="seite" page-height="29.7cm" page-width="21cm" margin-top="1cm" margin-bottom="1cm" margin-left="1cm" margin-right="1cm">
        <fo:region-body margin-top="2.5cm" margin-bottom="2cm" margin-left="5.5cm" margin-right="1.5cm" />
        <fo:region-before region-name="top" extent="2cm" precedence="true" background-color="#FF0000" />
        <fo:region-after region-name="bottom" extent="1.5cm" precedence="true" background-color="#00FFFF" />
        <fo:region-start region-name="left" extent="5cm" background-color="#FFFF00" />
        <fo:region-end region-name="right" extent="1cm" background-color="#0000FF" />
      </fo:simple-page-master>
    </fo:layout-master-set>
    <fo:page-sequence master-reference="seite">
      <fo:static-content flow-name="top">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="left">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="right">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="bottom">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:flow flow-name="xsl-region-body">
        <fo:block><xsl:value-of select="." /></fo:block>
        <fo:block text-align="left">linksbündig</fo:block>
        <fo:block text-align="right">rechtsbündig</fo:block>
        <fo:block text-align="center">zentriert</fo:block>
      </fo:flow>
    </fo:page-sequence>
  </fo:root>
</xsl:template>
</xsl:stylesheet>
Anzeigebeispiel
Anzeigebeispiel (XML-Datei)



Anzeigebeispiel
Anzeigebeispiel (PDF-Datei)



Zeilenhöhe

Oft wird es benötigt die Zeilenhöhe anzugeben. Die Zeilenhöhe hat eine wichtige Bedeutung, da sie, in Zusammenarbeit mit der Schriftgröße, den Abstand zwischen den Zeilen steuert. Auch hier können wieder alle Web-Maßeinheiten verwendet werden. Der Attributname line-height kommt, wie viele andere Attribut- und Elementnamen auch, vom Englischen und heißt übersetzt Linien- / Zeilenhöhe.

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<?xml-stylesheet href="foschrift3.xsl" type="text/xsl"?>
 
<wurzel>Test<wurzel>
<?xml version="1.0" encoding="ISO-8859-1"?>
 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:template match="/">
  <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
    <fo:layout-master-set>
      <fo:simple-page-master master-name="seite" page-height="29.7cm" page-width="21cm" margin-top="1cm" margin-bottom="1cm" margin-left="1cm" margin-right="1cm">
        <fo:region-body margin-top="2.5cm" margin-bottom="2cm" margin-left="5.5cm" margin-right="1.5cm" />
        <fo:region-before region-name="top" extent="2cm" precedence="true" background-color="#FF0000" />
        <fo:region-after region-name="bottom" extent="1.5cm" precedence="true" background-color="#00FFFF" />
        <fo:region-start region-name="left" extent="5cm" background-color="#FFFF00" />
        <fo:region-end region-name="right" extent="1cm" background-color="#0000FF" />
      </fo:simple-page-master>
    </fo:layout-master-set>
    <fo:page-sequence master-reference="seite">
      <fo:static-content flow-name="top">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="left">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="right">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="bottom">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:flow flow-name="xsl-region-body">
        <fo:block><xsl:value-of select="." /></fo:block>
        <fo:block line-height="3em">Dies ist ein Text. Dies ist ein Text. Dies ist ein Text. Dies ist ein Text. 
        Dies ist ein Text. Dies ist ein Text. Dies ist ein Text. Dies ist ein Text. Dies ist ein Text. 
        Dies ist ein Text.</fo:block>
      </fo:flow>
    </fo:page-sequence>
  </fo:root>
</xsl:template>
</xsl:stylesheet>
Anzeigebeispiel
Anzeigebeispiel (XML-Datei)



Anzeigebeispiel
Anzeigebeispiel (PDF-Datei)



Groß- und Kleinschreibung

Wie in CSS auch, kann man mit XSL-FO die Groß- und Kleinschreibung auf eine besondere Art und Weise steuern. In XSL-FO gibt es für diese Steuerung das Attribut text-transform. Die möglichen 4 Werte sind uppercase (alle Buchstaben werden zu Großbuchstaben), lowercase (alle Buchstaben werden zu Kleinbuchstaben), capitalize (Kapitälchen - erste Buchstabe jedes Worts wird groß geschrieben) und none (vorhandene Groß- und Kleinschreibung wird beibehalten). Der Wert none ist überflüssig und muss nicht mit angegeben werden.

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<?xml-stylesheet href="foschrift4.xsl" type="text/xsl"?>
 
<wurzel>Test<wurzel>
<?xml version="1.0" encoding="ISO-8859-1"?>
 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:template match="/">
  <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
    <fo:layout-master-set>
      <fo:simple-page-master master-name="seite" page-height="29.7cm" page-width="21cm" margin-top="1cm" margin-bottom="1cm" margin-left="1cm" margin-right="1cm">
        <fo:region-body margin-top="2.5cm" margin-bottom="2cm" margin-left="5.5cm" margin-right="1.5cm" />
        <fo:region-before region-name="top" extent="2cm" precedence="true" background-color="#FF0000" />
        <fo:region-after region-name="bottom" extent="1.5cm" precedence="true" background-color="#00FFFF" />
        <fo:region-start region-name="left" extent="5cm" background-color="#FFFF00" />
        <fo:region-end region-name="right" extent="1cm" background-color="#0000FF" />
      </fo:simple-page-master>
    </fo:layout-master-set>
    <fo:page-sequence master-reference="seite">
      <fo:static-content flow-name="top">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="left">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="right">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="bottom">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:flow flow-name="xsl-region-body">
        <fo:block><xsl:value-of select="." /></fo:block>
        <fo:block text-transform="capitalize">Wenn alles klappt, wir jeder erste Buchstabe eines Wortes 
        großgeschrieben!</fo:block>
      </fo:flow>
    </fo:page-sequence>
  </fo:root>
</xsl:template>
</xsl:stylesheet>
Anzeigebeispiel
Anzeigebeispiel (XML-Datei)



Anzeigebeispiel
Anzeigebeispiel (PDF-Datei)



Zeichen- und Wortabstände

Einige kennen aus CSS vielleicht schon die Befehle letter-spacing und word-spacing. letter-spacing gibt den Abstand zwischen den einzelnen Zeichen an. word-spacing dagegen gibt den Abstand zwischen mehreren Wörtern an. Als Wert sind nur absolute Maßeinheiten erlaubt. Durch die Angabe von Minuswerten überlappen sich die Zeichen / Wörter, was einen sehr interessanten Effekt hat.

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<?xml-stylesheet href="foschrift5.xsl" type="text/xsl"?>
 
<wurzel>Test<wurzel>
<?xml version="1.0" encoding="ISO-8859-1"?>
 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:template match="/">
  <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
    <fo:layout-master-set>
      <fo:simple-page-master master-name="seite" page-height="29.7cm" page-width="21cm" margin-top="1cm" margin-bottom="1cm" margin-left="1cm" margin-right="1cm">
        <fo:region-body margin-top="2.5cm" margin-bottom="2cm" margin-left="5.5cm" margin-right="1.5cm" />
        <fo:region-before region-name="top" extent="2cm" precedence="true" background-color="#FF0000" />
        <fo:region-after region-name="bottom" extent="1.5cm" precedence="true" background-color="#00FFFF" />
        <fo:region-start region-name="left" extent="5cm" background-color="#FFFF00" />
        <fo:region-end region-name="right" extent="1cm" background-color="#0000FF" />
      </fo:simple-page-master>
    </fo:layout-master-set>
    <fo:page-sequence master-reference="seite">
      <fo:static-content flow-name="top">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="left">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="right">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="bottom">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:flow flow-name="xsl-region-body">
        <fo:block><xsl:value-of select="." /></fo:block>
        <fo:block letter-spacing="4px">Dies ist ein Text. Dies ist ein Text. Dies ist ein Text. Dies ist ein Text. 
        Dies ist ein Text.</fo:block>
        <fo:block word-spacing="4px">Dies ist ein Text. Dies ist ein Text. Dies ist ein Text. Dies ist ein Text. 
        Dies ist ein Text.</fo:block>
      </fo:flow>
    </fo:page-sequence>
  </fo:root>
</xsl:template>
</xsl:stylesheet>
Anzeigebeispiel
Anzeigebeispiel (XML-Datei)



Anzeigebeispiel
Anzeigebeispiel (PDF-Datei)



Einrückung und Ausrückung

Um in XSL-FO eine Ein- oder Ausrückung zu bewirken, muss man sich überlegen ob man den kompletten Block ein- oder ausrücken oder nur die erste Zeile ein- oder ausrücken möchte. Um den kompletten Block von links und / oder rechts einzurücken gibt es die Attribute start-indent und end-indent. Um aber nur eine Ein- oder Ausrückung für die erste Zeile vorzunehmen gibt es in XSL-FO das Attribut text-indent. Je nachdem ob es sich um einen positiven oder negativen Wert handelt, wird eine Ein- bzw. Ausrückung vorgenommen. Sowohl absolute als auch relative Maßeinheiten können verwendet werden.

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<?xml-stylesheet href="foschrift6.xsl" type="text/xsl"?>
 
<wurzel>Test<wurzel>
<?xml version="1.0" encoding="ISO-8859-1"?>
 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:template match="/">
  <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
    <fo:layout-master-set>
      <fo:simple-page-master master-name="seite" page-height="29.7cm" page-width="21cm" margin-top="1cm" margin-bottom="1cm" margin-left="1cm" margin-right="1cm">
        <fo:region-body margin-top="2.5cm" margin-bottom="2cm" margin-left="5.5cm" margin-right="1.5cm" />
        <fo:region-before region-name="top" extent="2cm" precedence="true" background-color="#FF0000" />
        <fo:region-after region-name="bottom" extent="1.5cm" precedence="true" background-color="#00FFFF" />
        <fo:region-start region-name="left" extent="5cm" background-color="#FFFF00" />
        <fo:region-end region-name="right" extent="1cm" background-color="#0000FF" />
      </fo:simple-page-master>
    </fo:layout-master-set>
    <fo:page-sequence master-reference="seite">
      <fo:static-content flow-name="top">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="left">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="right">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="bottom">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:flow flow-name="xsl-region-body">
        <fo:block><xsl:value-of select="." /></fo:block>
        <fo:block text-indent="15px" text-align="justify">Dies ist ein Text. Dies ist ein Text. Dies ist ein Text. 
        Dies ist ein Text. Dies ist ein Text. Dies ist ein Text. Dies ist ein Text. Dies ist ein Text. 
        Dies ist ein Text. Dies ist ein Text.</fo:block>
      </fo:flow>
    </fo:page-sequence>
  </fo:root>
</xsl:template>
</xsl:stylesheet>
Anzeigebeispiel
Anzeigebeispiel (XML-Datei)



Anzeigebeispiel
Anzeigebeispiel (PDF-Datei)



weitere Schriftformatierungen

Hier in unserem Tutorial stellen wir noch ein paar weitere Befehle vor. Mit dem Attribut font-weight kann das Schriftgewicht angegeben werden. Es gibt ein paar Wörter die als Wert angegeben werden kann: bold (fett), bolder (extra fett), light (dünn), lighter (extra dünn). Zusätzlich zu diesen Angaben sind noch die folgende Zahlen möglich: 100, 200, 300, 400, 500, 600, 700, 800, 900. Umso höher die Zahl, umso größer ist auch das Schriftgewicht. Mit dem Attribut font-style, kann der sogenannte Schriftstil festgelegt werden. Es gibt insgesamt 3 mögliche Werte: normal (normaler Schriftstil - Standard!), oblique (schräggestellter Schriftstil) und italic (kursiver Schriftstil). Ein weiteres tolles extra, welches vor allem für die Pseudoklassen in HTML und CSS wichtig ist, aber auch in XSL-FO interessant ist, ist die Textdekoration (text-decoration). Als Werte gibt es 4 verschiedene Möglichkeiten: none (keine spezielle Textdekoration - Standard), underline (unterstreichen), overline (überstreichen) und line-through (durchstreichen). Das letzte Attribut welches wir hier vorstellen, kann Text hoch- oder tiefstellen. Diese Formatierung funktioniert mit dem Attribut baseline-shift. Für dieses attribut gibt es 3 Attribute: baseline (keine Hoch- oder Tiefstellung - Standard), super (Hochstellung) und sub (Tiefstellung).

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<?xml-stylesheet href="foschrift7.xsl" type="text/xsl"?>
 
<wurzel>Test<wurzel>
<?xml version="1.0" encoding="ISO-8859-1"?>
 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:template match="/">
  <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
    <fo:layout-master-set>
      <fo:simple-page-master master-name="seite" page-height="29.7cm" page-width="21cm" margin-top="1cm" margin-bottom="1cm" margin-left="1cm" margin-right="1cm">
        <fo:region-body margin-top="2.5cm" margin-bottom="2cm" margin-left="5.5cm" margin-right="1.5cm" />
        <fo:region-before region-name="top" extent="2cm" precedence="true" background-color="#FF0000" />
        <fo:region-after region-name="bottom" extent="1.5cm" precedence="true" background-color="#00FFFF" />
        <fo:region-start region-name="left" extent="5cm" background-color="#FFFF00" />
        <fo:region-end region-name="right" extent="1cm" background-color="#0000FF" />
      </fo:simple-page-master>
    </fo:layout-master-set>
    <fo:page-sequence master-reference="seite">
      <fo:static-content flow-name="top">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="left">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="right">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="bottom">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:flow flow-name="xsl-region-body">
        <fo:block><xsl:value-of select="." /></fo:block>
        <fo:block font-weight="800">fettgedruckter Text</fo:block>
        <fo:block font-style="italic">kursiver Text</fo:block>
        <fo:block text-decoration="underline">unterstrichener Text</fo:block>
        <fo:block>CO<fo:inline baseline-shift="sub">2</fo:inline></fo:block>
      </fo:flow>
    </fo:page-sequence>
  </fo:root>
</xsl:template>
</xsl:stylesheet>
Anzeigebeispiel
Anzeigebeispiel (XML-Datei)



Anzeigebeispiel
Anzeigebeispiel (PDF-Datei)



Design:
 


Logo
Benjamin Jung
Krummstr. 9/3
73054 Eislingen

E-Mail: info@homepage-webhilfe.de
Webseite: www.homepage-webhilfe.de