How to have exactly same space in rotating text vertically as we have when the text is horizontal

Question

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:

   <svg x="351" y="631" width="400" height="40" lines="1" type="textWrap" textWrap="false" name="VERTICAL TEXT TEST"><text x="0" y="40" font-family="Oswald Medium" letter-spacing="1.4" font-size="35px" characterWidth="0" textLength="none" lengthAdjust="spacingAndGlyphs" fill="black" text-anchor="start"  >VERTICAL TEXT TEST</text></svg>

RESULT:

    <svg x="351" y="631" width="400" height="40" lines="1" type="textWrap" textWrap="false" name="VERTICAL TEXT TEST"><text x="0" y="40" font-family="Oswald Medium" letter-spacing="1.4" font-size="35px" characterWidth="0" textLength="none" lengthAdjust="spacingAndGlyphs" fill="black" text-anchor="start">VERTICAL TEXT TEST</text></svg>

Now to vertically rotate I tried this approach:

1.Swapping of height and width of svg
2. double rotate by 90deg using rotation and transform function

Here is the code for that:

    <svg x="351" y="631" width="40" height="400" lines="1" type="textWrap" textWrap="false" name="VERTICAL TEXT TEST"><text x="0" y="40" font-family="Oswald Medium" letter-spacing="1.4" font-size="35px" characterWidth="0" textLength="none" lengthAdjust="spacingAndGlyphs" fill="black" text-anchor="start" transform="rotate(90 0 40)" rotate="-90" >VERTICAL TEXT TEST</text></svg>

RESULT :

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.

Answer 1

Use letter-spacing it Will affect vertical spacing in your case because of rotation

<svg x="351" y="631" width="40" height="620" lines="1" type="textWrap" textWrap="false" name="VERTICAL TEXT TEST"><text x="0" y="40" font-family="Oswald Medium" letter-spacing="13" font-size="35px" characterWidth="0" textLength="none" lengthAdjust="spacingAndGlyphs" fill="black" text-anchor="start" transform="rotate(90 0 40)" rotate="-90" >VERTICAL TEXT TEST</text></svg>

Answer 2

You should use text-orientation and writing-mode to get vertical text.

html, body {
  height: 100%;
}
text {
  text-orientation: upright;
}

<svg width="100%" height="100%"><text x="100" y="0" font-family="Oswald Medium" font-size="35px" fill="black" writing-mode="vertical-lr" text-anchor="start">VERTICAL TEXT TEST</text></svg>