2

I've spent eons diving into @font-face issues for RTL languages, font-rendering on different browsers, PDF support, and so on.

My objective is to have CSS-compatible Arabic (a RTL language) text on an HTML document, which , when rendered into a PDF, looks, renders, and wraps exactly the same on the PDF as it did on the HTML webpage, regardless of the user's browser or platform.

I've been using @font-face but it turned out that Windows machines render fonts a little wider than they do on a Mac, while the PDF generator is browser-independent and seems to render fonts more like a Mac does. So what happens is that Windows users see one line of text, while the PDF ends up having the last word on that line wrapped over onto the next line, and so the PDF is not exactly what the Windows user expected it to be.

I thought at one point that Cufon could be the solution because apparently it looks the same cross-browser - but I think it doesn't support Arabic? I tried generation PDFs using wkhtmltodpf and PhantomJS, but despite being awesome 'virtual' browsers, both use Webkit QT, which renders text differently from Windows, so once again the PDF that was generated had line wraps or text width that wasn't the same as the original HTML document. Basically, my question is:

  1. What's the best way to ensure that whatever the text the user sees on their browser is exactly what they will see on the PDF? I don't really need it to be exactly pixel-perfect, as long as the text at least follows the same line wraps, with a given width for the containing div. I think the only thing I really need to make sure of is that font hinting is uniform. Or does it all come down to using images?
  2. On an aside, does HTML5 have some sort of cross-browser font-rendering?
user961627
  • 12,379
  • 42
  • 136
  • 210

1 Answers1

0

I can suggest you two things:

Use em´s for the size of your fonts. em´s are a relative measure.

Don´t use sIFR or anything based on flash rendering due that it won´t work on mobile devices that doesn´t support flash.

There is no way to render the exact same thing across all existing web browsers, that will be like being in heaven. But as we are not there, what I suggest you too is to reduce a little bit the font until it fits your goal.

Regards.

Guillermo
  • 1,493
  • 3
  • 16
  • 35