Filler · ArabicArabic Lorem Ipsum
Arabic filler and a mirrored interface: see how the layout flips, where the icons move and what happens to numbers inside Arabic text. Everything runs in your browser.
Generator
Mirrored interface
Flip the direction and watch what moved. It is not the text that mirrors but the whole layout: columns, padding, icons and directional arrows. Clocks and logos must stay as they are.
The «next» arrow flipped with the layout while the clock and the price did not: directional icons have something to mirror, non-directional ones do not. The number 2026 and the Latin SKU inside an Arabic string keep running left to right — that is bidirectional text, and naive truncation by character count destroys such a sentence.
Worst-case strings
The cases an Arabic layout breaks on first.What breaks
The layout flips, not the text
Columns, padding, icon positions, arrow directions and progress bars all swap sides. Using `margin-left` instead of the logical `margin-inline-start` is the most common reason an RTL interface falls apart: the property keeps measuring from the left while everything else measures from the right.
Letters change shape by position
A single letter has four forms: isolated, initial, medial and final. If the font or rendering path does not support joining, the text falls apart into isolated glyphs and becomes unreadable — while the characters themselves are technically correct, which is why code review never catches it. It is visible only when rendered.
Bidirectional text breaks truncation
Numbers, Latin words and some punctuation inside an Arabic sentence keep running left to right. Display order stops matching the order of characters in the string, so «first N characters» cuts somewhere other than where it looks. Test with prices, dates and brand names.
Line height runs out
Arabic uses the space above and below the baseline more heavily than Latin. Line spacing tuned for English makes diacritics collide. Budget 25–35 % more, and if your design system defines `line-height` as a fixed pixel value, Arabic needs a token of its own.
Not everything should be mirrored
Forward and back arrows, list indentation and progress indicators flip. Clocks, media play buttons, logos and checkmarks do not. Mirroring the whole icon set automatically is cheaper to implement and reads to a native user as an obvious defect.
There is no letter case
Tricks like uppercase for emphasis and `text-transform: uppercase` do nothing at all — Arabic has no case. Emphasis has to come from weight, colour or size, and if your design system builds accents on caps, Arabic needs another mechanism.
Fonts
Noto Naskh Arabic and Noto Sans Arabic give full coverage, Cairo and Tajawal a modern interface look, Amiri the classical typesetting tradition. System Latin families do not cover Arabic at all: without an explicit font the browser substitutes a fallback with different metrics, and line-height calculations stop adding up.