SVG icon indicating copy to clipboard operation
SVG copied to clipboard

Vertical text is rendered horizontal

Open TodorVyagov opened this issue 4 years ago • 1 comments

The "writing-mode" style attribute is not respected. I found out that vertical text orientation can be achieved using "tb" or "vertical-lr" values of the "writing-mode" attribute. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/writing-mode

SVG with vertical text is rendered horizontal. Here is a sample SVG:

<svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<g>
    <text style="font-size:20px;writing-mode:tb;" x="30" y="30">
        Vertical text
    </text>
    <text style="font-size:20px;writing-mode:vertical-lr;" x="50" y="50">
        Text 2
    </text>
</g>
</svg>

Rendered using SVG.NET: image

Here is how it is rendered in the Edge browser: image

TodorVyagov avatar Nov 09 '21 13:11 TodorVyagov

Can also be seen in the W3C test image text-intro-03-b.svg. One of the style tags that is not supported yet.

mrbean-bremen avatar Mar 22 '22 20:03 mrbean-bremen