SVG direction attribute and BIDI

Issue #12133259 • Assigned to Bogdan B.

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.

Please see other feedbacks in userfeedback VSO for feedbacks that are tracked by this work item.

h3 {
color:#2f5496;
font-family:Segoe UI;
font-size:small;
padding-left:3%;
}

table {
font-size:small;
width:95%;
}

th, td {
font-size:small;
padding:5px;
}

td {
border:0.5px solid white;
}

th {
background-color:#8B8989;
color:white;
}

.feedback-leftcell {
width:20%;
color:#004d8b;
}

.feedback-row:hover {
background-color:#C4C4C4;
}

#feedback-banner, #feedback-footer {
background-color:#0078D7;
color:white;
width:100%;
}

#feedback-banner td, #feedback-footer td {
border:0;
font-size:larger;
padding:10px;
}

#feedbacksection-v5 {
font-family:Segoe UI;
border:5px solid #0078D7;
border-collapse:collapse;
}

#feedbackdetails-table, #feedbackanalysis-table, #feedbacklinks-table {
font-family:Calibri Light;
background-color:#f5f5f5;
}

            
        

        This Bug was created from feedback triage by v-shzoha

    



Report Details



    
        Feedback Details

        Description

    

    
        Title

        svg text direction and text-anchor issues in edge and explorer


    

    
        Description

        We use d3 for our charts, and have serious issues with rendering <text> in IE and Edge. These issues cause overlapping of texts, to the point that they are not readable. When we had <text> that combined Hebrew and English content that looked corrupted, we found out that the problem is both in the rendering of text direction and text-anchor. I have researched it and it seems that there are confirmed bugs about this on the Microsoft for developers page (see bellow the links). 

Is there an ETA for these issues? as this is impacting our product.

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

        Area Path

        UIF\Microsoft Edge\Website issues

    

    
        [Feedback Hub](https://aka.ms/feedbackhuburi/?ContextId=356&amp;feedbackId=993d58fb-63b3-41ef-acb9-48f932885679&amp;form=1&amp;src=1)

        View this Customer Feedback details and comments in the Feedback Hub app.

    

    
        [Feedback VSO](../6940182/)

        View this Customer Feedback in Feedback VSO.

    

    
        [Upvoted By](https://aka.ms/feedbackinternalupvoters?vsoId=6940182)

        Contact selfhosters that upvoted this issue.

    

    


Analysis and Diagnostics


    
        Tool

        Description

    

    
        [Feedback Cabs](http://aka.ms/FeedbackViewer/?txtUifId=993d58fb-63b3-41ef-acb9-48f932885679&amp;section=Cabs)

        
            
                Looking For CAB files related to feedback?

All CABs for
this feedback can be accessed in the Feedback Viewer.

                Note:

CABs may take up to 12 hours
to process through the
telemetry pipeline. CABs age out and are removed after 60 days
due
to Watson retention policies.

        [Feedback Analysis](http://aka.ms/FeedbackViewer/?txtUifId=993d58fb-63b3-41ef-acb9-48f932885679)

        
            
                Want to understand how this feedback is trending across various pivots?

                With the Feedback Viewer, you can view trending information for this feedback,
                including upvotes by build, region, time, device, and more. Try out the prototype
                version of our [Feedback Lightspeed Tool](https://aka.ms/waaslightspeed/?txtUifId=993d58fb-63b3-41ef-acb9-48f932885679)

that includes intelligent auto analyzed
insights, dimensional, detailed diagnostic and telemetry analysis

        [Related Watson Crashes](http://watson/User?Identifier=g:6896139329749175&amp;Expand=true&amp;StartDate=26-Mar-2018&amp;EndDate=26-Mar-2018&amp;DateTimeFormat=UTC&amp;EventCategory=All)

        
            
                
                    Want to view Watson crashes that occurred on the same day from the user who
                    filed feedback?

The Watson Viewer will let you dive into crash data.

        [Device Drill](http://devicedrill/EventBrowser?dataSet=ALL&amp;deviceId=g:6896139329749175&amp;focusTimeStamp=2018-03-26T12:35:24&amp;durationAfterMin=10)

        
            
                Want to view telemetry events from this customer's device?

Device Drill lets
you dive into the telemetry of the device this from which this feedback was filed.

Other Links


    
        Link

        Description

    

    
        [Feedback FAQ](http://aka.ms/FeedbackFaq)

        
            
                See the Feedback FAQ for more information about subjective user feedback.
            

        

    

    
        [Where's my CAB? Wiki](http://aka.ms/whereismycabwiki)

        
            
                If you were expecting a CAB but it does not appear in the viewer, please
                see the wiki for more information.
            

        

    

    
        [Translation Volunteers](https://aka.ms/feedbacktranslationvolunteers)

        
            
                For translation assistance, please see the translation volunteers wiki.
            

        

    

    
        [Reporting child pornography](http://aka.ms/FeedbackReportAbuseAndChildPornographyWiki)

        
            
                If attached screenshot(s) is child pornography you must report it using
                instructions listed at the link.
            

        

    






    
        
            Be Heard.
        

        
            [
                //aka.ms/feedback
            ](https://aka.ms/feedback)

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.”

    Changed Steps to Reproduce

    Changed Assigned To from “Francois R.” to “Bogdan B.”

    Changed Status from “Confirmed” to “Won’t fix”

    Changed Status from “Won’t fix”

  • Reactivating auto-resolved valid bugs reported by web dev community. Those were not expected to be resolved. We apologize for any inconvenience!

  • Microsoft Edge Team

    Changed Assigned To to “Bogdan B.”

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

Sign in