[CSS] writing-mode: vertical-rl, vertical-lr

 

타이포그래피 디자인으로 된 포스터를 웹에 띄우게 되어서 세로로 글자를 정렬하는 방법을 찾아보던 중에 writing-mode 속성을 알게 됐다. 기본 정렬만 사용하다보니 해당 속성을 쓸 일이 없었는데, 원래 쓰고자 했던 값은 deprecated되었지만, 추후에 레퍼런스용으로 블로그에 남기기로 했다. 

 

 

Can I use에 검색해보니 2021년 12월 기준 Opera Mini만 제외하고 거의 다 쓸 수 있는데,

 

 

그중 sideways-lr, sideways-rl은 파이어폭스만 제외하고 사용할 수 없었다. 

 

<div>
  
  <ul class="alignment-rl">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
  </ul>
  
    <ul class="alignment-lr">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
  </ul>
  
  <ul class="alignment-lr">
    <li>가</li>
    <li>나</li>
    <li>다</li>
    <li>라</li>
    <li>마</li>
  </ul>
  
    <ul class="alignment-rl">
    <li>가</li>
    <li>나</li>
    <li>다</li>
    <li>라</li>
    <li>마</li>
  </ul>
</div>

.alignment-lr {
  writing-mode: vertical-lr
}

.alignment-rl {
  writing-mode: vertical-rl
}

 

대표적으로 많이 쓰이는 속성값을 적용해본 화면이다.