ZVON > References > Zvon Example Repository
Example repository: index | categories | search

All > SVG > Text > Wrapping text

Generally - impossible. It has to be wrapped manually (i.e. it cannot be done by SVG viewers). It can be done using XSLT, for example. See the stylesheet written by Kurt Cagle (Code from Professional XSL, Chapter 14, Wrox press, Spring 2001).


Output
Output - picture
SVG version

<svg width="500" height="500" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/TR/REC-html40" >
     <g transform="translate(0 0)">
          <text style="font-size:36;font-family:Garamond;" id="d0">
               <tspan x="0" y="36">Generally - impossible. It has to be wrapped </tspan>
               <tspan x="0" y="72">manually (i.e. it cannot be done by SVG </tspan>
               <tspan x="0" y="108">viewers). It can be done using XSLT, for </tspan>
               <tspan x="0" y="144">example. See the stylesheet written by Kurt </tspan>
               <tspan x="0" y="180">Cagle (Code from Professional XSL, Chapter 14, </tspan>
               <tspan x="0" y="216">Wrox press, Spring 2001). </tspan>
          </text>
     </g>
</svg>

Source
<para>Generally - impossible. It has to be wrapped manually (i.e. it cannot be done by SVG viewers). It can be done using XSLT, for example. See the stylesheet written by Kurt Cagle (Code from Professional XSL, Chapter 14, Wrox press, Spring 2001). </para>

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

     <xsl:template match="/">
          <svg width="500" height="500" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" >
               <g transform="translate(0 0)">
                    <xsl:call-template name="svgTextSplit">
                         <xsl:with-param name="text" select="//para[1]"/>
                    </xsl:call-template>
               </g>
          </svg>
     </xsl:template>

     <xsl:template name="svgTextSplit">
          <xsl:param name="text"/>
          <xsl:param name="font_size" select="36"/>
          <xsl:param name="maxCharactersPerLine" select="48"/>
          <xsl:param name="lineDiff" select="$font_size"/>
          <xsl:param name="id" select="generate-id()"/>
          <xsl:param name="style" select="concat('font-size:',$font_size,';font-family:Garamond;')"/>
          <text style=":;" id="{$id}" xmlns="http://www.w3.org/2000/svg" >
               <xsl:call-template name="splitLines">
                    <xsl:with-param name="text" select="$text"/>
                    <xsl:with-param name="maxCharactersPerLine" select="$maxCharactersPerLine"/>
                    <xsl:with-param name="lineDiff" select="$lineDiff"/>
               </xsl:call-template>
          </text>
     </xsl:template>

     <xsl:template name="splitLines" xmlns="http://www.w3.org/2000/svg" >
          <xsl:param name="text"/>
          <xsl:param name="buffer" select=" '' "/>
          <xsl:param name="maxCharactersPerLine" select="40"/>
          <xsl:param name="lineDiff" select="40"/>
          <xsl:param name="lineNum" select="1"/>
          <xsl:variable name="currentText">
               <xsl:choose>
                    <xsl:when test="substring($text,string-length($text)) != ' '">
                         <xsl:value-of select="$text"/>
                         <xsl:text> </xsl:text>
                    </xsl:when>
                    <xsl:otherwise>
                         <xsl:value-of select="$text"/>
                    </xsl:otherwise>
               </xsl:choose>
          </xsl:variable>
          <xsl:variable name="next_word" select="substring-before($currentText,' ')"/>
          <xsl:variable name="textAfter" select="substring-after($currentText,' ')"/>
          <xsl:choose>
               <xsl:when test="$textAfter != ''">
                    <xsl:choose>
                         <xsl:when test="string-length(concat($buffer,' ',$next_word)) > $maxCharactersPerLine">
                              <tspan x="0" y="{$lineDiff * $lineNum}">
                                   <xsl:value-of select="$buffer"/>
                              </tspan>
                              <xsl:variable name="new_textAfter" select="concat($next_word,' ',$textAfter)"/>
                              <xsl:call-template name="splitLines">
                                   <xsl:with-param name="text" select="$new_textAfter"/>
                                   <xsl:with-param name="buffer" select="''"/>
                                   <xsl:with-param name="maxCharactersPerLine" select="$maxCharactersPerLine"/>
                                   <xsl:with-param name="lineDiff" select="$lineDiff"/>
                                   <xsl:with-param name="lineNum" select="$lineNum + 1"/>
                              </xsl:call-template>
                         </xsl:when>
                         <xsl:otherwise>
                              <xsl:variable name="new_buffer" select="concat($buffer,$next_word,' ')"/>
                              <xsl:call-template name="splitLines">
                                   <xsl:with-param name="text" select="$textAfter"/>
                                   <xsl:with-param name="buffer" select="$new_buffer"/>
                                   <xsl:with-param name="maxCharactersPerLine" select="$maxCharactersPerLine"/>
                                   <xsl:with-param name="lineDiff" select="$lineDiff"/>
                                   <xsl:with-param name="lineNum" select="$lineNum"/>
                              </xsl:call-template>
                         </xsl:otherwise>
                    </xsl:choose>
               </xsl:when>
               <xsl:otherwise>
                    <tspan x="0" y="{$lineDiff * $lineNum}">
                         <xsl:value-of select="concat($buffer,' ',$next_word)"/>
                    </tspan>
               </xsl:otherwise>
          </xsl:choose>
     </xsl:template>
</xsl:stylesheet>