Problem: I'm doing a table of contents, with chapters, sections, subsections and subsubsections. What I want is to process the information (that is in XML) with xsl, transforming into an HTML page.
XML:
<chapter id="c1">
<title>Chapter 1</title>
<section id="s1.1">
<title>Motivation</title>
(...)
<section id= "s1.2">
(...)
<chapter id="c2">
<title>Chapter 2 </title>
<section id="s2.1">
<title> Genetics </title>
<subsection id="ss2.1.1">
<title> Brief History </title>
(...)
XSL:
<xsl:template match="toc">
<h3>Table of contents</h3>
<ul>
<xsl:apply-templates mode="indice" select="//chapter">
<xsl:sort/>
</xsl:apply-templates>
</ul>
</xsl:template>
<xsl:template mode="indice" match="chapter">
<h3>
<xsl:value-of select="title"/>
</h3>
<ol>
<xsl:for-each select="section">
<li>
<a href="#{@id}">
<xsl:value-of select="title"/>
</a>
<ol>
<xsl:for-each select="subsection">
<li>
<a href="#{@id}">
<xsl:value-of select="title"/>
</a>
<ol>
<xsl:for-each select="subsubsection">
<li>
<a href="#{@id}">
<xsl:value-of select="title"/>
</a>
</li>
</xsl:for-each>
</ol>
</li>
</xsl:for-each>
</ol>
</li>
</xsl:for-each>
</ol>
</xsl:template>
I've used the following CSS style to make sublists in ordered lists:
<style>
body{
text-align: justify;
}
ol {counter-reset: item}
li {display: block}
li:before {content: counters(item, ".") ". "; counter-increment: item}
</style>
Current Result in HTML:
Chapter 1
1. Motivation
2. Objectives
3. Thesis structure
Chapter 2
1. Genetics
1.1. Brief History
1.2. Topics
2. Genes: study
2.1. Eucariots
2.2. Procaritots
3. Stuff
3.1. stuff
3.2. stuff
3.2.1. stuff
3.2.2. stuff
(...)
Desired Result in HTML:
Chapter 1
1.1. Motivation
1.2. Objectives
1.3. Thesis structure
Chapter 2
2.1. Genetics
2.1.1 Brief History
2.1.2 Topics
2.2. Genes: study
2.2.1. Eucariots
2.2.2. Procaritots
2.3. Stuff
2.3.1. stuff
2.3.2. stuff
2.3.2.1. stuff
2.3.2.2. stuff
(...)
Any suggestions?
If you required the numbering to occur in CSS, here is what you can do. With the following XSL :
<xsl:template match="toc">
<h3>Table of contents</h3>
<ul>
<xsl:apply-templates mode="indice" select="//chapter"/>
</ul>
</xsl:template>
<xsl:template mode="indice" match="chapter">
<!-- Add a class on the list items related to a chapter -->
<li class="chapter">
<xsl:value-of select="title"/>
<ol>
<xsl:for-each select="section">
<li>
<a href="#{@id}">
<xsl:value-of select="title"/>
</a>
<xsl:if test="subsection">
<ol>
<xsl:for-each select="subsection">
<li>
<a href="#{@id}">
<xsl:value-of select="title"/>
</a>
<xsl:if test="subsubsection">
<ol>
<xsl:for-each select="subsubsection">
<li>
<a href="#{@id}">
<xsl:value-of select="title"/>
</a>
</li>
</xsl:for-each>
</ol>
</xsl:if>
</li>
</xsl:for-each>
</ol>
</xsl:if>
</li>
</xsl:for-each>
</ol>
</li>
</xsl:template>
and the following CSS :
body {
text-align: justify;
}
ol, ul {
counter-reset: item;
}
li {
display: list-item;
list-style-type: none;
}
li.chapter::before {
content: "";
}
li:before {
content: counters(item, ".") ". ";
counter-increment: item
}
the result is what you expect.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments