How to Achieve Vertical Right-Side Text Orientation in CSS?

CSS Text Orientation: Achieving Vertical Right-Side Orientation

In CSS, text orientation can be manipulated using the writing-mode and text-orientation properties. To achieve vertically oriented text that faces right, like an image you may have seen, requires a combination of these properties. However, it's worth noting that text-orientation is not universally supported across browsers.

Original Attempted Code:

div {
  writing-mode: vertical-rl;
  text-orientation: sideways;
}

Solution with Transformation:

div {
  writing-mode: vertical-rl;
  transform: scale(-1);
}

The original code attempts to use sideways. However, for wider browser compatibility, you can substitute it with a scale transformation. By employing the transform: scale(-1) rule, the text will be flipped horizontally, reversing its orientation and effectively creating a right-side vertical text alignment.

HTML:

<div>dimanche</div>

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