css writing-mode 세로쓰기

1 minute read

css writing-mode

세로쓰기 writing-mode:vertical-lr 

<tbody>&lt;tr&gt;&amp;lt;th style="border: 1px solid black; padding: 3px; background-color: lightgray;"&amp;gt;Value&amp;lt;/th&amp;gt;&amp;lt;th style="border: 1px solid black; padding: 3px; background-color: lightgray;"&amp;gt;Vertical script&amp;lt;/th&amp;gt;&amp;lt;th style="border: 1px solid black; padding: 3px; background-color: lightgray;"&amp;gt;Horizontal script&amp;lt;/th&amp;gt;&amp;lt;th style="border: 1px solid black; padding: 3px; background-color: lightgray;"&amp;gt;Mixed script&amp;lt;/th&amp;gt;&lt;/tr&gt;&lt;tr&gt;&amp;lt;td style="border: 1px solid black; padding: 3px;"&amp;gt;**horizontal-tb**&amp;lt;/td&amp;gt;&amp;lt;td class="example Text1" style="border: 1px solid black; padding: 3px; height: 75px; width: 75px; writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb;"&amp;gt;我家没有电脑。&amp;lt;/td&amp;gt;&amp;lt;td class="example Text1" style="border: 1px solid black; padding: 3px; height: 75px; width: 75px; writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb;"&amp;gt;Example text&amp;lt;/td&amp;gt;&amp;lt;td class="example Text1" style="border: 1px solid black; padding: 3px; height: 75px; width: 75px; writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb;"&amp;gt;1994年に至っては&amp;lt;/td&amp;gt;&lt;/tr&gt;&lt;tr&gt;&amp;lt;td style="border: 1px solid black; padding: 3px;"&amp;gt;**vertical-lr &amp;amp;#xD; **왼쪽-&amp;amp;amp;gt;오른쪽&amp;lt;/td&amp;gt;&amp;lt;td class="example Text2" style="border: 1px solid black; padding: 3px; height: 75px; width: 75px; writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr;"&amp;gt;我家没有电脑。&amp;lt;/td&amp;gt;&amp;lt;td class="example Text2" style="border: 1px solid black; padding: 3px; height: 75px; width: 75px; writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr;"&amp;gt;Example text&amp;lt;/td&amp;gt;&amp;lt;td class="example Text2" style="border: 1px solid black; padding: 3px; height: 75px; width: 75px; writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr;"&amp;gt;1994年に至っては&amp;lt;/td&amp;gt;&lt;/tr&gt;&lt;tr&gt;&amp;lt;td style="border: 1px solid black; padding: 3px;"&amp;gt;**vertical-rl &amp;amp;#xD; **오른쪽-&amp;amp;amp;gt;왼쪽&amp;lt;/td&amp;gt;&amp;lt;td class="example Text3" style="border: 1px solid black; padding: 3px; height: 75px; width: 75px; writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl;"&amp;gt;我家没有电脑。&amp;lt;/td&amp;gt;&amp;lt;td class="example Text3" style="border: 1px solid black; padding: 3px; height: 75px; width: 75px; writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl;"&amp;gt;Example text&amp;lt;/td&amp;gt;&amp;lt;td class="example Text3" style="border: 1px solid black; padding: 3px; height: 75px; width: 75px; writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl;"&amp;gt;1994年に至っては&amp;lt;/td&amp;gt;&lt;/tr&gt;</tbody>

위 테이블 값 말고도 추가적인 설정 값이 있다.

이게 안될 경우 transform: rotate(90deg);  를 써야하는데, text 기준이 아니라 node기준이라서 영역 전부가 90도 회전한다.

추가로 text-orientation 로 글자마다의 회전도 제어할 수 있다. 



🔗original-link

Updated: