How to Orient Text Vertically on the Right in CSS?

How to Orient Text Vertically on the Right Using CSS

Can you align text vertically on the right in CSS? For example, you might want to display a date like "Sunday" upright but positioned on the right side of an element.

Problem:

You've tried using the following code, but it doesn't reverse the orientation:

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

Solution:

The sideways value isn't supported by all browsers. Instead, you can use a scale transformation to achieve the desired effect:

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

This will flip the text horizontally, making it appear as if it's oriented vertically on the right.

Example:

<div>Sunday</div>

Output with Transformation:

|
|
| Dimanche

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