Practise vocabulary for RTL (right-to-left) layouts, logical CSS properties, bidi text, and mirroring conventions.
0 / 5 completed
1 / 5
RTL (right-to-left) languages include:
RTL languages: Arabic (300M+ speakers), Hebrew, Persian, Urdu, and others. Japanese/Chinese/Korean are LTR when written horizontally (traditional vertical writing is a separate case). Correctly supporting RTL requires both text direction and UI layout mirroring.
2 / 5
Logical CSS properties (margin-inline-start instead of margin-left) are preferred for RTL support because:
Physical: margin-left (always left). Logical: margin-inline-start (left in LTR, right in RTL). Using logical properties means setting dir='rtl' on the root element automatically mirrors all spacing, borders, and positioning — without writing RTL-specific CSS overrides.
3 / 5
The mirroring convention in RTL UI design means:
Mirroring rule: directional UI elements mirror; universal/semantic icons do not. Check icon (✓) stays the same. Back arrow flips. A clock stays the same (time flows the same way). Media controls: some are debated. Google Material Design provides RTL mirroring guidelines.
4 / 5
The Unicode Bidirectional (Bidi) Algorithm handles:
Bidi text is common: an Arabic tweet mentioning an English brand name or price. The Unicode Bidi Algorithm resolves rendering order using character directionality properties and explicit bidi controls (RLM, LRM, PDF characters). Developers should test mixed-direction strings to avoid 'bidi spoofing' security issues.
5 / 5
The HTML attribute dir='rtl' is correctly applied at:
Best practice: set dir='rtl' on the element for RTL pages. This sets the base direction for all block-level elements. For user-generated content that may be LTR in an RTL page (or vice versa), use dir='auto' on the container — the browser will detect the first strongly-directional character.