Animation How to - Rotate to create vertical text








Question

We would like to know how to rotate to create vertical text.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
h1 {<!--from  ww w  .  ja v  a 2  s.  com-->
  -webkit-text-emphasis: triangle green;
  -moz-text-emphasis: triangle green;
  -ms-text-emphasis: triangle green;
  text-emphasis: triangle green;
}

#over {
  -webkit-text-emphasis-position: over;
}

#under {
  -webkit-text-emphasis-position: under;
}

#left {
  -webkit-text-emphasis-position: left;
  -webkit-writing-mode: vertical-rl;
}

#right {
  -webkit-text-emphasis-position: right;
  -webkit-writing-mode: vertical-rl;
}
</style>
</head>
<body>
  <h1 id="over">Over</h1>
  <h1 id="under">Under</h1>
  <h1 id="left">Left</h1>
  <h1 id="right">Right</h1>
</body>
</html>

The code above is rendered as follows: