Skip to content

Vertical text is rendered horizontal #923

Open
@TodorVyagov

Description

@TodorVyagov

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions