New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Horizontally centered text is shifted in Microsoft Edge #402

Closed
iamakulov opened this Issue Dec 16, 2015 · 4 comments

Comments

Projects
None yet
2 participants
@iamakulov
Copy link
Contributor

iamakulov commented Dec 16, 2015

In Edge, the Tree Map example looks as follows:

Example


Currently, the text in Tree Map cells is aligned like this:

<text text-anchor="middle">
    <tspan x="-50" dx="50">Text</tspan>
</text>

The <tspan>’s x and dx attributes have the same (but opposite) values, which does not shift the text in Chrome and Firefox. However, it appears that Edge interprets text-anchor and dx properties combination improperly. I can’t determine the actual behavior, but it looks like, with text-anchor being equal to middle or end, the dx units are twice smaller than they should be. Therefore, the tspan element in a Tree Map cell is shifted left.

A possible solution is to combine the x and dx properties so that only one of them (probably x) is used for alignment. If the solution is applied, the code will look as follows:

<text text-anchor="middle">
    <tspan x="0" dx="0">Text</tspan>
</text>

and will not cause any issues in Edge (have checked this).

The y/dy attributes are not affected.

I can’t find any related bug report on connect.microsoft.com (and I haven’t reported it yet on my own).

The minimal reproducible case is here. Compare the top right square in Chrome and Edge.

The issue affects Edge 12 and Edge 13.

@davelandry

This comment has been minimized.

Copy link
Collaborator

davelandry commented Dec 18, 2015

Thanks for this in-depth analysis, it should be fairly easy for me to fix this now!

@iamakulov

This comment has been minimized.

Copy link
Contributor

iamakulov commented Jan 29, 2016

@davelandry, any update on this?

If you’re busy at the moment, I could submit a PR if you help me find the approximate place where the x/dx attributes are calculated.

@davelandry

This comment has been minimized.

Copy link
Collaborator

davelandry commented Jan 29, 2016

@iamakulov I would love the help. here's where it gets set: https://github.com/alexandersimoes/d3plus/blob/master/src/textwrap/helpers/tspan.coffee#L15-L16

you should be able to see where and how those two variable are set, but it you have any questions let me know

@iamakulov

This comment has been minimized.

Copy link
Contributor

iamakulov commented Jan 30, 2016

Added #413 which fixes the issue.

A few comments:

  • Readme mentions that gulp will run a local server, however, the server was disabled by 8ef5cd2. Made #414 to address this.
  • With the latest sources, only the d3plus.full.js build is working. d3plus.js is broken: d3 throws a NamespaceError when running the Tree Map example with it. This breaks the default development workflow as the "dev" gulp task cannot be used anymore. I haven’t found a quick way to fix this.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment