direction#

#Introduction

The direction CSS property sets the direction of text. Use rtl for languages written from right to left (like Hebrew or Arabic), and ltr for those written from left to right (like English and most other languages).

#Examples

css-apisrc/direction/App.tsx

Preview

#Syntax

direction: normal;
direction: ltr;
direction: rtl;

#Values

• normal

  Default value.

  The text-align:start will align the text according to the direction of text content and the direction of text will be inferred from the text content. All other behaviors are same as ltr.

  For example: For:

  <text> abc 1234 </text>

  The text will be left aligned. And the direction of the will be left to right.

  For:

  <text> العاشر ليونيكود 1234</text>

  The text will be right aligned. And the direction of the will be right to left.

• ltr

  Text direction will be left-to-right, the horizontal logical properties "inline-start"(e.g. margin-inline-start) will be mapped to "left", and "inline-end" will be mapped to "right".

• rtl

  Text direction will be right-to-left, the horizontal logical properties "inline-start"(e.g. margin-inline-start) will be mapped to "right", and "inline-end" will be mapped to "left".

• lynx-rtl Deprecated

  Not recommended. lynx only, designed for make ltr only pages compatible for rtl, Text direction will be right-to-left, properties "left", "inline-start" (e.g. margin-left) will be mapped to right, and "right", "inline-end" will be mapped to "left".

#Formal definition

#Formal syntax

direction = normal | ltr | rtl

#Difference with the web

• Value normal, lynx-rtl are introduced to improve page compatibility for rtl.

#Compatibility