CSS Writing Modes
एक international book design करने की कल्पना करें। Western cultures में, हम books top से bottom तक horizontally पढ़ते हैं। लेकिन East Asian cultures में (जैसे Japanese या Chinese), books vertically right से left पढ़ी जाती हैं, sentences page के नीचे चलती हैं।
CSS writing modes आपको इस layout direction को natively control करने देते हैं। writing mode property बदलकर, आप अपने text blocks और vertical menus को natively rotate कर सकते हैं, अपनी site को global readers के लिए accessible बनाते हुए और creative design layouts enable करते हुए।
In this page:
Syntax
selector {
writing-mode: horizontal-tb | vertical-rl | vertical-lr;
}Writing Modes का परिचय
writing-mode property specify करती है कि text की lines horizontally या vertically laid out हैं, और container में blocks किस direction में progress करते हैं।
Note:
- अपने side panels पर English headers को elegantly rotate करने के लिए writing-mode: vertical-rl इस्तेमाल करें।
- Accepted values:
- horizontal-tb — top से bottom तक flow करने वाली horizontal lines (default)
- vertical-rl — right से left तक flow करने वाली vertical lines
- vertical-lr — left से right तक flow करने वाली vertical lines
- sideways-rl | sideways-lr — rotated horizontal text
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
Writing modes बदलना आपके logical coordinates (block और inline axes) को automatically rotate कर देता है।
उदाहरण: Introduction to Writing Modes
<style>
p {
writing-mode: vertical-rl;
}
</style>
<p>Text lays out vertically instead of horizontally</p>Horizontal-TB Mode
horizontal-tb (top-to-bottom) mode Western languages के लिए default setting है। Text left से right horizontally चलता है, और paragraph blocks top से bottom vertically stack होते हैं।
Note:
- layout consistency सुनिश्चित करने के लिए हमेशा अपने global resets में इस default mode को specify करें।
- Accepted values:
- horizontal-tb — default, horizontal lines, blocks top से bottom stack होते हैं
- writing-mode: vertical-rl — comparison के लिए
- direction: ltr | rtl — इसके अंदर inline direction
- text-align: start — writing direction को follow करता है
Warning:
अगर horizontal text blocks को natively format किया जा सकता है, तो उन्हें transform rotate इस्तेमाल करके हाथ से rotate करने से बचें।
उदाहरण: Horizontal-TB Mode
<style>
p {
writing-mode: horizontal-tb;
}
</style>
<p>Default: left-to-right text, blocks stack top to bottom</p>Vertical-RL और Vertical-LR Modes
vertical-rl (right-to-left) और vertical-lr (left-to-right) modes text को top से bottom तक vertically चलाने के लिए rotate करते हैं। ये East Asian vertical layouts के लिए ज़रूरी हैं और Western layouts में stylish design features बनाने के लिए इस्तेमाल किए जा सकते हैं।
Note:
- design-centric sidebars में text को page के left edge के साथ साफ़ तरीके से align करने के लिए vertical-lr इस्तेमाल करें।
- Accepted values:
- horizontal-tb — default, horizontal lines, blocks top से bottom flow करते हैं
- vertical-rl — vertical lines, blocks right से left flow करते हैं
- vertical-lr — vertical lines, blocks left से right flow करते हैं
- sideways-rl — vertical-rl जैसा लेकिन glyphs sideways rotated (limited support)
- sideways-lr — vertical-lr जैसा लेकिन glyphs sideways rotated (limited support)
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
Vertical text blocks को screen से बाहर जाने से रोकने के लिए manual height adjustments चाहिए हो सकते हैं।
उदाहरण: Vertical-RL and Vertical-LR Modes
<style>
.rl { writing-mode: vertical-rl; }
.lr { writing-mode: vertical-lr; }
</style>
<p class="rl">Vertical, right to left</p>
<p class="lr">Vertical, left to right</p>Text Orientation Options
जब आप Western text को vertically rotate करते हैं, तो browser default रूप से letters को sideways rotate करता है। text-orientation property आपको इस behavior को बदलने देती है, vertical layouts में letters को upright display करने देते हुए।
Note:
- Western readers के लिए vertical numbers या words को आसानी से readable रखने के लिए text-orientation: upright इस्तेमाल करें।
- Accepted values:
- text-orientation: mixed — default, Latin glyphs rotated
- text-orientation: upright — हर glyph upright
- text-orientation: sideways — सभी glyphs rotated
- writing-mode: vertical-rl | vertical-lr — text-orientation सिर्फ vertical modes में लागू होता है
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
upright orientation सिर्फ vertical-rl या vertical-lr writing modes के अंदर काम करती है।
उदाहरण: Text Orientation Options
<style>
p {
writing-mode: vertical-rl;
text-orientation: upright;
}
</style>
<p>Letters stay upright instead of rotated sideways</p>Writing Modes को Grid Layouts के साथ Combine करना
आप complex, multi-directional web designs (जैसे vertical sidebars के बगल में horizontal grids) साफ़ तरीके से बनाने के लिए custom writing modes को grid layouts के साथ combine कर सकते हैं।
Note:
- अपने rotated vertical elements को आसानी से align और center करने के लिए Flexbox इस्तेमाल करें।
- Accepted values:
- writing-mode: vertical-rl — grid के inline और block axes को swap करता है
- grid-template-columns — columns inline axis को follow करते हैं
- grid-template-rows — rows block axis को follow करते हैं
- inline-size | block-size — logical sizing
Warning:
grids को rotate करते समय alignment errors रोकने के लिए सुनिश्चित करें कि आपके container dimensions logical properties इस्तेमाल करके set हैं।
उदाहरण: Combining Writing Modes with Grid Layouts
<style>
.layout {
display: grid;
grid-template-columns: auto 1fr;
gap: 8px;
}
.sidebar {
writing-mode: vertical-rl;
background: steelblue;
color: white;
padding: 8px;
}
.layout > div:not(.sidebar) {
background: #ddd;
padding: 8px;
}
</style>
<div class="layout">
<div class="sidebar">Vertical sidebar</div>
<div>Horizontal main content</div>
</div>Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- native, accessible writing-mode properties इस्तेमाल करने के बजाय text blocks को rotate करने के लिए transform: rotate इस्तेमाल करना।
- standard horizontal layouts के अंदर text-orientation upright set करने की कोशिश करना, जिसे नज़रअंदाज़ किया जाता है।
- यह भूल जाना कि writing modes बदलना आपके block और inline axes को automatically rotate कर देता है, जो layout dimensions तोड़ सकता है।
चैप्टर सारांश
- writing-mode property specify करती है कि text की lines horizontally या vertically laid out हैं।
- अपने page पर text blocks को vertically चलाने के लिए vertical-rl और vertical-lr इस्तेमाल करें।
- vertical layouts के अंदर character orientation को text-orientation property इस्तेमाल करके control करें, और साफ़ vertical alignments के लिए Flexbox के साथ जोड़ें।
ब्राउज़र सपोर्ट
Standard CSS writing modes और text orientation properties हर modern web browser द्वारा natively supported हैं।
🔒
Chapter Quiz — Complete all 25 topics to unlock
0/25 topics done
Complete these topics first:
- CSS Container Queries
- CSS Subgrid
- CSS Logical Properties
- CSS Logical Sizing
- CSS Writing Modes
- CSS Aspect Ratio
- CSS Object Fit
- CSS object-position
- CSS Masking
- CSS Math Functions
- CSS Motion Path
- CSS @supports
- CSS @property
- CSS At-Rules
- CSS Cursor
- CSS Will Change
- CSS User Interface
- CSS Print Styles
- CSS Pagination (Print)
- CSS Dark Mode
- CSS Accessibility
- CSS Performance
- CSS Preprocessors
- CSS Frameworks Overview
- CSS Interview Prep