<?xml version="1.0" encoding="utf-8"?>
<page xmlns="http://projectmallard.org/1.0/" type="guide" style="xslt-stylesheet" id="html">
 <info>
  <link type="guide" xref="stylesheets" group="html"/>
  <desc>Common utilities and CSS for transformations to HTML.</desc>
  <revision version="1.0" date="2010-05-26" status="final"/>
 </info>
 <title>HTML Output</title>
 <p>This stylesheet contains common templates for creating HTML output. The
 <code xref="html.output">html.output</code> template creates an output file for a node in the source XML
 document, calling <code xref="html.page">html.page</code> to create the actual output. Output files can
 be either XHTML or HTML, depending on the <code xref="html.xhtml">html.xhtml</code> parameter.</p>
 <p>This stylesheet matches <sys>/</sys> and calls <code xref="html.output">html.output</code> on the root XML element.
 This works for most input formats. If you need to do something different, you
 should override the match for <sys>/</sys>.</p>
 <links type="topic" groups="imports" style="linklist">
  <title>Imports Stylesheets</title>
 </links>
 <links type="topic" groups="includes" style="linklist">
  <title>Includes Stylesheets</title>
 </links>
 <links type="topic" groups="params" style="linklist">
  <title>Defines Parameters</title>
 </links>
 <links type="topic" groups="keys" style="linklist">
  <title>Defines Keys</title>
 </links>
 <links type="topic" groups="templates" style="linklist">
  <title>Defines Templates</title>
 </links>
 <links type="topic" groups="modes" style="linklist">
  <title>Defines Modes</title>
 </links>
 <list style="compact">
  <title>Calls Parameters</title>
  <item>
   <p><link xref="color.bg"/></p>
  </item>
  <item>
   <p><link xref="color.bg.blue"/></p>
  </item>
  <item>
   <p><link xref="color.bg.dark"/></p>
  </item>
  <item>
   <p><link xref="color.bg.gray"/></p>
  </item>
  <item>
   <p><link xref="color.bg.green"/></p>
  </item>
  <item>
   <p><link xref="color.bg.red"/></p>
  </item>
  <item>
   <p><link xref="color.bg.yellow"/></p>
  </item>
  <item>
   <p><link xref="color.blue"/></p>
  </item>
  <item>
   <p><link xref="color.fg"/></p>
  </item>
  <item>
   <p><link xref="color.fg.blue"/></p>
  </item>
  <item>
   <p><link xref="color.fg.dark"/></p>
  </item>
  <item>
   <p><link xref="color.fg.gray"/></p>
  </item>
  <item>
   <p><link xref="color.fg.green"/></p>
  </item>
  <item>
   <p><link xref="color.fg.orange"/></p>
  </item>
  <item>
   <p><link xref="color.fg.purple"/></p>
  </item>
  <item>
   <p><link xref="color.fg.red"/></p>
  </item>
  <item>
   <p><link xref="color.fg.yellow"/></p>
  </item>
  <item>
   <p><link xref="color.gray"/></p>
  </item>
  <item>
   <p><link xref="color.red"/></p>
  </item>
  <item>
   <p><link xref="color.yellow"/></p>
  </item>
  <item>
   <p><link xref="html.basename"/></p>
  </item>
  <item>
   <p><link xref="html.extension"/></p>
  </item>
  <item>
   <p><link xref="html.sidebar.left"/></p>
  </item>
  <item>
   <p><link xref="html.sidebar.right"/></p>
  </item>
  <item>
   <p><link xref="html.syntax.highlight"/></p>
  </item>
  <item>
   <p><link xref="html.xhtml"/></p>
  </item>
  <item>
   <p><link xref="icons.size.quote"/></p>
  </item>
 </list>
 <list style="compact">
  <title>Calls Templates</title>
  <item>
   <p><link xref="icons.svg.media.pause"/></p>
  </item>
  <item>
   <p><link xref="icons.svg.media.play"/></p>
  </item>
  <item>
   <p><link xref="l10n.align.end"/></p>
  </item>
  <item>
   <p><link xref="l10n.align.start"/></p>
  </item>
  <item>
   <p><link xref="l10n.direction"/></p>
  </item>
  <item>
   <p><link xref="l10n.gettext"/></p>
  </item>
 </list>
 <list style="compact">
  <title>Calls Modes</title>
  <item>
   <p><link xref="html.body.attr.mode"/></p>
  </item>
  <item>
   <p><link xref="html.body.mode"/></p>
  </item>
  <item>
   <p><link xref="html.class.attr.mode"/></p>
  </item>
  <item>
   <p><link xref="html.content.post.mode"/></p>
  </item>
  <item>
   <p><link xref="html.content.pre.mode"/></p>
  </item>
  <item>
   <p><link xref="html.css.mode"/></p>
  </item>
  <item>
   <p><link xref="html.footer.mode"/></p>
  </item>
  <item>
   <p><link xref="html.header.mode"/></p>
  </item>
  <item>
   <p><link xref="html.js.mode"/></p>
  </item>
  <item>
   <p><link xref="html.output.after.mode"/></p>
  </item>
  <item>
   <p><link xref="html.sidebar.contents.mode"/></p>
  </item>
  <item>
   <p><link xref="html.sidebar.mode"/></p>
  </item>
  <item>
   <p><link xref="html.sidebar.sections.mode"/></p>
  </item>
  <item>
   <p><link xref="html.syntax.class.mode"/></p>
  </item>
  <item>
   <p><link xref="html.title.mode"/></p>
  </item>
 </list>
 <table rules="rows">
  <title>Implements Templates</title>
  <thead>
   <tr>
    <th>
     <p>Mode</p>
    </th>
    <th>
     <p>Match</p>
    </th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td/>
    <td>
     <p><code>/</code></p>
    </td>
   </tr>
   <tr>
    <td>
     <p><code xref="html.body.attr.mode">html.body.attr.mode</code></p>
    </td>
    <td>
     <p><code>*</code></p>
    </td>
   </tr>
   <tr>
    <td>
     <p><code xref="html.body.mode">html.body.mode</code></p>
    </td>
    <td>
     <p><code>*</code></p>
    </td>
   </tr>
   <tr>
    <td>
     <p><code xref="html.class.attr.mode">html.class.attr.mode</code></p>
    </td>
    <td>
     <p><code>*</code></p>
    </td>
   </tr>
   <tr>
    <td>
     <p><code xref="html.content.post.mode">html.content.post.mode</code></p>
    </td>
    <td>
     <p><code>*</code></p>
    </td>
   </tr>
   <tr>
    <td>
     <p><code xref="html.content.pre.mode">html.content.pre.mode</code></p>
    </td>
    <td>
     <p><code>*</code></p>
    </td>
   </tr>
   <tr>
    <td>
     <p><code xref="html.css.mode">html.css.mode</code></p>
    </td>
    <td>
     <p><code>*</code></p>
    </td>
   </tr>
   <tr>
    <td>
     <p><code xref="html.footer.mode">html.footer.mode</code></p>
    </td>
    <td>
     <p><code>*</code></p>
    </td>
   </tr>
   <tr>
    <td>
     <p><code xref="html.header.mode">html.header.mode</code></p>
    </td>
    <td>
     <p><code>*</code></p>
    </td>
   </tr>
   <tr>
    <td>
     <p><code xref="html.js.mode">html.js.mode</code></p>
    </td>
    <td>
     <p><code>*</code></p>
    </td>
   </tr>
   <tr>
    <td>
     <p><code xref="html.output.after.mode">html.output.after.mode</code></p>
    </td>
    <td>
     <p><code>*</code></p>
    </td>
   </tr>
   <tr>
    <td>
     <p><code xref="html.sidebar.contents.mode">html.sidebar.contents.mode</code></p>
    </td>
    <td>
     <p><code>*</code></p>
    </td>
   </tr>
   <tr>
    <td>
     <p><code xref="html.sidebar.mode">html.sidebar.mode</code></p>
    </td>
    <td>
     <p><code>token[. = 'blank']</code></p>
    </td>
   </tr>
   <tr>
    <td>
     <p><code xref="html.sidebar.mode">html.sidebar.mode</code></p>
    </td>
    <td>
     <p><code>*</code></p>
    </td>
   </tr>
   <tr>
    <td>
     <p><code xref="html.sidebar.mode">html.sidebar.mode</code></p>
    </td>
    <td>
     <p><code>token[. = 'contents']</code></p>
    </td>
   </tr>
   <tr>
    <td>
     <p><code xref="html.sidebar.mode">html.sidebar.mode</code></p>
    </td>
    <td>
     <p><code>token[. = 'sections']</code></p>
    </td>
   </tr>
   <tr>
    <td>
     <p><code xref="html.sidebar.sections.mode">html.sidebar.sections.mode</code></p>
    </td>
    <td>
     <p><code>*</code></p>
    </td>
   </tr>
   <tr>
    <td>
     <p><code xref="html.syntax.class.mode">html.syntax.class.mode</code></p>
    </td>
    <td>
     <p><code>*</code></p>
    </td>
   </tr>
   <tr>
    <td>
     <p><code xref="html.title.mode">html.title.mode</code></p>
    </td>
    <td>
     <p><code>*</code></p>
    </td>
   </tr>
  </tbody>
 </table>
</page>
