调整文字方向

<div class="poem">
  <h2>江南逢李龟年</h2>
  <div class=author>
    <span>杜甫</span>
    <span class="year">713</span>
    <span class="to">~</span>
    <span class="year">741</span>
  </div>
  <p>岐王宅里寻常见</p>
  <p>崔九堂前几度闻</p>
  <p>正是江南好风景</p>
  <p>落花时节又逢君</p>
</div>

body{
  background-color: #333;
  color: #fff;
}
.poem{
  font-size: 1.4em;
  /* 垂直的从右向左 */
  writing-mode: vertical-rl;
}
.author{
  color: #aaa;
  font-size: 0.8em;
  /* 使用逻辑方向(它的好处在于可以适配不同的布局),
     下面属性表示离块盒的起始方向margin */
  margin-block-start: -30px;
}
.year{
  /* 表示这个元素里边它的文字是组合到一起的 */
  text-combine-upright:all;
}