Text and fonts
Arabic or Hebrew text renders backwards or disconnected
Right-to-left text appears in the wrong order, or Arabic letters appear as isolated forms rather than joined into words. Numbers and punctuation land on the wrong side of the line.
What is actually happening
Two separate problems. Reversed order means the direction was never declared, so the layout used the document default. Disconnected Arabic letters mean the font lacks the contextual forms, which are separate glyphs from the isolated ones.
Confirming it is this and not something that looks like it
Add dir="rtl" to the element. If the order corrects itself, direction was the issue. If the letters are still disconnected, the font is.
The fix
Declare direction on the markup, not only in CSS, and use a font with full Arabic shaping. Direction as an HTML attribute is what the bidirectional algorithm reads; a CSS direction property is less reliably honoured across engines.
<!-- The attribute, not only the CSS property. -->
<section dir="rtl" lang="ar" class="document">
<h1>فاتورة</h1>
<!-- Numbers stay left-to-right inside an RTL run, which is correct. -->
<p>المبلغ: <span dir="ltr">1,240.00</span></p>
</section>If that was not it
These produce the same symptom often enough to be worth ruling out before assuming the fix above did not work.
- A font without contextual alternates, which renders isolated letter forms
- Mixed LTR and RTL in one line without isolation, where numbers move unexpectedly
- text-align: left hardcoded, where text-align: start would follow direction
- Margins and padding set with left and right rather than the logical inline-start and inline-end
Frequently asked
Does this happen with every rendering engine?
The behaviour behind it is not specific to one tool. Two separate problems. Anything rendering HTML to a paged medium has to make the same decision, so the fix travels with you if you change how the render happens.
Will this show up as an error in my logs?
No, and that is what makes it expensive. A document that renders wrong is still a successful render as far as every log line is concerned. It is found by someone opening the file, which is usually the customer.
Related failures
Problems people arrive at from the same starting point, or mistake for this one.
Text in the PDF cannot be selected or searched
The text is not text.
Custom fonts fall back to a default in the PDF
The font file was not fetched.
Chinese, Japanese or Korean characters show as boxes
The font in use has no glyphs for those characters, and no font on the render machine does either.
Emoji do not render in the PDF
Emoji need a dedicated font, and colour emoji need one in a colour font format.
Line breaks in the PDF differ from the browser preview
The font is not the same.
CSS for paged documents, and what actually works
Which parts of the paged media specification a browser-based render implements.
Everything that goes wrong, by category
The full list, grouped by where in the pipeline it breaks.
Paste your markup and see the rendered document, without signing up.