Urbycoz
Urbycoz

Reputation: 7421

PDF controls render text differently

I'm working on a website that creates pdfs dynamically.

I've been playing around with two different pdf controls- wpcubed and abcpdf, and was surprised to see that they both appear to render text differently.

wpCubed:

enter image description here

abcpdf:

enter image description here

They are both using arial 25pt bold, so I was expecting them to look identical. Can anyone explain why they don't.

Here are the full files: wpCubed , abcpdf

Upvotes: 1

Views: 1053

Answers (1)

Mark Storer
Mark Storer

Reputation: 15868

Several different possibilities:

  1. Zoom levels in your view of the PDF. If your default view is fit width, and the default page size differs, this could happen quite subtly.
  2. Kerning. The spacing between two characters can be adjusted depending on what those characters are. In "Ti" the "i" is often much closer to the "T" than it might otherwise be. If one supports it and the other doesn't, your output will have different widths.
  3. Ligatures. The classic example is "fi", where the dot of the i and the overhang of the "f" are the same pixels. If one supports it and the other doesn't, your output will have different widths.
  4. Paths vs fonts. It's possible to draw a given string of text using text operators or line-to/curve-to operators. The later is wildly inefficient, but sometimes the only way to correctly draw a given piece of text. The pathed text might suffer from a lack of font "hinting"... various tricks used in an effort to get text to line up with pixels.

Without access to your PDF outputs it's impossible to be sure.

Having said that, the aspect ratios of several of those characters Looks Different. Compare the "e" in "test" from the two strings. The "e" from abcpdf looks 'wider' than the one from wbCubed. That's not kerning, ligatures, or zoom levels. It might not even be paths vs fonts.

So can we see your PDFs?


Here's the content stream from wpcubed

    
    BT 1 0 0 1 0 0 Tm
    /F1 22.500 Tf 0 Ts  0 g -2.667 Tw 452 -18 Td(This is a test)Tj
    ET

And here's the content stream from abcpdf:

    BT
    0 0 0 rg
    /Fabc5 25 Tf
    1 0 0 1 444.825 822 Tm
    (This is a test) Tj
    0.25 0 Td
    (This is a test) Tj
    0.25 0 Td
    (This is a test) Tj
    0.25 0 Td
    (This is a test) Tj
    ET

Heh: "Poor man's bold". Let me check the font resources... Yep.

wpcubed is using "Arial,bold". abcpdf is using "ArialMT", and printing the same words with a tiny offset several times.

You can probably convince abcpdf to use "Arial,bold" in which case I'd expect the two outputs to look identical. I haven't looked at abcpdf before, but it's probably possible.

I just checked their docs, and it looks like XFont.findFamily("Arial") would be the way to go. You'd check the array of returned XFonts for one that's 'really' Arial Bold, rather than some faux bolding technique with a normal Arial. You probably want to look at XFont.names rather than XFont.name as well.

That particular "make it look bold" trick has a Serious Drawback: Copy-n-paste will pick up all 4 instances of the text. A more selection-friendly method is to define a line thickness based on some small fraction of the font's point size (iText uses 1/30), and both stroke and fill the font. Fonts are normally just filled, so the thickness of that line is added to the outside of the font, with no extra words to trip up someone selecting/screen reading the text.

Yow. Blind folks with screen readers must hate that.

Upvotes: 4

Related Questions