CSS에서 구현

CSS Writing Modes Level 3

다양한 언어 표기법을 지원하는 사양.writing-mode 속성에 세로 쓰기를 지정할 수 있습니다.

writing-mode: tb-rl; /* IE独自仕様 */
writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-o-writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;

주의점

IE5.5 이후(단, 프로퍼티치가 독자)

Google 크롬, Safari는 필수 공급 업체 접두사

text-decoration:underline가 왼쪽으로 당겨 일반 방선이되지 않습니다

※ Opera 미확인

문제점

Firefox에서는 아직 구현되지 않았습니다

가로 너비 고정 블록 요소는 텍스트 양에 따라 적절한 세로 너비를 보장하지 않습니다

두 번째는 이해하기 어렵기 때문에 보충하여 설명한다.
통상의 웹 사이트에서는, 블록 요소의 가로폭은 미리 정해져 있는 것이 대부분이라고 생각한다. 소위 반응형 디자인이라도 브라우저 윈도우의 가로폭 이상으로는 하지 않을 것이다.
그러나 세로 쓰기 텍스트 량이 충분히 많으면 부모 블록 요소의 왼쪽으로 튀어 나옵니다. (아래 그림 왼쪽)

좌단까지 행이 메워진 경우는, 블록의 우단으로 돌아가 2단째가 시작된다고 하는 것이, 일반적으로 기대되는 거동일 것이라고 생각한다. 그러기 위해서는 column-width 프로퍼티를 사용해 단편을 지정해 할 필요가 있어 이것에 의해 확실히 좌단까지 도달한 다음의 행은 2단째로서 우단으로부터 개시되게 된다. (아래 그림 중앙)
하지만, 부모 블록의 높이는 단조된 텍스트 전체의 종폭에 추종해 주지 않는다. 그 때문에, 텍스트를 격납한 블록의 다음의 요소가, 텍스트와 겹치거나 쓸데없는 공백을 취해 배치되는 등, 잘 레이아웃되지 않는 것이다.

그렇다면 height:auto로 설정하면 블록의 세로 너비는 내부 텍스트의 길이 또는 창 세로에 따라 달라지며 레이아웃이 어려워집니다. (아래 그림 오른쪽)



2014/02/26 문장만으로는 이해하기 어렵기 때문에 그림을 삽입했다.

JavaScript 라이브러리에서의 구현

h2v.js

일행마다, 한 문자분만의 가로폭을 가지는 세로장의 블록으로 분할해, 세로 쓰기를 구현.

루비, 단조에 대응

행의 오른쪽에 방선이 그려진다

비영리 이용이면 무료, 그렇지 않으면 유상 라이센스

단점

회전 (float)을 지원하지 않습니다

타케토리.js

writing-mode 프로퍼티가 유효한 브라우저는 CSS를 사용해,
그 이외의 브라우저는 transform:rotate 로 텍스트 전체 및 한 문자씩을 회전시켜 세로 쓰기를 구현.

Adobe Musa CC에 설치됨

루비, 단조에 대응

회전에도 대응

MIT 라이센스

단점

firefox에서 여백이 나옵니다

nehan.js

한 문자 마다 <br> 로 단락지어 구현하고 있다

루비, 단조에 대응

회전에도 대응

페이지 전환 기능이 켜짐

세로 쓰기와 가로 쓰기를 공존시켜 레이아웃 할 수 있습니다

MIT 라이센스

단점

페이지 내 검색을 할 수 없습니다

소감

텍스트량이 정해져 있어, 모든 브라우저로 세로 쓰기 표현할 수 없어도 좋다면, CSS로의 구현도 좋을지도 모르지만, 현시점에서는 라이브러리를 이용하는 것이 무난.
라이브러리를 이용하면 생각 외에 간편하게 구현할 수 있다.