0

I have a line of text I recently added to a jspdf-driven PDF action in our Ember application. It looks fine in Chrome, Firefox, Safari et al, but in Edge the character spacing is out of whack - it's very wide, thus lengthening the line and causing overlapping text (this line is right-aligned with more text that's left-aligned). Here's the relevant code:

  doc.setFont('Helvetica').setTextColor(153, 153, 153).setFontSize(size);
  doc.text(string, this.get('positioning').rightEdge, yPos, { 'align': 'right' });

(positioning is an object with a bunch of magic numbers for document locations, and string, yPos, and size are integer method arguments. doc is the jsPDF object being added to, if that's not obvious.)

Here's what it looks like in Chrome (i.e. what we want to see): Screenshot of Chrome output

Here's the Edge result: enter image description here

I've tried left-aligning the text, and it's still stretched. Changing the size doesn't seem to help either. If I pass a negative value for the charSpacing argument to the doc.text() call, I can mitigate the problem, but that then mangles other browsers; I'd need to pass that argument only for Edge, which feels really kludgy.

Why is jspdf and/or Edge doing this, and what can I do about it?

ETA: I've discovered that this only happens (for me) with a string built around a call to Date.Prototype.toLocaleDateString(), like so:

`Draft - Printed on ${Date.now().toLocaleDateString('en-us', dateFormatOptions)} at ${Date.now().toLocaleTimeString('en-us', timeFormatOptions)}`;

So jspdf has a problem with localized strings, maybe?

pjmorse
  • 9,204
  • 9
  • 54
  • 124
  • Not relevant to the question per se, but trying to fix this is what uncovered this question as well: https://stackoverflow.com/q/56259199/306084 – pjmorse May 22 '19 at 17:31
  • you can check whether JSpdf supports the Edge browser or not. Ref: https://github.com/MrRio/jsPDF/issues/280 From this link, Edge is not listed there. If you think that it is officially supported by JSpdf than you can consult them about the issue. They can give some hint may help to narrow down the issue. – Deepak-MSFT May 23 '19 at 05:17
  • Thanks, @Deepak-MSFT! I found the answer, which has to do with RTL characters in the output of `toLocaleDateString()` and `toLocaleTimeString()`. Strip those out and the problem goes away. – pjmorse May 24 '19 at 15:33

1 Answers1

0

This turns out to be another case of IE's toLocaleString has strange characters in results: Edge is adding unicode formatting characters to the output of toLocaleDateString() and toLocaleTimeString() and they're causing jspdf to do weird stuff. Using a regular expression to strip out the RTL characters resolves the issue.

pjmorse
  • 9,204
  • 9
  • 54
  • 124