<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<?xml-stylesheet type="text/xsl" href="http://starling.us/gus_xslt.xsl"?>
<howto
  xmlns:xsi="http://www.w3.org/2000/10/XMLSchema-instance"
  xsi:noNamespaceSchemaLocation="http://starling.ws/xml/howto.xsd">    
  <head>
    <navigation ToC="Table of Contents" section="yes" topic="yes" subtopic="yes" subsubtopic="yes" links="yes"/>
    <syndication atom="http://starling.us/starling_us_atom.xml" />
    <pdfmarks body="no" section="no" topic="no" subtopic="no" subsubtopic="no"/>
    <title>Documenting Howtos with XSLT</title>
    <description>How to write a howto via XML/XSLT</description>
    <keywords>xml, xslt, starling</keywords>
    <author>Gan Uesli Starling</author>
    <copyright>2003 - 2006, Ĝan Ŭesli Starling</copyright>
  </head>
  <body>
    <title>Documentation with XML &amp; XSLT</title>
    <p class="center" style="line-height:150%;">Copyright 2003 &#8212; 2007<br/>by Ĝan Ŭesli Starling</p>
    <section> 
      <title>An Easier Way to Author Markup</title>
      <p>This page is not what it appears. It is not HTML. Rather it is XML/XSLT. XML is as much an improvement for documentation over XHTML as is XHTML over paper. Although an international standard, the format is new to the point of ultra-modernity. So as of the moment, certain lag-behind browsers don&#8217;t fully support it. But these (and any versions beyond) do: MSIE&#160;6&#160;SP1, Mozilla&#160;1.2.1, Firefox&#160;1.0.
      </p>
      <topic>
        <title>How it works.</title>
        <p>Composing all of this from scratch was a bit intimidating. But once done, to use it became a piece of cake. By way of example let me recount how this very document began as a mere follow-up demo for a job interview. Then I kept puttering away at the stylesheet, adding and refining features. And along the way this very page metamorphosed from a mere bit of show-off fluff into a right and proper howto. Such indecisive tinkering is feasible only with XML. Were it old-fashioned XHTML then I would have had to start over. The headaches of markup would have been too intimidating otherwise. That&#8217;s how it works: plain old text with only a minimum of tags go into the XML master doc; then XSLT does the markup drudge work.
        </p>
        <subtopic>
          <title>The XML doc</title>
          <p>The markup required to create a master document in XML is very simple. It has only a fraction the complexity of a corresponding XHTML file. The reason for this is all of that extra complexity has been handed off for automatic handling by the XSLT stylesheet.
          </p>
          <p>In authoring this document for presentation I was able to cut and paste whole sections at will and never waste a moment&#8217;s effort to track the supporting links or even the table of contents.
          </p>
          <p>So basically, all that needs to be written in the XML master is the body of the document itself. No worries over the table of contents, navigation links, CSS positioning, etc.
          </p>          
          <subsubtopic>
            <title>What about XML Schema?</title>
            <p>Observe that in the root tag for the XML doc I assigned a namespace to a schema. Actually I have not yet written that schema, nor any schema, nor yet even a DTD for this XML. XSLT does not require either. Nor does the browser. These only care that the XML must be well-formed. Later on I plan to write a schema, once experimentation is finished so that the format is set in stone.
            </p>
          </subsubtopic>          
        </subtopic>
                
        <subtopic>
          <title>The XSLT stylesheet</title>
          <p>The XSLT presently stands at 937 lines of code. That sounds like a lot. Yet I need only do it but once. Many more lines than that it will relieve me of later by handling tedious markup chores. For instance: this very page of XHTML which stands at 3392 lines was processed from an XML master of only 1098 lines. And those extra processed-in lines represent the most tedious, singlularly intimidating aspects of markup...the parts I hate. So it has more than paid for itself in just the first XML which it processed. And yet this single stylesheet may serve any number of such XML docs. Here is a link to my XSLT <a class="button" href="./howto.xsl">&#160;stylesheet&#160;</a> which you may study as an example.
          </p>
          <p>The XSLT reads in the XML master doc and processes it into XHTML. On the fly it creates the Table of Contents and all those little navigational arrow buttons. It also handles positioning of images, the ordination of lists, and so forth.
          </p>
        </subtopic>
        
        <subtopic>
          <title>The XHTML output</title>
          <p>Output is in XHTML comforming to the well-formedness rules of XML (aka XHTML). All modern browsers support this format. Processing occurs at the browser under Java. So as long as the browser is up to date and installed so as to include the Java Runtime Environment, then it will work regardless of operating system. I have tested it in these browsers:
          </p>
          <ul>
            <li>MSIE&#160;6 SP&#160;1 on Win2K</li>
            <li>Mozilla&#160;1.2.1 on NetBSD Unix</li>
          </ul>          
          <p>Should you be viewing this page correctly on some other browser or OS, I would like to learn of it. Kindly <a class="button" href="mailto:gan@starling.us">&#160;email&#160;</a> me. Thanks.
          </p>
        </subtopic>
      </topic>
    </section>
    
    <!-- SECTION DELIMITER -->
    
    <section> 
      <title>Special charcters</title>
      <p>XML, being a markup language, must employ certain symbols. So there must be a work-around for when those symbols mean something else besides markup.
      </p>     
      <p>And for all the other symbols not used in markup, keys on the keyboard do not suffice. So there must be a work-around for that as well.
      </p> 
    
      <topic>
        <title>How it works</title>
        <p>XML varies notably from XHTML. In sections below I will demonstrate by example rather than attempt to explain. But these two details need separate treatment.
        </p>
      
        <subtopic>
          <title>Markup characters</title>
          <p>These may not occur anywhere except as part of the script itself. That is to say, they must be escaped when they are content instead of markup. Below is the complete list and how to escape them.
          </p>
          <ul>
            <li><code>&lt; </code>is escaped by <code>&amp;lt;</code></li>
            <li><code>&gt; </code>is escaped by <code>&amp;gt;</code></li>
            <li><code>&amp; </code>is escaped by <code>&amp;amp;</code></li>
          </ul>
        </subtopic>   
      
        <subtopic>
          <title>Unicode characters</title>
          <p>HTML had its own escapes for a number of useful symbols. Most of these were not carried over into XML. Instead XML uses Unicode. Here are some of the most common.
          </p>
          <table>
            <tr>
              <th>HTML<br /><span class="note">(charsets vary)</span></th>
              <th>meaning</th>
              <th>XML<br /><span class="note">(Unicode)</span></th>          
            </tr>
            <tr>
              <td><code>&amp;nbsp; </code></td>
              <td>non-breaking space</td>
              <td><code>&amp;#160;</code></td>          
            </tr>
            <tr>
              <td><span class="note">&#8217;</span></td>
              <td>apostrophe</td>
              <td><code>&amp;#8217;</code></td>          
            </tr>
          </table>
        </subtopic>
        
        <subtopic>
          <title>Displaying Unicode in browsers</title>
          <p>The XSLT stylesheet used here generates a meta tag in the XHTML header declaring <code>content="text/html; charset=UTF-8" </code>as a flag to all browsers that the character set is Unicode (ISO&#160;10646 versus  ISO&#160;8859-1). So the Unicode charset herein had ought to display correctly on all modern browsers.
          </p>
          <p>Some older browsers may ingore that tag, however. Or the browser&#8217;s owner may have manually overridden it in favor of a local default charset. Lastly, it may happen that the web server is trying to enforce its own global default charset. Thus despite said meta tag it may still happen that appostrophes, arrow buttons, or other characters display incorrectly. I have a work-around for this. It consists of a Perl script to ex-post-facto replace bare, multi-byte Unicode strings with their XHTML-escaped equivalents. Here is a button that can take you there now: <a class="button" href="#2002-03-22-09-43">&#160;Re-escaping&#160;UTF-8&#160;for&#160;XHTML&#160;via&#160;Perl&#160;</a>.
          </p> 
        </subtopic>
      </topic>
    </section>
    
    <!-- SECTION DELIMITER -->
    
    <section>
      <title>Page Navigation</title>
      <p>The XML master file for this page contains zero markup for the table of contents, nor yet any markup for the many navigation buttons at every section, topic, sub-topic and sub-sub-topic. None whatever. XSLT has calculated these on-the-fly while the page loaded into the browser
      </p>
      
      <topic>
        <title>How it works</title>
        <p>An XML document branches out just like a family tree diagram. It starts with an all-enclosing tag termed the <i>root. </i>From there it forks into smaller branches. And those forks will often fork yet again...and so forth. Wherever the document tree might branch, from that fork leafward is called a <i>node</i>. So each node might have sub-nodes...and so forth. From leaves to root, tags mark the boundary of each such node, sub-node, sub-sub-node, etc. These tags might be named anything. Arbitrarily, I chose to name them: <code>&lt;section&gt;</code>, <code>&lt;topic&gt;</code>, <code>&lt;subtopic&gt;</code> and <code>&lt;subsubtopic&gt;</code>. From right to left, each node must nest inside the node preceding it, just like branches on a tree. It is thereby easy to map.
        </p>
      </topic>
        
      <topic>
        <title>A table of contents</title>
        <p>In composing an on-the-fly table of contents all XSLT need do is start from the root and follow the branches out to a pre-defined number of forks. It then composes a list with named branches just like those found in the document. Lastly it populates that list with the title from each mapped-out branch surrounding these with hypertext links.
        </p>

        <subtopic>
          <title>List link style &amp; the ToC</title>
          <p>Note how the Table of Contents shows a sequence of different list styles for each nested level: section, topic, sub-topic and sub-sub-topic. Such is the style favored by outlines written on paper, and so for good reason. To follow suit in XHTML requires special effort (so that few ever bother). But with XSLT one may arrange that a single set of variables controls for all lists. And this I have done.
          </p>
          <p>How it works is that the stylesheet expects ordered lists to group together within a block. So for any list or sub-list, XSLT merely counts upward toward the first block. The same counting technique applies to both ordered and un-ordered lists. To defeat this behavior locally enclose the sub-list within its own block. To defeat it globally just redefine the variables to be all alike.
          </p>
        </subtopic>

        <subtopic>
          <title>Syndication feed link</title>
          <p>Syndication feeds, particularly the Atom protocol, are the very latest thing. Post a link to your feed in the table of contents as follows.
          </p>
        </subtopic>
      </topic>    
      
      <topic>
        <title>Navigation buttons</title>
        <p>Each major node (section, topic, etc.) will display adorned by XSLT with from one to four navigational links apearing as square CSS buttons. In a document of complexity their number may run into hundreds. <i>Try marking that up in XHTML!</i>
        </p>
        <p>What this affords to authors is total freedom to sub-divide their treatment of any subject matter. Convenience and logic may now hold sway without inhibition due to the lurking spectre of markup complexity.
        </p>
        
        <subtopic>
          <title>Four arrows versus three, two or one</title>
          <p>The XSLT stylesheet checks as to whether a given node may have children, siblings or a parent. Thus an button will link left, right, up or down only if that relation exists.
          </p>
          
          <subsubtopic>
            <title>Arrow styles</title>
            <p>The nav buttons are set by variables near the head of the XSLT. By default these hold Unicode arrow characters as would seem intuitive for outline-structured documents, which these are.
            </p>
          </subsubtopic>
          
          <subsubtopic>
            <title>Vertical arrows</title>
            <p>The upward pointing arrow (or double leftward) links up-page to the next higher level (rootward node). Thus from a sub-sub-topic it ascends to the sub-topic. From a sub-topic it ascends to the topic. From a topic it ascends to the section. From any section it ascends to the table of contents. If none such exit no link will appear.
            </p>
            <p>The downward pointing arrow (or double rightward) links down-page into the next sub-level (leafward node). Thus from a section it descends to the first topic. From a topic it descends to the first sub-topic. From a sub-topic it descends to the first sub-sub-topic. If none such exit no link will appear.
            </p>
          </subsubtopic>

          <subsubtopic>
            <title>Horizontal arrows</title>
            <p>The left- and right-ward pointing arrows link up- and down-page to adjacent levels (sibling nodes). Thus from a section they conduct to adjacent sections. From a topic they conduct to adjacent topics. From a sub-topics they conduct to adjacent sub-topics. From a sub-sub-topic they conduct to adjacent sub-sub-topics. If none such exit no link will appear.
            </p>
          </subsubtopic>

          <subsubtopic>
            <title>Unobtrusive style</title>
            <p>Instead of splashy anims or graphics, the nav links here are deliberately plain. They are simple CSS buttons of regular Unicode characters (as selected by XSLT variaable...arrow glyphs by default). Thus the master document is free from the baggage of extraneaous image files.
            </p>
          </subsubtopic>
        </subtopic>
      </topic>
    </section>
    
    <!-- SECTION DELIMITER -->
    
    <section>
      <title>Major tags</title>
      <p>The purpose of required major tags is to enforce both structure and style.   
      </p>
      <p>The XML structure expected by this XSLT is as follows: <code>head </code>, <code>body</code>, <code>section</code>, <code>topic</code>, <code>subtopic</code> and <code>subsubtopic</code>.  
      </p>
      <p>Required are the first three: without them all structure is absent such that there is nothing to view. Required are the first three: without them structure is wholly absent such that there is nothing to view. Optional are the latter three: but lacking them structure is very simplistic.
      </p>
      
      <topic>
        <title>How they work</title>
        <p>The whole of an XML document is called the root node. This wholeness is delimited by opening and closing root tags. Inside of that are lesser nodes, each bounded by its own pair of tags. And so on and so forth, deeper and deeper.
        </p>
        <p>XSLT first enters the root node. There it applies a list of templates...one at a time. Each template sifts all tags within that node, matching only one kind. The template then performs its function on those tags alone, ignoring all others. Any other templates must wait their turn. Thus it is that sequential elements all must share the same kind of tag.
        </p>
        <p>Thus between the surrounding root tags a template will process first the <code>&lt;head&gt; </code>tag. Next it will process the <code>&lt;body&gt; </code>tag.
        </p>
      </topic>
      
      <topic>
        <title>Head &amp; Body</title>
        <p>Head is analagous to the head of an XHTML doc. The head may contain only a title.
        </p>
        <p>Head is analagous to the head of an XHTML doc. Body is likewise analagous to the body of an XHTML doc. The body may have titles, blocks and sections, in that order.
        </p>
        
        <subtopic>
          <title>Markup</title>
          <p>Shown is a mostly empty markup for the head and a typical body. Not-so-obvious things you may change are shown in <cmd>bold</cmd>. Hints from me which you had ought <i>not</i> to include are shown in <note>teal</note>. Other empty elements you may fill with any text as seems obvious to you.</p>
          
<pre>&lt;?xml version="1.0" encoding="UTF-8" standalone="yes"?&gt;
&lt;?xml-stylesheet type="text/xsl" href="./gus_xslt.xsl"?&gt;
&lt;gus_xslt
  xmlns:xsi="http://www.w3.org/2000/10/XMLSchema-instance"
  xsi:noNamespaceSchemaLocation="http://starling.ws/XML/howto.xsd"&gt;
  &lt;head&gt;
    &lt;navigation 
      ToC="<cmd>Table of Contents</cmd>"&#160;&#160;&#160;&#160;<note>&lt;-- Leave empty to omit the ToC. Edit to label the ToC differently. -- &gt;</note>
      section="<cmd>yes</cmd>" topic="<cmd>yes</cmd>" subtopic="<cmd>yes</cmd>" subsubtopic="<cmd>yes</cmd>" links="<cmd>yes</cmd>"/&gt;&#160;&#160;&#160;&#160;<note>&lt;-- Fill with "no" to omit navigation for given level. -- &gt;</note>
    &lt;syndication atom="<cmd>http://your_domain.com/your_atom_feed.xml</cmd>" /&gt;&#160;&#160;&#160;&#160;<note>&lt;-- Omit this node to forego an Atom feed link. -- &gt;</note>
    &lt;title&gt;&lt;/title&gt;
    &lt;description&gt;&lt;/description&gt;
    &lt;keywords&gt;&lt;/keywords&gt;
    &lt;author&gt;&lt;/author&gt;
    &lt;copyright&gt;&lt;/copyright&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;title&gt;&lt;/title&gt; 
    &lt;foo&gt;&lt;/foo&gt; 
    &lt;foo&gt;&lt;/foo&gt;
    &lt;section&gt;&lt;/section&gt;
    &lt;section&gt;&lt;/section&gt;
  &lt;/body&gt;
&lt;/gus_xslt&gt;</pre>  
        </subtopic>
      </topic>
      
      <topic>
        <title>Sections</title>
        <p>Sections are the major division of subject matter. XSLT will automatically display these in XHTML segregated vertically by <code>&lt;hr/&gt; </code>tags (horizontal rules). Attributes embeded into the opening <code>&lt;section&gt; </code>tag (such as <code>style="clear:both"</code>, etc.) will carry through to the resultant <code>&lt;hr/&gt; </code>tag. Within the <code>&lt;section&gt; </code>node, XSLT will parse the <code>&lt;title&gt; </code>tags from each sub-node to create a Table of Contents as top-level list items. A section may contain titles, blocks and topics.
        </p>
        
        <subtopic>
          <title>Markup</title>
          <p>Shown is empty markup for a typical secion.
          </p>
          
          <pre>      &lt;section&gt;
        &lt;inlink&gt;&lt;/inlink&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;foo&gt;&lt;/foo&gt;
        &lt;topic&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;foo&gt;&lt;/foo&gt;
          &lt;subtopic&gt;
            &lt;title&gt;&lt;/title&gt;
            &lt;foo&gt;&lt;/foo&gt;
            &lt;subsubtopic&gt;
              &lt;title&gt;&lt;/title&gt;
              &lt;foo&gt;&lt;/foo&gt;
            &lt;/subsubtopic&gt;
          &lt;/subtopic&gt;
        &lt;/topic&gt;
      &lt;/section&gt;</pre>
        </subtopic>      
      </topic>
      
      <topic>
        <title>Topics, sub-topics &amp; sub-sub-topics</title>
        <p>In the XHTML output these display as nested list-items within a section. In the Table of Contents their display as descending list items for that section. Each may contain titles and blocks.
        </p>
        
        <subtopic>
          <title>Markup</title>
          <p>Shown is empty markup for a typical topic and its descendents.
          </p>
          
          <pre>        &lt;topic&gt;
          &lt;inlink&gt;&lt;/inlink&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;foo&gt;&lt;/foo&gt;
          &lt;subtopic&gt;
            &lt;inlink&gt;&lt;/inlink&gt;
            &lt;title&gt;&lt;/title&gt;
            &lt;foo&gt;&lt;/foo&gt;
            &lt;foo&gt;&lt;/foo&gt;
            &lt;subsubtopic&gt;
              &lt;inlink&gt;&lt;/inlink&gt;
              &lt;title&gt;&lt;/title&gt;
              &lt;foo&gt;&lt;/foo&gt;
              &lt;foo&gt;&lt;/foo&gt;
            &lt;/subsubtopic&gt;
          &lt;/subtopic&gt;
        &lt;/topic&gt;</pre>
        </subtopic>      
      </topic>
      
      <topic>
        <title>Titles</title>
        <p>Titles may contain <code>&lt;foo&gt;</code> text nodes.
        </p>   

        <p>Sometimes the most appropriate title for a section is too long to fit neatly into the ToC. You can flag that a shorter title appear in the ToC by embeding an attribute, like so...
          <br/>
          <br/><code>&lt;title toc="Short Name"&gt;Too Long for TOC Title Name&lt;/title&gt;</code> .
        </p>
      </topic>  
      
      <topic>
        <title>Inlinks</title>
        <p>Inlinks may contain <code>foo_bar</code> text sans any whitespace. They are for named, inbound anchor tags. Inlink nodes transform as HTML <code>&lt;a id="foo_bar"&gt;</code> tags.
        </p>   
      </topic>   
      
    </section>
    
    <!-- SECTION DELIMITER --> 
    
    <section>
      <title>Stylesheet defaults</title>
      <p>Many of the appearance defaults enforced by the XSLT stylesheet are controlled by variables. 
      </p>
      
      <topic>
        <title>User-redefinable defaults</title>
        <p>The following variables are defined at the top of the stylesheet. The purpose of each is self-evidently by its name, as follows:
        </p>
        
        <subtopic>
        <title>Various colors:</title>
          <ul>
            <li><code>page_background_color</code> &#8213; the page itself.</li>
            <li><code>dark_background_color</code> &#8213; darker shade of two-tone pair.</li>
            <li><code>lite_background_color</code> &#8213; lighter shade of two-tone pair.
              <ul>
                <li>In changing either of the two-tone pair, be sure to test both on CRT and LCD screens. Results can vary significantly.</li>
              </ul>
            </li>
            <li><code>text_bold_color</code> &#8213; for <code>&lt;bold&gt;</code> text nodes.</li>
            <li><code>text_note_color</code> &#8213; for <code>&lt;warn&gt;</code> text nodes.</li>
            <li><code>text_warn_color</code> &#8213; for <code>&lt;note&gt;</code> text nodes.</li>
            <li><code>text_cmd_color</code> &#8213; for <code>&lt;cmd&gt;</code> children of <code>&lt;pre&gt;</code> text nodes.
              <ul>
                <li>Used in blocks of example code to distinguish command entries burried in prompts and system feedback.</li>
              </ul>
            </li>
          </ul>
        </subtopic>
        
        <subtopic>
          <title>Navigation buttons:</title>
          <ul>
            <li><code>button_style</code> &#8213; size, color, etc.</li>
            <li><code>button_char_left</code> &#8213; Unicode character.</li>
            <li><code>button_char_up</code> &#8213; Unicode character.</li>
            <li><code>button_char_down</code> &#8213; Unicode character.</li>
            <li><code>button_char_right</code> &#8213; Unicode character.</li>
          </ul>
        </subtopic>
        
        <subtopic>
          <title>Background image URL:</title>
          <ul>
            <li><code>background_image_left</code> &#8213; path to image.</li>
          </ul>
        </subtopic>
        
        <subtopic>
          <title>Borders for ToC, tables:</title>
          <ul>
            <li><code>border_color</code> &#8213; color of borders.</li>
            <li><code>border_style</code> &#8213; style of borders.</li>
          </ul>
        </subtopic>
      </topic>
    </section>
    
    <!-- SECTION DELIMITER --> 
    
    <section>
      <title>By-passing defaults</title>
      <p>In preparing the above defaults, I will of course have neglected something I&#8217;m sure to need later. So as a hedge, two tags will pass both their XML attributes and child nodes un-altered to the XHTML output.
      </p>
      
      <topic>
        <title>How it works</title>
        <p>The XSLT stylesheet enforces a number of built-in defaults. By passing through both the attributes and the child nodes, all built-in defaults are escaped. 
        </p>
      </topic>

      <topic>
        <title>Carry-over XHTML tag</title>
        <p>The following tags and attributes are no different than for XHTML.
        </p>
        <ul>
          <li><code>&lt;div foo="bar"&gt; </code>and <code>&lt;/div&gt; </code>
          </li>
          <li><code>&lt;span foo="bar"&gt; </code>and <code>&lt;/span&gt; </code>
          </li>
        </ul>
      </topic>
      
      <topic>
        <title>Examples</title>
        <p>These show how XHTML may be passed through via a <code>&lt;div&gt;</code> node.
        </p>
        
        <subtopic>
          <title>Markup custom &lt;h1&gt; tag</title>
          <p>Shown is markup for sample below.
          </p>
          
          <pre>&lt;div&gt;
  &lt;div style="width:300px;margin-left:auto;margin-right:auto;"&gt;
    &lt;h1 style="text-align:center;line-height:150%;
      font-weight:800;font-style:italic;border:solid violet;
      color:yellow;background-color:purple;"&gt;
      XHTML custom &lt;h1&gt; tag
    &lt;/h1&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
              
        </subtopic> 
        
        <subtopic>
          <title>Sample custom &lt;h1&gt; tag</title>
          <p>Shown is result of markup above.
          </p>
          <div style="width:300px;margin-left:auto;margin-right:auto;">
            <h1 style="text-align:center;line-height:150%;
              font-weight:800;font-style:italic;border:solid violet;
              color:yellow;background-color:purple;">
              XHTML custom &lt;h1&gt; tag
            </h1>
          </div>
        </subtopic>  
        
        <subtopic>
          <title>Markup custom &lt;img&gt; button</title>
          <p>Shown is markup for sample below.
          </p>
          
          <pre>&lt;div&gt;
  &lt;a href="../images/tet_name.png" rel="external"&gt;
    &lt;p style="text-align:center;
      margin-left:35%;margin-right:35%;
      border:outset black;
      background-color: olive;"&gt;
      &lt;br /&gt;
      &lt;img s="img" src="../images/araneo_100.png" alt="button"/&gt;
      &lt;br /&gt;
      &lt;br /&gt;
    &lt;/p&gt;
  &lt;/a&gt;
&lt;/div&gt;</pre>
          
        </subtopic>
        
        <subtopic>
          <title>Sample custom &lt;img&gt; button</title>
          <p>Shown is result of markup above.
          </p>       
           <div>
            <a href="../images/tet_name.png" rel="external">
              <p style="text-align:center;
                margin-left:35%;margin-right:35%;
                border:outset black;
                background-color: olive;">
                <br />
                <img s="img" src="../images/araneo_100.png" alt="button"/>
                <br />
                <br />
              </p>
            </a>
          </div>
        </subtopic> 
      </topic>
    </section>
    
    <!-- SECTION DELIMITER --> 
    
    <section>
      <title>Text</title>
      <p>XSLT here handles some of the druge work by allowing for custom tags and so avoiding excessive use of <code>&lt;span&gt;</code> nodes.
      </p>
      
      <topic>
        <title>How it works</title>
        <p>Between surrounding <code>&lt;p&gt; </code>and <code>&lt;/p&gt; </code> tags, XSLT will apply templtes for most of the usual XHTML nodes plus a few extras.
        </p>
      </topic>
      
      <topic>
        <title>Custom XML tags</title>
        <p>The following tags and attributes are different from XHTML.
        </p>
        <ul>
          <li><code>&lt;note&gt; </code>and <code>&lt;/note&gt; </code>take the place of <code>&lt;span style="color:teal;"&gt; </code>together with its closing tag.           
          </li>
          <li><code>&lt;warn&gt; </code>and <code>&lt;/warn&gt; </code>take the place of <code>&lt;span style="color:red;"&gt; </code>together with its closing tag.           
          </li>
        </ul>
      </topic>
      
      <topic>
        <title>Carry-over XHTML tags</title>
        <p>The following tags work the same as in XHTML.
        </p>
        <ul>
          <li><code>&lt;b&gt; </code>and <code>&lt;/b&gt; </code>pass through.         
          </li>
          <li><code>&lt;i&gt; </code>and <code>&lt;/i&gt; </code>pass through.         
          </li>
          <li><code>&lt;sup&gt; </code>and <code>&lt;/sup&gt; </code>pass through.         
          </li>
          <li><code>&lt;sub&gt; </code>and <code>&lt;/sub&gt; </code>pass through.         
          </li>
          <li><code>&lt;a&gt; </code>and <code>&lt;/a&gt; </code>pass through complete with attributes.
          </li>
          <li><code>&lt;span&gt; </code>and <code>&lt;/span&gt; </code>pass through complete with attributes, etc.       
          </li>
        </ul>
      </topic>
       
      <topic>
        <title>Examples</title>
        
        <subtopic>
          <title>Markup</title>
          <p>Shown is for sample text below.
          </p>
          
          <pre>&lt;p&gt;
  &lt;a class="button" href="#foo" id="bar"&gt;Sample two-way link to button below&lt;/a&gt;
  &lt;br /&gt;Sample plain text
  &lt;br /&gt;&lt;i&gt;Sample italic text&lt;/i&gt;
  &lt;br /&gt;&lt;b&gt;Sample bold text&lt;/b&gt;
  &lt;br /&gt;&lt;code&gt;Sample code style text&lt;/code&gt;
  &lt;br /&gt;&lt;note&gt;Sample note style text&lt;/note&gt;
  &lt;br /&gt;&lt;warn&gt;Sample warning style text&lt;/warn&gt;
  &lt;br /&gt;&lt;a class="button"  href="#bar" id="foo"&gt;Sample two-way link to button above&lt;/a&gt;
&lt;/p&gt;</pre>
          
        </subtopic>
        
        <subtopic>
          <title>Sample text</title>
          <p>Shown is result of markup above.
          </p>
          
          <p>
            <a class="button" href="#foo" id="bar">Sample two-way link to button below</a>
            <br />Sample plain text
            <br /><i>Sample italic text</i>
            <br /><b>Sample bold text</b>
            <br /><code>Sample code text</code>
            <br /><note>Sample note text</note>
            <br /><warn>Sample warn text</warn>
            <br /><a class="button"  href="#bar" id="foo">Sample two-way link to button above</a>
          </p>
          
        </subtopic>
      </topic>
    </section>
    
    <!-- SECTION DELIMITER -->
    
    <section> 
      <title>Images</title>
      <p>Here XSLT again handles all the drudge work: placing, linking, and captioning image multiple files.
      </p>
      
      <topic>
        <title>How it works</title>
        <p>The XSLT creates a one-row table with a <code>&lt;td&gt; </code>cell for each separate image. Within this cell the image and caption are centered using a <code>&lt;p style="text-align:center;"&gt; </code>tag pair. If an optional <code>href="foo" </code>attribute is included, a hypertext link will be templated into the output.
        </p>
        
        <subtopic>
          <title>Why not pure CSS?</title>
          <p>A somewhat more elegant approach to image placement would be to use <code>&lt;div&gt; </code>tags and the CSS float property. And in fact I tried that first. I did not mind that CSS it required the dimensions for each separate image. But the float characteristic did not work predictably for every image. Thus I fell back on the tried and true XHTML table option. XSLT does all the work, so complexity is not an issue?
          </p>
        </subtopic>
      </topic>      
      
      <topic>
        <title>Custom XML tags</title>
        <p>The following tags and attributes are different from XHTML.
        </p>
        <ul>
          <li>Enclose all image tags between <code>&lt;images&#160;s="img"&gt; </code>and <code>&lt;/images&gt; </code>tags.          
          </li>
          <li><code>&lt;img src="../path/thumbnail.gif" href="../path/bigger.png"&gt; </code>is the opening image tag.
          </li>
          <li><code>&lt;/img&gt; </code>is the closing image tags.        
          </li>
          <li>Image captions are placed between the tags.        
          </li>
        </ul>
      </topic>
      
      <topic>
        <title>Examples</title>
      
        <subtopic>
          <title>Markup</title>
          <p>Shown is for sample images below.
          </p>

          <pre>&lt;images&gt;
  &lt;img src="../images/S_Apache_Logo.gif" 
    href="../images/Apache_Logo.gif"&gt;
    Apache logo.
   &lt;/img&gt;
  &lt;img src="../images/trailing_edge_50x39.png" 
    href="../images/trailing_edge_wht.png"&gt;
    My own logo.
  &lt;/img&gt;
  &lt;img src="../images/S_NetBSD_Logo.gif" 
    href="../images/NetBSD_Logo.gif"&gt;
    NetBSD logo.
  &lt;/img&gt;
&lt;/images&gt;</pre>

        </subtopic>

        <subtopic>
          <title>Sample images</title>
          <p>Shown is result of markup above. All three images are hypertext links.
          </p>

          <images>
            <img src="../images/S_Apache_Logo.gif" 
                    href="../images/Apache_Logo.gif">
              Apache logo.
            </img>
            <img src="../images/trailing_edge_50x39.png"    
                    href="../images/trailing_edge_wht.png">
              My own logo.
            </img>
            <img src="../images/S_NetBSD_Logo.gif" 
                    href="../images/NetBSD_Logo.gif">
              NetBSD logo.
            </img>
          </images>
          
        </subtopic>
      </topic>
      
     
    </section>
    
    <!-- SECTION DELIMITER -->
    
    <section>
      <title>Lists</title>
      <p>Lists work the same in this XML/XSLT as they do for XHTML. The only difference is auto-configuration of list-style-types.
      </p>
      
      <topic>
        <title>How it works</title>
        <p>The list tags themselves, on passing through XSLT, are adorned with <code>list-style-type </code> attributes from CSS. The order in which they are chosen is fixed by a set of eight variables near the head of the XSLT. These are named <code>list-style-1 </code>and so forth. Ordination is calcuated by counting nodes backward toward the nearest enclosing <code>&lt;section&gt;</code>, <code>&lt;topic&gt;</code>, <code>&lt;subtopic&gt;</code> or <code>&lt;subsubtopic&gt;</code> node.
        </p>
      </topic>
      
      <topic>
        <title>Carry-over XHTML tags</title>
        <p>The following tags are carried over from XHTML. Closing tags are required for each.
        </p>
        <ul>
          <li>The <code>&lt;ol&gt; </code>tag.
          </li>
          <li>The <code>&lt;ul&gt; </code>tag.
          </li>
          <li>The <code>&lt;li&gt; </code>tag.
          </li>
        </ul>
      </topic>
      
      <topic>
        <title>Style attributes</title>
        <p>Styles for both kinds of lists are fixed by the XSLT. The ordination of list style types is controlled by eight variables near the head of the XSLT. Each level of sub-nesting will display a 5% reduction in <code>font-size </code>and <code>line-height </code> until the 6th sub-level.
        </p>
      </topic>
      
      <topic>
        <title>Examples</title>
        <p>Details about lists are delt with in the examples themselves.
        </p>
        
        <subtopic>
          <title>Markup for ordered list</title>
          <p>Shown is for sample ordered list below.
          </p>
          
          <pre>&lt;ol&gt;
  &lt;li&gt;Item 1&lt;/li&gt;
  &lt;li&gt;Item 2
    &lt;ol&gt;
      &lt;li&gt;Item 2-1&lt;/li&gt;
      &lt;li&gt;Item 2-2
        &lt;ol&gt;
          &lt;li&gt;Item 2-2-1&lt;/li&gt;
          &lt;li&gt;Item 2-2-2&lt;/li&gt;
        &lt;/ol&gt;
      &lt;/li&gt;
    &lt;/ol&gt;
  &lt;/li&gt;
  &lt;li&gt;Item 3&lt;/li&gt;
&lt;/ol&gt;</pre>

        </subtopic>
        
        <subtopic>
          <title>Sample ordered list</title>
          <p>Shown is result from markup above.
          </p>
          
          <ol>
            <li>Item 1</li>
            <li>Item 2
              <ol>
                <li>Item 2-1</li>
                <li>Item 2-2
                  <ol>
                    <li>Item 2-2-1</li>
                    <li>Item 2-2-2</li>
                  </ol>
                </li>
              </ol>
            </li>
            <li>Item 3</li>
          </ol>
          
        </subtopic>

        <subtopic>
          <title>Sample unordered list</title>
          <p>Shown is an unordered twin to the ordered list above.
          </p>
          
          <ul>
            <li>Item 1</li>
            <li>Item 2
              <ul>
                <li>Item 2-1</li>
                <li>Item 2-2
                  <ul>
                    <li>Item 2-2-1</li>
                    <li>Item 2-2-2</li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>Item 3</li>
          </ul>

        </subtopic>
      </topic>
    </section>
    
    <!-- SECTION DELIMITER -->
    
    <section>  
      <title>Tables</title>
      <p>Tables work the same in this XML/XSLT as they do for XHTML. The only difference is auto-configuration of styles. That and differentiation of styles for nested sub-tables.
      </p>
        
      <topic>
        <title>How it works</title>
        <p>The table tags, on passing through XSLT, are adorned with style attributes from CSS.
        </p>
      </topic>
      
      <topic>
        <title>Carry-over XHTML tags</title>
        <p>The following tags and attributes are carried over from XHTML. Closing tags are required for each.
        </p>
        <ul>
          <li>The <code>&lt;table&gt; </code>tag.</li>
          <li>The <code>&lt;tr&gt; </code>tag.</li>
          <li>The <code>&lt;th&gt; </code>tag with attributes.</li>
          <li>The <code>&lt;td&gt; </code>tag with attributes.</li>
        </ul>
      </topic>
      
      <topic>  
        <title>Examples</title>
        <subtopic>
          <title>Markup</title>
          <p>Shown is for the sample table below.
          </p>
          <pre>&lt;table&gt;
  &lt;tr&gt;
    &lt;th&gt;header&lt;/th&gt;
    &lt;th&gt;header&lt;/th&gt;
    &lt;th&gt;header&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td rowspan="2"&gt;rowspan = 2&lt;/td&gt;
    &lt;td colspan="2"&gt;colspan = 2&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;foobar&lt;/td&gt;
    &lt;td&gt;
      &lt;table&gt;
        &lt;tr&gt;
          &lt;th colspan="2"&gt;Nested Table&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;foo&lt;/td&gt;
          &lt;td&gt;bar&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</pre>

        </subtopic>
        
        <subtopic>
          <title>Sample table</title>  
          <p>Shown is result of the markup above. <span class="note">Note: an apparent bug in Mozilla&#160;1.2.1 mis-renders the table caption. Suggest a paragraph to hold the caption instead.</span>
          </p>      
          <table>
            <tr>
              <th>header</th>
              <th>header</th>
              <th>header</th>
            </tr>
            <tr>
              <td rowspan="2">rowspan = 2</td>
              <td colspan="2">colspan = 2</td>
            </tr>
            <tr>
              <td>foobar</td>
              <td>
                <table>
                  <tr>
                    <th colspan="2">Nested Table</th>
                  </tr>
                  <tr>
                    <td>foo</td>
                    <td>bar</td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </subtopic>
      </topic>
    </section>
    
        <!-- SECTION DELIMITER -->
        
    <section>
      <title>Forms</title>
      <p>Tables work the same in this XML/XSLT as they do for XHTML.
      </p>
      
      <topic>
        <title>How it works</title>
        <p>Form tags will pass both their XML attributes and child nodes un-altered to the XHTML output. Forms vary to such a degree that any default attributes would need to be escaped more often than otherwise. Thus only CSS defaults are enforced.
        </p>
      </topic>

      <topic>
        <title>Examples</title>

        <subtopic>
          <title>Form with nested table.</title>
          <p>Here XSLT merely passes the XHTML straight through.
          </p>
          
          <subsubtopic>
            <title>Markup</title>
            <p>Shown is for sample below.
            </p>
            
            <pre>&lt;form method="post" action="../foo/bar.cgi"&gt;
  &lt;fieldset&gt;
    &lt;legend&gt;Foobar&lt;/legend&gt;
      &lt;table class="layout"&gt;
        &lt;tr&gt;
          &lt;td margin="5" align="right" valign="middle"&gt;
            &lt;label&gt;A Label&lt;/label&gt;
          &lt;/td&gt;
          &lt;td margin="5" align="left" valign="middle"&gt;
            &lt;input type="text" name="foo"/&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td margin="5" align="right" valign="top"&gt;
            &lt;label&gt;Another Label&lt;/label&gt;
          &lt;/td&gt;
          &lt;td margin="5" align="left" valign="middle"&gt;
            &lt;textarea cols="40" rows="5"&gt;Text inside textarea tag.&lt;/textarea&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;</pre>
          </subsubtopic>
          
          <subsubtopic>
            <title>Sample form</title>
            <p>Shown is for sample above.
            </p>

            <form method="post" action="../foo/bar.cgi">
              <fieldset>
                <legend>Foobar</legend>
                <table class="layout">
                  <tr>
                    <td margin="5" align="right" valign="middle">
                      <label>A Label</label>
                    </td>
                    <td margin="5" align="left" valign="middle">
                      <input type="text" name="foo"/>
                    </td>
                  </tr>
                  <tr>
                    <td margin="5" align="right" valign="top">
                      <label>Another Label</label>
                    </td>
                    <td margin="5" align="left" valign="middle">
                      <textarea cols="40" rows="5">Text inside textarea tag.</textarea>
                    </td>
                  </tr>
                </table>
              </fieldset>
            </form>
          </subsubtopic>
        </subtopic>

        <subtopic>
          <title>Form with nested CSS</title>
          <p>Here again XSLT merely passes the XHTML straight through.
          </p>
          
          <subsubtopic>
            <title>Markup</title>
            <p>Shown is for sample below.
            </p>
            
            <pre>&lt;form action="../cgi-bin/"&gt;
  &lt;div style="float:left;width:50%;margin-bottom:.5em;"&gt;
    &lt;fieldset style="float:right;
      margin-right:.5em;width:14em;"&gt;
      &lt;legend&gt;Alpha&lt;/legend&gt;
      &lt;input style="float:right;" type="text" name="goo"/&gt;
      &lt;label style="float:right;margin-right:.5em;"&gt;Label&lt;/label&gt;
      &lt;br /&gt;
      &lt;input style="float:right;" type="text" name="car"/&gt;
      &lt;label style="float:right;margin-right:.5em;"&gt;Longer Label&lt;/label&gt;
    &lt;/fieldset&gt; 
  &lt;/div&gt;
  &lt;div style="float:right;width:50%;margin-bottom:em;"&gt;
    &lt;fieldset style="float:left;
      margin-left:.5em;width:14em;"&gt;
      &lt;legend&gt;Bravo&lt;/legend&gt;
      &lt;input style="float:right;" type="text" name="goo"/&gt;
      &lt;label style="float:right;margin-right:.5em;"&gt;Foo&lt;/label&gt;
      &lt;br /&gt;
      &lt;input style="float:right;" type="text" name="car"/&gt;
      &lt;label style="float:right;margin-right:.5em;"&gt;Foobar&lt;/label&gt;
    &lt;/fieldset&gt;
  &lt;/div&gt;
  &lt;fieldset style="clear:both;
    margin-left:auto;margin-right:auto;
    width:14em;"&gt;
    &lt;legend&gt;Charlie&lt;/legend&gt;
    &lt;input style="float:right;margin-right:6em;" type="radio" name="bar"/&gt;
    &lt;label style="float:right;margin-right:.5em;"&gt;short&lt;/label&gt;
    &lt;br /&gt;
    &lt;input style="float:right;margin-right:6em;" type="radio" name="bar"/&gt;
    &lt;label style="float:right;margin-right:.5em;"&gt;Longer&lt;/label&gt;
    &lt;br /&gt;
    &lt;input style="float:right;margin-right:6em;" type="radio" name="bar"/&gt;
    &lt;label style="float:right;margin-right:.5em;"&gt;Longer Yet&lt;/label&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;</pre>
          
          </subsubtopic>
          
          <subsubtopic>
            <title>Sample form</title>
            <p>Shown is for sample above.
            </p>
         
            <form action="../cgi-bin/">
              <div style="float:left;width:50%;margin-bottom:.5em;">
                <fieldset style="float:right;
                  margin-right:.5em;width:14em;">
                  <legend>Alpha</legend>
                  <input style="float:right;" type="text" name="goo"/>
                  <label style="float:right;margin-right:.5em;">Label</label>
                  <br />
                  <input style="float:right;" type="text" name="car"/>
                  <label style="float:right;margin-right:.5em;">Longer Label</label>
                </fieldset> 
              </div>
              <div style="float:right;width:50%;margin-bottom:em;">
                <fieldset style="float:left;
                  margin-left:.5em;width:14em;">
                  <legend>Bravo</legend>
                  <input style="float:right;" type="text" name="goo"/>
                  <label style="float:right;margin-right:.5em;">Foo</label>
                  <br />
                  <input style="float:right;" type="text" name="car"/>
                  <label style="float:right;margin-right:.5em;">Foobar</label>
                </fieldset>
              </div>
              <fieldset style="clear:both;
                margin-left:auto;margin-right:auto;
                width:14em;">
                <legend>Charlie</legend>
                <input style="float:right;margin-right:6em;" type="radio" name="bar"/>
                <label style="float:right;margin-right:.5em;">short</label>
                <br />
                <input style="float:right;margin-right:6em;" type="radio" name="bar"/>
                <label style="float:right;margin-right:.5em;">Longer</label>
                <br />
                <input style="float:right;margin-right:6em;" type="radio" name="bar"/>
                <label style="float:right;margin-right:.5em;">Longer Yet</label>
              </fieldset>
            </form>
          </subsubtopic>  
        </subtopic>        
      </topic>
    </section>
    
    <!-- SECTION DELIMITER -->
    
    <section>
      <title>XML editing tools</title>
      <p>The only absolutely required tool for editing XML is a plain, old-fashioned ASCII text editor: Notepad, TextPad, Nedit, etc. Likewise the only absolutely required tool for checking and viewing pages like this is an ultra-modern browser. These are hammer and tongs of the format. Still, one or two finer tools, equally free and cross-platform, have long been available. And several more are in the pipe. Here are what uses I have made of them upon occasion.
      </p>
      <topic>
        <title>Xalan</title>
        <p>This is how I used to generate XHTML from XML in the days before all major browsers had built-in support XML/XSLT. Now you can just do without conversion to XHTML and simply publish your plain XML/XSLT instead. And that is what I always do now. Still, though, you might have a specific need. So...</p>
        <p>Know that Xalan is the XSLT processor from Apache. And as most people know, Apache is the original, and still premier, web-server on the Internet. Just like Apache, Xalan is free and open source.
        </p>
        <subtopic>
          <title>xalan-j for NetBSD</title>
          <p>I used the Java version of Xalan. No particular reason for choosing that other than it came recommended in the O&#8217;Reilly book XSLT which got me started. All examples in the book use it, so I did too. It works for me.
          </p>
            <subsubtopic>
              <title>How to install</title>
              <p>I insalled for like so... 
              </p>
              <pre>baal: {666} cd /usr/pkgsrc/textproc/xalan-j
baal: {667} make &amp;&amp; make install  
baal: {668}</pre>
           </subsubtopic>
           <subsubtopic>
             <title>How to configure</title>
             <p>In my file <code>~/.cshrc </code>I first added this to my path...
             </p>
             <pre> /usr/pkg/java/jdk-1.1.8/bin</pre>
             <p>Then I made for a Java classpath like so <span class="note">(all one line, not wrapped)</span>...
             </p>
             <pre>setenv CLASSPATH /usr/pkg/java/jdk-1.1.8/lib/classes.zip:
/usr/pkg/lib/java/xalan.jar:/usr/pkg/lib/java/xerces.jar:
/usr/pkg/lib/java/bsf.jar</pre>
          </subsubtopic>
            <subsubtopic>
              <title>How to use</title>
              <p>Pretty much, all I ever need do is run two commands like this... 
              </p>
              <pre>marduk: {666} cd /usr/pkg/share/httpd/htdocs/XML
marduk: {667} java org.apache.xalan.xslt.Process \
-in howto.xml -xsl howto.xsl -out howto.html
========= Parsing file:/usr/pkg/share/httpd/htdocs/XML/howto.xsl ==========
Parse of file:/usr/pkg/share/httpd/htdocs/XML/howto.xsl took 4466 milliseconds
========= Parsing file:/usr/pkg/share/httpd/htdocs/XML/howto.xml ==========
Parse of file:/usr/pkg/share/httpd/htdocs/XML/howto.xml took 1330 milliseconds
=============================
Transforming...
transform took 10083 milliseconds
XSLProcessor: done
marduk: {668} </pre>
            <p>If there are errors, Xalan gives far more informative output than I might read from either browser. And this is the main reason I use it.
            </p>
            <p>The second reason is to make use of the output XHTML in support of all those out-dated browsers not yet up to speed for XSLT. So not only can we have our cake and eat it too, but we can force-feed it to others as well. The only problem with this solution is the presence of bare, un-escaped Unicode characters in the XHTML file. Read below on how to overcome this little difficulty by ex-post-facto editing with Perl.
            </p>
          </subsubtopic>
        </subtopic>
      </topic>
      <topic>
        <title>Perl</title>
        <p>Perl is so ubiquitous that it hardly needs introduction. It is available for every single OS that I know of.
        </p>
        <subtopic>
          <title>How to install</title>
          <p>On my NetBSD Unix box, I installed Perl like so...
          </p>
          <pre>baal: {666} cd /usr/pkgsrc/lang/perl58
baal: {667} make &amp;&amp; make-install</pre>
        </subtopic>
        <subtopic>
          <title>How to configure</title>
          <p>There is nothing to configure for Perl itself. And any given Perl script requires only what any script does: ownership, permissions and a shebang line.
          </p>
        </subtopic>
        <subtopic>
          <title><a id="2002-03-22-09-43">Re-escaping UTF-8 for XHTML via Perl</a></title>
          <p>One glitch which I thought I ran into with XSLT turned out instead to be a problem with the web server. This script is for addressing that problem.
          </p>
          <subsubtopic>
            <title>Troubleshooting</title>
            <p><b>Symptom: </b>When viewing the output from XSLT as <code>*.xml </code>all is well. But when viewing identical content from Xalan as <code>*.html </code>both Mozilla and MSIE cosistently trip over multi-byte Unicode character strings (apostrophe, directional arrows, etc.). In short, the meta tag declaring for UTF-8 is ignored equally by both browsers. Then once the page has loaded, to manually select UTF-8 from pull-down menus restores those characters.
            </p>
            <p><b>Diagnosis: </b>The web server is over-riding browser defaults with its own charset declartion. In my case an argument in Apache&#160;2&#8217;s <code>httpd.conf </code>file was declaring <code>AddDefaultCharset&#160;ISO-8859-1 </code>for all files to visiting browsers, thus overriding the meta tag. I changed that to <code>UTF-8 </code>and the problem went away. Not everyone has this option however.
            </p>
          </subsubtopic>
          <subsubtopic>
            <title>Workaround</title>
            <p>What to do when you don&#8217;t own the webserver and so lack permission make corrections? Perl to the rescue! Before obtaining the Apache solution I hammered out this work-around. I found that if I ex-post-facto re-escape any Unicode characters then both browsers display correctly despite that contrary flag from the web server. I have not done for all Unicode characters, only for certain punctuation, arrow glyphs and diacritical marks from the language Esperanto. If these do not suffice for you, just add in more.
            </p>
          </subsubtopic>
          <subsubtopic>
            <title>The Perl script</title>
            <p>Here is a link to my Perl script: <a class="button" href="gus_escape_UTF-8.txt">&#160;gus_escape_UTF-8.pl&#160;</a>. Open this in your browser, select all, then save as as <code>*.pl</code> rather than <code>*.txt</code>. Know that there is bare Unicode inside it. So make sure to copy and paste with your mouse into a Unicode-capible text editor like GEdit, Nedit, Yudit or mined. If you are not sure, then just try it and see. The script failing is all the harm that should result.
            </p>
          </subsubtopic>
          <subsubtopic>
            <title>How to use</title>
            <p>The Perl script <code>gus_escape_UTF-8.pl </code>will edit all XHTML files in its resident directory. It will overwrite those in place, escaping certain bare Unicode chars. It works this way because I assume that said directory contains mostly <code>*.xml </code>files except for a few <code>*.html </code>files generated by Xalan. So if anything bad should happen to them, then I just re-generate them. On my NetBSD Unix system, to run this script I type like so...
            </p>
            <pre>baal: {16} cd /some/path
baal: {667}  ./gus_escape_UTF-8.pl
Re-escaping chars for UTF-8...
Done. In all, 3 files were processed.
marduk: {668}</pre>
            <p>Observe as how I ran it in the directory for Apache where I have my XML files. It outputs to XHTML, but I leave them there afterward because some of the links may be relative. I keep the XML as master, but publish links mainly to their XHTML offspring. That way nearly any browser can view them.
            </p>
          </subsubtopic>
        </subtopic>
      </topic>
    </section>    

  <section>
    <title>Webmaster</title>
    <p><a class="button" href="mailto:gan@starling.us">E-Mail</a>
    &#160;This page is composed in XML format using a plain ASCII text editor. I last updated it on 2007-02-11 at 11:29 hours testing in the Firefox 1.5.0.1 browser. Please email to report any problems (other than MSIE’s CSS shortcomings).</p>
  </section>
  </body>
</howto>  

