MYOML: Creating the Outline

We now have enough tools to create the basic block structure of our custom XML format. The following shows what the structure that I'm aiming for:

Outline of custom XML format

<article>
    <section>
    
        <text>        
            <code>
            A code sample
            </code>        
        </text>
        
    </section>

    <section>
    
        <text>
        </text>
        
    </section>
    
</article>

To start off, here is the first part of the template.xsl file, introduced in MYOML #2:

template.xsl, beginning

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
    <html>
        <head>        
            <link href="style.css" rel="stylesheet" type="text/css" />
        </head>
        <body>
            <xsl:apply-templates />
        </body>
    </html>
</xsl:template>

All of the templates we'll add this time will be simple "copy" templates. That is, they will just copy their content into <div> containers, marked with class= attributes to denote each type of content item. This will give a basic structure to the document, to which we can add specializations later.

First we add a template to handle the <article> container:

Adding the <article> handler

<!-- The <article> tag -->
<xsl:template match="article">
    <div class="article-container">
        <!-- Show a standard header -->
        <div class="article-header">
            Here is the article header.
        </div>
        
        <!-- Apply templates to article content -->
        <xsl:apply-templates />
        
        <!-- Show a standard footer -->
        <div class="footer">
            Here is the page footer.
        </div>        
    </div>
</xsl:template>

Next comes the <section> container. This one adds an <hr/> tag to mark the start of the section. Later on, we'll do something nicer.

The <section> container

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

    <div class="section">
        <hr/>
        <xsl:apply-templates />
    </div>
    
</xsl:template>

The <text> template does another simple copy, applying templates to inner content:

The <text> container

<!-- <text> container -->
<xsl:template match="text">
    <div class="text">
        <xsl:apply-templates />
    </div>
</xsl:template>

The <code> container transforms its inner content into a <pre> (preformatted) section. There is a little trick inside this one, but don't worry about it too much yet.

The <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>

The above templates created six new <div> classes: article-container, article-header, section, text, code and footer. We need to add new entries in the style.css file to define what each of these new classes will look like. Here is the entire new file:

Updated style.css

/* Default background & text color for page
   (all other tags inside <body> inherit this
   as a default) */
body {
    background: #6f8d72;
    color: #000000;
}

/* The overall container for the article */
div.article-container {
    background: #ffffff;
    width: 750px;
    margin-left: 5em;    
    padding-left: 2em;
    padding-right: 2em;
    padding-top: 1em;
    padding-bottom: 2em;
    border: 4px solid black;
}

/* Header for page (not article!) */
div.article-header {
    font-size: 1.6em;
    font-weight: bold;
    padding-bottom: .5em;
}

/* for <section> */
div.section {
}

/* for <text> */
div.text {
    font-size: 1em;
    margin-left: 2em;
    margin-right: 6em;
    margin-bottom: 1em;
    margin-top: 1em;
}

/* for <code> */
div.code {
    font-size: 1em;
    margin-left: 1em;
    background: #dddddd;
    width: 640px;
    border: 1px solid #888888;
    padding-left: 10px;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-bottom: .2em;
    padding-top: .2em;
    
    /* hide any text that falls outside the bounding box */
    overflow: hidden;
}

div.footer {
    font-size: 0.8em;
    border-top: 2px solid black;
    padding-top: 1em;
    margin-top: 3em;
}

I've used several new types of styling here. You can read the CSS reference for full details, but briefly:

width: Defines the width of the container. You can define units in terms of pixels (i.e. "400px") or relative to the current font size (i.e. "2em").
margin-*: The margins define how much space there is between the parent of a container, and the container.
padding-*: The padding defines how much space there is between a container and its own content.
border-*: Defines the border for a container.

Finally, we need a sample XML article to test it all out:

article.xml

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

<article>
    <section>
        <text>
        Here is some text in the first section.
        Nothing special here, just some random text to
        show that this thing is working. Here comes
        a block of code:
            <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 here is some more text after
        the code. La dee da.
        </text>
    </section>

    <section>    
        <text>
        Here is a new section. Later on we'll do something
        more interesting with the section dividers.
        </text>
    </section>
    
</article>

If your browser can handle XSLT directly, you can view the final result here: article.xml

Otherwise, you'll need to download the separate files and run the XSLT transformation yourself, as described in MYOML #2:

Download template.xsl
Download style.css

There is quite a bit to digest here, but that's about 80% of what you need to know to duplicate the boodebr.org article style. I admit that my style isn't the fanciest in the world, but it hopefully gives a good starting point to build on.

Next time ... fun with attributes.