MENU


Direction

direction
:ltr: aligns the text to the left. Default.
:rtl: aligns the text to the right.

writing-mode
:horizontal-tb: positions next horizontal line below.
:vertical-rl: positions next vertical line to the left.
:vertical-lr: positions next vertical line to the right.

text-orientation (when writing-mode is vertical-?)
:mixed: rotates characters 90° clockwise.
:upright: doesn't rotate characters.
:sideways: rotates whole line 90° clockwise.
:use-glyph-orientation: (on SVG elements only)

block-size, inline-size
(corresponds to 'width' and 'height', depending on the value of 'writing-mode')

RESETRUNFULL
<!DOCTYPE html><html><head><style>
   p{
      block-size: 300px;
      inline-size: 100px;
      border: 1px solid black;
   }
   p:nth-child(1){
      writing-mode:horizontal-tb;
      direction:rtl;
   }
   p:nth-child(2){
      writing-mode:vertical-lr;
      text-orientation: mixed;
   }
   p:nth-child(3){
      writing-mode:vertical-rl;
      text-orientation: upright;
   }
</style></head><body>
   <p> 1. How do you do? I am fine. </p>
   <p> 2. How do you do? I am fine. </p>
   <p> 3. How do you do? I am fine. </p>
</body></html>

text-combine-upright
:none: no special processing
:all: squeezes all characters within the box
:digits 3: squeezes 3 consecutive ASCII digits into the space of a single character

RESETRUNFULL
<!DOCTYPE html><html><head><style>
   p:last-child{
      writing-mode: vertical-lr;
      text-combine-upright:all;
   }
</style></head><body>
   <p>OK??<br/>no</p>
   <p>OK??<br/>no</p>
</body></html>

Unicode-bidi (bidirectional text; together with 'direction'; for DTD designers, not web designers)
:normal: does not open an embedding level.Implicit Unicode ordering is obeyed.
:embed: opens an embedding level with direction determined by 'direction'. Implicit Unicode ordering is obeyed.
:bidi-override: opens an embedding level with direction determined ONLY by 'direction'. Implicit Unicode ordering is not obeyed.
:isolate: calculates directionality without considering content.
:isolate-override: 'isolate's surrounding content and 'bidi-override's inner content.
:plaintext: calculates directionality without considering parent bidirectional state or the 'direction' property.