SVG - Whitespace in `text` element causes incorrect `text-anchor="end"` position

Issue #15174006 • Assigned to bbrinza


Tanner H.
Dec 20, 2017
This issue is public.
Found in
  • Microsoft Edge
Found in build #
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Edge incorrectly renders whitespace in its text-anchor="end" calculations.

For example, in this CodePen the text element with text-anchor="end" renders ≈20px too far to the left. Its right side should align with the vertical line, as it does in other browsers.

If you remove the extra whitespace, Edge renders the text position correctly.

This is an issue in Edge 14+ (as far back as I can test in Browserstack).

CodePen Links


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 14+
  • ✅ Chrome 62+
  • ✅ Firefox 57+
  • ✅ Safari 11+
  • ✅ Opera 49+

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

This was originally posted in Issue #107591: text-anchor of middle or end not cooperating with dx values/107591/


Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “Steven K.”

    Changed Assigned To to “bbrinza”

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

Sign in