Menu

Why your PDF's text comes out as separate letters
📰

Why your PDF's text comes out as separate letters

DEV Community: webdev·Amine Affif·18 days ago
#jQVp3tAO
#devtowebdev#devto#dev#letter#spacing
Reading 0:00
15s threshold

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

Enter fullscreen mode

Exit fullscreen mode

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 ; }

Enter fullscreen mode

Exit fullscreen mode

A PDF isn't text, it's a list of positioned glyphs.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.