Re: Outputing two diff. elements side by side in HTML

Subject: Re: Outputing two diff. elements side by side in HTML
From: Jeni Tennison <jeni@xxxxxxxxxxxxxxxx>
Date: Wed, 02 Aug 2000 19:30:12 +0100
Sanjay,

>i.e. The text should flow around the image which can come, once on the
>left side, the second time, on the right side. The whole thing is inside
>a table and the images and paragraphs are cells.

I'm not exactly sure what the table you're after looks like, so I'm going
to assume it's something like:

<table>
  <tr>
    <td>image-1</td>
    <td colspan="2">paragraph-1</td>
  </tr>
  <tr>
    <td colspan="2">paragraph-2</td>
    <td>image-2</td>
  </tr>
  <tr>
    <td colspan="3">paragraph-3</td>
  </tr>
  ...
</table>

To make it easy to find the images, I'm going to define a global variable
to hold them:

<xsl:variable name="images" select="/story/image" />

You need a template that matches something high up, either the root node
(/) or the document element (story) to manage the processing (limiting it
to the paragraphs) and to put in the HTML that wraps around your table:

<xsl:template match="story">
  <html>
    <head><title>A story</title></head>
    <body>
      <table>
        <xsl:apply-templates select="paragraph" />
      </table>
    </body>
  </html>
</xsl:template>

The paragraph-matching template needs to insert a row that includes the
paragraph into the table.  If there is an image with the equivalent
position, it also needs to insert the image into the table.  It can find
such an image, if there is one by finding the image within the $images
variable at the position of the current paragraph:

  <xsl:variable name="position" select="position()" />
  <xsl:variable name="image" select="$images[$position]" />

If it is inserting an image, and it's an odd paragraph, the image needs to
go in the first cell; if it's an even paragraph, the image needs to go in
the second cell.  You can find out whether a paragraph is even or odd by
looking at the result of the position of the paragraph mod 2.  This kind of
conditional processing is best managed using xsl:choose, xsl:when and
xsl:otherwise.  I've nested it here for clarity:

<xsl:template match="paragraph">
  <xsl:variable name="position" select="position()" />
  <xsl:variable name="image" select="$images[$position]" />
  <xsl:choose>
    <xsl:when test="$image">
      <xsl:choose>
        <xsl:when test="$position mod 2 = 1">
          <tr>
            <td><img src="{$image}" /></td>
            <td colspan="2"><xsl:value-of select="." /></td>
          </tr>
        </xsl:when>
        <xsl:otherwise>
          <tr>
            <td colspan="2"><xsl:value-of select="." /></td>
            <td><img src="{$image}" /></td>
          </tr>
        </xsl:otherwise>
      </xsl:choose>
    </xsl:when>
    <xsl:otherwise>
      <tr><td colspan="3"><xsl:value-of select="." /></td></tr>
    </xsl:otherwise>
  </xsl:choose>
</xsl:template>

Using SAXON, this gives the output I was aiming for with the source that
you provided.  I hope that it's close enough to what you want to give you
an idea about how to proceed.

Cheers,

Jeni

Dr Jeni Tennison
Epistemics Ltd * Strelley Hall * Nottingham * NG8 6PE
tel: 0115 906 1301 * fax: 0115 906 1304 * email: jeni.tennison@xxxxxxxxxxxxxxxx


 XSL-List info and archive:  http://www.mulberrytech.com/xsl/xsl-list


Current Thread