소개
The writing-mode속성은 비라틴계열언어들(일본어, 아랍어등)과 같은 텍스트 레이아웃을 가능하게 해준다.
이 속성의 세가지 목표
- 개발자들이 결과를 예상할 수 있도록 하기 위해
- 적절하게 맞는 크기와 같은 상대적으로 새로운 CSS 개념을 정리하기 위해
- CSS3 Text Layout Module을 더 제공하기 위해
이 문서는 새로운 이행법과 시작하고자 하는 시험들의 기본적인 것들을 통하여 작업하고있다.
기본적인 속성과 값들
CSS3 Text Layout의 정으로서 The writing-mode속성은 간단하게 'direction'그리고 'block-progression'속성으로
되어있다. 'direction'속성은 라인 흐름의 특징으로 생각되어질 수 있다.
'block-progression'속성은 라인 흐름의 방향으로서 생각되어질 수 있다.
다음의 테이블 내용으로서 8가지 가능한 값들을 볼 수 있다.
writing-mode direction block-progression Common Usage:
lr-tb ltr Tb Latin-based, Greek, Cyrillic writing
systems (and many others)
rl-tb rtl Tb Arabic, Hebrew writing systems
tb-rl ltr Rl East Asian writing systems in
vertical mode
bt-rl rtl Rl Arabic script block quote embedded in
East Asian vertical text
tb-lr ltr Lr Mongolian script writing system
bt-lr rtl Lr Arabic script block quote embedded in
Mongolian script document
lr-bt ltr Bt None
rl-bt rtl Bt None
vertical text layout을 이해하기 위하여 width,height(는 문맥의 기본적인것을 변경할수 있다)는 것에
동의하는것이 중요하다.
우리는 width와 height를 물리적 속성으로 간주한다.
IE에서 width는 항상 수평적이고 height는 항상 수직적이다. 게다가 left, top, right, bottom
물리적인것으로 고려된다.
writing-mode와 vertical text layout을 이해하는 가장 좋은 방법은 예제를 통해서이다.
다음의 예를 보자
1. Block dimension
vertical sizing 알고리즘은 width와 height의 계산법을 교환한다. 이 알고리즘은 수평 레이아웃의
너비(혹은 높이)에 사용되어졌다.
다음의 예를 보자
여기 너비와 높이값이 없는 두개의 div엘레멘트로 정의되어져 있다. 첫번째는 parent body와 병렬화 되어
있고, 두번째는 writing-mode를 tb-lr로 설정했을때 지각으로 되어있다.
첫번째 div의 너비는 viewport만큼 넓고, 높이는 내용만큼 길어졌다. 이것이 일반적인 css의 규칙이다.
두번째 div는 너비와 높이를 교환했을때와 정확하게 유사하다. 높이는 viewport만큼 길어졌고, 너비는
내용만큼 넓어졌다.
여기서 viewport는 예제로 사용되어 진것이지만, body's height가 명시되어져 있다면 그 값은
auto height값과 같이 예상되어 계산되어질 것이다.
다음의 예제는 더 흥미롭다. 두번째 직각의 div에 또 하나의 div를 더하는것이다. 그리고 이것은
상대적인 사이즈가 되었다.
부모노드(body)의 block흐름이 top to bottom이기때문에 마지막 block은 이전것보다 아래에 나온다.
엘레멘트가 block 속성으로 지속될 경우에는 writing-mode가 엘레멘트에 영향을 준다고 가정 할 수 있다.
(다른 조건에서는 똑같은 결과가 나오지는 않는다.)
body에 LR값을주고 block 속성으로 변경시킨다면 엘레멘트는 옆으로 나올것이다.
그러나 body가 수평으로 overflow한다면 엘레멘트의 writing direction에 의해 영향을 받을 것이다.
이럴때 HTML엘레멘트는 LR-TB이다. 그러므로 overflow는 내용의 시작을 숨기고 오른쪽으로 나올것이다.
대부분의 사용자들은 원래 지점(내용의 첫번재 문장이 나타나는)원래 지점을 예상할것이다.
이것은 overflow를 신경쓰지않고 보이는걸 예상하는 것이다.
위의 내용은 매우 미묘하지만 중요한 내용이다.
overflow는 left and top(LR-TB방향으로 추정한다)으로 스크롤을 사용할 수 없고 clip-able area이 아니다.
overflow in vertical layout
수직 레이아웃 overflow를 다루는 것은 논쟁의 여지가 있다. IE8 스크롤바 위치는 overflow위치에 따른다.
내용이 엘레멘트 왼쪽으로 넘친다면 수직 스크롤바는 왼쪽사이드로 놓여질것이다.
또다른 흥미로운 상황은 엘리멘트가 window보다 넓을 경우 viewport의 스크롤바를 강제로 보여준다.
텍스트의 시작은 스크린 바깥이고 사용자는 오른쪽 스크롤바를 봐야만 할 것 이다.
게다가 수직 스크롤바는 사용자가 오른쪽으로 스크롤을 움직인 후에 접근할 수 없다.
이것은 이상하게 보일것이지만 예상되었던 결과이다. parent(body)방향이 LR-TB이기때문이다.
레이아웃 방식을 혼용하여 개발할때 overflow의 영향을 고려하여야한다.
vertical layout과 tables
수직 테이블의 경우 rows는 vertical이고 columns는 horizontal이 된다. 다음과 같이 마크업을 하면
<body writing-mode=”??-??”>
ABCDEF
<table>
<tr>
<td> 1 </td> <td> 2 </td> <td> 3 </td>
</tr>
<tr>
<td> 4 </td> <td> 5 </td> <td> 6 </td>
</tr>
<tr>
<td> 7 </td> <td> 8 </td> <td> 9 </td>
</tr>
</table>
</body>
이것들은 모든 8가지 모드의 결과이다.
table sizing은 box sizing과 같은 원리와 같습니다. 너비와 높이 계산은 교환된다.
각 셀의 너비/columns 너비 / 테이블 너비계산 알고리즘은 모든 높이값을 사용한다.
각 셀의 높이/row 높이/테이블 높이 계산 알고리즘들은 모든 너비 값을 사용한다.
padding, margin and percentage values
대부분 CSS로 웹사이트를 만드는 사람들은 margin-collapsing으로 시간을 허비하고 있다.
디자인과 다양한 writing directions을 실행하는것에 대하여 margin-collapsing을 복잡하게 추가하여 사용하는것을
최소화 하는것이 웹사이트를 만드는 사람들의 목표이다. 본직적으로 margin-collapse사용은 CSS2.1-8.3.1의 규칙과
같다. 다양한 margin의 사용은 block-progression 방향일때 통합되어진다.
방향의 직각 변화(수평에서 내부수직으로)일어난다, 엘레멘트의 방향 변화는 Block Formatting Context로 된다.
둘러싸는 엘레멘트들의 마진 없이 병합되어 질 수 있다. 다음 예제를 봐보면 된다.
container에 보더값을 주지 않고 둘러쌓여 있는 블럭엘레멘트들이 container의 마진값들을 병합시키지 않았다.
패딩과 마진의 percentage 값은 기본적으로 논리적인 너비값에 기초되어 계산되어 진다.
부모 엘레멘트에서 수직이거나 높이값이 계산되어 진다거나 부모 엘레멘트가 수직
block-progression이라면 너비는 계산되어진것이다.
-참고 margin-collapsing (마진통합)
★ 인접(동등한)한 블록레벨 엘리먼트의 margin-bottom과 margin-top 간의 일어나는 현상.
1.큰값 쪽으로 접혀들어간다.
2. 값이 동일한 경우: bottom(위의 엘리먼트의)쪽의 값에 접혀 들어가서 통합된다.
3. P 엘리먼트 간의 간격을 유지하는 원리를 생각하면 좀 더 쉽게 이해할 수 있다.
※ 마진값은 음수값을 가질 수 있다. (cf. 패딩값은 최소값이 0이고, 음수값을 가질 수 없다.)
- 부모 자식관계의 엘리먼트의 경우에도 collapsing margin이 발생한다.
1. 마진통합현상에서 벗어나려면: border, padding 값을 적용하거나, 부모엘리먼트에 컨텐츠를 넣으면 된다.
- 자식이 인라인엘리먼트인 경우 : collapsing margin은 일어나지 않는다.
이유: css boxmodel의 padding-top, padding-bottom, margin-top, margin-bottom 값이 구현되지 않기 때문에
★ CSS 작성순서 - 1. 웹을 만들 때 항상 적용하게 되는 속성과 값을 미리 정의한다.(초기화한다)
- 2. /* Layout */
- 3. body 안에 마크업된 순서대로 차근차근 작성한다.
HTML마크업은 중요한 컨텐츠가 먼저 마크업되어야 한다.
http://blogs.msdn.com/ie/archive/2009/05/29/the-css-corner-writing-mode.aspx
마진통합 참고자료 - http://frieze.tistory.com/7?srchid=BR1http%3A%2F%2Ffrieze.tistory.com%2F7
Block Formatting Context등(CSS Layout Formatting) 참고 자료 -
http://cafe.naver.com/javaserverfaces.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=17
최근 덧글