Forum How do I...?

Minimising text changes between browser and PDF

MikeK
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
mikeday
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.