Xml – Is it possible to flip and rotate text using XSLT

xmlxslt

I would like to take the contents of an XML tag and have it displayed flipped both horizontally (mirror image) and vertically (as a column) when viewed through a stylesheet. Is this possible without using random third party libraries?

<mytag>Random Data</mytag>

Best Solution

As such, XSLT is ill-suited for string processing. With XSLT 2.0, things get better since more string functions are available, and sequence-based operations are possible.

In XSLT 1.0 (which is still the most portable version to write code for), character-by-character string processing can only be achieved through recursion. For the fun of it, this:

<xsl:output method="text" />

<xsl:variable name="CRLF" select="'&#13;&#10;'" />

<xsl:template match="/mytag">
  <!-- flip string -->
  <xsl:call-template name="reverse-string">
    <xsl:with-param name="s" select="string(.)" />
  </xsl:call-template>
  <xsl:value-of select="$CRLF" />

  <!-- vertical string -->
  <xsl:call-template name="vertical-string">
    <xsl:with-param name="s" select="string(.)" />
  </xsl:call-template>
</xsl:template>

<xsl:template name="reverse-string">
  <xsl:param name="s" select="''" />

  <xsl:variable name="l" select="string-length($s)" />

  <xsl:value-of select="substring($s, $l, 1)" />

  <xsl:if test="$l &gt; 0">
    <xsl:call-template name="reverse-string">
      <xsl:with-param name="s" select="substring($s, 1, $l - 1)" />
    </xsl:call-template>
  </xsl:if>
</xsl:template>

<xsl:template name="vertical-string">
  <xsl:param name="s" select="''" />

  <xsl:variable name="l" select="string-length($s)" />

  <xsl:value-of select="concat(substring($s, 1, 1), $CRLF)" />

  <xsl:if test="$l &gt; 0">
    <xsl:call-template name="vertical-string">
      <xsl:with-param name="s" select="substring($s, 2, $l)" />
    </xsl:call-template>
  </xsl:if>
</xsl:template>

Produces:

ataD modnaR
R
a
n
d
o
m

D
a
t
a

EDIT: To be clear: I do not endorse actual use of the above code sample in any way. Presentational issues should by all means be solved in the presentation layer. The above will work, but char-by-char recursion is among the most inefficient ways to do string processing, and unless you have no other choice, avoid string processing in XSLT.

Related Solutions

Help with multi-pass XSLT using node-set()

Here's the solution that works. It's based on Tomalak's original solution with some minor modifications (like mode flags etc.) Again, thanks to Tomalak!!

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:exslt="http://exslt.org/common"
  version="1.0">

 <xsl:import href="projDisplay.xsl"/>

 <xsl:template match="/">
  <!-- store intermediate form as RTF -->
  <xsl:variable name="newXmlData">
   <xsl:apply-templates mode="filter"/>
  </xsl:variable>

  <!-- Now apply templates (with xslt-fo) defined in projDisplay.xsl with     -->
  <!-- the root template as <xsl:template match="projectteam" mode="display"> -->
  <!-- to the above RTF (i.e. after the original XML has be convertedr)       -->
  <xsl:apply-templates select="exslt:node-set($newXmlData)/projectteam" mode="display"/>

 </xsl:template>

 <!-- use identity templates to copy and modify original XML -->
 <xsl:template match="@*|node()" mode="filter">
  <xsl:copy>
   <xsl:apply-templates select="@*|node()" mode="filter"/>
  </xsl:copy>
  </xsl:template>

 <!-- replace element 'role' with a new element - role name (i.e. dev or qa) -->
 <!-- and set its value as 'hrs                                              -->
 <xsl:template match="member/role" mode="filter">
  <xsl:element name="{.}"> <xsl:value-of select="../hrs"/> </xsl:element>
 </xsl:template>

 <!-- eliminate element 'hrs' -->
 <xsl:template match="hrs" mode="filter"/>

</xsl:stylesheet>

Javascript – Loading/Transforming XML with XSLT and CSS

This really depends on the contents of works.xml and works.xsl. Suggestion: to spit out the resultDocument into a textarea and see if the html looks ok. At that point you could also save=>load the html resultDocument in Chrome/IE and make sure it looks good.

Once you know what in the html is causing trouble, then it's easier to find the cause and fix it.

You can see the output html by adding:

<textarea cols="255" rows="50" id="textarea1"></textarea>

Below your example div tag.
and:

document.getElementById("textarea1").value = document.getElementById("example").innerHTML;

at the end of displayResult(). to see the output.

Notice that your xslt is a fragment and not a whole html document, it should not contain html/head/body tags, and look more or less like the following:

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

  <xsl:template match="/">

    <!--<html>

      <head>-->

        <link rel="stylesheet" href="galleryCSS.css" type="text/css" />

      <!--</head>


      <body>-->

        <h2>Choosy Child Guaranteed BuyBack System</h2>

        <ul class="gallery">

          <xsl:for-each select="WORKS/item">
            <li>

              <a href="picture1.jpg">
                <img src="picture1.jpg" alt="image" />
              </a>
              <em>
                <xsl:value-of select="name"/>
              </em>
              <br />
              Buy Price: <em>
                $<xsl:value-of select="price"/>
              </em>
              <br />
              1-4 Day BuyBack: <em>
                $<script type="text/javascript">
                  x=<xsl:value-of select="price"/>*.15;             document.write(Math.round(x*100)/100);
                </script>
              </em>
              <br />
              5-7 Day BuyBack: <em>
                $<script type="text/javascript">
                  x=<xsl:value-of select="price"/>*.25;             document.write(Math.round(x*100)/100);
                </script>
              </em>
              <br />
              8-14 Day BuyBack: <em>
                $<script type="text/javascript">
                  x=<xsl:value-of select="price"/>*.40;             document.write(Math.round(x*100)/100);
                </script>
              </em>
              <br />
              15-30 Day BuyBack: <em>
                $<script type="text/javascript">
                  x=<xsl:value-of select="price"/>*.60;             document.write(Math.round(x*100)/100);
                </script>
              </em>
              <br />
              30+ Day Buyback: <em>
                $<script type="text/javascript">
                  x=<xsl:value-of select="price"/>*.75;             document.write(Math.round(x*100)/100);
                </script>
              </em>

            </li>

          </xsl:for-each>

        </ul>


<!--
      </body>
    </html>-->

  </xsl:template>

</xsl:stylesheet>

There are other ways to shorten and streamline the code and not repeat the script tag, but that's outside of the scope of this question.

Best Solution

Related Solutions

Help with multi-pass XSLT using node-set()

Javascript – Loading/Transforming XML with XSLT and CSS

Related Question