text-anchor of middle or end not cooperating with dx values

Fixed Issue #107591

Details

Created
Apr 27, 2014
Privacy
This issue is public.
Found in build #
0.0010
Reports
Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce

URL = http://bbhatt-msft/alignment.svg

REPRO STEPS:

URL: http://bbhatt-msft/alignment.svg

EXPECTED RESULTS:

The first block of text should be centered on the vertical line. The second block of text should have its left side aligned with with vertical line. The third block of text should have its right side aligned with the vertical line.

ACTUAL RESULTS:

Both the first and third blocks are incorrect.

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Kevin B.”

      Changed Steps to Reproduce

      Changed Steps to Reproduce

      Changed Status to “Confirmed”

      Changed Status from “Confirmed” to “In progress”

      Changed Status from “In progress” to “In code review”

      Changed Status from “In code review” to “In progress”

      Changed Status from “In progress” to “In code review”

      Changed Status from “In code review” to “In progress”

      Changed Assigned To from “Kevin B.” to “IPBS P.”

      Changed Status from “In progress” to “Fixed”

      Changed Assigned To from “IPBS P.” to “Rossen A.”

      Changed Steps to Reproduce

    • still seeing this issue in Edge 15. It does not appear to be Fixed

      https://codepen.io/soultrip/pen/rmGgRa

    • I’m also seeing text-anchor="end" render incorrectly in Edge 16 on Browserstack. Its right side should align with the vertical line but renders ≈20px too far to the left.

      Whitespace causes incorrect text-anchor position

      It seems the problem is Edge including whitespace in its text-anchor calculations.

      Here is a fork of @soul_trip’s CodePen with the extra whitespace removed, which renders correctly in Edge 14+ (as far back as I could test in Browserstack):

      https://codepen.io/tannerhodges/pen/bYLoex

      Compare `text-anchor="end"` in Edge 16 with and without extra whitespace

      Browser Comparison

      According to the SVG spec, leading and trailing space characters should be stripped from the text element’s character data.

      Currently, Edge is the only major browser showing this bug. Below are screenshots of the following browsers:

      • ⚠️ Edge 16
      • ✅ Chrome 62
      • ✅ Firefox 57
      • ✅ Safari 11
      • ✅ Opera 49

      Compare `text-anchor="end"` in Edge 16 with other major browsers

      Would appreciate this being reassigned to fix the remaining whitespace bug.

      If it’s best to move this to a separate issue, I’m happy to open a new one.

      Thanks!

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

    Sign in