[CSS3] CSS3 가로쓰기와 세로쓰기 : 일본 e-Book형태

Ebook이나, 일본어 세로 쓰기 표현들의 CSS3방식으로 표현가능합니다.

/* CSS을 이용한 세로 쓰기 전체 적용하기 */

html {

width: 100%;

writing-mode: vertical-rl;

-webkit-writing-mode: vertical-rl;

-moz-writing-mode: vertical-rl;  

-o-writing-mode: vertical-rl;  

-ms-writing-mode: vertical-rl; 

-epub-writing-mode: vertical-rl;

}

 

 

 

일본과 같은 국가는 세로쓰기 형식을 CSS3에 "writing-mode" 속성(property)을 이용해서 표현할 수 있습니다.

출처: http://www.w3.org/TR/2003/CR-css3-text-20030514/#Progression 

Name:	writing-mode
Value:	lr-tb | rl-tb | tb-rl | tb-lr
Initial:	not defined for shorthand properties
Applies to:	all elements and generated content
Inherited:	yes
Percentages:	N/A
Media:	visual
Computed value:	see individual properties

 

예제)
Here is a diagram of a horizontal flow ("writing-mode: lr-tb"):

일반적인 모드

Here is a diagram for a vertical flow used in East Asia ("writing-mode: tb-rl"):

문단이 왼쪽에 오른쪽

 

 

 And finally, here is a diagram for another flow used for Uighur and Mongolian ("writing-mode: tb-lr"):
 

문단이 오른쪽에서 왼쪽으로 정렬

In Japanese, this effect is known as "Tate-chu-yoko". In order to achieve it in an XHTML context, the Latin string should be enclosed in a span element with a horizontal flow orientation, as in:

일본어 표현들

.date {writing-mode: lr-tb;}

<span class="date">1996</span>

 

(참고)
가로쓰가와 세로쓰기: 
http://ko.wikipedia.org/wiki/%EA%B0%80%EB%A1%9C%EC%93%B0%EA%B8%B0%EC%99%80_%EC%84%B8%EB%A1%9C%EC%93%B0%EA%B8%B0

 

 

 

 

[ 추가 내용]

한글 세로쓰기 서체(폰트) http://mwultong.blogspot.com/2006/10/hangul-vertical-writing.html

보통 세로 쓰기 폰트는 @가 붙는 폰트를 사용한다.

 

HTML-CSS 세로쓰기 하는 법, 종서 http://mwultong.blogspot.com/2006/10/html-css-vertical-writing-tategaki.html

웹에서는 writing-mode:tb-rl를 사용한다.

실질적으로 IE에서만 되고, IE에서도 좀 불안정하게 됩니다.