[XSL-LIST Mailing List Archive Home] [By Thread] [By Date]

Re: [xsl] Dynamic image and text alignment

---

---

xml-input of:

<?xml version="1.0"?>
<form-data>
  <form>
    <field id="foo" value="This is a string of text aligned on the
right" align="right" image="foo.gif" image-width="100px" 
image-height="100px" />
    <field id="bar" value="This is a string of text aligned on the
left" align="left" image="bar.gif" image-width="100px"
image-height="100px" />
  </form>
</form-data>

xsl-stylesheet 0f:

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="/">
  <xsl:apply-templates select="form-data/form"/>
</xsl:template>
<xsl:template match="form">
  <div>
    <xsl:apply-templates select="field"/>
  </div>
</xsl:template>
<xsl:template match="field">
<xsl:variable name="opposite-float">
<xsl:choose>
  <xsl:when test="@align = 'left'">
    <xsl:text>right</xsl:text>
  </xsl:when>
  <xsl:otherwise>
    <xsl:text>left</xsl:text>
  </xsl:otherwise>
</xsl:choose>
</xsl:variable>
  <div style="clear:both">
    <div style="float:{$opposite-float}">
      <img src="{@image}" style="width:{@image-width};
height:{@image-height}" />
    </div>
    <div style="float:{@align}">
      <xsl:value-of select="@value"/>
    </div>
  </div>
</xsl:template>
</xsl:stylesheet>


gives the output of:

<div>
  <div style="clear:both">
    <div style="float:left">
      <img style="width:100px; height:100px" src="foo.gif"/>
    </div>
    <div style="float:right">This is a string of text aligned on the right</div>
  </div>
  <div style="clear:both">
    <div style="float:right">
      <img style="width:100px; height:100px" src="bar.gif"/>
    </div>
    <div style="float:left">This is a string of text aligned on the left</div>
  </div>
</div>

This should get you started in the right direction.

Cheers!

<M:D/>


On Mon, 3 Jan 2005 13:53:15 -0800, Tiffany Blake <Tiffany_Blake@xxxxxxx> wrote:
> i am trying to control the image and text alignment in my presentation dynamically based on the user choice input.  the trick is to allow multiple variations of image/text presentation on one page.
> 
> Page example:
> 
> paragraph 1 (user choice creates flag = left-right <xsl:if test="body_image_placement='left-right'">)
> 
>         image flush left
>         text right aligned to image
> 
> paragraph 2 (user choice creates flag = top-bottom <xsl:if test="body_image_placement='top-bottom'">)
> 
>         image above text
>         text below image
> 
> paragraph 3 (user choice creates flag = top-bottom <xsl:if test="body_image_placement='top-bottom'">)
> 
>         no image
>         text flush left
> 
> Rendered page:
> 
> paragraph 1             X       this is the text that appears
>                                 right aligned to image
> 
> paragraph 2             X
> 
>                         this is the text that appears below the
>                         image
> 
> paragraph 3             this is the text that apppears with no image
> 
> any suggestions?
> tiffany_blake@xxxxxxx
> 
> -----Original Message-----
> From: Michael Kay [mailto:mike@xxxxxxxxxxxx]
> Sent: Monday, January 03, 2005 1:07 PM
> To: 'Dimtre Novatchev'
> Cc: xsl-list@xxxxxxxxxxxxxxxxxxxxxx
> Subject: RE: [xsl] Computational complexity of accessing the Nth item in
> a sequence and in a node-set
> 
> > So, if I have understood correctly, having
> >
> >    $sequence[last()]
> >
> > (and somehow more than one reference to $sequence)
> > will guarantee that any further access to the items of $sequence will
> > be performed in constant time?
> 
> No guarantees: but yes, that's what I would expect to happen.
> >
> > Cant this be pre-computed automatically by the XSLT processor?
> > Something like computing a function with @memo-function="yes", but
> > done by the XSLT processor?
> 
> I'm not clear what you mean.
> 
> Michael Kay
> http://www.saxonica.com/
> 
> 


-- 
<M:D/>

:: M. David Peterson ::
XML & XML Transformations, C#, .NET, and Functional Languages Specialist

---