wrong export from Highcharts svg with outlined text/ #192

inc198107 · 2021-11-11T08:12:00Z

When export from chart with outlined text (nested tSpan used) cintent is duplicated.

after some debugging svg2pdf library i am founded cause of described bug,
it is part of code in textchunk.ts that set x coordinate of tSpan (string 111 - 112 )

after described changes everything works fine

(sorry for my weak english)

Angular 10,
Highcharts 9.2.1 ,
jsPDF 2.4.0,
svg2pdf 2.2.0
Chrome 91.0.4472.124 (Official Build) (64-bit)

that used svg:

The text was updated successfully, but these errors were encountered:

HackbrettXXX · 2021-11-11T09:11:20Z

Thanks for reporting this bug. Could you reduce your SVG to only what's necessary to reproduce the bug?

inc198107 · 2021-11-12T08:00:07Z

It is little bit hard, because svg generated by Highcharts. But problematic part is here : <text x="5" data-z-index="1" y="16" style="color:#000000;font-size:11px;font-weight:bold;fill:#000000;"> <tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round">POWER<tspan x="5" y="16"></tspan></tspan>POWER</text></g><g class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined" data-z-index="1" transform="translate(0,-9999)" opacity="0"><text x="5" data-z-index="1" y="16" style="color:#000000;font-size:11px;font-weight:bold;fill:#000000;"><tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round" style="">OTHER<tspan x="5" y="16"></tspan></tspan>OTHER</text></g><g class="highcharts-label highcharts-data-label highcharts-data-label-color-undefined" data-z-index="1" transform="translate(436,263)"><text x="5" data-z-index="1" y="16" style="color:#000000;font-size:11px;font-weight:bold;fill:#000000;"><tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round">GAS<tspan x="5" y="16"></tspan></tspan>GAS</text>

HackbrettXXX · 2021-11-12T09:45:56Z

I've reduced it a bit further (and fixed it):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
  <g>
    <text x="5" y="16" style="color:#000000;font-size:11px;font-weight:bold;fill:#000000;">
      <tspan fill="#FFFFFF" stroke="red" stroke-width="2px" stroke-linejoin="round">POWER
        <tspan x="5" y="16"></tspan>
      </tspan>
      POWER
    </text>
  </g>
</svg>

This renders to

Could you create a pull request? Although we have to test the suggested fix against other text examples. I'm pretty sure, adding the text width there happens for a reason.

inc198107 · 2021-11-15T12:58:07Z

ok

inc198107 · 2021-12-12T14:04:51Z

Unfortunately, I don't have permission to create a new branch in your repository, so I can't make a pull request.

HackbrettXXX · 2021-12-13T09:06:57Z

In order to create a pull request you have to fork the repository: https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request

inc198107 · 2021-12-14T10:08:53Z

Thanks a lot. I will do it in few days пн, 13 дек. 2021 г. в 11:07, Lukas Holländer ***@***.***>:

…

In order to create a pull request you have to fork the repository: https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#192 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEEJ4DXGJ4FFAFUY3MG457TUQWZTXANCNFSM5HZ3BURA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

karolkolodziej · 2022-04-08T11:33:12Z

Hi!
Any updates on this issue?
Based on this issue reported in Highcharts I was able to reproduce that in your online playground as:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 150">
  <text x="5" data-z-index="1" y="16" style="color: rgb(0, 0, 0); font-size: 11px; font-weight: bold; fill: rgb(0, 0, 0);">
    <tspan class="highcharts-text-outline" fill="red" stroke="red" stroke-width="2px" stroke-linejoin="round" style="">29.9<tspan x="5" y="16">&ZeroWidthSpace;</tspan>
    </tspan>29.9
  </text>
</svg>

HackbrettXXX · 2022-04-08T11:47:40Z

There is a PR (#198), but @inc198107 hasn't responded in a while. @karolkolodziej any assistance moving the PR forward would be very welcome.

inc198107 · 2022-04-08T12:44:05Z

Sorry I had no time to recheck this previously. But now, as you now, we have war with Russian nazi(I am from Ukraine), houpfully after our victory I will return to this task пт, 8 апр. 2022 г., 14:47 Lukas Holländer ***@***.***>:

…

There is a PR (#198 <#198>), but @inc198107 <https://github.com/inc198107> hasn't responded in a while. @karolkolodziej <https://github.com/karolkolodziej> any assistance moving the PR forward would be very welcome. — Reply to this email directly, view it on GitHub <#192 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEEJ4DTMEPLNB2BYO5L2OGTVEAMGNANCNFSM5HZ3BURA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

karolkolodziej · 2022-04-08T13:29:30Z

Thank you for the quick response.

A few comments on the issue and the PR:

There are some tests failing with this approach (replacing the calculation with currentTextX = x.
This approach(☝️) seems to work in our case but overall it doesn't look like a rounding/float imprecision issue it looks more like an actual error with the calculation.
I was able to simplify the code giving such results even more:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 150">
  <text x="8" data-z-index="1" y="16" >
    <tspan class="highcharts-text-outline" fill="red" stroke="red">29.9<tspan x="5" y="16">&ZeroWidthSpace;</tspan>
    </tspan>29.9
  </text>
</svg>

It seems that after this PR was introduced.
There is an issue with handling the &ZeroWidthSpace. There simply is no case for that in the code.

Perhaps before calculating currentTextX you should check if an element of &ZeroWidthSpace is being introduced.
Pseudocode:

if (textNodeContext === '&ZeroWidthSpace') {
   currentTextX = x
} else {
   currentTextX = x + textMeasure.width + textMeasure.length * charSpace
}

Sorry I can't help more but I'm not entirely familiar with that library and also I'm not sure how to test it...

inc198107 · 2022-04-09T17:31:56Z

Thanks for the feedback! пт, 8 апр. 2022 г., 16:29 Karol Kołodziej ***@***.***>:

…

Thank you for the quick response. A few comments on the issue and the PR: - There are some tests failing with this approach (replacing the calculation with currentTextX = x. - This approach(☝️) seems to work in our case but overall it doesn't look like a rounding/float imprecision issue it looks more like an actual error with the calculation. - I was able to simplify the code giving such results even more: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 150"> <text x="8" data-z-index="1" y="16" > <tspan class="highcharts-text-outline" fill="red" stroke="red">29.9<tspan x="5" y="16">&ZeroWidthSpace;</tspan> </tspan>29.9 </text> </svg> - It seems that after this PR <#161> was introduced. - There is an issue with handling the &ZeroWidthSpace. There simply is no case for that in the code. Perhaps before calculating currentTextX you should check if an element of &ZeroWidthSpace is being introduced. Pseudocode: if (textNodeContext === '&ZeroWidthSpace') { currentTextX = x } else { currentTextX = x + textMeasure.width + textMeasure.length * charSpace } Sorry I can't help more but I'm not entirely familiar with that library and also I'm not sure how to test it... — Reply to this email directly, view it on GitHub <#192 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEEJ4DXFPR76MJ7RBNWSBI3VEAYEJANCNFSM5HZ3BURA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

HackbrettXXX · 2022-04-11T08:00:31Z

@karolkolodziej thanks for doing the tests and for the additional insight.

HackbrettXXX added bug difficulty:medium help wanted Help with creating a proper test-case, looking up the spec, or creating a pull request. labels Nov 12, 2021

karolkolodziej mentioned this issue Apr 8, 2022

Wrongly positioned shadows while using the offline export. highcharts/highcharts#17170

Closed

bm64 mentioned this issue May 29, 2023

Heatmap PDF offline-export is broken since v9 highcharts/highcharts#19041

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

wrong export from Highcharts svg with outlined text/ #192

wrong export from Highcharts svg with outlined text/ #192

inc198107 commented Nov 11, 2021 •

edited

HackbrettXXX commented Nov 11, 2021

inc198107 commented Nov 12, 2021 •

edited

HackbrettXXX commented Nov 12, 2021

inc198107 commented Nov 15, 2021

inc198107 commented Dec 12, 2021

HackbrettXXX commented Dec 13, 2021

inc198107 commented Dec 14, 2021 via email

karolkolodziej commented Apr 8, 2022

HackbrettXXX commented Apr 8, 2022

inc198107 commented Apr 8, 2022 via email

karolkolodziej commented Apr 8, 2022

inc198107 commented Apr 9, 2022 via email

HackbrettXXX commented Apr 11, 2022

wrong export from Highcharts svg with outlined text/ #192

wrong export from Highcharts svg with outlined text/ #192

Comments

inc198107 commented Nov 11, 2021 • edited

HackbrettXXX commented Nov 11, 2021

inc198107 commented Nov 12, 2021 • edited

HackbrettXXX commented Nov 12, 2021

inc198107 commented Nov 15, 2021

inc198107 commented Dec 12, 2021

HackbrettXXX commented Dec 13, 2021

inc198107 commented Dec 14, 2021 via email

karolkolodziej commented Apr 8, 2022

HackbrettXXX commented Apr 8, 2022

inc198107 commented Apr 8, 2022 via email

karolkolodziej commented Apr 8, 2022

inc198107 commented Apr 9, 2022 via email

HackbrettXXX commented Apr 11, 2022

inc198107 commented Nov 11, 2021 •

edited

inc198107 commented Nov 12, 2021 •

edited