개체의 내용 방향과 흐름을 반환하거나 설정한다.

인수
cssSelector : (스타일 선택자)
속성을 가질수 있는 엘레멘트()나 클라스(class) 이름 혹은 인식자(id)이다.

: (속성 문자열)
스타일 속성은 개체의 내용 방향과 흐름을 나타내는 문자열이다.

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 속성값이 다른 엘레멘트들을 사용하는 경우, 각 개체에 고정된 수치를 지정하므로서 이들 엘레멘트들의 배치에 대한 제어를 쉽게 할 수 있다.

적용
개체scriptCSS IE 버전
참조

이 속성은 CSS(Cascading Style Sheets)의 부분에 포함시킬 것이 제안되었다.


1번 수직 텍스트
1st vertical 1번 수평 텍스트
1st horizontal
2번 수직 텍스트
2nd vertical
2번 수평 텍스트
2nd horizontal
3번 수직 텍스트
3rd vertical 3번 수평 텍스트
3rd horizontal

모체 용기(청색 부분)의 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>