When a non-breaking space is added in front of a rotated text strange squares appear behind the first letter of each word.
Check out the examples:
AND
Check out the examples:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN' 'http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:html='http://www.w3.org/1999/xhtml'>
<head>
<title>Sideways</title>
</head>
<body>
<svg viewBox='-7 -160 7 160' style='width:14px;height:160px;border:thin solid #000' xmlns='http://www.w3.org/2000/svg'>
<g>
<text transform='rotate(-90) translate(2 0)' text-anchor='start' fill='#000000' style='font-family:arial;font-size:15px;'>
<tspan>Rotated text without spaces</tspan>
</text>
</g>
</svg>
</body>
</html>
AND
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN' 'http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:html='http://www.w3.org/1999/xhtml'>
<head>
<title>Sideways</title>
</head>
<body>
<svg viewBox='-7 -160 7 160' style='width:14px;height:160px;border:thin solid #000' xmlns='http://www.w3.org/2000/svg'>
<g>
<text transform='rotate(-90) translate(2 0)' text-anchor='start' fill='#000000' style='font-family:arial;font-size:15px;'>
<tspan> Rotated with spaces ( )</tspan>
</text>
</g>
</svg>
</body>
</html>