개체의 내용 방향과 흐름을 반환하거나 설정한다.
![]() | Script | object.style.writingMode(v)=[sVal] |
HTML | <ELEMENT style="writing-mode:sVal;"> | |
CSS | cssSelector {writing-mode:sVal;} |
lr-tb | 디폴트이며, (left to right and top to bottom)의 약자로 개체의 내용이 수평적으로 왼쪽에서 오른쪽으로, 위에서 아래로 흐른다. 다음 수평 줄은 이전 수평 줄 바로 밑에 온다. 모든 조각들은 바로서게 위치된다. 이 배치은 알파벳 인쇄방식에 기준한다. |
tb-rl | (top to bottom and right to left)의 약자로 개체의 내용이 수직적으로 위에서 아래로, 오른쪽에서 왼쪽으로 흐른다. 다음 수직 줄은 이전 수직 줄 바로 왼쪽에 온다. 넓은 칸 조각들은 바로서게 위치되고, 넓지않은 칸 조각(좁은 라틴이나 가나(Kana) 조각으로도 알려짐)은 90° 시계방향으로 회전된다. 이 배치은 극동지역 인쇄방식에 기준한다. |
이 속성은 currentStyle에서는 읽기전용이고, 그외의 개체에서는 읽기/쓰기이며, 디폴트값은 lr-tb이다.
제안된 CSS(Cascading Style Sheets) 애트리뷰트는 다음의 예외를 제외하고는 모두 상속된다. BUTTON, CAPTION, INPUT, INPUT type=button, INPUT type=file, INPUT type=password, INPUT type=reset, INPUT type=submit, INPUT type=text, ISINDEX, OPTION, TEXTAREA.
이 속성은 누적되지 않는다. 예를들어 모체 엘레멘트가 writingMode 속성값 tb-rl을 가지고, 자식 엘레멘트의 writingMode 속성값이 tb-rl이면 자식 개체는 회전하지 않는다.
writingMode 속성이 모체와 다른경우에는 각 엘레멘트는 자체의 배치을 갖는다. 자식 엘레멘트에 지정된 배치 흐름이 변경되면 필요한 논리적 최대 높이(자식의 좌표 체계에서)는 모체의 좌표 체계에서 유용한 공간 크기(너비)에 의하여 결정된다. 이 정보에 의하여 논리적 너비(자식의 좌표 체계에서)도 최대 논리적 높이 요구에 맞게 산출된다. 자식개체에 의하여 필요한 공간 크이에따라, 엘레멘트의 실제적인 논리적 높이는 최대 논리 높이 필요량보다 작을 수 있다.
writingMode 속성값이 다른 엘레멘트들을 사용하는 경우, 각 개체에 고정된 수치를 지정하므로서 이들 엘레멘트들의 배치에 대한 제어를 쉽게 할 수 있다.
개체 | script | CSS | IE 버전 |
---|---|---|---|
a | a.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
acronym | acronym.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
address | address.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
b | b.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
big | big.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
blockQuote | blockQuote.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
button | button.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
caption | caption.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
center | center.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
cite | cite.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
code | code.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
currentStyle | [sVal=]objectcurrentStyle.writingMode | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
custom | custom.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
dd | dd.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
del | del.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
dfn | dfn.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
dir | dir.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
div | div.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
dl | dl.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
dt | dt.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
em | em.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
fieldSet | fieldSet.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
font | font.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
form | form.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
hn | hn.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
hr | hr.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
i | i.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
input | input.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
button | button.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
FileUpload | FileUpload.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
password | password.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
reset | reset.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
submit | submit.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
text | text.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
ins | ins.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
isIndex | isIndex.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
kbd | kbd.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
label | label.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
legend | legend.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
li | li.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
marquee | marquee.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
menu | menu.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
ol | ol.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
Option | Option.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
p | p.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
plainText | plainText.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
pre | pre.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
q | q.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
rt | rt.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
ruby | ruby.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
runtimeStyle | objectruntimeStyle.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
s | s.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
samp | samp.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
small | small.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
span | span.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
strike | strike.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
strong | strong.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
style | style.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
sub | sub.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
sup | sup.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
td | td.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
textArea | textArea.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
th | th.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
tt | tt.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
u | u.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
ul | ul.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
var | var.style.writingMode[=sVal] | cssSelector{writing-mode:sVal} | IE5.5(win32,ce) |
이 속성은 CSS(Cascading Style Sheets)의 부분에 포함시킬 것이 제안되었다.
![]() | writingMode 스타일속성⇒ | ![]() | ![]() ![]() ![]() |
모체 용기(청색 부분)의 writing-mode 애트리뷰트는 tb-rl로 설정되고 자식들이 lr-tb로 설정되었다,
모체 용기 속에서는 자식이 위에서 아래로, 우측에서 좌측으로 흘러 디스플레이 된다.
<HTML> <STYLE>.clsHoriz { writing-mode:lr-tb }</STYLE> </HEAD> <BODY> <DIV id="allContainer"> <DIV id="obj1" style="writing-mode:tb-rl;border:solid 1 blue;background-color:ffe;color:blue"> 1번 수직 텍스트<BR>1st vertical <SPAN class="clsHoriz" id="obj2" style="border:solid 1 green;color:brown">1번 수평 텍스트<BR>1st horizontal</SPAN><BR> 2번 수직 텍스트<BR>2nd vertical<BR> <SPAN style="writing-mode:lr-tb" id="obj3" style="border:solid 1 red;color:teal">2번 수평 텍스트<BR>2nd horizontal</SPAN><BR> 3번 수직 텍스트<BR>3rd vertical <SPAN class="clsHoriz" id="obj4" style="border:solid 1 violet;color:green">3번 수평 텍스트<BR>3rd horizontal</SPAN> </DIV> </DIV> <SCRIPT> str='<TABLE width=700 border=1>'; str+='<TR><TH>i</TH><TH>.nodeName</TH><TH>.id</TH><TH>.style.writingMode</TH><TH>.innerText</TH></TR>'; coll=allContainer.all; for (i=0;i< coll.length;i++){ if (coll[i].nodeName=='BR') continue; str+='<TR><TD>'+i+'</TD><TD>'+coll[i].nodeName+'</TD>'; str+='<TD>'+coll[i].id+'</TD>'; str+='<TD>'+coll[i].style.writingMode+'</TD>'; str+='<TD style="font-size:90%">'+coll[i].innerText+'</TD></TR>'; } str+='</TABLE>'; document.write(str); </SCRIPT> <DIV id=showA></DIV> </BODY> </HTML>
![]() | writingMode 스타일속성 | ⇒ | ![]() ![]() |
최종 수정: 07/04/2025 03:37:24 | ![]() All right reserved | 비정상적인 방식으로 프레임없이 페이지에 접속하면 자주 오류가 발생됩니다. 오류가 나면 정상적 접속으로 시도해 보세요. | http://koxo.com/lang/js/style/writingMode.html |