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 {{cssxref("writing-mode")}} , {{cssxref("direction")}} , and {{cssxref("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

• {{cssxref("direction")}} 
• {{cssxref("glyph-orientation-vertical")}} 
• {{cssxref("text-combine-upright")}} 
• {{cssxref("text-orientation")}} 
• {{cssxref("unicode-bidi")}} 
• {{cssxref("writing-mode")}} 

Glossary and terms

• {{glossary("/Baseline/Typography", "Baseline")}} 
• {{Glossary("Internationalization")}} 
• {{glossary("Localization")}} 
• {{glossary("Leading")}} 

Guides

• Creating vertical form controls
  • : The article explains how to use the CSS {{cssxref("writing-mode")}}  and {{cssxref("direction")}}  properties 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

• {{cssxref("hanging-punctuation")}} 
• {{cssxref("hyphens")}} 
• {{cssxref("letter-spacing")}} 
• {{cssxref("line-break")}} 
• {{cssxref("overflow-wrap")}} 
• {{cssxref("text-align")}} 
• {{cssxref("text-align-last")}} 
• {{cssxref("text-indent")}} 
• {{cssxref("text-justify")}} 
• {{cssxref("word-break")}} 
• {{cssxref("word-spacing")}} 

CSS inline layout module

• {{cssxref("alignment-baseline")}} 
• {{cssxref("dominant-baseline")}} 
• {{cssxref("line-height")}} 
• {{cssxref("text-box-edge")}} 
• {{cssxref("text-box-trim")}} 
• {{cssxref("text-box")}}  shorthand
• {{cssxref("text-edge")}} 

CSS logical properties and values module

• {{glossary("Flow relative values")}} 
• {{glossary("Inset properties")}} 
• {{glossary("Logical properties")}} 
• {{glossary("Physical properties")}} 

CSS display module

• {{cssxref("display")}} 

• {{CSSxRef("<display-internal>")}} 

• Visual formatting model

CSS generated content

• {{CSSxRef("quotes")}} 

SVG

• {{SVGAttr("glyph-orientation-horizontal")}}  {{deprecated_inline}} 
• {{SVGAttr("glyph-orientation-vertical")}}  {{deprecated_inline}} 
• {{SVGAttr("writing-mode")}} 

HTML

• {{htmlelement("bdo")}} 
• {{htmlelement("blockquote")}} 
• {{htmlelement("q")}} 
• {{htmlelement("ruby")}} 
• {{htmlelement("sub")}} 
• {{htmlelement("sup")}} 
• dir attribute
• lang attribute

JavaScript

• Internationalization guide
• Intl object

Specifications

{{Specifications}} 

See also

• CSS fonts module
• CSS ruby layout module
• CSS text decoration module
• CSS counter styles module
• CSS lists module
• CSS containment module: {{CSSxRef("contain-intrinsic-block-size")}}  and {{CSSxRef("contain-intrinsic-inline-size")}} 
• CSS overflow module: {{CSSxRef("overflow-block")}}  and {{CSSxRef("overflow-inline")}} 
• CSS overscroll behavior module: {{CSSxRef("overscroll-behavior-block")}}  and {{CSSxRef("overscroll-behavior-inline")}}