CSS 논리적 속성 및 값 모듈 1단계

1. 소개

참고: 올바른 작성 모드 소개는 [css-writing-modes-4]를 참고하세요. 이 모듈은 해당 용어에 대해 익숙하다는 것을 전제로 합니다.

서로 다른 문자 체계(문자 쓰기 시스템)는 서로 다른 방향으로 쓰이기 때문에, 다양한 작성 모드가 존재합니다: 좌에서 우, 위에서 아래; 우에서 좌, 위에서 아래; 아래에서 위, 우에서 좌; 등등. 페이지나 줄의 “시작” 같은 논리적 개념은 “줄의 위”나 “단락의 왼쪽 끝” 같은 물리적 개념과 다르게 매핑됩니다. 레이아웃의 일부 요소는 실제로는 쓰기 방향에 상대적이어서, 페이지가 다른 시스템에 맞게 번역될 때 달라질 수 있고; 그 외 요소들은 페이지의 물리적 방향에 상대적으로 고정됩니다.

예를 들어, 목록, 제목, 단락 등은 일반적으로 영어에서는 왼쪽 정렬되지만; 실제로는 시작정렬(start-aligned)입니다. 왜냐하면 아랍어에서는 같은 구조가 오른쪽 정렬되고, 다국어 문서는 두 쓰기 시스템을 모두 지원해야 하기 때문입니다.

다음 코드는 논리 구문을 사용하면 다양한 문자 체계에서도 잘 동작하는 코드를 작성할 수 있음을 보여줍니다:

<blockquote dir="auto">Quotation in English</blockquote>
<blockquote dir="auto">اقتباس في العربية</blockquote>

blockquote {
    text-align: start; /* 라틴어는 왼쪽, 아랍어는 오른쪽 정렬 */
    margin-inline-start: 0px; /* 라틴어는 왼쪽 마진, 아랍어는 오른쪽 마진 */
    border-inline-start: 5px solid gray; /* 라틴어는 왼쪽 테두리, 아랍어는 오른쪽 테두리 */
    padding-inline-start: 5px; /* 라틴어는 왼쪽 여백, 아랍어는 오른쪽 여백 */
}

문서에는 논리 속성과 물리 속성이 모두 필요할 수도 있습니다. 예를 들어 버튼에 적용된 그림자 효과는 페이지 전체에서 일관되게 유지되어야 하므로, 오프셋은 쓰기 시스템이 아니라 시각적(physical) 기준으로 결정되어야 하고, 문자의 쓰기 방향에 따라 달라지지 않아야 합니다.

CSS는 처음에 물리적 좌표만으로 제어하도록 설계됐기 때문에, 이 모듈은 텍스트 흐름 기준의 등가 속성을 도입하여 CSS 스타일 시트에서 흐름-기준 용어로 선언할 수 있도록 지원합니다. 해당 속성의 대응·계단형(cascade) 매핑, CSS2.1에 있는 것과 같은 값과 일부 신규 속성 및 값을 정의하고, 그 구문 유도 원리도 함께 설명합니다. 향후 CSS 명세는 속성과 값 정의에서 물리 좌표와 논리 좌표 모두를 제공할 것으로 예상되므로, 이 모듈은 새 CSS 기능의 흐름-기준 변형이 도입되는 것을 별도로 추적하지 않습니다.

CSS Writing Modes의 Abstract Box Terminology 섹션은 흐름-기준(flow-relative) 용어와 물리적(physical) 용어 간의 매핑 방법을 정의합니다. 이 매핑은 used values인 writing-mode, direction, text-orientation에 의존하며, flow-relative 키워드와 속성의 해석을 제어합니다.

참고: text-orientation: upright과의 상호작용 때문에, 사용된 direction 값은 계산값인 writing-mode 및 text-orientation에 따라 달라집니다.

1.1. 값 정의

이 명세는 CSS 속성 정의 규칙과 [CSS2]의 방식을, 값 정의 문법 및 [CSS-VALUES-3]과 함께 따릅니다. 여기서 정의되지 않은 값 유형은 CSS Values & Units [CSS-VALUES-3]에서 정의됩니다. 다른 CSS 모듈과 결합되면 이 값 형식들의 정의가 확장될 수 있습니다.

속성별로 정의 섹션에 명시된 값 외에도, 본 명세서의 모든 속성은 CSS 전체 키워드(CSS-wide keywords) 역시 값으로 사용할 수 있습니다. 가독성을 위하여 본문에 반복 표기하지 않았습니다.

2. 흐름-기준 값: block-start, block-end, inline-start, inline-end

많은 CSS 속성은 전통적으로 방향성 키워드(directional keyword) 값을 받아왔으며, 이들 값은 물리적(physical) (top, bottom, left, right)입니다. 이 명세는 방향성 키워드 값으로, 흐름-기준(flow-relative)인 block-start, block-end, inline-start, inline-end를 도입합니다.

속성의 효과는 1차원 또는 2차원일 수 있습니다. 맥락상 한 차원에 한정될 경우, 흐름-기준 키워드는 start와 end로 줄여 사용됩니다.

CSS2 레벨 속성들은 이곳에서 흐름-기준 방향성 키워드도 허용하도록 재정의합니다. 이러한 값은 대응하는 물리적 값 대신 사용할 수 있습니다. 여러 키워드를 받는 속성의 경우, 흐름-기준 값과 물리 값의 조합은(만일 이후 명세에서 별도 허용되지 않으면) 사용할 수 없습니다.

참고: 최신 CSS 명세서들은 대부분 흐름-기준 또는 줄-기준(line-relative) 값을 정의하거나 기존의 물리적 값을 보조할 것으로 예상됩니다. 일반적으로, 이러한 상대적 값의 매핑은 상자를 조작할 때 작성 모드가 포함된 포함 블록(containing block)을 기준으로 하고, 내용(content)에 영향을 미칠 때에는 상자 자신(box itself)을 기준으로 할 것입니다. 어쨌든 어떤 작성 모드를 사용할지 명시적으로 정의해야 합니다.

2.1. caption-side 속성의 논리 값

이 두 값은 left 및 right 값을 caption-side에서 지원하는 구현체에만 추가됩니다. left 및 right 값 자체는 줄-기준(line-relative)으로 정의됩니다.

기존 top 및 bottom 값은 관례적으로 각각 block-start 및 block-end 쪽(table)에 할당되도록 재정의됩니다.

이 속성의 매핑은 caption의 작성 모드(writing mode)와, 포함 블록(containing block) (즉, table wrapper box)를 기준으로 합니다.

2.2. float 및 clear 속성의 흐름-기준 값

이 속성들의 매핑은 요소의 작성 모드(writing mode)와, 포함 블록(containing block)을 기준으로 합니다.

참고: 이 속성들은 CSS2에서는 1차원이지만, 추후 2차원 확장이 예정되어 있으므로, 생략형이 아닌 흐름-기준 키워드를 사용합니다.

2.3. text-align 속성의 흐름-기준 값

이 값들은 [css-text-3]에서 규범적으로 정의되어 있습니다.

3. 흐름-기준 페이지 분류

CSS에서 모든 페이지는 사용자 에이전트에 의해 왼쪽 페이지 또는 오른쪽 페이지로 분류됩니다. [CSS2] 어떤 페이지가 펼침(spread)에서 첫 번째가 되는지는 페이지의 진행 방향이 좌→우(left-to-right)인지 우→좌(right-to-left)인지에 따라 달라집니다.

페이지 구분을 펼침에서 왼쪽/오른쪽이 아니라 펼침의 앞쪽(earlier) 또는 뒤쪽(later)으로 제어할 수 있도록, 이 모듈은 page-break-after 및 page-break-before 속성에 대해 다음 추가 키워드를 도입합니다 [CSS2]:

recto

펼침에서 좌→우 페이지 진행에서는 right에, 우→좌 페이지 진행에서는 left에 해당함.

verso

펼침에서 좌→우 페이지 진행에서는 left에, 우→좌 페이지 진행에서는 right에 해당함.

이 값들은 지정된 그대로 계산되며, [css-break-3]에서 추가로 정의됩니다.

작성자들은 보통 페이지 번호를 물리적 배치로 위치시키지만, 헤더 내용은 종종 펼침에서 어느 쪽이 앞쪽이냐에 따라 정해집니다. 따라서, 흐름-기준 페이지 선택자도 흐름-기준 페이지 선택을 지원하기 위해 추가됩니다:

:recto

좌→우 페이지 진행에서는 ':right', 우→좌에서는 ':left'와 같음.

:verso

좌→우 페이지 진행에서는 ':left', 우→좌에서는 ':right'와 같음.

흐름-기준 페이지 선택자는 ':left' 및 ':right' 페이지 선택자와 동일한 특이성을 가집니다.

4. 흐름-기준 박스 모델 속성

많은 서식 효과에서, 영향을 받는 축 또는 방향이 값이 아니라 속성 이름에 인코딩됩니다. 각 속성의 방향 또는 축 매핑 (흐름-기준 또는 물리적) 을 그 매핑 논리(mapping logic)라고 부릅니다. 기존에는 모든 속성이 물리적 기준으로 인코딩되어 있었으나, 이 명세서는 CSS2의 물리적 박스 모델 속성에 대응하는 흐름-기준 등가 CSS 속성을 도입합니다.

참고: 최신 CSS 명세는 대부분 흐름-기준 또는 줄-기준(line-relative) 속성을 정의하거나 기존의 물리적 속성을 보완할 것입니다.

각각의 병렬 흐름-기준 및 물리적 속성 집합 (단축 속성(shorthand)은 제외)은 박스의 다양한 면 또는 치수에 대해 등가 스타일을 설정한다는 점에서 논리 속성 그룹(logical property group)을 이룹니다. 예를 들어 padding-* 속성들은 하나의 논리 속성 그룹을, margin-* 속성들은 별도의 논리 속성 그룹을, border-*-style 속성들은 또 다른 논리 속성 그룹을 구성합니다. (각 롱핸드 속성(longhand property)은 최대 한 개의 논리 속성 그룹에만 속할 수 있습니다.)

각 논리 속성 그룹 내에서, 해당 흐름-기준 및 물리적 속성들은 요소 자신의 계산값(computed value)인 작성 모드를 기준으로 한 쌍으로 매핑됩니다. 각 속성의 지정값(specified value)은 별개이지만, 쌍을 이룬 속성들은 동일한 계산값을 공유합니다. 이 공유 값은 계단형(cascading) 시 두 속성 선언을 하나처럼 함께 계단화해서 결정합니다; 즉, 두 속성 쌍의 계산값은 CSS 계단형에서 우선순위가 더 높은 속성의 지정값에서 파생됩니다. [CSS-CASCADE-3]

이 방식은 구현체가 CSS 선언 블록 내 선언 순서를 항상 따라야 함을 요구합니다. (이전 CSS 계단형에서는 요구되지 않았음) 또한 writing-mode, direction, text-orientation이 흐름-기준 및 물리적 선언의 논리 속성 그룹을 계단화하여 계산값을 찾기 전에 반드시 먼저 계산되어야 함을 요구합니다.

p {
  margin-inline-start: 1px;
  margin-left: 2px;
  margin-inline-end: 3px;
}

[CSSOM]의 계산값 반환 API (getComputedStyle() 등)는 이러한 쌍의 각 개별 속성에 대해 동일한 값을 반환해야 합니다.

참고: 모든 흐름-기준 속성을 요소 자신의 writing-mode에 따라 물리 등가 속성으로 매핑하면 계단형(cascading) 계산이 단순해지고 작성자에게도 직관적인 모델이 됩니다. 하지만 많은 경우엔 이렇게 하면 문제가 있으며, 예: 이 논의를 참고하세요. 작성자는 요소의 writing-mode를 부모와 다르게 사용할 때 원하는 매핑 동작을 얻으려면 중첩 요소를 사용해야 할 수 있습니다.

각 속성의 상속은 부모의 해당 속성에서 이루어집니다. 예를 들어, inline-start 마진이 rtl 박스에서는 오른쪽 마진이 되더라도, 이 박스의 margin-inline-start는 부모가 ltr일 때 그 margin-inline-start 값을 상속합니다. 이때 그 값은 부모의 왼쪽 마진이기도 합니다.

별도 명시 없는 한, 논리와 물리 롱핸드를 모두 포괄하는 단축 속성(shorthand properties) (예: all 축약형) 은 물리 롱핸드를 마지막에 설정합니다. 예를 들어 all: inherit는 모든 margin 속성에 inherit를 적용하지만, 물리 롱핸드가 마지막에 설정되므로 자식의 margin은 부모의 물리 counterpart에서 상속받게 됩니다.

4.1. 논리적 높이와 논리적 너비: block-size/inline-size, min-block-size/min-inline-size, 그리고 max-block-size/max-inline-size 속성

이 속성들은 height 및 width 속성과 대응됩니다. 매핑은 요소의 writing-mode에 따라 다릅니다.

이 속성들은 min-height 및 min-width 속성과 대응됩니다. 매핑은 요소의 writing-mode에 따라 결정됩니다.

이 속성들은 max-height 및 max-width 속성과 대응됩니다. 매핑은 요소의 writing-mode에 따라 다릅니다.

4.2. 흐름-기준 마진: margin-block-start, margin-block-end, margin-inline-start, margin-inline-end 속성과 margin-block 및 margin-inline 단축 속성

이 속성들은 margin-top, margin-bottom, margin-left, margin-right 속성과 대응됩니다. 매핑은 요소의 writing-mode, direction, text-orientation에 따라 결정됩니다.

이 두 단축 속성(shorthand properties)은 margin-block-start & margin-block-end와 margin-inline-start & margin-inline-end를 각각 설정합니다. 첫 번째 값은 start 가장자리 스타일을, 두 번째 값은 end 가장자리 스타일을 나타냅니다. 하나의 값만 주어지면, start와 end 가장자리 모두에 적용됩니다.

4.3. 흐름-기준 오프셋: inset-block-start, inset-block-end, inset-inline-start, inset-inline-end 속성과 inset-block, inset-inline, inset 단축 속성

top, left, bottom, right 물리 속성, 이들과 대응하는 inset-block-start, inset-block-end, inset-inline-start, inset-inline-end 흐름-기준 속성, 그리고 inset-block, inset-inline, inset 단축 속성을 합쳐 inset 속성(inset properties)이라고 합니다.

이 속성들은 top, bottom, left, right 속성과 대응됩니다. 매핑은 요소의 writing-mode, direction, text-orientation에 따라 결정됩니다.

이 두 단축 속성(shorthand properties)은 inset-block-start & inset-block-end와 inset-inline-start & inset-inline-end를 각각 설정합니다. 첫번째 값은 start 가장자리 스타일을, 두번째 값은 end 가장자리 스타일을 나타냅니다. 하나의 값만 주어지면, start와 end 가장자리 모두에 적용됩니다.

이 단축 속성(shorthand property)은 top, right, bottom, left 속성을 설정합니다. 값들은 하위 속성(sub-properties)에 대해 margin과 동일하게 할당됩니다.

4.4. 흐름-기준 패딩: padding-block-start, padding-block-end, padding-inline-start, padding-inline-end 속성 및 padding-block, padding-inline 단축 속성

이 속성들은 padding-top, padding-bottom, padding-left, padding-right 속성과 대응됩니다. 매핑은 요소의 writing-mode, direction, text-orientation에 따라 결정됩니다.

이 두 단축 속성은 padding-block-start & padding-block-end 및 padding-inline-start & padding-inline-end를 각각 설정합니다. 첫 번째 값은 start 가장자리 스타일을, 두 번째 값은 end 가장자리 스타일을 나타냅니다. 값이 하나만 주어지면 start와 end 가장자리 모두에 적용됩니다.

4.5. 흐름-기준 테두리

4.5.1. 흐름-기준 테두리 두께: border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width 속성과 border-block-width, border-inline-width 단축 속성

이 속성들은 border-top-width, border-bottom-width, border-left-width, border-right-width 속성과 대응됩니다. 매핑은 요소의 writing-mode, direction, text-orientation에 따라 결정됩니다.

이 두 단축 속성은 border-block-start-width & border-block-end-width와 border-inline-start-width & border-inline-end-width를 각각 설정합니다. 첫 번째 값은 start 가장자리 두께, 두 번째 값은 end 가장자리 두께를 나타냅니다. 값이 하나만 주어지면 start와 end 가장자리 모두에 적용됩니다.

4.5.2. 흐름-기준 테두리 스타일: border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style 속성과 border-block-style, border-inline-style 단축 속성

이 속성들은 border-top-style, border-bottom-style, border-left-style, border-right-style 속성과 대응됩니다. 매핑은 요소의 writing-mode, direction, text-orientation에 따라 결정됩니다.

이 두 단축 속성은 border-block-start-style & border-block-end-style 및 border-inline-start-style & border-inline-end-style를 각각 설정합니다. 첫 번째 값은 start 가장자리 스타일을, 두 번째 값은 end 가장자리 스타일을 나타냅니다. 값이 하나만 주어지면 start와 end 가장자리 모두에 적용됩니다.

4.5.3. 흐름-기준 테두리 색상: border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color 속성 및 border-block-color, border-inline-color 단축 속성

이 속성들은 border-top-color, border-bottom-color, border-left-color, border-right-color 속성과 대응됩니다. 매핑은 요소의 writing-mode, direction, text-orientation에 따라 결정됩니다.

이 두 단축 속성은 border-block-start-color & border-block-end-color 및 border-inline-start-color & border-inline-end-color를 각각 설정합니다. 첫 번째 값은 start 가장자리 색상을, 두 번째 값은 end 가장자리 색상을 나타냅니다. 하나의 값만 주어지면 start와 end 가장자리 모두에 적용됩니다.

4.5.4. 흐름-기준 테두리 단축 속성: border-block-start, border-block-end, border-inline-start, border-inline-end 속성과 border-block, border-inline 단축 속성

이 속성들은 border-top, border-bottom, border-left, border-right 속성과 대응됩니다. 매핑은 요소의 writing-mode, direction, text-orientation에 따라 결정됩니다.

이 두 단축 속성은 border-block-start & border-block-end 또는 border-inline-start & border-inline-end를 각각 동일한 스타일로 설정합니다.

4.6. 흐름-기준 모서리 반경: border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius 속성

이 속성들은 border-top-left-radius, border-bottom-left-radius, border-top-right-radius, border-bottom-right-radius 속성과 대응됩니다. 매핑은 요소의 writing-mode, direction, text-orientation에 따라 달라지며, 첫 번째 start/end는 block 축 방향 측면을, 두 번째는 inline 축 방향 측면을 지정합니다 (즉, ‘border-block-inline-radius’ 패턴과 동일).

4.7. 4방향 단축 속성: margin, padding, border-width, border-style, border-color 단축 속성

margin, padding, border 단축 속성은 기본적으로 물리 속성에 값을 설정합니다. 하지만 작성자는 속성 값의 맨 앞에 logical 키워드를 명시하여, 값이 물리 속성이 아니라 흐름-기준 속성에 매핑됨을 지정할 수 있습니다.

이 기능의 제안 문법은 논의 중이며, 여기 설명된 방식에서 거의 확실히 변경될 것입니다. 본 절은 대안 논의를 촉진하고, 영향 받는 속성을 문서화하며, 궁극적으로 선택되는 구문적 전환(syntactic switch)이 해석에 미칠 것으로 예상되는 영향에 대해 명시하기 위해 초안에 포함되어 있습니다.

아래의 [CSS2] 단축 속성들은 logical 키워드를 허용합니다:

• inset
• margin
• padding
• border-width
• border-style
• border-color
• scroll-padding
• scroll-margin

이들 속성의 문법은 아래를

<value-type>{1,4}

다음으로 대체한 것과 사실상 동일합니다.

logical? <value-type>{1,4}

값에 logical 키워드가 있을 때, 그 뒤의 값은 아래와 같이 흐름-기준 롱핸드에 대응됩니다:

• 값이 1개면 4방향 흐름-기준 롱핸드 모두에 적용
• 값이 2개면 첫 값은 block-start와 block-end, 두 번째 값은 inline-start와 inline-end에 적용
• 값이 3개면 첫 값은 block-start, 두 번째 값은 inline-start와 inline-end, 세 번째 값은 block-end에 적용
• 값이 4개면 순서대로 block-start, inline-start, block-end, inline-end에 적용

blockquote {
  margin: logical 1em 2em 3em 4em;
}
blockquote {
  margin-block-start:  1em;
  margin-inline-start: 2em;
  margin-block-end:    3em;
  margin-inline-end:   4em;
}

5. 감사의 말

Cameron McCormack, David Baron, Oriol Brufau, Shinyu Murakami, Tab Atkins

6. 변경 기록

2018년 8월 27일 작업 초안 이후의 변경 사항:

• 흐름-기준 속성의 상속을 정의함.
• resize의 흐름-기준 값을 [CSS-UI-4]로 이동.
• 명세의 많은 부분을 명확하게 에디터리얼 개정.
• 매핑 의존성 목록에 text-orientation 추가.
• border-inline과 border-block이 영향을 받는 양쪽에 동일한 값을 설정한다는 것을 명확히 함.
• border-radius의 매핑을 명확히 함.
• 루비 베이스 컨테이너, 루비 어노테이션 컨테이너에서 제외되도록 적용되는 요소의 물리적 margin, border, padding 속성을 명시.
• margin과 padding 속성이 일관성을 위해 *-top 속성을 참조하도록 정의함.
• inset 속성 용어를 정의함.
• 기타 사소한 설명 보정.
• Web Platform Tests 적용 범위 추가.

이전 에디터 초안과 2017년 5월 18일 최초 공개 작업 초안 간의 변경 내역:

• 모든 속성을 부모가 아닌 요소에 지정된 writing mode로 계단화.
• margin-계열 단축 속성 안에서 롱핸드 순서를 inline-start가 inline-end보다 먼저 오도록 조정.
• margin/border/padding에 대해 *-inline, *-block 단축형 추가.
• offset-* 속성을 inset-*로 이름 변경 및 관련 이슈 논의 추가.
• 소개(Introduction) 절 추가.
• CSS Writing Modes의 최신 용어로 갱신.
• 기타 문장 정리.

프라이버시 고려사항

이 명세에서 보고된 새로운 프라이버시 고려사항은 없습니다.

보안 고려사항

이 명세에서 보고된 새로운 보안 고려사항은 없습니다.