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

Exporting - incorrect arabic text #5047

Open
sebastianbochan opened this Issue Feb 16, 2016 · 10 comments

Comments

Projects
None yet
5 participants
@sebastianbochan
Contributor

sebastianbochan commented Feb 16, 2016

Example:

1- Internet Explorer, Version 11.0.9600.18015
The issue in IE when I export to SVG the data labels are distorted

2- Google Chrome, Version 48.0.2564.103 m
The issue in Chrome when I export to SVG the arabic word (التشغيل) is split into two Syllables (التشغي) and (ل).

3- Firefox, Version 43.0.4
The issue in Firefox when I export to SVG the data labels are distorted

@jon-a-nygaard jon-a-nygaard added the Bug label Feb 16, 2016

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Feb 26, 2016

Collaborator

Workaround

Try setting exporting.allowHTML: http://jsfiddle.net/highcharts/ma56u5g8/7/

Collaborator

TorsteinHonsi commented Feb 26, 2016

Workaround

Try setting exporting.allowHTML: http://jsfiddle.net/highcharts/ma56u5g8/7/

@moalshalabi

This comment has been minimized.

Show comment
Hide comment
@moalshalabi

moalshalabi Aug 9, 2016

I have checked the workarounds and I still have issues with them, please find below my feedback regarding each issue using different browsers:

1- Internet Explorer: The issue in IE when I export to SVG the data labels are distorted, please check the attached file.

2- Firefox: The issue in Firefox when I export to SVG the data labels are distorted.

moalshalabi commented Aug 9, 2016

I have checked the workarounds and I still have issues with them, please find below my feedback regarding each issue using different browsers:

1- Internet Explorer: The issue in IE when I export to SVG the data labels are distorted, please check the attached file.

2- Firefox: The issue in Firefox when I export to SVG the data labels are distorted.

@larsac07

This comment has been minimized.

Show comment
Hide comment
@larsac07

larsac07 Sep 20, 2016

Contributor

1- Internet Explorer: The issue in IE when I export to SVG the data labels are distorted, please check the attached file.

@moalshalabi: Which file?

Contributor

larsac07 commented Sep 20, 2016

1- Internet Explorer: The issue in IE when I export to SVG the data labels are distorted, please check the attached file.

@moalshalabi: Which file?

@larsac07

This comment has been minimized.

Show comment
Hide comment
@larsac07

larsac07 Sep 20, 2016

Contributor

3- Firefox, Version 43.0.4
The issue in Firefox when I export to SVG the data labels are distorted

@sebastianbochan How do you mean distorted? I see that the title and extra label are put too high, and that the lower right data label is wildly misplaced, but I can't reproduce any distortion. Below screenshot illustrate findings in online export to SVG, where the SVG is displayed in Firefox 43:
screen shot 2016-09-20 at 14 46 46

Contributor

larsac07 commented Sep 20, 2016

3- Firefox, Version 43.0.4
The issue in Firefox when I export to SVG the data labels are distorted

@sebastianbochan How do you mean distorted? I see that the title and extra label are put too high, and that the lower right data label is wildly misplaced, but I can't reproduce any distortion. Below screenshot illustrate findings in online export to SVG, where the SVG is displayed in Firefox 43:
screen shot 2016-09-20 at 14 46 46

@sebastianbochan

This comment has been minimized.

Show comment
Hide comment
@sebastianbochan

sebastianbochan Sep 20, 2016

Contributor

Chrome: 53.0.2785.116
zrzut ekranu 2016-09-20 o 14 54 54

IE 11.103.14393.0 (win10):
zrzut ekranu 2016-09-20 o 14 55 14

FF 47.0.1
zrzut ekranu 2016-09-20 o 14 58 12

You can observe different size and misaligned / spacing in the top datalabel. The right label, in my IE11, works correct but in FF not.

Contributor

sebastianbochan commented Sep 20, 2016

Chrome: 53.0.2785.116
zrzut ekranu 2016-09-20 o 14 54 54

IE 11.103.14393.0 (win10):
zrzut ekranu 2016-09-20 o 14 55 14

FF 47.0.1
zrzut ekranu 2016-09-20 o 14 58 12

You can observe different size and misaligned / spacing in the top datalabel. The right label, in my IE11, works correct but in FF not.

@sebastianbochan

This comment has been minimized.

Show comment
Hide comment
@sebastianbochan

sebastianbochan Nov 10, 2016

Contributor

+1

Contributor

sebastianbochan commented Nov 10, 2016

+1

@larsac07

This comment has been minimized.

Show comment
Hide comment
@larsac07

larsac07 Nov 10, 2016

Contributor

@sebastianbochan Is the example image for FF 47.0.1 generated with @TorsteinHonsi's workaround? I get an entirely different issue with the right label not being visible at all:

screen shot 2016-11-10 at 16 00 02

Contributor

larsac07 commented Nov 10, 2016

@sebastianbochan Is the example image for FF 47.0.1 generated with @TorsteinHonsi's workaround? I get an entirely different issue with the right label not being visible at all:

screen shot 2016-11-10 at 16 00 02

@larsac07

This comment has been minimized.

Show comment
Hide comment
@larsac07

larsac07 Nov 10, 2016

Contributor

Seems that the problem with the workaround from @TorsteinHonsi is that the generated <foreignObject> which contains the HTML labels is given a width and height of 200, which works in Chrome, but makes the position: absolute'ed label be rendered outside the <foreignObject> and therefore invisible in Firefox.

The fix should set the width and height of the <foreignObject> to the same as the parent <svg>

Contributor

larsac07 commented Nov 10, 2016

Seems that the problem with the workaround from @TorsteinHonsi is that the generated <foreignObject> which contains the HTML labels is given a width and height of 200, which works in Chrome, but makes the position: absolute'ed label be rendered outside the <foreignObject> and therefore invisible in Firefox.

The fix should set the width and height of the <foreignObject> to the same as the parent <svg>

TorsteinHonsi added a commit that referenced this issue Nov 11, 2016

Merge pull request #5962 from highcharts/dev-fix-exporting-svg-foreig…
…n-object-firefox

Partially fixed #5047. Workaround with <foreignObject> was given stat…
@larsac07

This comment has been minimized.

Show comment
Hide comment
@larsac07

larsac07 Nov 11, 2016

Contributor

When it comes to the original problem: If useHTML is applied to any labels, and their formats use html tags, what happens is that HTML is added outside the SVG.

To include that content in a standalone SVG file we would either have to:

  1. Force exporting.allowHTML to include the HTML elements, or
  2. Force removal of useHTML and strip the labels of html-tags
Contributor

larsac07 commented Nov 11, 2016

When it comes to the original problem: If useHTML is applied to any labels, and their formats use html tags, what happens is that HTML is added outside the SVG.

To include that content in a standalone SVG file we would either have to:

  1. Force exporting.allowHTML to include the HTML elements, or
  2. Force removal of useHTML and strip the labels of html-tags
@larsac07

This comment has been minimized.

Show comment
Hide comment
@larsac07

larsac07 Nov 11, 2016

Contributor

Regarding the rightmost label in FF: The issue can be simulated without exporting by opening http://jsfiddle.net/larsac07/5hwagpqp/ (with HTML tags) or http://jsfiddle.net/larsac07/jbeL5age/ (without HTML tags) in Firefox, which are the same as the original example, except useHTML is removed.

The problem seems to be with Highcharts label rendering.

Contributor

larsac07 commented Nov 11, 2016

Regarding the rightmost label in FF: The issue can be simulated without exporting by opening http://jsfiddle.net/larsac07/5hwagpqp/ (with HTML tags) or http://jsfiddle.net/larsac07/jbeL5age/ (without HTML tags) in Firefox, which are the same as the original example, except useHTML is removed.

The problem seems to be with Highcharts label rendering.

@larsac07 larsac07 reopened this Nov 11, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment