CSS writing modes
The CSS writing modes module defines support for various international writing modes and their combinations, including left-to-right and right-to-left text ordering as well as horizontal and vertical orientations.
A writing mode in CSS is determined by the writing-mode, direction, and text-orientation properties defined in this module. It is defined primarily in terms of its inline base direction and block flow direction.
Some horizontal languages are left-to-right, including Latin and Indic scripts. Other horizontal languages are written right-to-left, including Hebrew and Arabic scripts. Sometimes text needs to be bidirectional, such as when mixing left-to-right and right-to-left scripts. Some languages can be written with a vertical orientation, for example, Chinese, Japanese, and Korean (CJK) scripts.
The CSS writing module addresses the orientations of all writing modes. Other modules, such as the CSS ruby layout module, provide rendering models and formatting controls related to the display text annotations.
Reference
>Properties
Glossary and terms
Guides
- Creating vertical form controls
-
The article explains how to use the CSS
writing-modeanddirectionproperties to create and configure vertical form controls. - Introduction to writing mode systems
-
A brief overview of writing mode systems and their directionalities.
Related concepts
CSS text module
hanging-punctuationhyphensletter-spacingline-breakoverflow-wraptext-aligntext-align-lasttext-indenttext-justifyword-breakword-spacing
CSS inline layout module
alignment-baselinedominant-baselineline-heighttext-box-edgetext-box-trimtext-boxshorthand<text-edge>
CSS logical properties and values module
CSS display module
glyph-orientation-horizontalDeprecatedglyph-orientation-verticalDeprecatedwriting-mode
- Internationalization guide
Intlobject
Specifications
| Specification |
|---|
| CSS Writing Modes Level 4> |
| CSS Writing Modes Level 3> |
See also
- CSS fonts module
- CSS ruby layout module
- CSS text decoration module
- CSS counter styles module
- CSS lists module
- CSS containment module:
contain-intrinsic-block-sizeandcontain-intrinsic-inline-size - CSS overflow module:
overflow-blockandoverflow-inline - CSS overscroll behavior module:
overscroll-behavior-blockandoverscroll-behavior-inline