Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Text orientation : vertically oriented to the right

Tags:

css

Is it possible to get my text oriented vertically to the right with CSS, like on the image below ?

enter image description here

I tried the way below, but without being able to reverse the orientation:

div {
  writing-mode: vertical-rl;
  text-orientation: sideways;
}
<div>dimanche</div>
like image 515
DevonDahon Avatar asked Sep 21 '19 08:09

DevonDahon


2 Answers

sideways isn't supported by all the browser. Instead you can replace it with a scale transformation

div {
  writing-mode: vertical-rl;
  /*text-orientation: sideways;*/
  transform:scale(-1);
}
<div>dimanche</div>
like image 110
Temani Afif Avatar answered Sep 21 '22 16:09

Temani Afif


rotate it by -90deg using transform. If you want it in the opposite direction, rotate it by 90deg

div {
  background-color: #ccc;
  display: inline-block;
  padding: 5px;
  transform: rotate(-90deg);
  transform-origin: center bottom;
}
<div>dimanche</div>
like image 32
connexo Avatar answered Sep 20 '22 16:09

connexo