Is there a cross-browser workaround to missing support for RTL is SVG in IE11/Edge?

I've ran into what I think is this bug in IE11/Edge.

Here's some SVG to repro it:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="168" height="84" direction="rtl">
    <rect height="100%" width="100%"></rect>
    <rect height="100%" width="100%" fill="#fff" stroke="#aaa" stroke-width="2"></rect>
    <rect x="2" y="2" height="18" width="164" fill="#ccc" stroke="#333" stroke-width="2"></rect>

    <g transform="translate(161, 14)">
        <text x="0" y="3" width="164">HEADER</text>
    </g>

    <g transform="translate(0, 29)">
        <circle cx="150" cy="10" r="15" fill="#aaa"/>
        <g transform="translate(131, 16.8)">
            <text>
                <tspan>Text</tspan>
            </text>
        </g>
        <g transform="translate(159, 36.4)">
            <text>
                <tspan>عربى: </tspan>
                <tspan font-weight="bold">A</tspan>
                <tspan>، </tspan>
                <tspan font-weight="bold">B</tspan>
            </text>

            <g transform="translate(0, 14)">
                <text>
                    <tspan>عربى: </tspan>
                    <tspan font-weight="bold">C</tspan>
                    <tspan>، </tspan>
                    <tspan font-weight="bold">D</tspan>
                </text>
            </g>
        </g>
    </g>
</svg>

See the image below to see the problem (IE11 left, Chrome right, disregard the different zoom levels).

IE seems to completely ignore the direction attribute in the root svg tag. As a proof of that, try to remove the attribute and reload the svg in Chrome, and you'll get the same wrong result as IE.

Is a cross-browser workaround to missing support for RTL is SVG in IE11/Edge?

Upvotes: 0

Answers (2)

elnigno

Reputation: 1821

I've found a workaround that relies on SVG's foreignObject tag, which is supported on Edge and the other major browsers, but unfortunately not on IE. Still, it's better than nothing. With some feature detection in Javascript, one can switch between the original solution and this one depending on the case.

Basically, wrap regular HTML div tags containing the text inside a foreignObject (remember to specify the attribute xmlns="http://www.w3.org/1999/xhtml").

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="168" height="84" direction="rtl">
    <rect height="100%" width="100%"></rect>
    <rect height="100%" width="100%" fill="#fff" stroke="#aaa" stroke-width="2"></rect>
    <rect x="2" y="2" height="18" width="164" fill="#ccc" stroke="#333" stroke-width="2"></rect>

    <g transform="translate(1, 1)">
        <foreignObject width="166" height="20">
            <div xmlns="http://www.w3.org/1999/xhtml" style="padding: 0px 5px;">
                HEADER
            </div>
        </foreignObject>
    </g>

    <g transform="translate(0, 29)">
        <circle cx="150" cy="10" r="15" fill="#aaa"/>
        <g transform="translate(1, 1)">
            <foreignObject width="136" height="20">
                <div xmlns="http://www.w3.org/1999/xhtml" style="padding: 0px 5px;">
                    Text
                </div>
            </foreignObject>
        </g>
        <g transform="translate(1, 20)">
            <foreignObject width="166" height="40">
                <div xmlns="http://www.w3.org/1999/xhtml" style="padding: 0px 5px;">
                    عربى: <strong>A</strong> ، <strong>B</strong>
                </div>
            </foreignObject>
        </g>
        <g transform="translate(1, 35)">
            <foreignObject width="166" height="40">
                <div xmlns="http://www.w3.org/1999/xhtml" style="padding: 0px 5px;">
                    عربى: <strong>C</strong> ، <strong>D</strong>
                </div>
            </foreignObject>
        </g>
    </g>
</svg>

Here's on it renders on Edge.

Upvotes: 0

Rob Parsons

Reputation: 839

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <title>SVG Direction tests</title>
    <meta charset="utf-8" />
</head>
<body>
    <div>
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
            <rect height="100%" width="100%"></rect>
            <rect height="100%" width="100%" fill="#fff" stroke="#aaa" stroke-width="2"></rect>
            <rect x="2" y="2" height="18" width="164" fill="#ccc" stroke="#333" stroke-width="2"></rect>

            <g transform="translate(161, 14)">
                <text x="0" y="3" width="164" direction="ltr">HEADER</text>
            </g>

            <g transform="translate(0, 29)">
                <circle cx="150" cy="10" r="15" fill="#aaa" />
                <g transform="translate(131, 16.8)">
                    <text direction="ltr" xml:lang="en">
                        <tspan>Text</tspan>
                    </text>
                </g>
                <g transform="translate(159, 36.4)">
                    <text>
                        <tspan direction="rtl" xml:lang="ar">عربى: </tspan>
                        <tspan direction="ltr" xml:lang="en" font-weight="bold">A</tspan>
                        <tspan direction="rtl" xml:lang="ar">، </tspan>
                        <tspan direction="ltr" xml:lang="en" font-weight="bold">B</tspan>
                    </text> 

                    <g transform="translate(0, 14)">
                        <text>
                            <tspan direction="rtl" xml:lang="ar">عربى: </tspan>
                            <tspan direction="ltr" xml:lang="en" font-weight="bold">C</tspan>
                            <tspan direction="rtl" xml:lang="ar">، </tspan>
                            <tspan direction="ltr" xml:lang="en" font-weight="bold">D</tspan>
                        </text>
                    </g>
                </g>
            </g>
        </svg>
    </div>
</body>
</html>

Upvotes: 1

Is there a cross-browser workaround to missing support for RTL is SVG in IE11/Edge?

Answers (2)

Related Questions