MYOML: Attributes, titles, and other blocks.

: Attributes, titles, and other blocks.

At this point, the layout is perfectly usable, but it's a little bland. We're going to add titles this time, using node attributes.

Before getting started, there are a couple of small templates that I want to add. First, note that HTML tags like <p/> are not automatically passed along. You have to explicitly declare them. Lets add a template to pass the <p>, <b>, <i>, and <tt> tags along to the HTML stream:

Adding some HTML tags

<!-- Pass along the <p>, <i>, <b>, and <tt> tags -->
<xsl:template match="p|i|b|tt">
    <xsl:copy>
        <xsl:apply-templates />
    </xsl:copy>
</xsl:template>

Now, those tags can be used in our XML documents just like in HTML. No need to invent new tags when existing ones do the trick. Note how the | ('or') operator matches any of the <p>, <b>, <i>, and <tt> tags, so we only need one template instead of four.

The second thing I want to add is the ability to include small code samples inline, without creating an entire <code> block. What I want is to be able to do is to write inline code samples like this:

<c>A code sample</c>

Here is the template for that:

Defining the <c> tag

<!-- The <c> tag, for inline code samples -->
<xsl:template match="c">
    <span class="inline-code">
        <xsl:value-of select="." />
    </span>
</xsl:template>

Notice that this template creates a <span> instead of a <div>. A span is an inline element, whereas a div is for block-level layout.

Adding a 'title=' attribute.

I want to be able to add optional titles to both the <section> and <code> tags. In other words, I should be able to add a title like this:

Desired usage of 'title' attribute

  <section title="A section title">
  
  <code title="A code title">

To do this requires the use of conditional operations in the XSLT file. They are a bit hard to read at first, but are easy to use for simple things, once you see the pattern. First, lets rewrite the <code> template to add an optional title. For reference, here is the current version:

Current <code> container

<!-- <code> container -->
<xsl:template match="code">

    <div class="code">
        <!-- ugh - substring() hack is to remove leading \n at start
            of code block. Without this hack, it looks okay when
            run through xsltproc, but has a gap when viewing the XML
            directly in Firefox.
        -->
        <pre><xsl:value-of select="substring(.,2)" /></pre></div>        
</xsl:template>

I'm going to restructure this a bit. Since we'll now be creating two items (a title and the content itself) it makes sense to place these into a parent container. That way, the positioning of the code box relative to surrounding content remains the same, regardless of whether a title is present. If the title and content were standalone div containers, it would be harder to get the spacing correct.

The new <code> template, with a title

<!-- <code> container -->
<xsl:template match="code">

    <!-- Put title+content in a parent container -->
    <div class="code-container">
        <!-- Add title, if user provided one -->
        <xsl:if test="string-length(@title)">
            <div class="code-title">
                <xsl:value-of select="@title" />
            </div>
        </xsl:if>       

        <!-- Include code as preformatted block -->
        <div class="code-content">
            <!-- ugh - substring() hack is to remove leading \n at start
                of code block. Without this hack, it looks okay when
                run through xsltproc, but has a gap when viewing the XML
                directly in Firefox.
            -->
            <pre><xsl:value-of select="substring(.,2)" /></pre></div>        
            
    </div>
</xsl:template>

The <xsl:if test="string-length(@title)"> is to make sure I only add a <div> for the title if one was given. Although an empty <div> should be invisible under a user's browser, I think it is better to avoid any problems and not create the empty <div> to begin with.

Now we have to define the styles for these three <div> containers. Note that these replace the div.code style that is currently defined:

Styles for the three code <div> containers

/* 
    <code> creates 3 divs:
    
        code-container: Overall container.
        code-title: Title (optional).
        code-content: The code itself.
*/
div.code-container {
    font-size: 1em;
    margin-left: 1em;
    background: #bbbb00;
    margin-top: 1em;
    margin-bottom: 1em;
}

/* The title for the code box */
div.code-title {
    background: #555555;
    color: #ffff00;
    font-size: .9em;
    
    padding-left: .8em;
    padding-right: .8em;    
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    
    border: 1px solid black;
}

/* The code itself */
div.code-content {
    background: #dddddd;
    
    padding-left: .8em;
    padding-right: .8em;

    border: 1px solid black;
    
    /* hide any text that falls outside the bounding box */
    overflow: hidden;    
}

Similarly, a title attribute is added to the <section> tag. Note that the logic is a bit different here: If no title is given, I still want to add a blank title so that the styling will be picked up and displayed. (In particular, I want the horizontal border to show up, even if no title is given.)

Adding a <section> title.

<!-- The <section> tag -->
<xsl:template match="section">

    <div class="section">

        <xsl:choose>
            <!-- Use title=, if given -->
            <xsl:when test="string-length(@title)">
                <div class="section-title"><xsl:value-of select="@title"/></div>
            </xsl:when>
            <xsl:otherwise>
                <!-- If no title, make empty title so I still get the border -->
                <div class="section-title"></div>
            </xsl:otherwise>
        </xsl:choose>
        
        <xsl:apply-templates />
    </div>
    
</xsl:template>

This template defines one new <div> class: div.section-title. Let's add a style for it:

Adding a style for the section title

/* the section title */
div.section-title {
    font-size: 1.2em;
    font-weight: bold;
    padding-bottom: 0.2em;
    border-bottom: 1px solid black;
    margin-bottom: 1em;
}

A sample article

Here is a sample article using the new template features:

Sample article.xml

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="template.xsl"?>

<article>
    <section>
        <text>
        This section doesn't have a title, so it just gets a horizontal
        line at the top.
        <p/>
        Now its time to add some titles to our containers.
        First, a code sample without a title:
            <code>
Here is a block of code.
Note that it has to be left-justified
since it will become a preformatted
section in the HTML file.</code>

        And now, with a title:
        
            <code title="Code Sample">
Here is a block of code.
Note that it has to be left-justified
since it will become a preformatted
section in the HTML file.</code>
        
        The benefit of placing the title and content inside of
        a container is that the spacing works the same regardless
        of whether or not you have a title. If the title and
        content were stand-alone entities, then the spacing
        would change.
        
        </text>
    </section>

    <section title="Section 2">    
        <text>
        Here is a new section. It has a title "Section 2".
        <p/>
        Here comes an inline code sample: <c>from parser import XML_parser</c>
        <p/>
        
        Finally, let's try out some text styles: <b>bold</b>, 
        <i>italic</i>, <b><i>bold+italic</i></b>, 
        <tt>fixed font</tt>, <tt><i>fixed-font italic</i></tt>,
        <tt><i><b>fixed-font italic+bold</b></i></tt>.
        <p/>
        The above text shows the importance of the 
        <c>xsl:apply-templates</c> function.
        Without this, the <c>b</c>, <c>i</c>, 
        and <c>tt</c> would not automatically
        nest, and you'd only see the effect of the outermost tag.
        
        </text>
    </section>
    
</article>

The result

You can see the final result here: article.xml

If your browser doesn't support XSLT, you can download the pieces here and run the conversion yourself, as outlined in MYOML #2.