Skip to content

XSLT

XSLT (Extensible Stylesheet Language for Transformations) is a language used to change the way XML information is shown. It takes the structure of XML elements and converts it into a different type of document.

The W3C, which is the organization behind the internet, recommends XSLT, just like it recommends CSS. However, XSLT is more powerful and can do more things than CSS.

With XSLT, you can completely change the structure of a document, rearrange information, add new information, make decisions based on the information in the document, and even do calculations.

To work properly, XSLT uses other XML technologies such as XPath and XML Schemas. XPath helps decide which templates to use and XML Schemas defines the data types.

XSLT templates are often used to create custom views of an XML document to be viewed on different devices like printers, computers, or smartphones. All you need is the original XML document and XSLT can create the other views as needed.

One limitation of XSLT is that the input document must always be in XML format, even though the output can be in any format like text, HTML, or XML.

XSLT - Transformation

XSLT is a declarative language. Therefore, XSLT stylesheets are not written as a sequence of instructions, but as a collection of template rules. Each template sets how a particular element is transformed (defined by XPath expressions). The document is transformed as follows:

  1. The processor scans the document and builds the document tree.
  2. The processor traverses the document tree from the root node.
  3. On each node traversed, the processor may or may not apply a template:
    • If no template can be applied to a node, its contents are included in the final document (the text of the node, not the text of the descending nodes). The processor then traverses its child nodes.
    • If a template can be applied to a node, the template is applied. The template can generate text that is included in the final document. In principle, the processor does not traverse its child nodes, unless the template tells the processor that the child nodes should be traversed.
  4. When the processor has traversed the tree, the transformation is complete.

More information at XSLT Tutorial at W3Schools

How to display transformations

We have several options:

  1. By adding a reference to the XSL stylesheet in the XML document and open it from a live server.
  2. By using a VSCode extension like XML extension by Red Hat.
  3. By using a CLI command like xsltproc.

XSLT elements

Our samples are based on this template:

<?xml version="1.0" encoding="UTF-8"?>
<library>
  <book>
    <title>Life is Elsewhere</title>
    <author>Milan Kundera</author>
    <publicationDate year="1973"/>
  </book>
  <book>
    <title>Pantaleon and the Visitors</title>
    <author birthDate="03/28/1936">Mario Vargas Llosa</author>
    <publicationDate year="1973"/>
  </book>
  <book>
    <title>Conversation in the Cathedral</title>
    <author birthDate="03/28/1936">Mario Vargas Llosa</author>
    <publicationDate year="1969"/>
  </book>
</library>

xsl:stylesheet

This element serves as the root element of an XSLT stylesheet, and it contains the XSLT instructions for transforming the source XML document.

xsl:template

This element defines a template rule that specifies how a particular part of the source XML document should be transformed.

xsl:apply-templates

This element tells the XSLT processor to continue processing childs of current element.

xsl:value-of

This element is used to insert the value of a specified element or attribute into the result tree.

Here's a basic XSLT example that transforms the XML document into an HTML table, displaying the title, author, and publication year of each book:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" 
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:template match="/">
    <html>
      <body>
        <table border="1">
          <tr>
            <th>Title</th>
            <th>Author</th>
            <th>Publication Year</th>
          </tr>
          <xsl:apply-templates />
        </table>
      </body>
    </html>
  </xsl:template>

  <xsl:template match="book">
    <tr>
      <td><xsl:value-of select="title" /></td>
      <td><xsl:value-of select="author" /></td>
      <td><xsl:value-of select="publicationDate/@year" /></td>
    </tr>
  </xsl:template>
</xsl:stylesheet>
In this XSLT stylesheet, the first template rule uses xsl:apply-templates to force the processing of child nodes. The second template rule matches the book elements and defines how to transform them into table rows. The result will be the:

<html>
  <body>
    <table border="1">
      <tr>
        <th>Title</th>
        <th>Author</th>
        <th>Publication Year</th>
      </tr>
      <tr>
        <td>Life is Elsewhere</td>
        <td>Milan Kundera</td>
        <td>1973</td>
      </tr>
      <tr>
        <td>Pantaleon and the Visitors</td>
        <td>Mario Vargas Llosa</td>
        <td>1973</td>
      </tr>
      <tr>
        <td>Conversation in the Cathedral</td>
        <td>Mario Vargas Llosa</td>
        <td>1969</td>
      </tr>
    </table>
  </body>
</html>

Line breaks and whitespace

When transforming a document, XSLT processors embed line breaks and white space in the output, but they do not do so consistently.

There doesn't seem to be a simple solution that works on all processors, but there are solutions that work on every processor.

The <xsl:strip-space> statement

The <xsl:strip-space> command allows you to indicate whether elements containing only whitespace are included in the transformation.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 version="1.0">

  <xsl:strip-space elements="*" />

  <xsl:template match="/">
    <html>
      <h1>Autores</h1>
       <xsl:apply-templates />
    </html>
  </xsl:template>

  <xsl:template match="libro">
      <p><xsl:value-of select="autor"/></p>
  </xsl:template>

</xsl:stylesheet>

The output will be:

<?xml version="1.0" encoding="UTF-8"?>
<html>
  <h1>Autores</h1>
  <p>Milan Kundera</p>
  <p>Mario Vargas Llosa</p>
  <p>Mario Vargas Llosa</p>
</html>

<xsl:text>

<xsl:text> allow you to generate text you cannot generate simply by adding it (line breaks, and whitespaces, for instance).

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
version="1.0">
  <xsl:template match="/">
  <html>
    <xsl:text>&#10; </xsl:text>
      <h1>Authors</h1>
      <xsl:apply-templates />
  </html>
  </xsl:template>
  <xsl:template match="libro">
    <p><xsl:value-of select="autor"/></p>
  </xsl:template>
</xsl:stylesheet>
The output will be:

<?xml version="1.0" encoding="UTF-8"?>
<html>
  <h1>Autores</h1>
  <p>Milan Kundera</p>
  <p>Mario Vargas Llosa</p>
  <p>Mario Vargas Llosa</p>
</html>

Creating attributes

The <xsl:attribute> command allows you to generate an attribute and its value.

From the following XML document, we want to generate the <img> tag. Where the value of the src attribute is the content of the <image> tag. 

<?xml version="1.0" encoding="UTF-8"?>
<licenses>
  <license>
    <name>Creative Commons By - Share Alike</name>
    <image>cc-bysa-88x31.png</image>
  </license>
</licenses>

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
version="1.0">

<xsl:template match="license">
  <p>
    <img src="<xsl:value-of select="imagen" />" />
  </p>
</xsl:template>

</xsl:stylesheet>

Error at line 5, column 19: not well-formed (invalid token)

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
  version="1.0">
  <xsl:template match="/">
    <html>
      <xsl:apply-templates />
    </html>
  </xsl:template>
  <xsl:template match="licencia">
    <p><img>
    <xsl:attribute name="src">
      <xsl:value-of select="imagen" />
    </xsl:attribute>
    </img>
    </p>
  </xsl:template>
</xsl:stylesheet>
HTML output will be:

  <?xml version="1.0" encoding="UTF-8"?>
  <html>
    <p><img src="cc-bysa-88x31.png"/></p>
  </html>

Webography