Module 30 : CSS Writing Modes & Direction – Handling Languages with Different Writing Directions
Introduction
Different languages follow different writing directions. English, Spanish, and most Western languages are written left-to-right (LTR), while Arabic, Hebrew, and Urdu are written right-to-left (RTL). Some East Asian scripts, such as Chinese, Japanese, and Korean, can also be written top-to-bottom (TTB).
CSS provides properties to control the writing direction and layout of text, making it easier to create multilingual and internationalized websites.
1: Understanding CSS Writing Modes
Key Properties
writing-mode – Controls the text direction (horizontal or vertical).
direction – Defines the direction of text flow (LTR or RTL).
text-orientation – Adjusts the way characters are displayed in vertical writing modes.
Writing Modes (writing-mode)
The writing-mode property specifies whether text is written horizontally or vertically.
Writing Mode
Description
Example Languages
horizontal-tb
Default mode (left to right, top to bottom)
English, Spanish
vertical-rl
Top to bottom, right to left
Chinese, Japanese
vertical-lr
Top to bottom, left to right
Mongolian
Example: Writing Modes
css code
.horizontal-text { writing-mode: horizontal-tb; /* Default */ } .vertical-text-rl { writing-mode: vertical-rl; /* Top to bottom, right to left */ } .vertical-text-lr { writing-mode: vertical-lr; /* Top to bottom, left to right */ }
html code
<p class="horizontal-text">This is horizontal text.</p> <p class="vertical-text-rl">这是垂直文本</p> <p class="vertical-text-lr">ᠮᠣᠩᠭᠣᠯ ᠬᠤᠷᠠ</p>
2: Handling Right-to-Left (RTL) Text
Some languages are written from right to left. The direction property allows adjusting the text flow.
direction Property
ltr (left-to-right) – Default direction (e.g., English, French, German).
rtl (right-to-left) – Used for Arabic, Hebrew, and Urdu.
Example: RTL Text Handling
css code
.rtl-text { direction: rtl; text-align: right; }
html code
<p class="rtl-text">مرحبا بك في الموقع</p> <!-- Arabic -->
Explanation:
direction: rtl; ensures the text is displayed from right to left.
text-align: right; aligns text properly for RTL languages.
Handling Mixed Languages
Sometimes, a page may contain both LTR and RTL text. Use dir="rtl" in HTML for better accessibility.
html code
<p dir="rtl">هذا نص عربي داخل صفحة إنجليزية.</p> <p dir="ltr">This is English text.</p>
3: Text Orientation in Vertical Writing Modes
When using writing-mode: vertical-rl;, characters might rotate differently. The text-orientation property controls this.
text-orientation Values
mixed (default) – Rotates only some characters.
upright – Keeps all characters upright.
sideways – Rotates characters to match the line.
Example: Text Orientation
css code
.upright-text { writing-mode: vertical-rl; text-orientation: upright; }
html code
<p class="upright-text">日本語のテキスト</p> <!-- Japanese text stays upright →
4: Practical Exercises
Exercise 1: Creating an RTL and LTR Layout
Task: Design a webpage where the header is LTR, but the main content is RTL for Arabic users.
Solution:
css code
body { font-family: Arial, sans-serif; } .header { direction: ltr; text-align: left; background-color: #f4f4f4; padding: 10px; } .content { direction: rtl; text-align: right; padding: 20px; }
html code
<div class="header"> <h2>My Multilingual Website</h2> </div> <div class="content"> <p>مرحبا بكم في الموقع الخاص بي</p> </div>
Exercise 2: Vertical Text Navigation
Task: Create a vertical navigation menu using writing-mode: vertical-rl;.
Solution:
css code
.nav { writing-mode: vertical-rl; text-orientation: upright; background-color: #222; color: white; padding: 10px; display: inline-block; }
html code
<div class="nav"> <p>Home</p> <p>About</p> <p>Contact</p> </div>
5: Best Practices for Multilingual Websites
Use lang attributes
html code
<html lang="ar">
Set the correct dir attribute for content
html code
<p dir="rtl">هذا نص عربي</p>
Test with different languages
Use real-world text in different languages.
Consider UI adjustments
Mirror layouts for RTL users (e.g., move menu from left to right).
Conclusion
writing-mode controls horizontal and vertical text.
direction sets LTR or RTL flow for text.
text-orientation adjusts the appearance of vertical text.
Combine these properties to support multiple languages and writing systems.
Final Exercise: Design a Multilingual Web Page
Task:
Create a webpage with three sections:
English content (LTR)
Arabic content (RTL)
Japanese vertical text (vertical-rl)
Challenge:
Align text properly.
Use correct writing-mode and direction.
Solution:
css code
.section { border: 1px solid black; padding: 10px; margin: 10px; } .english { direction: ltr; text-align: left; } .arabic { direction: rtl; text-align: right; } .japanese { writing-mode: vertical-rl; text-orientation: upright; }
html code
<div class="section english"> <p>This is English text.</p> </div> <div class="section arabic"> <p>هذا نص باللغة العربية.</p> </div> <div class="section japanese"> <p>日本語の文章</p> </div>
examples to teach CSS Writing Modes & Direction effectively. It prepares students to handle multilingual and internationalized websites.
No comments:
Post a Comment