Generated PDF for iOS not displaying CSS certain unicodes.

LeHaine commented 5 years ago

I am generating a PDF using CSS. I can generate the PDF just fine and displays perfectly on Android. Everything is styled correctly and everything appears. iOS on the other hand doesn't seem to display certain unicode characters. Just to be clear that these unicodes DO appear in the iOS cordova app but just not when the HTML & CSS get converted to a PDF.

This is the CSS that isn't appearing in iOS PDF:

ul > li::before {
        content: "\2022";
        color: #0071bc;
        display: inline-block;
        font-weight: bold;
        font-size: 1.5em;
        padding-right: 7px;
        margin-left: -1em;
}

Basically the "\2022" which is a just a bullet point is not appearing. I also have similar issues with \25A1 (which is a checkbox) and \2713 (a checkmark).

Interestingly when I used the unicode (\2212) for the minus sign it would not appear. But when I changed it to just '-' it appeared. And I did try the same with the previous three and a bunch of different combinations and they don't appear.

I have spent nearly all day on this and cannot for the life of me figure out why it won't appear in the iOS PDF.

Any help is greatly appreciated.

cesarvr commented 5 years ago

I have tried your example in a simple test project and I'm not able to reproduce this for iOS.

I have try this CSS:

ul {
    list-style-type: none;
}

ul > li::before {
        content:'\2022';
        color: #0071bc;
        display: inline-block;
        font-weight: bold;
        font-size: 1.5em;
        padding-right: 7px;
        margin-left: -1em;
}

for this JS:

function createPDF(cssFile){
  var opts = {
      documentSize: "A4",
      landscape: "portrait",
      type: "share",
      fileName: 'my-pdf.pdf'
  }

  var payload = _.template('<head><link rel="stylesheet" href="<%=css_file%>"></head><body> <h1> Hello World </h1> <ul> <li>one</li> <li>two</li> <li>three</li> </ul></body>')

  pdf.fromData(payload({css_file: cssFile}),
          opts)
      .then(progressHide)
      .catch(progressHide);
}

I got this:

And for the second example ( checkbox ) I try:

ul {
    list-style-type: none;
}

ul > li::before {
        content:'\2713';
        color: #0071bc;
        display: inline-block;
        font-weight: bold;
        font-size: 1.5em;
        padding-right: 7px;
        margin-left: -1em;
}

And got this:

Those images are screenshots from the PDF preview (Save PDF in iOS), I'm using this configuration:

Cordova Version 9.0.0 I compiled the test project for: iOS 9 - 12.0

Cordova Platform ( cordova platform) android 6.4.0 ios 4.5.5

If you have a version below that one, you can try upgrading it:

 cordova platform add ios@4.5.5

Plugin version:

cordova-pdf-generator 2.0.4 "PDFGenerator"

Hope it helps.

LeHaine commented 5 years ago

Thanks and I appreciate the in depth response. I will give this a shot on Monday and will update.

LeHaine commented 5 years ago

Good news! The issue was nothing to do with the PDF generator.

The issue was when I generated my CSS into a string on iOS it was omitting quotes around the content character (only on iOS) for whatever reason and was being marked as an invalid property.

Thanks for the help again!

cesarvr / pdf-generator

Generated PDF for iOS not displaying CSS certain unicodes. #96