Learning Multi-Script Design
Design educational materials that properly handle multiple writing systems, right-to-left languages, and complex scripts.
When to Use
-
Creating content for RTL languages (Arabic, Hebrew, Farsi/Persian, Urdu)
-
Supporting complex scripts (Devanagari, Thai, Myanmar, Khmer)
-
Mixed-direction content (English + Arabic)
-
Asian language learning materials
-
Global multilingual platforms
Script Categories
- Right-to-Left (RTL) Languages
Major RTL Languages:
-
Arabic (and variants)
-
Hebrew
-
Farsi/Persian
-
Urdu
-
Pashto
-
Yiddish
Design Considerations:
-
UI elements flip horizontally
-
Reading direction: right to left
-
Numbers may remain LTR
-
Mixed text creates bidirectional (bidi) challenges
- Complex Scripts
Characteristics:
-
Devanagari (Hindi, Sanskrit, Marathi): Combining characters, ligatures
-
Thai: No spaces between words, tone marks above/below
-
Myanmar: Circular vowels, stacking
-
Khmer: Multi-level stacking, no word boundaries
-
Tamil, Telugu, Malayalam: Complex conjuncts
Technical Requirements:
-
Unicode support
-
Complex text layout (CTL) engines
-
Proper font rendering
-
Line breaking algorithms
- East Asian Scripts
CJK (Chinese, Japanese, Korean):
-
Vertical and horizontal text
-
Character spacing
-
Ruby annotation (furigana)
-
Mixed scripts (kanji, hiragana, katakana, romaji)
- Bidirectional Text
Challenges:
-
Embedding LTR text in RTL (e.g., English words in Arabic)
-
Punctuation placement
-
Number handling
-
URL and code directionality
Text Expansion Factors
Translation Length Changes:
Source Target Expansion Factor
English Arabic +25% to +30%
English German +10% to +35%
English Chinese -20% to -30%
English Spanish +15% to +30%
English Thai +15% to +20%
Design Implications:
-
Button/label sizing
-
Form field lengths
-
Line breaks and pagination
-
UI layout flexibility
Typography Requirements
Font Selection
Requirements by Script:
-
Arabic: Must support contextual forms (initial, medial, final, isolated)
-
Devanagari: Must include conjuncts and ligatures
-
Thai: Requires tone mark positioning
-
CJK: Large character sets (20,000+ glyphs)
Web Safe Options:
-
Arabic: Noto Naskh Arabic, Arial Arabic
-
Hebrew: Noto Sans Hebrew, Arial Hebrew
-
Devanagari: Noto Sans Devanagari
-
CJK: Noto Sans CJK
Line Height and Spacing
Adjustments Needed:
-
Thai/Devanagari: +20-30% line height for marks above/below
-
Arabic: Account for ascenders and descenders
-
CJK: 1.5-2x character height for vertical text
Layout Considerations
RTL Layout Changes
Elements That Flip:
-
✓ Navigation menus
-
✓ Breadcrumbs
-
✓ Progress indicators
-
✓ Carousels and sliders
-
✗ Video player controls (stay LTR)
-
✗ Mathematical formulas (stay LTR)
Form Design
RTL Forms:
-
Labels on right side
-
Input fields align right
-
Validation messages on left
-
Calendar widgets flip
Technical Implementation
HTML/CSS
<!-- Document direction --> <html dir="rtl" lang="ar">
<!-- Mixed direction --> <p>This is English text: <span dir="rtl">هذا نص عربي</span></p>
<!-- Bidirectional isolation --> <bdi>User-generated content</bdi>
/* RTL-specific styles */ [dir="rtl"] .navigation { text-align: right; direction: rtl; }
/* Logical properties (auto-flip) / .container { padding-inline-start: 20px; / becomes right in RTL / margin-inline-end: 10px; / becomes left in RTL */ }
CLI Interface
RTL language design
/learning.multi-script-design --content "course.html" --target-lang "Arabic" --direction "RTL"
Calculate expansion
/learning.multi-script-design --source "English course" --target-langs "Arabic,German,Russian" --estimate-expansion
Complex script requirements
/learning.multi-script-design --content "app-ui/" --scripts "Devanagari,Thai,Myanmar" --output design-spec.md
Typography recommendations
/learning.multi-script-design --languages "Arabic,Hebrew,Farsi" --recommend-fonts --web-safe
Output
-
Layout specifications for target scripts
-
Text expansion estimates
-
Font recommendations
-
CSS/HTML directives
-
Design mockups for RTL
-
Bidirectional text handling guide
Composition
Input from: /learning.translation , /curriculum.package-web , /curriculum.package-pdf
Works with: /learning.localization-engineering , /learning.global-accessibility
Output to: Multi-script ready designs and layouts
Exit Codes
-
0: Multi-script design complete
-
1: Unsupported script
-
2: Insufficient font resources
-
3: Bidirectional conflicts