컴퓨터 엑셀 워드 포토숍 구글어스 WINDOWS JAVASCRIPT JAVA C++

 
Previous Post 한글 붓글씨 서체(폰트) - Hangul Calligraphy FontC언어] 현재 날짜/시간/년월일,시분초 구하기 함수(오늘 날짜 시간): Current Da...본문용 .TTF 폰트(활자)/명조체 글꼴 다운로드하는 곳은? - Korean Serif F...윈도우XP용, 클리어타입 한글 폰트는? - Korean ClearType Font 글꼴자바/Java] 문자열 따옴표(큰따옴표,작은따옴표) 치환: String Replace Qu...VBScript/비베] MsgBox 줄바꿈(행갈이) 방법, 멀티라인 메시지: Visual ...C언어] 소수 계산: 소수(素數) 찾기/만들기: Prime Number Generator자바/Java] 소수 찾기/만들기 (素數): Prime Number GeneratorC언어] 문자열 비교, 대소문자 구분/구분없이 비교하기 - Compare Strings I...del.icio.us / blogspot.com 등의 한글 인코딩(Encoding)은?

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

Friday, October 06, 2006

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


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


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




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


※ 위의 세로쓰기 결과는 현재 파이어폭스에서는 보이지 않습니다.


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

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


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


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





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

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

☞ HTML/CSS/JavaScript

0 Comments:

Post a Comment

<< Home RSS 2.0 feed

구글 Google 에서 제공하는 무료 블로그 서비스인 블로거 Blogger 의 인터넷 주소는 www.blogger.com 입니다. Blogger 에 블로그를 만들면, blogspot.com 이라는 주소에 블로그가 생성됩니다.
블로그를 직접 방문하지 않고도 최신 게시물을 구독하려면 RSS 2.0 feed 주소를 리더기에 등록하시면 됩니다.
Categories
Previous Posts
Monthly Archives
Top