align text horizontally and vertically in alphabetical order

Question

I have few titles which I am getting by having for loop around some xml(It can be n no. of titles). I want to display them horizontally in 3 columns but vertically in alphabetical order:

If I have 3 titles, I am representing them with just alphabet(I can get the count of no. of titles.

A              B              C                    -----count(3)

4 titles:
A              C              D                    -----count(4)
B    

5 Titles: 
A              C              E                    -----count(5)
B              D   

7 Titles:
A              D              F                     -----count(7)
B              E              G
C

I am using xsl 1.0 and right now I have it like

<div class="navigation">
<ul>
<xsl:foreach select="/Custom/Alphabet/titles">

   <li>
     <xsl:value-of select="." />
   </li>
</xsl:foreach>
</ul>
</div>

Answer 1

Excellent question!

I. Here is an XSLT 2.0 solution (65 lines, can be converted to XSLT 1.0 almost mechanically):

<xsl:stylesheet version="2.0"
     xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
     xmlns:xs="http://www.w3.org/2001/XMLSchema"
     xmlns:my="my:my" exclude-result-prefixes="xs my">
     <xsl:output omit-xml-declaration="yes" indent="yes"/>

     <xsl:variable name="vItems" select="/*/*/string(.)"
      as="item()+"/>


     <xsl:template match="/">
      <xsl:sequence select="my:fill($vItems, 3)"/>
     </xsl:template>

     <xsl:function name="my:fill" as="element()+">
      <xsl:param name="pItems" as="item()*"/>
      <xsl:param name="pK" as="xs:integer"/>

      <xsl:variable name="pN" select="count($pItems)"/>

      <xsl:choose>
       <xsl:when test="$pN le $pK">
        <xsl:sequence select="my:fillRow($pItems)"/>
       </xsl:when>
       <xsl:otherwise>
        <xsl:variable name="vColSize"
         select="ceiling($pN div $pK)"/>

        <xsl:variable name="vCol-1" select=
         "$pItems[position() le $vColSize]"/>

        <xsl:variable name="vSubTable"
         select="my:fill($pItems[position() gt $vColSize],
                         $pK -1
                        )
         "/>

         <xsl:sequence select="my:merge($vCol-1, $vSubTable)"/>
       </xsl:otherwise>
      </xsl:choose>
     </xsl:function>

     <xsl:function name="my:fillRow" as="element()">
      <xsl:param name="pItems" as="item()*"/>

      <row>
       <xsl:for-each select="$pItems">
        <cell><xsl:sequence select="."/></cell>
       </xsl:for-each>
      </row>
     </xsl:function>

     <xsl:function name="my:merge" as="element()*">
      <xsl:param name="pCol" as="item()*"/>
      <xsl:param name="pTable" as="element()*"/>

      <xsl:for-each select="$pCol">
       <xsl:variable name="vrowPos" select="position()"/>
       <row>
        <cell><xsl:sequence select="."/></cell>
        <xsl:sequence select="$pTable[position() eq $vrowPos]/cell"/>
       </row>
      </xsl:for-each>
     </xsl:function>
</xsl:stylesheet>

when this transformation is applied on the provided (most complex) 7-items case:

<titles>
 <t>A</t>
 <t>B</t>
 <t>C</t>
 <t>D</t>
 <t>E</t>
 <t>F</t>
 <t>G</t>
</titles>

the wanted, correct result is produced:

<row>
   <cell>A</cell>
   <cell>D</cell>
   <cell>F</cell>
</row>
<row>
   <cell>B</cell>
   <cell>E</cell>
   <cell>G</cell>
</row>
<row>
   <cell>C</cell>
</row>

I have verified that the expected, correct result is produced for every N = 1 to 7.

Explanation:

We are building the required table recursively on the number of items in the input sequence (pN):

1. The base of the recursion is for any $pN not greater than $pK (the required number of columns). In this basic case the table has a single row.

2. In the general case $pN > $pK ; then we build the leftmost column $vCol-1 and, recursively, a smaller table with the rest of the items and new number of required columns: $pK -1.

3. In case 2. above, we finally merge the column and the sub-table to produce the resulting table.

---

II. Equivalent XSLT 2.0 solution, writenn in a "more XSLT 2.0 style" (60 lines):

<xsl:stylesheet version="2.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 xmlns:xs="http://www.w3.org/2001/XMLSchema"
 xmlns:my="my:my" exclude-result-prefixes="xs my">
 <xsl:output omit-xml-declaration="yes" indent="yes"/>

 <xsl:variable name="vItems" select="/*/*/string(.)"
  as="item()+"/>


 <xsl:template match="/">
  <xsl:sequence select="my:fill($vItems, 3)"/>
 </xsl:template>

 <xsl:function name="my:fill" as="element()+">
  <xsl:param name="pItems" as="item()*"/>
  <xsl:param name="pK" as="xs:integer"/>

  <xsl:sequence select=
   "for $vN in count($pItems)
     return
       if($vN le $pK)
         then my:fillRow($pItems)
         else
           (for $vColSize in xs:integer(ceiling($vN div $pK))
             return
               my:merge((for $i in 1 to $vColSize
                           return $pItems[$i]),
                             my:fill((for $i in $vColSize+1 to $vN
                                       return $pItems[$i]),
                                      $pK -1
                                     )
                        )
            )
   "/>
 </xsl:function>

 <xsl:function name="my:fillRow" as="element()">
  <xsl:param name="pItems" as="item()*"/>

  <row>
   <xsl:for-each select="$pItems">
    <cell><xsl:sequence select="."/></cell>
   </xsl:for-each>
  </row>
 </xsl:function>

 <xsl:function name="my:merge" as="element()*">
  <xsl:param name="pCol" as="item()*"/>
  <xsl:param name="pTable" as="element()*"/>

  <xsl:for-each select="$pCol">
   <xsl:variable name="vrowPos" select="position()"/>
   <row>
    <cell><xsl:sequence select="."/></cell>
    <xsl:sequence select="$pTable[position() eq $vrowPos]/cell"/>
   </row>
  </xsl:for-each>
 </xsl:function>
</xsl:stylesheet>

---

III. XSLT 1.0 solution (75 lines)

This is the first XSLT 2.0 solution (above), translated almost mechanically to XSLT 1.0:

<xsl:stylesheet version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 xmlns:ext="http://exslt.org/common" exclude-result-prefixes="ext">
     <xsl:output omit-xml-declaration="yes" indent="yes"/>

     <xsl:variable name="vItems" select="/*/*"/>

     <xsl:template match="/">
      <xsl:call-template name="fill">
       <xsl:with-param name="pItems" select="$vItems"/>
       <xsl:with-param name="pK" select="3"/>
      </xsl:call-template>
     </xsl:template>

     <xsl:template name="fill">
      <xsl:param name="pItems"/>
      <xsl:param name="pK"/>

      <xsl:variable name="vN" select="count($pItems)"/>

      <xsl:choose>
       <xsl:when test="not($vN > $pK)">
        <row>
         <xsl:call-template name="fillRow">
          <xsl:with-param name="pItems" select="$pItems"/>
         </xsl:call-template>
        </row>
       </xsl:when>
       <xsl:otherwise>
        <xsl:variable name="vColSize"
         select="ceiling($vN div $pK)"/>

        <xsl:variable name="vCol-1" select=
         "$pItems[not(position() > $vColSize)]"/>

        <xsl:variable name="vrtfSubtable">
         <xsl:call-template name="fill">
          <xsl:with-param name="pItems" select=
           "$pItems[position() > $vColSize]"/>
          <xsl:with-param name="pK" select="$pK -1"/>
         </xsl:call-template>
        </xsl:variable>

        <xsl:variable name="vSubTable" select=
        "ext:node-set($vrtfSubtable)/*"/>

         <xsl:call-template name="merge">
          <xsl:with-param name="pCol" select="$vCol-1"/>
          <xsl:with-param name="pTable" select="$vSubTable"/>
         </xsl:call-template>
       </xsl:otherwise>
      </xsl:choose>
     </xsl:template>

     <xsl:template name="fillRow">
      <xsl:param name="pItems"/>

       <xsl:for-each select="$pItems">
        <cell><xsl:value-of select="."/></cell>
       </xsl:for-each>
     </xsl:template>

     <xsl:template name="merge">
      <xsl:param name="pCol"/>
      <xsl:param name="pTable"/>

      <xsl:for-each select="$pCol">
       <xsl:variable name="vrowPos" select="position()"/>
       <row>
        <cell><xsl:value-of select="."/></cell>
        <xsl:copy-of select="$pTable[position() = $vrowPos]/cell"/>
       </row>
      </xsl:for-each>
     </xsl:template>
</xsl:stylesheet>

---

IV. Finally, a pure, generative (non-recursive) XSLT 1.0 solution:

<xsl:stylesheet version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:output omit-xml-declaration="yes" indent="yes"/>

 <xsl:param name="pK" select="3"/>

 <xsl:variable name="vItems" select="/*/*"/>

 <xsl:template match="/">
  <xsl:call-template name="genTable"/>
 </xsl:template>

 <xsl:template name="genTable">
  <xsl:param name="pItems" select="$vItems"/>
  <xsl:param name="pK" select="$pK"/>

  <xsl:variable name="vN" select=
   "count($vItems)"/>
  <xsl:variable name="vnumRows"
     select="ceiling($vN div $pK)"/>

  <table>
   <xsl:for-each select=
     "$pItems[not(position() > $vnumRows)]">
     <xsl:call-template name="genRow">
      <xsl:with-param name="pRowInd" select="position()"/>
      <xsl:with-param name="pItems" select="$vItems"/>
      <xsl:with-param name="pK" select="$pK"/>
     </xsl:call-template>
   </xsl:for-each>
  </table>
 </xsl:template>

 <xsl:template name="genRow">
  <xsl:param name="pRowInd" select="position()"/>
  <xsl:param name="pItems" select="$vItems"/>
  <xsl:param name="pK" select="$pK"/>

  <xsl:variable name="vN" select=
   "count($vItems)"/>
  <xsl:variable name="vFullCols" select=
   "$vN mod $pK"/>
  <xsl:variable name="vFullColSize" select=
   "ceiling($vN div $pK)"/>

   <tr>
     <td><xsl:value-of select="$pItems[number($pRowInd)]"/></td>

   <xsl:for-each select=
    "$pItems[position() > 1
           and
             not(position() > $pK)
            ]">
    <xsl:variable name="vX" select="position()+1"/>

    <xsl:variable name="vMinFullColsAndX" select=
    "($vX > $vFullCols) * $vFullCols
     +
      not($vX > $vFullCols) * $vX
    "/>

    <xsl:variable name="vAmmt1" select=
    "$vMinFullColsAndX * $vFullColSize
    "/>

    <xsl:variable name="vAmmt2" select=
    "($vX -1 - $vMinFullColsAndX) * ($vFullColSize -1)
    "/>

    <xsl:variable name="vValue" select=
    "$vAmmt1 + $vAmmt2"/>

    <xsl:if test="not(($pRowInd -1) * $pK +$vX > $vN)">
     <td><xsl:value-of select=
     "$pItems[position()=$pRowInd+$vValue]"/>
     </td>
    </xsl:if>
   </xsl:for-each>
  </tr>

 </xsl:template>
</xsl:stylesheet>

when applied on the same XML document (above), the wanted, correct result is produced:

<table>
   <tr>
      <td>A</td>
      <td>D</td>
      <td>F</td>
   </tr>
   <tr>
      <td>B</td>
      <td>E</td>
      <td>G</td>
   </tr>
   <tr>
      <td>C</td>
   </tr>
</table>

Answer 2

CSS3 actually defines a nifty property that does this for you called column-count. It is supported in good browsers and IE10. If backwards compatibility is not a problem, this is a pretty sweet solution that comes close to what you want.

http://jsfiddle.net/CMeXC/