DEV Community

CareerPDF
CareerPDF

Posted on

Why Arabic Text Breaks in Browser PDFs (And How to Fix It 100% Client-Side)

#javascript #webdev #pdf #arabic

If you have ever tried generating an Arabic PDF in the browser using standard JavaScript libraries—or tried copying Arabic text out of a PDF—you have probably seen two frustrating bugs:

  1. Letters are disconnected and reversed (م ر ح ب ا instead of مرحبا).
  2. Mixed Arabic and English lines scramble the reading order.

When building CareerPDF—a suite of 28 client-side resume, ATS, and PDF tools in Arabic and English that runs entirely in the browser with zero server uploads—solving real-text Arabic PDF generation and extraction was our biggest engineering hurdle.

Why PDFs Break Arabic Text

Unlike HTML, a PDF file is not a flow layout document with automatic bidirectional (BiDi) text shaping. A PDF content stream places individual glyph IDs at explicit (x, y) coordinates from left to right.

When poorly configured PDF generators write Arabic text—or when you copy Arabic text out of an existing PDF—three things go wrong:

  1. Unicode Presentation Forms (U+FB50–U+FEFF): Instead of storing base Arabic Unicode characters (U+0600–U+06FF) in the /ToUnicode CMap, the PDF maps glyphs to isolated, initial, medial, or final presentation forms. Many ATS parsers fail to normalize these back to searchable base letters.
  2. Visual vs. Logical Order: Because PDF drawing instructions place glyphs visually on the line, naive text extractors read the glyphs left-to-right, reversing every Arabic word while keeping English words forward (or reversing the English numbers inside an Arabic sentence).
  3. Broken Ligatures: Shared glyph skeletons get split by artificial space characters during text extraction.

How to Fix Reversed Arabic Text Copied from a PDF

If you already copied broken Arabic text from a PDF, you can repair it in JavaScript in three steps:

  1. NFKC Unicode Normalization: Convert all Arabic Presentation Forms-A and Forms-B back into standard base letters using text.normalize('NFKC').
  2. BiDi Run Splitting: Split each line into directional runs (Arabic RTL runs vs. Latin/Number LTR runs). Reverse the visual order of the Arabic runs while preserving the LTR order of embedded English words and numbers.
  3. Rejoin Split Skeletons: Collapse artificial spaces inserted between connecting Arabic letters.

We packaged this exact pipeline into a free, client-side Arabic PDF Text Fixer (مصلح النص العربي من PDF) that repairs broken text directly in your browser.

Generating Real-Text, ATS-Readable Arabic Resumes in the Browser

To generate Arabic resumes (https://careerpdf.com/ar/resume-builder/) that copy back cleanly and parse accurately in Applicant Tracking Systems (ATS):

  • Embed a proper OpenType Arabic font with complete /ToUnicode tables mapping shaped glyphs back to standard base Unicode codepoints.
  • Run BiDi reordering and contextual shaping in a Web Worker before placing glyphs, while keeping the underlying text layer in logical reading order.
  • Verify the output directly in the browser using a client-side PDF parser (ATS Resume Checker) so users can see the exact raw text an ATS extracts.

Everything runs locally in the browser with zero external network requests—monitored live by a PerformanceObserver privacy meter on every page.

Check out the tools here: https://careerpdf.com/en/ (and in Arabic at https://careerpdf.com/ar/).

Top comments (0)