XSLT als Styling-Sprache verwenden

(Auszug aus "XSLT Kochbuch" von Sal Mangano)

Problem

Sie möchten, dass der Browser dynamisch einen Stil auf ein XML-Dokument anwendet, um daraus HTML zu machen.

Lösung

Es wird lediglich eine XSLT 1.0-Lösung benötigt. Es folgt ein Beispiel für die Veröffentlichung eines Teilausschnitts eines DocBook-Dokuments in HTML, bei der ein XSLT-Stylesheet verwendet wird. Als Quelldokument dient ein Teil dieses Kapitels:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="application/xml" href="chapter.xsl"?>
<chapter label="8">
  <chapterinfo>
    <author>
      <surname>Mangano</surname>
      <firstname>Sal</firstname>
    </author>
    <copyright>
      <year>2002</year>
      <holder>O'Reilly</holder>
    </copyright>
  </chapterinfo>
  <title>XML in HTML transformieren</title>
  <epigraph>
    <para>Mich hat es überrascht, dass die Leute klaglos bereit waren, umständlich HTML einzugeben.</para>
    <attribution>Tim Berners-Lee</attribution>
  </epigraph>
  <sect1>
    <title>XSLT als Styling-Sprache verwenden</title>
    <sect2>
      <title>Problem</title>
      <para>Sie möchten, dass der Browser dynamisch einen Stil auf ein XML-Dokument anwendet, um daraus HTML zu machen.</para>
    </sect2>
    <sect2>
      <title>Lösung</title>
      <para>Es wird lediglich eine XSLT 1.0-Lösung benötigt. Es folgt ein Beispiel für die Veröffentlichung eines Teilaussschnitts eines DocBook-Dokuments in HTML, bei der ein XSLT-Stylesheet verwendet wird. Als Quelldokument dient ein Teil dieses Kapitels.</para>
    </sect2>
    <sect2>
      <title>Diskussion</title>
      <para>DocBook ist eine dokumentorientierte DTD, mit der Sie Dokumentinhalte erstellen und in einer präsentationsunabhängigen Form speichern können, in der die logische Struktur des Inhalts festgehalten wird. Das Schöne beim Erstellen von Dokumenten (besonders bei technischen Dokumenten) in dieser Form ist, dass Sie mit XSLT einen einzigen Inhalt in mehrere verschiedene Ausgabeformate wie HTML, PDF, Microsoft-Hilfsdateien und Unix-Manpages transformieren können. Auch wenn es bei diesem Buchbeispiel konkret um DocBook geht, lassen sich die gleichen Techniken ebenso gut bei anderen Dokumentschemata verwenden, seien es welche, die als Public-Domain verfügbar sind, oder solche, die Sie sich selbst ausgedacht haben.</para>
    </sect2>
  </sect1>
</chapter>

Beachten Sie, dass die zweite Zeile dieses Dokuments eine Verarbeitungsanweisung enthält, nämlich xml-stylesheet. Diese weist den Browser an, das folgende Stylesheet auf das XML anzuwenden und die Ausgabe dieses Stylesheets statt des eigentlichen XMLs anzuzeigen. (Denken Sie daran, dass diese Anweisung nur in aktuellen Browserversionen funktioniert):

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html"/>
  <xsl:template match="/">
    <html>
      <head>
        <xsl:apply-templates mode="head"/>
      </head>
      <!-- Vielleicht möchten Sie lieber Styles in einem CSS-Style-Element verwenden, als sie fest zu kodieren, wie ich es hier mache -->
      <body style="margin-left: 100; margin-right: 100; margin-top: 50; margin-bottom: 50">
        <xsl:apply-templates/>
        <xsl:apply-templates select="chapter/chapterinfo/*" mode="copyright"/>
      </body>
    </html>
  </xsl:template>
  <!-- Head -->
  <xsl:template match="chapter" mode="head">
    <xsl:apply-templates select="chapterinfo" mode="head" />
    <xsl:apply-templates select="title" mode="head" />
  </xsl:template>
  <xsl:template match="chapter/title" mode="head">
    <title>
      <xsl:value-of select="."/>
    </title>
  </xsl:template>
  <xsl:template match="author" mode="head">
    <meta name="author" content="{concat(firstname,' ', surname)}"/>
  </xsl:template>
  <xsl:template match="copyright" mode="head">
    <meta name="copyright" content="{concat(holder,' ',year)}"/>
  </xsl:template>
  <xsl:template match="text( )" mode="head"/>
  <!-- Body -->
  <xsl:template match="chapter">
    <div align="right" style="font-size: 48pt; font-family: Times serif; font-weight: bold; padding-bottom: 10; color: red">
      <xsl:value-of select="@label"/>
    </div>
    <xsl:apply-templates/>
  </xsl:template>

  <xsl:template match="chapter/title">
    <div align="right" style="font-size: 24pt; font-family: Times serif; padding-bottom: 150; color:red">
      <xsl:value-of select="."/>
    </div>
  </xsl:template>

  <xsl:template match="epigraph/para">
    <div align="right" style="font-size: 10pt; font-family: Times serif; font-style: italic; padding-top: 4; padding-bottom: 4">
      <xsl:value-of select="."/>
    </div>
  </xsl:template>
  <xsl:template match="epigraph/attribution">
    <div align="right" style="font-size: 10pt; font-family: Times serif; padding-top: 4; padding-bottom: 4">
      <xsl:value-of select="."/>
    </div>
  </xsl:template>
  <xsl:template match="sect1">
    <h1 style="font-size: 18pt; font-family: Times serif; font-weight: bold">
      <xsl:value-of select="title"/>
    </h1>
    <xsl:apply-templates/>
  </xsl:template>
  <xsl:template match="sect2">
    <h2 style="font-size: 14pt; font-family: Times serif; font-weight: bold">
      <xsl:value-of select="title"/>
    </h2>
    <xsl:apply-templates/>
  </xsl:template>
  <xsl:template match="para">
    <p style="font-size: 12pt; font-family: Times serif">
      <xsl:value-of select="."/>
    </p>
  </xsl:template>
  <xsl:template match="text( )"/>
  <xsl:template match="copyright" mode="copyright">
    <div style="font-size: 10pt; font-family: Times serif; padding-top: 100">
      <xsl:text>Copyright </xsl:text>
      <xsl:value-of select="holder"/>
      <xsl:text> </xsl:text>
      <xsl:value-of select="year"/>
      <xsl:text>. All rights reserved.</xsl:text>
    </div>
  </xsl:template>
  <xsl:template match="*" mode="copyright"/>
</xsl:stylesheet>

Am Ende sieht der Browser den folgenden HTML-Code:

<html>
  <head>
    <meta name="author" content="Sal Mangano">
    <meta name="copyright" content="O'Reilly 2002">
    <title>XML in HTML transformieren</title>
  </head>
  <body style="margin-left:100;margin-right:100;margin-top:50;margin-bottom:50">
    <div align="right" style="font-size : 48pt; font-family: Times serif; font-weight : bold; padding-bottom:10; color:red">8</div>
    <div align="right" style="font-size : 24pt; font-family: Times serif; padding-bottom:150; color:red">XML to HTML</div>
    <div align="right" style="font-size : 10pt; font-family: Times serif; font-style : italic; padding-top:4; padding-bottom:4">Mich hat es überrascht, dass die Leute klaglos bereit waren, umständlich HTML einzugeben.</div>
    <div align="right" style="font-size : 10pt; font-family: Times serif; padding-top:4; padding-bottom:4">Tim Berners-Lee</div>
    <h1 style="font-size : 18pt; font-family: Times serif; font-weight : bold">XSLT als Styling-Sprache verwenden</h1>
    <h2 style="font-size : 14pt; font-family: Times serif; font-weight : bold">Problem</h2>
    <p style="font-size : 12pt; font-family: Times serif">Sie möchten, dass der Browser dynamisch einen Stil auf ein XML-Dokument anwendet, um daraus HTML zu machen.</p>
    <h2 style="font-size : 14pt; font-family: Times serif; font-weight : bold">Lösung</h2>
    <p style="font-size : 12pt; font-family: Times serif">Es wird lediglich eine XSLT 1.0-Lösung benötigt. Es folgt ein Beispiel für die Veröffentlichung eines Teilausschnitts eines DocBook-Dokuments in HTML, bei der ein XSLT-Stylesheet verwendet wird. Die Quelle dieses Dokuments ist Teil dieses Kapitels:</p>
    <h2 style="font-size : 14pt; font-family: Times serif; font-weight : bold">Discussion</h2>
    <p style="font-size : 12pt; font-family: Times serif">DocBook ist eine dokumentorientierte DTD, mit der Sie Dokumentinhalte erstellen und in einer präsentationsunabhängigen Form speichern können, in der die logische Struktur des Inhalts festgehalten wird. Das Schöne beim Erstellen von Dokumenten (besonders bei technischen Dokumenten) in dieser Form ist, dass Sie mit XSLT einen einzigen Inhalt in mehrere verschiedene Ausgabeformate wie HTML, PDF, Microsoft-Hilfsdateien und Unix-Manpages transformieren können. Auch wenn es bei diesem Buchbeispiel konkret um DocBook geht, lassen sich die gleichen Techniken ebenso gut bei anderen Dokumentschemata verwenden, seien es welche, die als Public-Domain verfügbar sind, oder solche, die Sie sich selbst ausgedacht haben.</p>
    <div style="font-size : 10pt; font-family: Times serif; padding-top : 100">Copyright O'Reilly 2002. All rights reserved.</div>
  </body>
</html>

Diskussion

DocBook ist eine dokumentorientierte DTD, mit der Sie Dokumentinhalte erstellen und in einer präsentationsunabhängigen Form speichern können, in der die logische Struktur des Inhalts festgehalten wird. Das Schöne beim Erstellen von Dokumenten (besonders bei technischen Dokumenten) in dieser Form ist, dass Sie mit XSLT einen einzigen Inhalt in mehrere verschiedene Ausgabeformate wie HTML, PDF, Microsoft-Hilfsdateien und Unix-Manpages transformieren können. Auch wenn es bei diesem Buchbeispiel konkret um DocBook geht, lassen sich die gleichen Techniken ebenso gut bei anderen Dokumentschemata verwenden, seien es welche, die als Public-Domain verfügbar sind, oder solche, die Sie sich selbst ausgedacht haben.

Da Sie nur eine Untermenge der DocBook-DTD verwendet haben, war es bequem, ein einziges monolithisches Stylesheet zu erstellen. Bei einer industrietauglichen Lösung wäre jedoch die Behandlung vieler DocBook-Elemente durch die Verwendung von separaten Stylesheets und Templates modularisiert, die Modi benutzen würden.

Ein offensichtlicher Nachteil dieser Lösung besteht darin, dass die Stilinformation im Stylesheet fest kodiert ist. Da eine grundlegende Unterstützung von Cascading Stylesheets (CSS) in aktuellen Browsern fast immer vorausgesetzt werden darf, bestünde eine bessere Lösung darin, die Transformation an XSLT zu delegieren und das Styling mit CSS zu erledigen.

Das Stylesheet behält dabei seine Grundstruktur, aber wir ersetzen die fest kodierten style-Attribute durch class-Attribute, die auf ein Stylesheet namens style.css verweisen, das Sie zum head-Element im HTML-Code hinzufügen:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html"/>
  <xsl:template match="/">
    <html>
      <head>
        <xsl:apply-templates mode="head"/>
        <link href="style.css" rel="stylesheet" type="text/css"/>
      </head>
      <body>
        <xsl:apply-templates/>
        <xsl:apply-templates select="chapter/chapterinfo/*" mode="copyright"/>
      </body>
    </html>
  </xsl:template>
  <!-- Head -->
  <xsl:template match="chapter" mode="head">
    <xsl:apply-templates select="chapterinfo" mode="head" />
    <xsl:apply-templates select="title" mode="head" />
  </xsl:template>
  <xsl:template match="chapter/title" mode="head">
    <title>
      <xsl:value-of select="."/>
    </title>
  </xsl:template>
  <xsl:template match="author" mode="head">
    <meta name="author" content="{concat(firstname,' ', surname)}"/>
  </xsl:template>
  <xsl:template match="copyright" mode="head">
    <meta name="copyright" content="{concat(holder,' ',year)}"/>
  </xsl:template>
  <xsl:template match="text( )" mode="head"/>
  <!-- Body -->
  <xsl:template match="chapter">
    <div class="chapter">
      <xsl:value-of select="@label"/>
    </div>
    <xsl:apply-templates/>
  </xsl:template>
  <xsl:template match="chapter/title">
    <div class="title">
      <xsl:value-of select="."/>
    </div>
  </xsl:template>
  <xsl:template match="epigraph/para">
    <div class="epigraph">
      <xsl:value-of select="."/>
    </div>
  </xsl:template>
  <xsl:template match="epigraph/attribution">
    <div class="epigraph-attribution">
      <xsl:value-of select="."/>
    </div>
  </xsl:template>
  <xsl:template match="sect1">
    <h1>
      <xsl:value-of select="title"/>
    </h1>
    <xsl:apply-templates/>
  </xsl:template>
  <xsl:template match="sect2">
    <h2>
      <xsl:value-of select="title"/>
    </h2>
    <xsl:apply-templates/>
  </xsl:template>
  <xsl:template match="para">
    <p class="para">
      <xsl:value-of select="."/>
    </p>
  </xsl:template>
  <xsl:template match="text( )"/>
  <xsl:template match="copyright" mode="copyright">
    <div class="copyright">
      <xsl:text>Copyright </xsl:text>
      <xsl:value-of select="holder"/>
      <xsl:text> </xsl:text>
      <xsl:value-of select="year"/>
      <xsl:text>. All rights reserved.</xsl:text>
    </div>
  </xsl:template>
  <xsl:template match="*" mode="copyright"/>
</xsl:stylesheet>

Ein CSS ist einfach eine flache ASCII-Datei (style.css), die eine Reihe von einfachen Konventionen befolgt:

body
{
   margin-left:100;
   margin-right:100;
   margin-top:50;
   margin-bottom:50;
   font-family: Times serif;
   font-size : 12pt;
   color:black;
}

div.chapter
{
   text-align:right;
   font-size : 48pt;
   font-weight: bold;
   padding-bottom:10;
   color:red;
}

div.title
{
   font-size : 24pt;
   font-family: Times serif;
   padding-bottom:150;
   color:red"
}

div.epigraph
{
   font-style:: italic;
}

div.epigraph, div.epigraph-attribution
{
   text-align: right;
   font-size : 10pt;
   padding-top: 4;
   padding-bottom: 4;
}

h1
{
   font-size : 18pt;
   font-weight : bold;
}

h2
{
   font-size : 14pt;
   font-weight : bold";
}

Falls Sie mit CSS noch nicht vertraut sind, dann finden Sie eine gute Einführung unter W3Schools. Außerdem möchte ich Ihnen das Buch Cascading Style Sheets – Das umfassende Handbuch von Eric Meyer empfehlen, das 2004 bei O'Reilly erschienen ist. Darüber hinaus gibt es viele Werkzeuge speziell zum Erzeugen von CSS. Mir persönlich gefällt Macromedia Dreamweaver MX sehr gut, aber manch anderem könnte es etwas überproportioniert sein, wenn man nur einen CSS-Editor benötigt.

Siehe auch

Die beste Informationsquelle zu DocBook ist Docbook.org. Norman Walsh hat eine Reihe von Open Source-Stylesheets entwickelt, um DocBook in verschiedenste Publishing-Formate zu konvertieren. Diese Stylesheets finden Sie unter DocBookXSLStylesheets.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema XSLT bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © 2006 O'Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "XSLT Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O'Reilly Verlag GmbH & Co. KG, Balthasarstraße 81, 50670 Köln, kommentar(at)oreilly.de