Text Orientation

These properties set the orientation of text.

CSS Properties

direction

Sets the direction of text (and other elements).

• ltr — texts and other elements flow left-to-right
• rtl — texts and other elements flow right-to-left

writing-mode

Sets how line-of-text flows.

• horizontal-tb — line flows horizontally; new lines are added top-to-bottom
• vertical-rl — line flows vertically; new lines are added right-to-left
• vertical-lr — line flows vertically; new lines are added left-to-right

text-orientation

Sets how characters are oriented within the line. (Only applicable for vertical writing.)

• mixed — vertical scripts flow naturally; horizontal scripts are rotated upright (default)
• upright — everything is upright

text-combine-upright

Groups the combination of characters into the space of a single character. (Only applicable for vertical writing.)

Specify none or all.

<div id="text-combine-upright-example">
  平成<span>20</span>年<span>4</span>月<span>16</span>日
</div>

#text-combine-upright-example {
  writing-mode: vertical-rl;
}
#text-combine-upright-example span {
  text-combine-upright: all;
  color: red;
}

References

• direction (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/direction
• writing-mode (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
• text-orientation (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation
• text-combine-upright (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/text-combine-upright