I'm working on a system where users enter data into a predefined template, then use Prince to generate a PDF from that. Sometimes the text shifts that occur between browser and PDF can have a substantial impact on these layouts, causing text to go missing (due to it running outwith the bounds of a text area) or columns becoming misaligned (for instance headings staying in column 1, with the text for it moving to column 2).

I know that there's a difference between text rendered in the browser and text rendered in the PDF, but is there a way to minimise the shifts?

I've tried using the text-justify property and also the letter-spacing property, and combinations thereof, without much success.

As far as I can tell the issue relates to how the lateral spacing (tracking) is handled, so I thought there may be a way to force them to render it it in the same, or at least a similar way.

I'm using V12 on our live environment, but 13.1 on our test systems, and haven't noticed a lot of difference between them for this issue.

Thanks

This is difficult as Prince produces resolution-independent PDF files, but different browsers can render text at slightly different widths depending on the operating system and local font settings and screen resolution.

You could try experimenting with the text-rendering property in the browser:

https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering

But in general relying on exactly identical text layout across multiple user agents is always going to be very fragile.

Thanks for the suggestion. I did try that, without much success. I then tried changing the type sizes from pt to px, coupled with 'text-rendering: geometricPrecision' and that seems to have made a difference. It's not 100% accurate, and tends to work better at larger sizes, but it is certainly a lot closer.

Thanks
Mike