ContextQMD
Back to Content

CSS writing modes

files/en-us/web/css/guides/writing_modes/index.md

latest4.7 KB
Original Source

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 modes 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

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

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

Specifications

{{Specifications}}

See also