Using XSLT as a stylesheet for HTML_html/css_WEB-ITnose

Introduction

When you hear the word style sheet, you probably think of CSS style sheets. XSLT stylesheets are commonly used for XML transformations, such as mapping data between Web services. Because XSLT is well suited for this purpose, an alias for the top-level element was created, although this is rarely used. The input structure of this XSLT transformation is very different from the output structure. Most importantly, the namespaces are different.

The input structure of an XSLT stylesheet is similar to the output structure, but simpler. Some tags have been augmented, but most are simply copied to the output as-is. The input and output namespaces are the same (HTML). Input documents can also contain stylesheet directives (such as creating footnotes) that belong to another namespace and are not passed to the output.

Commonly used abbreviations

CSS: Cascading Style Sheets XHTML: Extensible Hypertext Markup Language XPath: XML Path Language Enrich XHTML documents with XSLT stylesheets. Examples show how to use directives, how to reference parts of other source documents, and how to use links to navigate within the main document. Additionally, we explore the difference between interpretation and compilation of pages.

Limitations of CSS Stylesheets

　XSLT stylesheets do not prevent you from using other technologies, such as JavaScript or CSS. CSS works with fonts, bolding, colors, spacing, and more. It is not suitable for combining information from different locations, such as footnotes, modules or generating a table of contents. This is where XSLT comes in, complementing rather than replacing CSS.

Examples of XSLT usage

　You can actually concentrate your XSLT code in a single file. For simplicity, each example in this article is in a separate XSLT file, except for some necessary code. Listing 1 shows the necessary code.

Listing 1. Required code (located in samples/common.xml)

xmlns = " http://www.w3.org/1999/xhtml" xmlns:h = " http:// www.w3.org/1999/xhtml" xmlns:a = " http://sourceforge.net/projects/arbalo/" xmlns:s = " http://www .w3.org/1999/XSL/Transform" exclude-result-prefixes = "a h" version = "1.0" s:template match = "h:head" > 🎜>                                                                                                                                                                         href = "common.css" rel = "stylesheet" type = "text/css" />                                              s:copy > s:template                                             s:copy >      s:template > s:stylesheet >

The XHTML namespace is defined twice: the default definition and h:. The default namespace is used for writing output XHTML markup, where namespace prefixes should be avoided. h: used in XPath expressions.

This article uses XSLT version 1.0. Currently, most browsers cannot interpret XSLT 2.0. However, if XSLT is running on a server, it may be a practical option. XSLT 2.0 also provides:

XPATH 2.0 (if…then…else and many built-in functions) Grouping of built-in and user-written XPATH functions

In Listing 1: The head section of the source document has been expanded to include a link to the CSS style sheet. Even though UTF-8 is the default encoding in XML, some browsers require a content type to render it. s:template match="*" is the default verbose copy. In principle, all content is copied to the target document. If this template is omitted, only the marked text content will be copied to the target document. Processing instruction nodes are not copied.

All other examples in this article are standalone files that import common.xsl.

Augmentation

With an augmentation, a feature is added that is not explicitly requested in the source document. An example is the link to the CSS stylesheet in Listing 1. Try another example and add a small arrow (^ v) to each internal link to indicate whether the target precedes or follows it. Listing 2 shows the style sheet.

　

Listing 2. Style sheet (in samples/linkUpDown.xsl)

xmlns = " http://www.w3.org/1999/xhtml"      xmlns:h = " http://www.w3.org/1999/xhtml"      xmlns:s = " http://www.w3.org/1999/XSL/Transform"      version = "1.0"                                                                                                 ^ s:text >                  s:when >                                       v s:text >                  s:when >              s:choose >                       s:copy >      s:template > s:stylesheet >

xmlns = " http://www.w3.org/1999/xhtml" xmlns:h = " http:// www.w3.org/1999/xhtml" xmlns:s = " http://www.w3.org/1999/XSL/Transform" version = "1.0"                                                                                          >                                                                "name" select = "substring-after(@href,'#')" />                                                                                                                    :h:a[@name=$name]" >                                                                                                                                                                                                                                                                                                           >

First, import the common style sheet in Listing 2. Templates match internal links (starting with '#'). If the link points to an anchor that precedes the link, then expand the link with an up arrow (or a down arrow if the opposite is true).

s:copy-of and s:apply-templates ensure that nothing is dropped along the way.

Listing 3 shows an example document (with internal links) augmented with the stylesheet in Listing 2.

　Listing 3. Source document (in samples/linkUpDown.xml)

xml-stylesheet href = "linkUpDown.xsl" type = "text/xsl" ?>                               This link goes downward. a > p >                   Reduce the size of the window to verify the link really works. p >                            This link goes upward. a >          p >      body > html >

xml-stylesheet href = "linkUpDown.xsl" type = "text/xsl" ?>

                                

                                          

                                                                            >

… v downwards. a > …     … ^ upwards. a > …

The target documents look the same, except for the entries in Listing 4. Listing 4. Target document (in samples/linkUpDown.html)

… v downwards. a > … … ^ upwards. a > …

Directives

You can add some directives to the source document to tell the stylesheet what to do. They belong to another namespace (in this case the prefix a:) and are not copied to the target document.

In Listing 5, the directive tag a:ref anywhere in the source document creates a footnote.

Listing 5. Style sheet (in samples/footnote.xsl)

xmlns = " http://www.w3.org/1999/xhtml" xmlns:a = " http://sourceforge .net/projects/arbalo/" xmlns:h = " http://www.w3.org/1999/xhtml" xmlns:s = " http://www. w3.org/1999/XSL/Transform" version = "1.0"                                                        🎜>                                                                                                                                     descendant::a:references)" >                                                         >                                                                        :template match = "a:ref" > name = "number" select = "count(preceding::a:ref ) 1" />    a >                                                                 ; ; >                                                                 a:ref" >                                            a >                                                        a >                               p >          s:for-each >      s:template > s:stylesheet >

Using the a:references directive in the source document, a template named references will assign footnotes where the template matches that directive. If such a directive is missing, the first template matching body will assign a footer at the end of body by calling the same template named references. In both cases, the content of the footnote is listed and an upward link, represented by an upward arrow, is generated.

The second template (matching a:ref) creates a link to the footnote using a down arrow. Footnotes are numbered. Its content is ignored here.

The class="footnote" attribute is parsed after the XSLT transformation by a CSS stylesheet linked in the XSLT stylesheet common.xsl.

The source document in Listing 6 uses the a:ref directive to create footnotes.

Listing 6. Source document (in samples/footnote.xml)

xml-stylesheet href = "footnote.xsl" type = "text/xsl" ?>      xmlns = " http://www.w3.org/1999/xhtml"      xmlns:a = " http://sourceforge.net/projects/arbalo/"                                 This example looks a little scientific                               From Latin                  scientia em >              a:ref >              and academic              From Greek akademia a:ref >.          p >                       Do you know why?                               It uses                  footnotes em >.              a:ref >          p >          Reduce size of window to verify links are generated. p >                      body > html >

//www.w3.org/1999/xhtml" xmlns:a = " http://sourceforge.net/projects/arbalo/"                                                                 🎜 > From Latin and academic a:ref >From Greek akademia a:ref >. p >                                                              🎜>                                                    a: ref >                                                    >                                                                                                                 

The target document contains a list of footnotes at the bottom, as shown in Listing 7.

Listing 7. Target document (in samples/footnote.html)

xmlns = " http://www.w3.org/1999/xhtml"     xmlns:h = " http://www.w3.org/1999/xhtml"     xmlns:a = " http://sourceforge.net/projects/arbalo/" >     head >            This example looks a little scientific           v 1 a >           and academic.           v 2lt;/a>        p >        Do you know why?           v 3 a >        p >        Reduce size of window to verify links are generated. p >        br/>         ^1 a >        From Latin        scientia em >     p >            ^2 a >From Greek akademia p >     ^3 a >        It uses        footnotes em >.     p >     body > html >

xmlns = " http://www.w3.org/1999/xhtml" xmlns:h = " http://www. w3.org/1999/xhtml" xmlns:a = " http://sourceforge.net/projects/arbalo/" > head >      This example looks a little scientific                                 v 1 a >                                                                                                p >                                         href = "#reference-3" class = "footnote" >v 3 a >                                                                                                            verify links are generated. p > br/> ^1 a >     From Latin                                                                                                                     🎜>                                                                                                           ; a name = "reference-3" /> ^3 a > It uses                                                                         🎜>

Break the boundaries of the source document

You can also quote some parts of other source documents. The a:include directive takes an element that might belong to another source document and transforms it, as shown in Listing 8.

　Listing 8. Style sheet (in samples/include.xsl)

xmlns = " http://www.w3.org/1999/xhtml"      xmlns:a = " http://sourceforge.net/projects/arbalo/"      xmlns:s = " http://www.w3.org/1999/XSL/Transform"      version = "1.0"                                                                       select = "document(@src)//*[@id=current()/@refid]" />              s:when >                               select = "document(//a:default[1]/@src)//*[@id=current()/@refid]" />              s:when >                                                    select = "//*[@id=current()/@refid]" />              s:when >          s:choose >      s:template > s:stylesheet >

xmlns = " http://www.w3.org/1999/xhtml" xmlns:a = " http:// sourceforge.net/projects/arbalo/" xmlns:s = " http://www.w3.org/1999/XSL/Transform" version = "1.0"                                                                                     ;                                            ​select = " document(@src)//*[@id=current()/@refid]" />                                                                                                                  "not(@src) and //a:default[1]/@src" >                                                          [1]/@src)//*[@id=current()/@refid]" />                                                                                                         test = "0=string-length(@src) or not(//a:default[1]/@src)" >                                                                                                                   = "//*[@id=current()/@refid]" />                                                                                                           >   s:template > s:stylesheet >

An a:include directive in the source document references the id of the source element. The document containing this element can be named in a src attribute. If this attribute is missing, the src attribute of the a:default directive will be used. If there is no src attribute anywhere, the same source document is used. Therefore, refid will refer to id to avoid infinite recursion.

The imported element may have a complex type and be converted after including (apply-templates). Listing 9, Listing 10, and Listing 11 give examples.

Listing 9. Source document (in samples/include.xml)

xml-stylesheet href = "include.xsl" type = "text/xsl" ?>      xmlns = " http://www.w3.org/1999/xhtml"      xmlns:a = " http://sourceforge.net/projects/arbalo/" >                    head >               The following text is included: p >                            double p >                        body > html >

//www.w3.org/1999/xhtml"

xmlns:a = " http://sourceforge.net/projects/arbalo/" >

                                                                                            ; p >The following text is included: p >

I'm the included em > h2 h2 > I'm the included em > h1 h1 >

                                                                        >                                                                      🎜>

　Listing 10. Part of the source document (in samples/includeY.xml)

I'm the included h2 h2 > I'm the included em > h1 h1 >

　　清单 11. 目标文档（在 samples/include.html 中）

The following text is included: p >          I'm the included em > paragraph. p >          I'm the included em > h1 h1 >          double p >          I'm the included em > h2 h2 >          double p >      body > html >

         The following text is included: p >

         I'm the included em > paragraph. p >

         I'm the included em > h1 h1 >

         double p >

         I'm the included em > h2 h2 >

         double p >

     body >

html >

主文档和导航

　　如果您有一个包含多个页面的演示，有一个主文档包含页面标题及其链接。您可以生成完整的导航，从每个页面到任何其他页面，以及到前一个和后一个页面。这些细节不属于本文的介绍范围，但 参考资料 中提供了使用主文档的 HTML 演示的链接。可将 .xml 替换为 .html 来获得编译后的版本。让浏览器向您显示 .xml 的整洁源代码。您会对它生成的源代码量感到惊奇。

解释与编译的对比

　　解释意味着页面为 XML 格式（其文件扩展名为 .xml，其内容类型为文本/xml 或应用程序/xml），并且处理指令所引用的 XSLT 样式表可在浏览器中执行。

　　编译意味着浏览器看到的是 HTML（其文件扩展名为 .html，内容类型为文本/html），它是在请求页面之前从您的开发环境中或服务器上的 XML 转换而来的。Xalan 和 Saxon 都是著名的 XSLT 处理器。 　　解释是未来的发展方向。所有现代浏览器都支持 XSLT，并且它具有一些优点： 当测试时，您会立即获得结果。只需在您测试的每个浏览器中按下 F5，即可反映源页面、CSS 和 XSLT 样式表的更改。 要传递给客户端的信息量减少了。 客户端看到的是一个干净、整洁的网页，因为还未生成扩充内容。 　　但也要注意一些缺点： 有一些旧浏览器可能不支持 XSLT。如果向一个受控的环境（内部网）发布页面，就不会出现问题。 一些现代浏览器禁止 XSLT 样式表引用另一个目录中的另一个样式表。 将 XSLT 域其他功能相结合（比如 SVG 或 iframe）可能在一些浏览器中导致问题。 因为大部分浏览器都不支持 XSLT 2.0 或即将推出的 3.0，所以您无法使用新功能。没有 XPath 2.0 if () then … else，也没有用户编写的 XPath 功能。 　　无论进行编译还是解释，页面的其他转换 (CSS、JavaScript) 都会在 XSLT 转换之后执行。 结束语 　　在本文中，您学习了如何使用 XSLT 样式表来扩充 XHTML 文档。您可以使用本文中的示例作为起点，构建您自己的 XSLT 样式表。 下载 　　文章和XML示例 关于作者 　　Jürgen M. Regel 是位于德国汉诺威的 TUI InfoTec GmbH 的 Architecture Management & Software Engineering 部门的一名高级软件工程师。他主要研究旅游行业中的企业应用程序集成 (EAI)。