Unexpected letter-spacing on build chrome-pdf



  • When we run it locally, chrome-pdf renders the pdf correctly. However, when we build it for production, all fonts have strange and irregular letter spacing.

    I've tried several approaches but it hasn't worked.

    I put the fonts in rem and I even used this forum: https://api.jsreport.net/topic/3071/letter-spacing-issue-in-font/8

    But I got no results.



  • So you have tried the mentioned css?

    <style>
      * {
        text-rendering: geometricprecision !important;
      }
    </style>
    

    Are you able to replicate the issue in a minimal playground workspace?
    https://playground.jsreport.net/



  • I put it in the playground environment but the problem is not reproduced: https://playground.jsreport.net/w/anon/o3uNvWMf

    The problem only happens when we build the project.

    like in this image where you can clearly see the irregular letter-spacing in the words. You can see better between the letter r and the letter o.
    0_1712845650374_upload-7adb5f5e-df9f-40f1-a2d4-64ff69e117f6
    0_1712845659432_upload-aea7c153-f4f4-4db7-8a19-2d0d6cf1f7b7



  • Your playground demo doesn't include the geometricprecision. You have tried it in your deployed app right?

    The playground has explicitly installed some fonts in the OS, maybe you can try the same in your app
    https://github.com/jsreport/playground-worker/blob/master/Dockerfile#L9



  • we use version 2.11.0 of js report. All of our projects had already been built in this version and it was impossible to update. How do I adjust these points that you sent in the link?



  • If you have a ubuntu distro in prod, you will run the linked line to install the server fonts.

    apt-get install -y libfontconfig fonts-dejavu-core fonts-dejavu-extra fonts-droid-fallback fonts-tlwg-garuda fonts-tlwg-kinnari fonts-tlwg-laksaman fonts-tlwg-loma fonts-tlwg-mono fonts-tlwg-norasi fonts-tlwg-purisa fonts-tlwg-sawasdee fonts-tlwg-typewriter fonts-tlwg-typist fonts-tlwg-typo fonts-tlwg-umpush fonts-tlwg-waree
    


  • I run this line but does not works :/

    What else can I do?



  • Your playground demo doesn't include the geometricprecision. You have tried it in your deployed app right?

    I still don't see an answer to this....

    What else can I do?

    Try to find the difference between the server that you use for prod and the one where it works for you. Is it a windows vs linux or both are linuxes?

    Try to run the latest jsreport on the prod server on different port and check if the font works there, maybe it is about the older chrome version you use...

    The issue is between chrome and your OS fonts. jsreport doesn't modify the fonts or HTML and Chrome is for us a black-box so we can't help with a deeper troubleshooting unfortunately.



  • Yes, I have tried to include the geometricprecision.

    Ok, I will make more tests.

    Anyone have this issue like our case?


Log in to reply
 

Looks like your connection to jsreport forum was lost, please wait while we try to reconnect.