title: How to have exactly same space in rotating text vertically as we have when the text is horizontal
body: <p>I am trying to get text to display vertically in svg using double rotation. I want to rotate each character zero degree and all the characters aligned vertically.Lets say the original svg is:</p>
  <pre class="lang-html prettyprint-override"><code>   &lt;svg x=&quot;351&quot; y=&quot;631&quot; width=&quot;400&quot; height=&quot;40&quot; lines=&quot;1&quot; type=&quot;textWrap&quot; textWrap=&quot;false&quot; name=&quot;VERTICAL TEXT TEST&quot;&gt;&lt;text x=&quot;0&quot; y=&quot;40&quot; font-family=&quot;Oswald Medium&quot; letter-spacing=&quot;1.4&quot; font-size=&quot;35px&quot; characterWidth=&quot;0&quot; textLength=&quot;none&quot; lengthAdjust=&quot;spacingAndGlyphs&quot; fill=&quot;black&quot; text-anchor=&quot;start&quot;  &gt;VERTICAL TEXT TEST&lt;/text&gt;&lt;/svg&gt;
  </code></pre>
  <p><strong>RESULT:</strong></p>
  <pre class="lang-html prettyprint-override"><code>    &lt;svg x=&quot;351&quot; y=&quot;631&quot; width=&quot;400&quot; height=&quot;40&quot; lines=&quot;1&quot; type=&quot;textWrap&quot; textWrap=&quot;false&quot; name=&quot;VERTICAL TEXT TEST&quot;&gt;&lt;text x=&quot;0&quot; y=&quot;40&quot; font-family=&quot;Oswald Medium&quot; letter-spacing=&quot;1.4&quot; font-size=&quot;35px&quot; characterWidth=&quot;0&quot; textLength=&quot;none&quot; lengthAdjust=&quot;spacingAndGlyphs&quot; fill=&quot;black&quot; text-anchor=&quot;start&quot;&gt;VERTICAL TEXT TEST&lt;/text&gt;&lt;/svg&gt;
  </code></pre>
  <p>Now to vertically rotate I tried this approach:</p>
  <p>1.Swapping of height and width of svg<br />
  2. double rotate by 90deg using rotation and transform function</p>
  <p>Here is the code for that:</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;svg x=&quot;351&quot; y=&quot;631&quot; width=&quot;40&quot; height=&quot;400&quot; lines=&quot;1&quot; type=&quot;textWrap&quot; textWrap=&quot;false&quot; name=&quot;VERTICAL TEXT TEST&quot;&gt;&lt;text x=&quot;0&quot; y=&quot;40&quot; font-family=&quot;Oswald Medium&quot; letter-spacing=&quot;1.4&quot; font-size=&quot;35px&quot; characterWidth=&quot;0&quot; textLength=&quot;none&quot; lengthAdjust=&quot;spacingAndGlyphs&quot; fill=&quot;black&quot; text-anchor=&quot;start&quot; transform=&quot;rotate(90 0 40)&quot; rotate=&quot;-90&quot; &gt;VERTICAL TEXT TEST&lt;/text&gt;&lt;/svg&gt;
  </code></pre>
  <p>RESULT :</p>
  <p><a href="https://i.stack.imgur.com/6XeC8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6XeC8.png" alt="RESULT AFTER VERTICAL ROTATION" /></a></p>
  <p>So, as evident in the image that the spaces between letters are not being handled properly. So how to implement that the spaces get itself handled dynamically. Basically, my requirement is if someone clicks on a button to rotate the text vertically, it should be shown in top to bottom direction with the original spaces an it was in horizontal.</p>