Friday, October 06, 2006

HTML-CSS] 세로쓰기 하는 법, 종서(縱書) Vertical Writing, Tategaki, writing-mode:tb-rl

인터넷 웹페이지에, 한글/일본어/중국어 세로쓰기를 할 수 있나요?

예, writing-mode:tb-rl; 이라는 CSS 속성을 사용하여 할 수 있습니다. 현재 IE에서만 되고, 파이어폭스에서는 되지 않습니다. 그리고 IE에서도 좀 불안정하게 되더군요.

세로 쓰기 코드 예제:

<div style="writing-mode:tb-rl;">친구의 이야기를 다 들었을 때 나에게는, 친구의 의도와 상관 없이, 거대한 암흑의 이미지가 떠올라 있었다. 다른 친구들은 그 친구의 이야기를 거의 듣지 않은 듯싶었다. 왜냐하면 토요일 오후였기 때문이다. 그러나 나에게는 친구의 이야기가 화창한 토요일 오후와 대비되어 더욱 강렬하게 다가왔었다. 무엇보다도 친구의 들뜨고 밝은 표정이 깊은 인상을 남겼다.</div>

세로 쓰기 결과:

친구의 이야기를 다 들었을 때 나에게는, 친구의 의도와 상관 없이, 거대한 암흑의 이미지가 떠올라 있었다. 다른 친구들은 그 친구의 이야기를 거의 듣지 않은 듯싶었다. 왜냐하면 토요일 오후였기 때문이다. 그러나 나에게는 친구의 이야기가 화창한 토요일 오후와 대비되어 더욱 강렬하게 다가왔었다. 무엇보다도 친구의 들뜨고 밝은 표정이 깊은 인상을 남겼다.

※ 위의 세로쓰기 결과는 현재 파이어폭스에서는 보이지 않습니다. (2023-12-15 업데이트: 요즘의 파이어폭스에서는 세로쓰기가 됩니다.)

세로쓰기 모드가 되면, 기존의 각종 CSS 속성들이 다르게 작동하기에, 좀 골치가 아프더군요.

만약 글씨 방향이 이상하게 뒤집어진다면,
style="font:12pt '굴림'; writing-mode:tb-rl;"
이렇게 폰트까지 직접 지정해 보시기 바랍니다.

세로쓰기 구역의 수직 길이를 지정하려면
height:10em;
이런 height 속성을 삽입합니다.

웹페이지 전체를 세로쓰기로 하면 더더욱 골치아프게 됩니다. 되도록 부분적인 세로쓰기가 좋습니다.

업데이트:
writing-mode 속성은 웹표준이 아니라 Microsoft extension 입니다. 그렇지만 W3C 문서에도 writing-mode 에 대한 언급이 있더군요 -_-?

그리고 Internet Explorer 7 이상에서는 body 에, 즉 웹페이지 전체에는 세로쓰기를 할 수 없는 모양입니다.

tag: html

HTML | CSS | 자바스크립트 JavaScript

0 Comments: