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
1. 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
2. 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
3. East Asian Scripts
CJK (Chinese, Japanese, Korean):
- Vertical and horizontal text
- Character spacing
- Ruby annotation (furigana)
- Mixed scripts (kanji, hiragana, katakana, romaji)
4. 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
1---2name: learning-multi-script-design3description: Design learning materials for right-to-left languages, complex scripts, bidirectional text, and multi-script environments. Calculate text expansion factors and specify typography requirements. Use when creating content for Arabic, Hebrew, Asian scripts, or mixed-direction text. Activates on "RTL", "right-to-left", "bidirectional text", or "complex scripts".4---5
6# Learning Multi-Script Design
7
8Design educational materials that properly handle multiple writing systems, right-to-left languages, and complex scripts.
9
10## When to Use
11
12- Creating content for RTL languages (Arabic, Hebrew, Farsi/Persian, Urdu)
13- Supporting complex scripts (Devanagari, Thai, Myanmar, Khmer)
14- Mixed-direction content (English + Arabic)
15- Asian language learning materials
16- Global multilingual platforms
17
18## Script Categories
19
20### 1. Right-to-Left (RTL) Languages
21
22**Major RTL Languages**:
23- Arabic (and variants)
24- Hebrew
25- Farsi/Persian
26- Urdu
27- Pashto
28- Yiddish
29
30**Design Considerations**:
31- UI elements flip horizontally
32- Reading direction: right to left
33- Numbers may remain LTR
34- Mixed text creates bidirectional (bidi) challenges
35
36### 2. Complex Scripts
37
38**Characteristics**:
39- **Devanagari** (Hindi, Sanskrit, Marathi): Combining characters, ligatures
40- **Thai**: No spaces between words, tone marks above/below
41- **Myanmar**: Circular vowels, stacking
42- **Khmer**: Multi-level stacking, no word boundaries
43- **Tamil, Telugu, Malayalam**: Complex conjuncts
44
45**Technical Requirements**:
46- Unicode support
47- Complex text layout (CTL) engines
48- Proper font rendering
49- Line breaking algorithms
50
51### 3. East Asian Scripts
52
53**CJK (Chinese, Japanese, Korean)**:
54- Vertical and horizontal text
55- Character spacing
56- Ruby annotation (furigana)
57- Mixed scripts (kanji, hiragana, katakana, romaji)
58
59### 4. Bidirectional Text
60
61**Challenges**:
62- Embedding LTR text in RTL (e.g., English words in Arabic)
63- Punctuation placement
64- Number handling
65- URL and code directionality
66
67## Text Expansion Factors
68
69**Translation Length Changes**:
70| Source | Target | Expansion Factor |
71|--------|--------|------------------|
72| English | Arabic | +25% to +30% |
73| English | German | +10% to +35% |
74| English | Chinese | -20% to -30% |
75| English | Spanish | +15% to +30% |
76| English | Thai | +15% to +20% |
77
78**Design Implications**:
79- Button/label sizing
80- Form field lengths
81- Line breaks and pagination
82- UI layout flexibility
83
84## Typography Requirements
85
86### Font Selection
87
88**Requirements by Script**:
89- **Arabic**: Must support contextual forms (initial, medial, final, isolated)
90- **Devanagari**: Must include conjuncts and ligatures
91- **Thai**: Requires tone mark positioning
92- **CJK**: Large character sets (20,000+ glyphs)
93
94**Web Safe Options**:
95- Arabic: Noto Naskh Arabic, Arial Arabic
96- Hebrew: Noto Sans Hebrew, Arial Hebrew
97- Devanagari: Noto Sans Devanagari
98- CJK: Noto Sans CJK
99
100### Line Height and Spacing
101
102**Adjustments Needed**:
103- **Thai/Devanagari**: +20-30% line height for marks above/below
104- **Arabic**: Account for ascenders and descenders
105- **CJK**: 1.5-2x character height for vertical text
106
107## Layout Considerations
108
109### RTL Layout Changes
110
111**Elements That Flip**:
112- ✓ Navigation menus
113- ✓ Breadcrumbs
114- ✓ Progress indicators
115- ✓ Carousels and sliders
116- ✗ Video player controls (stay LTR)
117- ✗ Mathematical formulas (stay LTR)
118
119### Form Design
120
121**RTL Forms**:
122- Labels on right side
123- Input fields align right
124- Validation messages on left
125- Calendar widgets flip
126
127## Technical Implementation
128
129### HTML/CSS
130
131```html
132<!-- Document direction -->
133<html dir="rtl" lang="ar">
134
135<!-- Mixed direction -->
136<p>This is English text: <span dir="rtl">هذا نص عربي</span></p>
137
138<!-- Bidirectional isolation -->
139<bdi>User-generated content</bdi>
140```
141
142```css
143/* RTL-specific styles */
144[dir="rtl"] .navigation {
145 text-align: right;
146 direction: rtl;
147}
148
149/* Logical properties (auto-flip) */
150.container {
151 padding-inline-start: 20px; /* becomes right in RTL */
152 margin-inline-end: 10px; /* becomes left in RTL */
153}
154```
155
156## CLI Interface
157
158```bash
159# RTL language design
160/learning.multi-script-design --content "course.html" --target-lang "Arabic" --direction "RTL"
161
162# Calculate expansion
163/learning.multi-script-design --source "English course" --target-langs "Arabic,German,Russian" --estimate-expansion
164
165# Complex script requirements
166/learning.multi-script-design --content "app-ui/" --scripts "Devanagari,Thai,Myanmar" --output design-spec.md
167
168# Typography recommendations
169/learning.multi-script-design --languages "Arabic,Hebrew,Farsi" --recommend-fonts --web-safe
170```
171
172## Output
173
174- Layout specifications for target scripts
175- Text expansion estimates
176- Font recommendations
177- CSS/HTML directives
178- Design mockups for RTL
179- Bidirectional text handling guide
180
181## Composition
182
183**Input from**: `/learning.translation`, `/curriculum.package-web`, `/curriculum.package-pdf`
184**Works with**: `/learning.localization-engineering`, `/learning.global-accessibility`
185**Output to**: Multi-script ready designs and layouts
186
187## Exit Codes
188
189- **0**: Multi-script design complete
190- **1**: Unsupported script
191- **2**: Insufficient font resources
192- **3**: Bidirectional conflicts
majiayu000