<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
>

  <xsl:output method="html"/>

  <!-- draw outer border -->
  <xsl:template match="/">
    <html>
    <xsl:element name="head">
      <xsl:apply-templates select="board/content"/>
    </xsl:element>
    <body><table border="1"><tr><td>
    <xsl:apply-templates select="board"/>
    </td></tr></table>
    <p/><xsl:value-of select="board/notation"/>
    </body></html>
  </xsl:template>

  <!-- this is for refresh/animation -->
  <xsl:template match="content">
    <xsl:element name="meta">
      <xsl:attribute name="http-equiv">refresh</xsl:attribute>
      <xsl:attribute name="content">
        <xsl:value-of select="."/>
      </xsl:attribute>
    </xsl:element>
  </xsl:template>

  <!-- draw board of fields without spacing -->
  <xsl:template match="board">
    <table cellpadding="0" cellspacing="0">
    <xsl:apply-templates select="row"/>
    </table>
  </xsl:template>

  <!-- row -->
  <xsl:template match="row">
    <tr>
    <xsl:apply-templates select="f">
      <xsl:with-param name="row" select="position()"/>
    </xsl:apply-templates>
    </tr>
  </xsl:template>

  <!-- field -->
  <xsl:template match="f">
    <xsl:param name="row"/>
    <td>
    <xsl:call-template name="img">
      <xsl:with-param name="col" 
        select="substring('wb',1+((position()+$row) mod 2),1)"/>
    </xsl:call-template>
    </td>
  </xsl:template>

  <!-- image based on figure name "." and field color $col -->
  <xsl:template name="img">
    <xsl:param name="col"/>

    <xsl:element name="img">
      <xsl:attribute name="style">display:block</xsl:attribute>
      <xsl:attribute name="src">
        gif/<xsl:value-of select="normalize-space(.)"/><xsl:value-of 
        select="$col"/>.gif</xsl:attribute>
    </xsl:element>
  </xsl:template>

</xsl:stylesheet>
