Why your PDF's text comes out as separate letters

I generated a PDF from HTML with Chrome on the command line. To the eye, it was perfect. But when I extracted its text with a pdf.js-based tool, my section headings came out like this:

E X P É R I E N C E
STA C K

With pdftotext (poppler), the same words came out whole. Same file, two readings.

I looked inside the PDF. In mine, Chrome doesn't write words but roughly one character per operation: 3,136 text-drawing operations for 3,062 repositioning ones. Every letter is placed absolutely.

My headings had letter-spacing: .13em. Removing the letter spacing made the words come out whole in both tools. I make up for it with font size:

/* before */
h2 { letter-spacing: .13em; font-size: 8.4pt; }

/* after */
h2 { letter-spacing: 0; font-size: 9pt; }

A PDF isn't text, it's a list of positioned glyphs. That it looks right to the eye doesn't guarantee a machine can read it.

If your PDF's text needs to be found, copied or indexed, test it with at least two extractors. One alone can tell you everything is fine.

Amine Affif, full-stack developer in Paris. amineaffif.com