How to Implement Right-to-Left Vertical Text Orientation in CSS?

Implementing Right-to-Left Vertical Text Orientation in CSS

Vertical text orientation in CSS can be achieved using the writing-mode property, along with the text-orientation property to specify the desired direction. However, the text-orientation: sideways value is not supported by all browsers.

To achieve the effect seen in the provided image, where the text is vertically oriented to the right, an alternative approach can be taken using a scale transformation:

div {
  writing-mode: vertical-rl;
  /*text-orientation: sideways;*/
  transform: scale(-1);
}

This CSS will set the writing-mode to a right-to-left vertical orientation and apply a negative scale transformation (-1) to flip the text horizontally. The resulting effect will be vertically oriented text, appearing on the right side of the container.

The above is the detailed content of How to Implement Right-to-Left Vertical Text Orientation in CSS?. For more information, please follow other related articles on the PHP Chinese website!