SVG direction attribute and BIDI

Confirmed Issue #12133259 • Assigned to Francois R.

Details

Author
Gerald R.
Created
May 25, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
14.14393
Reports
Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce

SVG does not handle the text-anchor correctly. That has been an open for two years. See bug 101323 that just addresses “start” value.

https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/101323/

In addition to that problem, SVG does not follow the direction attribute.

Insert the following block into an HTML file (or used attached SVG directly):

   <svg width="1000" height="400" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="1000" height="400" fill="cyan"></rect>
    <line x1="500" x2="500" y1="0" y2="400" stroke-width="1" stroke="blue"></line>

    <text x="500" y="50">ABCD</text>
    <text x="500" y="75" direction="rtl">ABCD</text>

    <text x="500" y="100" direction="ltr" text-anchor="start">نص المرساة 15 kg.</text>
    <text x="500" y="125" direction="ltr" text-anchor="middle">نص المرساة 15 kg.</text>
    <text x="500" y="150" direction="ltr" text-anchor="end">نص المرساة 15 kg.</text>

    <text x="500" y="175" direction="rtl" text-anchor="start">نص المرساة 15 kg.</text>
    <text x="500" y="200" direction="rtl" text-anchor="middle">نص المرساة 15 kg.</text>
    <text x="500" y="225" direction="rtl" text-anchor="end">نص المرساة 15 kg.</text>

    <text x="500" y="250" writing-mode="rl" direction="rtl" text-anchor="start">نص المرساة 15 kg.</text>
    <text x="500" y="275" writing-mode="rl" direction="rtl" text-anchor="middle">نص المرساة 15 kg.</text>
    <text x="500" y="300" writing-mode="rl" direction="rtl" text-anchor="end">نص المرساة 15 kg.</text>

    <text x="500" y="325" style="direction: rtl;" text-anchor="start">نص المرساة 15 kg.</text>
    <text x="500" y="350" style="direction: rtl;" text-anchor="middle">نص المرساة 15 kg.</text>
    <text x="500" y="375" style="direction: rtl;" text-anchor="end">نص المرساة 15 kg.</text>
   </svg>

Note the Arabic text is rendered ltr in the text editor, so it will always show the “kg” at the end of a sentence. The “15” appears at the start of the string, but it is the middle.

The first two lines are laid out ltr and rtl respectively. The first should extend to the right, and the second should extend to the left. This shows the two year bug about text-anchor. BIDI correctly orders the ltr-dominant "ABCD".

The next three lines of the SVG should be rendered ltr. BIDI sees the Arabic text and temporarily switches to rtl; the “15” is made of neutral chars, so it attaches to the Arabic; it is rendered ltr but placed to the left as continued rtl; the “kg” are ltr-dominant so they resume the block’s normal ltr and are placed to the right.

The last 9 lines are hopelessly confused. All text elements are rtl, so the “kg” should always be to the left. The text-anchor “start” text is readable but on the wrong side. The text-anchor “middle” and “end” overwrite text and are look wrong. These strings should all look something like:

. kg 15 (rtl Arabic text)

Chrome displays the SVG correctly.

For comparison, within HTML, Edge follows the dir attribute and does BIDI correctly. You can insert these strings in p elements with dir="rtl" and get the correct/Chrome result.

Attachments

1 attachment

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “James M.”

    Changed Assigned To to “Bogdan B.”

    Changed Assigned To from “Bogdan B.” to “Saqib A.”

    Changed Status to “Confirmed”

    Changed Assigned To from “Saqib A.” to “Francois R.”

You need to sign in to your Microsoft account to add a comment.

Sign in