CSS 오버플로우 모듈 레벨 4

1. 소개

이 명세는 [CSS-OVERFLOW-3]를 확장합니다. 주요 섹션은 다음과 같습니다:

오버플로우 스크롤 및 클리핑 제어

이 섹션에서는 overflow-* 속성에 대한 비교적 단순한 확장을 Level 3에 정의합니다.

자동 말줄임표

이 섹션에서는 *-ellipsis 속성에 대한 실험적 확장을 Level 3에 정의합니다.

오버플로우 리디렉션

이 섹션에서는 오버플로우를 새롭게 생성된 단편화 컨테이너로 리디렉션하여 처리하는 매우 실험적이고 탐구적인 새로운 모델을 정의합니다.

참고: 작성 시점에서 [CSS-OVERFLOW-3]는 아직 완전히 확정되지 않았습니다. 우발적인 불일치와 유지보수 부담을 피하기 위해, 이 명세는 css-overflow Level 3에 대한 델타 명세로 작성되었습니다. Level 3 명세가 확정되면, 해당 내용이 이 명세에 통합되어 이 명세가 Level 3을 대체하게 됩니다. 그 전까지 이 명세는 Level 3에 대한 추가 및 확장만을 포함합니다.

1.1. 값 정의

이 명세는 CSS 속성 정의 규칙을 [CSS2]에서 따르며, 값 정의 문법을 [CSS-VALUES-3]에서 사용합니다. 이 명세에서 정의되지 않은 값 타입은 CSS Values & Units [CSS-VALUES-3]에서 정의됩니다. 다른 CSS 모듈과의 조합으로 이러한 값 타입의 정의가 확장될 수 있습니다.

정의에 명시된 속성별 값 외에도, 이 명세에서 정의된 모든 속성은 CSS-전역 키워드도 속성 값으로 사용할 수 있습니다. 가독성을 위해 별도로 반복하지 않았습니다.

1.2. 모듈 상호작용

이 모듈은 [CSS-OVERFLOW-3]에서 정의된 기능을 확장합니다.

2. 오버플로우 개념 및 용어

최종 확정 시 Level 3 내용 복사.

3. 오버플로우 스크롤 및 클리핑

최종 확정 시 Level 3 내용 복사.

3.1. 오버플로우 관리: overflow-x, overflow-y, 그리고 overflow 속성

이 레벨에서는 overflow-x 및 overflow-y 속성 (그리고 overflow 축약형)이 교체된 요소에도 적용되도록 확장합니다.

교체된 요소에서는, 사용된 값이 visible이 아닌 모든 계산값에 대해 clip이 됩니다. 호스트 언어는 이러한 요소에 대해 UA 스타일 시트 규칙을 정의해야 하며, 기본값을 clip으로 적용하고, overflow-clip-margin을 content-box로 설정합니다.

참고: overflow 속성을 교체된 요소에 적용하는 것은 이미지가 실제 레이아웃 박스 밖으로 효과를 그릴 수 있도록 하기 위해 추가되었습니다; 권장 UA 스타일 시트 규칙은 기본적으로 원래 동작을 반영하기 위한 것입니다. 이슈 7059 및 이슈 7144의 논의를 참고하세요. 이는 CSS2.1에서 변경된 사항이며 위험요소로 간주됩니다.

overflow를 교체된 요소에 적용하는 것은 아직 작업 중입니다. [이슈 #7144]

3.2. 클리핑 경계 확장: overflow-clip-margin-* 속성

이 속성과 축약형은 박스의 overflow clip edge를 정의합니다. 즉, 박스의 범위 바깥에 얼마나 멀리 컨텐츠가 그려질 수 있는지, 효과(예: overflow: clip 등)에 의해 해당 overflow clip edge에 클리핑되기 전까지를 규정합니다. 축약형/풀네임 관계는 margin과 동일하나, 축약형은 제한된 문법을 가집니다.

값은 다음과 같이 정의됩니다:

<visual-box>

오버플로 클립 가장자리의 원점으로 사용할 박스 가장자리를 지정한다. 즉, 지정된 오프셋이 0일 때의 기준이 된다.

생략하면, 비-대체 요소에서는 기본값이 padding-box이고, 대체 요소에서는 content-box이다.

overflow-clip-margin을 대체 요소에 적용하는 방식은 아직 조정 중이다. [이슈 #7144]

<length [0,∞]>

지정된 오프셋은 오버플로 클립 가장자리가 지정된 박스 가장자리에서 얼마나 확장되는지를 결정한다. 음수 값은 유효하지 않다. 생략하면 기본값은 0이다.

오버플로 클립 가장자리의 모서리 형태는 박스의 테두리 가장자리로부터 동일한 누적 오프셋을 스프레드 반경으로 갖는 외부 박스 그림자와 정확히 같은 방식으로 형성된다. CSS 배경 3 § 4.2 모서리 형태 및 CSS 배경 3 § 6.1.1 그림자 형태, 스프레드 및 녹아웃을 참조하며, 특히 테두리 가장자리 바깥쪽 확장에 대한 공식에 유의한다.

참고: 이 속성은 overflow: hidden 또는 overflow: scroll이 설정된 박스에는 영향이 없습니다. 해당 박스들은 overflow clip edge를 사용하지 않도록 정의되어 있습니다.

4. 자동 말줄임표

4.1. 인라인 오버플로우 말줄임표: text-overflow 속성

이 섹션은 [CSS-OVERFLOW-3]와 다시 동기화해야 할 수도 있습니다.

이 속성은 인라인 컨텐츠가 블록 컨테이너 요소(“the block”)의 인라인 진행 방향으로 라인 박스 경계를 넘어 오버플로우될 때의 렌더링을 지정합니다. 이 때 overflow가 visible이 아닌 경우에만 적용됩니다.

이 속성은 상속되지 않지만, 라인 박스의 인라인 포맷팅 컨텍스트를 설정하기 위해 생성된 익명 블록 컨테이너 박스(block container)는 무시되며, 해당 속성 값은 익명 박스가 아닌 박스에 적용된 값이 사용됩니다. 이는 예제 7의 “중첩된 단락” 부분에서 볼 수 있습니다. "NESTED"라는 단어가 익명 블록 컨테이너에 래핑되어 있고 해당 text-overflow 속성이 초기값이라도, 실제로 말줄임표가 적용됩니다.

텍스트는 예를 들어 white-space: nowrap 등으로 줄바꿈이 방지되거나, 한 단어가 너무 길어 맞지 않을 때 오버플로우될 수 있습니다. 값의 의미는 다음과 같습니다:

clip

블록 컨테이너를 넘는 인라인 콘텐츠를 클리핑합니다. 문자가 부분적으로만 렌더링될 수 있습니다.

ellipsis

잘린 인라인 콘텐츠를 나타내기 위해 말줄임표(U+2026)를 렌더링합니다. 구현에 따라 언어, 스크립트, 쓰기 방향에 더 적합한 말줄임표 문자를 대체하거나, 해당 문자가 없으면 "..."으로 대체할 수 있습니다.

<string>

주어진 문자열을 잘린 인라인 콘텐츠 대신 렌더링합니다. 주어진 문자열은 bidi(양방향 텍스트) 처리시 독립된 단락으로 취급됩니다.

fade( [ <length> | <percentage> ] )

인라인 콘텐츠가 라인 박스를 넘을 때 클리핑합니다. 문자가 부분적으로만 렌더링될 수 있습니다. 추가로 UA는 라인 박스의 경계 근처에 페이드 아웃 효과를 적용해야 하며, 경계에서는 완전히 투명해져야 합니다.

페이드 아웃 계산 방식을 정의해야 할까요? 브라우저마다 동일한 페이딩을 위해 mask-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0))와 비슷하게, 라인 일부에만 적용되어야 합니다.

인수는 페이드 효과가 적용될 거리를 결정합니다. <percentage>는 라인 박스의 너비 기준으로 결정됩니다. 0보다 작은 값은 0으로, 라인 박스 너비보다 큰 값은 라인 박스 너비로 잘립니다.

라인 박스가 페이드 효과 길이만큼 충분하지 않을 때, 효과를 생략할지, 거리를 줄여 맞출지, 페이드 끝을 클리핑할지 결정이 필요합니다.

라인 박스 밖으로 오버플로우되거나 라인 박스와 겹치는 요소는 어떻게 처리해야 할까요? 페이드가 라인의 논리적 내용에 적용될지, 물리적 영역에 적용될지, 아니면 교집합에 적용될지 결정해야 합니다.

fade

fade()와 동일하지만, 페이드 효과가 적용되는 거리는 UA가 결정합니다. 1em이 적절한 값으로 제안됩니다.

이 속성 정의에서 "문자"란 용어는 가독성 향상을 위한 것이며, 실제 구현에서는 "그래프 클러스터" [UAX29]를 의미합니다.

값이 하나면 end 라인 박스 경계에만 적용됩니다. 값이 두 개면 첫 번째 값은 line-left 경계에, 두 번째 값은 line-right 경계에 적용됩니다. end, line-left, line-right 용어는 [CSS-WRITING-MODES-3]에 정의되어 있습니다.

참고: 값이 두 개일 때 line-left 및 line-right를 사용하는 것은 start와 end 대신 방향성 문자인 화살표 등 사용을 쉽게 하기 위한 의도적 선택입니다.

ellipsis 및 string 값의 경우, 구현체는 해당 라인 경계에서 말줄임표/문자열이 들어갈 공간을 확보하기 위해 필요한 만큼 문자 및 atomic inline-level 요소를 숨겨야 하며, 말줄임표/문자열은 남은 인라인 콘텐츠의 경계에 바로 붙여 배치해야 합니다. 한 라인의 첫 번째 문자 또는 atomic inline-level 요소는 말줄임표 대신 클리핑됩니다.

div {
  font-family: monospace;
  white-space: pre;
  overflow: hidden;
  width: 9ch;
  text-overflow: ellipsis;
}

말줄임표 상세

• 말줄임표는 렌더링에만 영향을 주며, 레이아웃이나 포인터 이벤트 디스패치에는 영향을 주지 않아야 합니다: UA는 말줄임표에 포인터 이벤트가 발생하면, text-overflow가 none인 것처럼 생략된 요소에 이벤트를 디스패치해야 합니다.
• 말줄임표는 블록 기준으로 스타일링 및 베이스라인 정렬됩니다.
• 말줄임표는 상대적 위치 및 기타 그래픽 변환 이후에 발생합니다.
• 말줄임표 공간이 부족하면, 말줄임표 자체의 렌더링을 클리핑합니다. (해당 라인에서 중립 문자가 text-overflow:clip 값으로 클리핑되는 위치와 동일한 쪽에서)

말줄임표와 사용자 상호작용

• 사용자가 컨텐츠와 상호작용(예: 편집, 선택, 스크롤)할 때, UA는 ellipsis, 문자열 값, fade 또는 fade()를 text-overflow:clip처럼 처리할 수 있습니다.
• 말줄임표를 선택하면 생략된 텍스트가 선택되어야 합니다. 생략된 텍스트 전체가 선택되면, UA는 말줄임표 선택을 표시해야 합니다. 부분 선택 시 동작은 UA에 따라 다를 수 있습니다.

div {
  font-family: Helvetica, sans-serif;
  line-height: 1.1;
  width: 3.1em;
  border: solid .1em black;
  padding: 0.2em; margin:1em 0;
}

<div>
CSS IS AWESOME, YES
</div>

<div style="text-overflow:clip; overflow:hidden">
CSS IS AWESOME, YES
</div>

<div style="text-overflow:ellipsis; overflow:hidden">
CSS IS AWESOME, YES
</div>

<div style="text-overflow:ellipsis; overflow:hidden">
NESTED
 <p>PARAGRAPH</p>
WON’T ELLIPSE.
</div>

<div style="text-overflow:fade; overflow:hidden">
CSS IS AWESOME, YES
</div>

참고: 말줄임표가 배치되는 라인 쪽은 블록의 direction에 따라 달라집니다. 예를 들어, 오른쪽에서 왼쪽으로(direction: rtl) 오버플로우 hidden 블록은 인라인 콘텐츠를 왼쪽에서 잘라내며, 잘린 콘텐츠를 나타내기 위해 말줄임표는 왼쪽에 표시됩니다.

참고를 위해 RTL 예시 다이어그램 삽입 필요.

스크롤 인터페이스와 말줄임표 상호작용

이 섹션은 text-overflow:clip이 아닌 text-overflow(clip이 아닌 text-overflow)와 overflow:scroll이 설정된 요소에 적용됩니다.

요소가 비-clip text-overflow와 인라인 진행 방향에 스크롤 오버플로우가 있고, 브라우저가 스크롤(예: 요소의 스크롤바, 터치 인터페이스의 스와이프 스크롤 등) 메커니즘을 제공할 때, 더 나은 사용자 경험을 위한 추가 구현 세부 사항이 존재합니다:

요소가 스크롤되면(예: 사용자 또는 DOM 조작으로), 더 많은 콘텐츠가 보여집니다. text-overflow의 값은 요소 콘텐츠가 더 많이 보여지는지 여부에 영향을 주지 않아야 합니다. 비-clip text-overflow가 설정된 경우, 더 많은 콘텐츠가 뷰로 스크롤될수록, 구현체는 추가로 맞는 만큼의 콘텐츠를 보여주어야 하며, 잘릴(clip) 것이거나 말줄임표/문자열이 들어갈 공간을 마련하기 위해 필요한 부분만 잘라야 합니다. 요소가 충분히 스크롤되어 콘텐츠의 경계가 나타날 때는 말줄임표/문자열 대신 실제 콘텐츠를 보여주어야 합니다.

div.crawlbar {
  text-overflow: ellipsis;
  height: 2em;
  overflow: scroll;
  white-space: nowrap;
  width: 15em;
  border:1em solid black;
}

<div class="crawlbar">
CSS is awesome, especially when you can scroll
to see extra text instead of just
having it overlap other text by default.
</div>

일부 콘텐츠가 뷰로 스크롤되면, 반대쪽의 다른 콘텐츠가 뷰에서 사라질 수 있습니다. 해당 콘텐츠의 블록 컨테이너 요소가 스크롤을 담당하고, text-overflow의 계산값이 두 개이고, 시작 경계에 적용되는 값이 비-clip이면, 구현체는 잘린 콘텐츠 대신 말줄임표/문자열을 렌더링해야 하며, 위에서 정의된 값 설명과 동일한 세부 사항을 따르되, 말줄임표/문자열은 블록의 direction 속성에 따라 start 위치에 그려집니다(end 대신).

콘텐츠가 스크롤되는 동안, 구현체는 말줄임표/문자열 렌더링을 조정할 수 있습니다(예: 박스 경계에 정렬).

시작과 끝 말줄임표/문자열 둘 다 들어갈 공간이 부족하면, 끝 말줄임표/문자열만 렌더링되어야 합니다.

4.2. 블록 축 오버플로우 표시: block-ellipsis 속성

이 속성은 (강제 또는 비강제) 영역 나누기 전에 있는 마지막 라인 박스에 콘텐츠를 삽입하여 잘리거나 중단된 콘텐츠가 계속됨을 나타낼 수 있게 한다. 이 속성은 블록 컨테이너 자체에 직접 포함된 라인 박스에만 영향을 미치지만, 상속되므로 재정의되지 않는 한 자손의 라인 박스에도 영향을 미친다. 박스에 영역 나누기 바로 앞에 있는 라인 박스가 없으면, 이 속성은 아무런 영향을 미치지 않는다.

참고: 부록 A: 오버플로우 리디렉션에서 region break가 있는 박스를 생성하는 방법을 확인하세요.

이 속성을 다른 종류의 단편화 분할(예: 페이지, 컬럼)에도 적용해야 할까요?

삽입된 콘텐츠를 block overflow ellipsis라고 합니다. 값의 의미는 다음과 같습니다:

none

렌더링에 영향을 주지 않습니다.

auto

말줄임표 문자(U+2026) 또는 더 적합한 타이포그래피 문자를 block overflow ellipsis로 해당 라인 박스 끝에 렌더링합니다. UA는 콘텐츠 언어, 쓰기 체계, 쓰기 모드에 따라 가장 적합한 말줄임표 문자열을 선택해야 합니다.

<string>

지정된 문자열을 block overflow ellipsis로 해당 라인 박스 끝에 렌더링합니다. 문자열이 지나치게 길면 UA가 잘라낼 수 있습니다.

block-ellipsis가 none이 아닌 경우, 블록 오버플로 줄임표 문자열은 익명 인라인으로 래핑되고 블록 컨테이너의 루트 인라인 박스의 직접 자식으로서 라인 박스의 끝에 배치되어, 줄의 다른 콘텐츠에 사용할 수 있는 라인 박스의 공간을 줄인다. 이 인라인에는 unicode-bidi: plaintext 및 line-height: 0이 지정되고, 전체 블록 오버플로 줄임표가 줄에 들어갈 수 있도록 하는 마지막 소프트 줄 바꿈 기회([CSS-TEXT-3] 참조) 뒤의 라인 박스에 배치된다. 이 목적을 위해, overflow-wrap에 의해 추가된 소프트 줄 바꿈 기회는 무시된다. 이로 인해 라인 박스의 전체 콘텐츠가 밀려나는 경우, 라인 박스는 스트럿을 포함하는 것으로 간주하며, 이는 CSS 2.1 § 10.8.1 행간 및 반행간에 정의되어 있다. 텍스트 정렬 및 양쪽 맞춤은 배치 후에 이루어지며, 삽입된 블록 오버플로 줄임표를 줄의 나머지 콘텐츠와 함께 측정한다.

참고: 블록 오버플로 줄임표의 line-height를 0으로 설정하면 이를 삽입해도 줄의 높이가 커지지 않도록 보장할 수 있으며, 줄 높이가 커지면 추가적인 재레이아웃과 잠재적인 순환이 발생할 수 있다. 이는 블록 오버플로 줄임표를 페인트 시점 작업으로 삽입하는 것과 거의 동일하지만, 여전히 정렬 및 양쪽 맞춤에 참여한다. 단점은 블록 오버플로 줄임표의 비정상적으로 높거나 아래로 깊게 뻗은 글리프가 오버플로될 수 있다는 것이다.

블록 오버플로 줄임표는 ::first-letter 또는 ::first-line 의사 요소 어느 쪽에도 포함되어서는 안 된다.

단편화 컨텍스트에 후속 콘텐츠를 받게 될 다음 단편화 컨테이너가 있는 경우, 블록 오버플로 줄임표에 의해 밀려난 콘텐츠는 해당 단편화 컨테이너로 보내져야 한다.

UA는 블록 오버플로 줄임표를 줄 바꿈할 수 없는 문자열로 처리해야 하며, 블록 오버플로 줄임표의 일부라도 오버플로되면, 이를 스크롤 가능한 오버플로로 처리하고, 그 렌더링은 text-overflow 속성의 영향을 받는다.

블록 오버플로 줄임표는 이벤트를 캡처하지 않는다: 포인터 이벤트는 그 아래에 있는 대상에 디스패치된다.

또한 박스의 고유 크기에는 영향을 미치지 않는다: 해당 박스의 최소 콘텐츠 및 최대 콘텐츠 크기는 block-ellipsis가 none인 것과 정확히 동일하게 계산된다.

참고: 향후 명세에서는 이 기능을 확장할 수 있다. 예를 들어 텍스트에 스타일을 지정하기 위한 ::ellipsis 의사 요소를 제공하거나, 블록의 자식 요소를 선택하여 인라인 수준 또는 블록 수준 표시기로 사용할 수 있도록 할 수 있다 (이 경우 이벤트를 캡처할 수 있다).

5. 오버플로우 단편화

5.1. 표시 행 제한: line-clamp 축약 속성

line-clamp 속성은 축약형으로, max-lines, block-ellipsis, continue 속성을 포함합니다.

실험적 구현체는 축약형과 풀네임의 전체 동작을 따르되, 작성자에게는 축약형만 노출하는 것이 권장됩니다. 추후 세부 조정 및 속성명/값 변경을 쉽게 하기 위함입니다.

이 속성은 블록 컨테이너의 콘텐츠를 지정한 행 수까지 제한합니다; 남은 콘텐츠는 단편화되어 렌더링 및 측정되지 않습니다. 선택적으로, 잘림/중단된 콘텐츠의 연속성을 표시하기 위해 마지막 라인 박스에 콘텐츠를 삽입할 수도 있습니다.

값의 의미는 다음과 같습니다:

none

max-lines를 none, continue를 auto, block-ellipsis를 none으로 설정합니다.

<integer [1,∞]> <block-ellipsis>?

max-lines를 지정한 <integer>로, continue를 discard로, block-ellipsis는 값의 두 번째 구성 요소, 생략 시 auto로 설정합니다.

이 메커니즘이 동작하는 방식은 해당 풀네임 속성 설명을 참조하세요.

li {
  line-clamp: 5 "… (continued on next page)";
}
strong {
  display: block;
  text-transform: uppercase;
}

<li><a href="cheese-is-milk">
  <strong>Cheese is Actually Made of Milk!</strong>
  Investigative reporters at the World Wide Web Press Corps
  have discovered the secret of cheese.
  Tracing through byzantine layers of bureaucracy and shadow corporations,
  our crack team of journalists have traced the source of camembert.
</a></li>

+---------------------------------------+
| CHEESE IS ACTUALLY MADE OF MILK!      |
| Investigative reporters at the World  |
| Wide Web Press Corps have discovered  |
| the secret of cheese. Tracing through |
| byzantine…  (continued on next page)  |
+---------------------------------------+

5.1.1. 레거시 호환성

레거시 콘텐츠와의 호환성을 위해, line-clamp를 지원하는 UA는 -webkit-line-clamp 속성과 -webkit-discard 값을 continue 속성에 추가로 지원해야 합니다.

line-clamp와 마찬가지로, -webkit-line-clamp도 max-lines, continue, block-ellipsis 속성의 축약형입니다. 단, 다음과 같은 차이가 있습니다:

• 문법은 none | <integer [1,∞]> 입니다.

• continue 값을 -webkit-discard로 설정하며, discard 대신 사용합니다.

• block-ellipsis 값을 무조건 auto로 설정합니다.

또한, display 속성의 계산값이 -webkit-box 또는 -webkit-inline-box인 박스의 자식(익명 자식 포함)에 대해, max-lines, continue, block-ellipsis의 사용값은 부모 박스의 계산값에서 가져오며, 해당 박스 자체의 계산값은 무시됩니다.

-webkit-discard 값은 discard와 동일하게 동작하지만, 부모의 display 속성의 계산값이 -webkit-box 또는 -webkit-inline-box이고, 부모의 -webkit-box-orient 속성의 계산값이 vertical일 때만 적용됩니다.

참고: 레거시 -webkit-line-clamp 속성의 구현체는 여기 명세된 것과 동일하게 동작하지 않습니다. 기존 동작은 특이하며 견고하지 않은데, 예시는 이 블로그 글에서 설명되어 있습니다. 현재 설계는 초기 실험의 실수를 반영해 개선되었으며, 구현체가 명세된 동작을 따르도록 변경할 수 있을 정도로 기존 콘텐츠와 충분히 호환되도록 의도되었습니다. 추가 조정이 필요하다면 명세에 반영될 것이며, 그 동안 작성자는 차이가 있을 수 있음을 유념해야 합니다.

5.2. 지정된 행 수 이후 강제 분할: max-lines 속성

이 속성은 fragmentation container로 region break를 캡처하지 않는 박스에는 아무 효과가 없습니다.

그 외의 경우, max-lines 값이 none이 아니면, 자식 N번째 in-flow line box 이후에 region break를 강제합니다. N은 max-lines에 지정된 값입니다. 동일한 Block Formatting Context 내의 라인 박스만 카운트하며, 독립 포맷팅 컨텍스트를 만드는 하위 요소의 내용은 카운트에서 생략합니다.

N개 미만의 라인 박스가 있으면, max-lines는 region break를 도입하지 않습니다.

<div id=a>
  a: line 1<br>
  a: line 2<br>
  <div id=b>
    b: line 1<br>
    b: line 2<br>
    b: line 3<br>
    b: line 4<br>
  </div>
  a: line 3<br>
  a: line 4<br>
</div>

a: line 1
a: line 2
b: line 1
b: line 2…
a: line 3…

a: line 1
a: line 2
b: line 1…

참고: max-lines는 멀티 컬럼 컨테이너에 적용해도 효과가 없습니다. 이들이 포함하는 라인 박스는 모두 독립 포맷팅 컨텍스트에 중첩되기 때문입니다.

양수 정수만 허용됩니다. 0이나 음수 정수는 무효이며, 선언은 무시되어야 합니다.

참고: widows, orphans, break-inside 속성은 region break의 위치에 영향을 주지 않습니다. max-lines에 의해 강제된 region break의 위치는 변하지 않습니다.

5.3. 오버플로우 단편화: continue 속성

continue 속성은 작성자가 박스를 단편화 컨테이너로 만들 수 있게 하며 ([CSS-BREAK-3] 참고) 단편화 분할 이후의 콘텐츠를 폐기하도록 지정할 수 있습니다.

이 속성은 region-fragment 속성을 일반화 및 대체하기 위한 것입니다. 이 명세에서 충분히 안정화되면 regions 명세에서 region-fragment는 제거되어야 합니다.

auto

박스에 들어갈 수 있는 것보다 더 많은 콘텐츠가 있는 경우, 초과된 콘텐츠는 일반 규칙에 따라 처리됩니다.

discard

박스는 단편화 컨테이너가 되어 region break를 캡처합니다(이미 아니면). [CSS-BREAK-3] 첫 번째 region break 이후의 콘텐츠는 렌더링되지 않습니다(아래 참고). (박스가 멀티컬럼 컨테이너인 경우, 오버플로우 컬럼도 렌더링되지 않습니다.)

참고: 이 region break는 강제일 수도 있고 (예: max-lines나 break-before/break-after 속성 등으로), 또는 비강제일 수도 있습니다(예: 콘텐츠가 크기 제약으로 인해 단편화 컨테이너를 넘칠 때). 다른 단편화 컨텍스트 (예: 박스 자체의 페이지네이션)에 적용되는 분할은 콘텐츠 폐기를 유발하지 않습니다.

참고: 이 속성은 박스가 독립 포맷팅 컨텍스트를 생성하도록 하진 않습니다.

아래 그림과 같이 지나치게 긴 오버플로 줄 하나와, 단편화 방향에 들어갈 수 있는 것보다 네 줄이 더 많은 문서가 주어지면, overflow와 continue 속성의 조합에 따라 서로 다른 렌더링이 가능하다.

	continue: discard	continue: auto
overflow: visible
overflow: hidden

continue: discard로 인해 "렌더링되지 않는" 콘텐츠는 display: none과 유사하게 폐기됩니다:

• 렌더링되지 않습니다.

• 음성 렌더링에도 제공되지 않습니다.

• 사용자 상호작용이 불가능합니다.

• OM에 대한 효과가 명확히 정의되어야 함 [Issue #2970]

• 버려진 콘텐츠에 정적 위치가 있는 포지셔닝된 요소는 어떻게 처리되는가? Sydney F2F 회의 논의 참고. [Issue #2971]

하지만 고유 크기는 단편화 컨테이너 전체에 걸쳐 계산되므로, 이 콘텐츠는 박스의 min-content 및 max-content 인라인 크기 계산에는 포함됩니다(CSS Fragmentation 3 § 5.1 Varying-size Fragmentainers 참고). Min-content와 max-content 블록 크기는 fragmented flow의 시작부터 첫 번째 강제 분할까지, 또는 강제 분할이 없으면 fragmented flow의 끝까지의 콘텐츠로 계산됩니다.

참고: 병렬 단편화 흐름의 경우, 박스 트리에서 fragmentation break 이후에 나타나는 콘텐츠도, 해당 단편화 컨테이너 끝 위치보다 위에 배치된다면 여전히 렌더링될 수 있습니다.

부록 A: 오버플로우 리디렉션

이 섹션은 매우 실험적입니다. continue 속성의 기능을 확장해 추가 사용 사례를 해결하려는 현재의 시도를 문서화합니다. 아직 컨센서스가 형성된 것은 아니며, 논의를 촉진하기 위해 제시된 것으로, 실험적 구현이 아닌 경우 구현을 권장하지 않습니다.

CSS Level 1 [CSS1]에서는 지정된 크기의 요소에 더 많은 콘텐츠를 넣는 것은 일반적으로 작성 오류였습니다. 이렇게 하면 콘텐츠가 요소의 경계를 넘어서 다른 요소와 겹칠 가능성이 높았습니다.

CSS Level 2 [CSS2]에서는 overflow 속성이 도입되어, 작성자가 오버플로우를 스크롤로 처리할 수 있게 했고, 더 이상 작성 오류가 아니게 되었습니다. 또한 오버플로우를 클리핑으로 처리할 수도 있어, 콘텐츠를 보여주지 않는 것이 작성자의 의도일 때 적합합니다. 이는 CSS Overflow Module Level 3 [CSS-OVERFLOW-3]에서 추가로 정교화되었습니다.

하지만, 스크롤링만이 많은 콘텐츠를 보여주는 유일한 방법은 아니며, 오히려 최적의 방법이 아닐 수도 있습니다. 결국 코덱스는 스크롤보다 그 장점 때문에 많은 글을 담는 일반적 형식으로 대체되었습니다.

이 명세는 웹 페이지에서 오버플로우를 스크롤 대신 페이지네이션으로 처리하도록 지정하는 메커니즘을 도입합니다.

또한 이 명세는 오버플로우의 개념을 다른 방향으로 확장합니다. 작성자가 요소의 콘텐츠가 반드시 흘러야 하는 단일 영역을 지정하는 대신, 작성자가 각각 크기와 스타일이 다른 여러 단편을 지정할 수 있게 하여, 요소의 콘텐츠가 하나에서 다음으로 흐르도록 하고, 콘텐츠를 넘치지 않게 배치할 수 있도록 합니다.

이 두 경우 모두, 구현체는 블록 진행 방향에서 콘텐츠를 분할해야 하며, 이 과정은 CSS Fragmentation Module [CSS-BREAK-3]에 설명된 대로 수행되어야 합니다.

오버플로우 채널링: continue 속성

continue 속성은 작성자가 요소 내부에 들어가지 않는 콘텐츠를 [CSS-BREAK-3]의 의미에서 단편화(fragmentation)되도록 요청할 수 있게 해주며, 남은 콘텐츠를 어디서 계속할지 대안을 제공합니다.

특히, 이 속성은 전통적인 페이지네이션 동작을 설명하며, 그 이상으로 확장합니다.

이 속성 및 값의 명칭은 잠정적입니다. 처음에는 "fragmentation: auto | none | break | clone | page"로 제안되었으며 (https://lists.w3.org/Archives/Public/www-style/2015Jan/0357.html), 어느 이름이 더 나은지에 대해 아직 충분한 합의가 없습니다.

이 속성은 region-fragment를 일반화하고 대체하기 위한 것입니다. 이 명세에서 충분히 안정화되면, region-fragment는 regions 명세에서 제거되어야 합니다.

참고: continue: fragments는 이전 명세 버전의 "overflow:fragments"를 대체하며, continue: paginate는 "overflow: paged-x | paged-y | paged-x-controls | paged-y-controls"를 대체합니다.

auto

auto는 계산값으로 오직 CSS Region에서, region chain의 마지막이 아닌 경우에만 발생할 수 있습니다. 맞지 않는 콘텐츠는 체인의 다음 region으로 넘어갑니다.

그 외의 경우, auto는 다른 값 중 하나로 계산됩니다.

지정값이 계산값과 동일한 § 5.3 오버플로우 단편화: continue 속성의 정의와 다릅니다. 어느 모델이 더 나은가요?

overflow

맞지 않는 콘텐츠는 overflow 속성 규칙에 따라 오버플로우 처리됩니다.

paginate

맞지 않는 콘텐츠는 페이지네이션(paginate) 처리됩니다. 이는 'overflow: scroll'이 스크롤 가능한 뷰를 만드는 것과 유사하게 요소 내부에 페이지네이션 뷰를 만듭니다.

페이지네이션 오버플로우 참고

참고: 인쇄는 사실상 루트에 "continue: paginate"가 적용된 것입니다.

fragments

맞지 않는 콘텐츠는 요소를 복제하여 계속 레이아웃합니다.

단편화 오버플로우 참고.

continue의 계산값은 아래와 같이 결정됩니다:

1. layout containment([CSS-CONTAIN-1] 참고)이 있는 요소 또는 의사 요소에서, 지정값이 auto 또는 fragments이면 계산값은 overflow입니다.
2. 그 외, 지정값이 auto이면
   1. CSS Region에서, region chain의 마지막이 아니면 계산값은 auto
   2. 페이지에서는 계산값이 paginate
   3. fragment box에서는 계산값이 fragments
   4. 그 외에는 계산값이 overflow
3. 그 외, 지정값이 fragments이면
   1. 페이지에서는 계산값이 paginate
   2. 그 외에는 계산값이 지정값과 동일
4. 나머지 경우에는 계산값이 지정값과 동일

multicol에서 컬럼을 선택하는 의사 요소를 도입한다면 auto가 그 요소에서 auto로 계산되어야 할지, 새 값을 도입하여 auto가 그 값으로 계산되어야 할지 명확히 해야 합니다 (하지만 그 값이 컬럼이 아닌 것에는 어떻게 계산될까요?).

참고: 이 속성에 대한 배경 논의는 다음 스레드를 참고하세요: overflow, overflow-x, overflow-y 및 overflow-style 논의 및 fragmentation 속성 제안

페이지네이션 오버플로우

이 섹션에서는 paginate 값의 의미를 continue 속성에 대해 소개 및 정의합니다.

이 섹션 작성 필요

페이지는 @page 룰로 스타일링할 수 있어야 합니다. 중첩된 페이지의 경우는 어떻게 동작해야 할까요?

@media (overflow-block: paged), (overflow-block: optional-paged) {
  :root {
    continue: paginate;
  }
}

전통적인 페이지네이션(예: 인쇄)은 :root가 page box에 포함된 것으로 간주합니다. page box가 :root의 자식 의사 요소가 아니라면 fragment box와 비슷한 구조로 해결할 수 있을까요? 아니면 페이지 박스 내부에 fragment box(:root 복제)를 두는 구조가 될까요?

페이지 박스 모델이 일반 css 박스의 자식일 때 어떻게 동작해야 할까요?

[CSS3GCPM]의 최초 제안 및 오페라 구현체는 paginate 대신 4가지 값을 사용했습니다: "paged-x | paged-y | paged-x-controls | paged-y-controls". 이 속성도 이러한 값을 포함해야 할까요, 아니면 별도의 속성으로 다루는 것이 더 나을까요? (예: "pagination-layout: auto | horizontal | vertical", "pagination-controls: auto | none")

한 번에 여러 페이지(N 페이지)를 표시하는 기능은? "pagination-layout: horizontal 2;"와 같은 값으로 처리할 수 있을까요?

Brad Kemper가 페이지네이션과 fragment overflow를 결합한 모델, 여러 페이지 표시까지 다루는 모델을 제안했습니다. https://www.w3.org/mid/FF1704C5-D5C1-4D6F-A99D-0DD094036685@gmail.com

페이지네이션된 오버플로의 현재 구현은 여기에서 설명된 continue 속성이나 [CSS3GCPM] 초안에서 제안된 overflow-style 속성 ([CSS3-MARQUEE] 제안과도 일치함) 대신 overflow/overflow-x/overflow-y 속성을 사용한다.

단편화 오버플로우

이 절에서는 continue 속성의 fragments 값의 의미를 소개하고 정의한다.

요소의 continue의 계산된 값이 fragments이고, 그렇지 않았다면 구현이 해당 요소에 대한 박스를 생성했을 경우, 구현은 해당 요소에 대해 일련의 프래그먼트 박스를 생성해야 한다. (continue: fragments가 지정된 요소가 하나의 프래그먼트 박스만 생성할 수도 있다. 그러나 요소의 계산된 continue가 fragments가 아니면, 해당 요소의 박스는 프래그먼트 박스가 아니다.) 모든 프래그먼트 박스는 단편화 컨테이너이며, 해당 단편화 컨테이너가 단편화되도록 하는 모든 오버플로는 이전 프래그먼트 박스의 다음 형제로 또 다른 프래그먼트 박스가 생성되도록 한다. 아니면 요소의 다음 형제인 것처럼 동작하는가? 이것이 다른 박스 수준 보정과 정확히 어떻게 상호작용하는지 알아내야 한다. 또한, 프래그먼트 박스가 다단 박스이기도 한 경우([css-multicol-1]에 정의된 대로 다만 이 명세에서는 다단 컨테이너를 정의한다) 오버플로 열 [css-multicol-1]의 생성을 초래할 콘텐츠는 대신 추가 프래그먼트 박스로 흘려보낸다. 그러나 프래그먼트 박스 자체도 분할될 수 있다 (페이지, 열 또는 다른 프래그먼트 박스와 같이 그 바깥의 단편화 컨텍스트에서 단편화되기 때문에). 이러한 분할은 여러 프래그먼트 박스가 아니라 동일한 프래그먼트 박스의 프래그먼트들을 생성한다. (프래그먼트 박스는 그 인덱스에 따라 스타일이 지정될 수 있으므로 이는 중요하다. 이러한 분할은 하나의 인덱스를 가진 프래그먼트 박스의 여러 프래그먼트를 생성한다. 이러한 설계 선택은 프래그먼트 박스를 여러 페이지에 걸쳐 분할해도 인덱스와 특정 콘텐츠 조각 사이의 연관 관계가 끊어지지 않도록 하기 위한 것이다.) 외부 단편화 컨텍스트로 분할하는 강제 나누기는 하나의 프래그먼트 박스에 대한 새 프래그먼트를 생성해야 하는가, 아니면 새 프래그먼트 박스를 생성해야 하는가? 여기에서 혼동을 조금 줄이기 위해 프래그먼트 박스가 아닌 다른 용어를 찾아야 하는가?

다른 유형의 단편화 컨텍스트 내에서 분할된 요소의 조각에 스타일을 지정할 수 있게 하고 싶다면 어떻게 해야 하는가? 이러한 규칙 때문에 그러한 용도로는 ::nth-fragment()를 전혀 사용할 수 없지만, 그 이름은 그러한 기능에 가장 논리적인 이름처럼 보인다.

<!DOCTYPE HTML><title>콘텐츠를
  동일한 크기의 카드로 나누기</title>
<style>
  .in-cards {
    continue: fragments;

    width: 13em;
    height: 8em;

    padding: 4px;
    border: medium solid blue;
    margin: 6px;

    font: medium/1.3 Times New
      Roman, Times, serif;
  }
</style>
<div class="in-cards">
  이 예에서 div의 텍스트는
  일련의 카드로 나뉜다.
  이 카드들은 모두 동일한 스타일을 가진다.
  카드 중 하나를 오버플로하기에
  충분한 콘텐츠가 있으면
  또 다른 카드가 생성된다. 두 번째
  카드는 첫 번째 카드의
  다음 형제인 것처럼 생성된다.
</div>

<!DOCTYPE HTML><style>
  .article {
    continue: fragments;
  }
  .article::first-letter {
    font-size: 2em;
    line-height: 0.9;
  }
  .article::nth-fragment(1) {
    font-size: 1.5em;
    max-lines: 3;
  }
  .article::nth-fragment(2) {
    column-count: 2;
  }
</style>
<div class="article">
  ...
</div>

continue: fragments가 적어도 일부 표 부분에는 적용되지 않으며, 아마 다른 요소에도 적용되지 않는다고 명시해야 한다. 정확히 어떤 것들인지 결정해야 한다.

이 명세에서는 어떤 유형의 단편화 컨텍스트가 생성되는지를 명시해야 하며, 그래야 어떤 break-* 속성 값이 이 컨텍스트 내에서 나누기를 발생시키는지 명확해진다. 아마 break-*: region이 적용되도록 하는 것이 좋을 것이다.

이 명세에는 프래그먼트를 포함하는 레이아웃이 프래그먼트의 고유 크기를 사용하여 프래그먼트에 사용 가능한 공간의 양을 변경하는 특성을 가진 경우에도 적용되는 처리 모델이 필요하다. 예를 들면 [CSS3-GRID-LAYOUT]이 있다. 이러한 처리 모델에 대해서는 이미 [CSS-REGIONS-1]에서 일부 작업이 이루어졌으며, 그곳에서 수행된 모델 작업과 해당 명세의 편집자들이 이 명세에서 어떤 일이 일어나야 하는지를 결정하는 데 참고가 되어야 한다.

단편 스타일링

::nth-fragment() 의사 요소

::nth-fragment() 의사 요소는 요소에 의해 생성된 fragment box 중 일부를 설명하는 의사 요소입니다. 이 의사 요소의 인자는 [SELECT]에서 정의된 :nth-child() 의사 클래스와 동일한 문법과 의미를 가지나, 숫자는 요소의 형제가 아닌 해당 요소가 생성한 fragment box를 기준으로 합니다.

단편을 시작이 아닌 끝에서 카운트해서 지정하는 셀렉터는 의도적으로 제공되지 않습니다. 그런 셀렉터는 단편의 개수 결정에 방해가 되기 때문입니다.

향후 논의에 따라, 이 ::nth-fragment(an+b) 문법이 새로운 ::fragment:nth(an+b) 문법으로 대체될 수 있습니다.

단편의 스타일링

이것이 continue:fragments에만 적용될지, 아니면 continue:paginate에도 적용될지 결정해야 함. (적용된다면, continue:paginate에는 더 엄격한 속성 제한이 필요함.)

::nth-fragment() 의사 요소가 있는 규칙이 없는 경우, 각 프래그먼트 박스의 계산된 스타일은 해당 프래그먼트 박스가 생성된 요소의 계산된 스타일이다. 그러나 프래그먼트 박스의 스타일은 선택자의 주체 [SELECT]에 ::nth-fragment() 의사 요소가 있는 규칙의 영향도 받는다. 단, 프래그먼트 박스의 1부터 시작하는 번호가 해당 ::nth-fragment() 의사 요소와 일치하고 선택자(::nth-fragment() 의사 요소 제외)가 프래그먼트를 생성하는 요소와 일치하는 경우에 한한다.

프래그먼트 박스의 스타일을 결정할 때, 프래그먼트 의사 요소와 일치하는 이러한 규칙은 요소와 일치하는 규칙과 함께 캐스케이드되며, 프래그먼트 의사 요소는 명시도 계산에 의사 클래스의 명시도를 추가한다. 이 내용도 캐스케이딩 모듈에 명시해야 하는가?

<!DOCTYPE HTML><style>
  .bouncy-columns {
    continue: fragments;
    width: 6em;
    height: 10em;
    float: left;
    margin: 1em;
    font: medium/1.25 Times New
      Roman, Times, serif;
  }
  .bouncy-columns::nth-fragment(1) {
    background: aqua; color: black;
    transform: rotate(-3deg);
  }
  .bouncy-columns::nth-fragment(2) {
    background: yellow; color: black;
    transform: rotate(3deg);
  }
</style>
<div class="bouncy-columns">
  ...
</div>

::nth-fragment() 의사 요소에 continue 속성을 스타일링하면 효과가 있습니다; 만약 fragment box의 계산값 continue가 fragments가 아니면 해당 fragment box는 마지막 단편입니다. 하지만 첫 번째 단편에 continue를 오버라이드해도 fragment box가 존재하지 않게 되지는 않습니다; fragment box의 존재 여부는 요소의 overflow 계산값에 따라 결정됩니다.

::nth-fragment() 의사 요소에 content 속성을 스타일링해도 효과가 없습니다; 해당 fragment box의 content 계산값은 요소의 content 계산값과 동일하게 유지됩니다.

display: none을 fragment box에 지정하면, 해당 인덱스의 fragment box는 생성되지 않습니다. 하지만 이후 fragment box를 위한 ::nth-fragment() 의사 요소와 매칭되는 인덱스에서는 여전히 생성된 것으로 카운트됩니다. 단, 생성되지 않았으므로 콘텐츠는 포함하지 않습니다.

display, position, 또는 float에 다른 값을 지정하는 것은 허용되지만, 내부 디스플레이 유형을 변경하는 것은 허용되지 않는다. (continue는 블록 컨테이너, 플렉스 컨테이너 및 그리드 컨테이너에만 적용되기 때문이다). 이것이 정확히 어떻게 동작하는지 지정해야 한다

다른 의사 요소와 마찬가지로, 의사 요소는 해당 요소 내부에 존재하는 모델을 따르기 때문에, ::nth-fragment() 의사 요소 선언은 의사 요소 없는 규칙의 선언을 오버라이드합니다. 해당 선언들 간의 우선순위는 일반적인 캐스케이드 순서에 따라 결정됩니다([CSS2] 참고).

::nth-fragment() 의사 요소에 지정된 스타일은 해당 fragment box 내부 콘텐츠에도 상속에 영향을 미칩니다. 즉, fragment box 내부 콘텐츠는 요소가 아닌 fragment box의 스타일(즉, 의사 요소 스타일)에서 상속받아야 합니다. 이는 요소가 여러 fragment box로 분할될 경우, 서로 다른 부분에 서로 다른 스타일을 적용할 수 있음을 의미합니다.

이 상속 규칙 때문에, 직접 지정할 수 없는 스타일을 간접적으로 지정할 수 있습니다 (명시적 inherit 사용이나, ::first-letter에 적용되지 않는 속성의 기본 상속 등). 이는 문제입니다. 내부 단편 스타일에 적용되는 제한은 상속에도 동일하게 적용되어야 합니다.

<!DOCTYPE HTML><style>
  .article {
    continue: fragments;
  }
  .article::nth-fragment(1) {
    font-size: 1.5em;
    margin-bottom: 1em;
    height: 4em;
  }
  .article::nth-fragment(2) {
    margin-left: 5em;
    margin-right: 2em;
  }
</style>
<div class="article">
  The <code>font-size</code> property...
</div>

단편 내부 스타일링

이것이 continue:fragments에만 적용될지, 아니면 continue:paginate에도 적용될지 결정해야 함.

::nth-fragment() 의사 요소는 fragment box 내부의 콘텐츠 스타일링에도 사용할 수 있습니다. ::first-line 및 ::first-letter 의사 요소와 달리, ::nth-fragment() 의사 요소는 셀렉터의 subject 이외의 부분에도 적용할 수 있습니다: 특히, subject의 조상에도 매칭될 수 있습니다. 단, 이런 셀렉터 규칙으로 적용되는 CSS 속성은 ::first-letter 의사 요소에 적용되는 속성만 해당됩니다.

더 정확히 말하면, 셀렉터의 일부에 ::nth-fragment() 의사 요소가 붙어 있을 때, 해당 규칙의 선언은 다음 조건을 모두 만족할 때 fragment(또는 그 의사 요소)에 적용됩니다:

1. 선언은 ::first-letter 의사 요소에 적용되는 속성에 대한 것이고,
2. 이러한 ::nth-fragment() 의사 요소가 제거되었다면, 각 단순 선택자 시퀀스와 그 선택자가 일치한 요소 사이에 특정 연관 관계가 있는 상태에서, 선언이 해당 프래그먼트(또는 그 의사 요소)에 적용되며, 그리고
3. 제거된 각 ::nth-fragment() 의사 요소에 대해, 프래그먼트는 해당 연관 관계에서 의사 요소가 연결되어 있던 선택자와 연관된 요소의 프래그먼트 박스 내부에 있으며, 그 인덱스는 의사 요소와 일치한다.

<!DOCTYPE HTML><style>
  .dark-columns {
    continue: fragments;
    width: 6em;
    height: 10em;
    float: left;
    margin-right: 1em;
    font: medium/1.25 Times New
      Roman, Times, serif;
  }
  .dark-columns::nth-fragment(1) {
    background: aqua; color: black;
  }
  .dark-columns::nth-fragment(1) :link {
    color: blue;
  }
  .dark-columns::nth-fragment(1) :visited {
    color: purple;
  }
  .dark-columns::nth-fragment(2) {
    background: navy; color: white;
  }
  .dark-columns::nth-fragment(2) :link {
    color: aqua;
  }
  .dark-columns::nth-fragment(2) :visited {
    color: fuchsia;
  }
</style>
<div class="dark-columns">
  ...
</div>

부록 B: scrollbar-gutter의 확장 가능성

이 섹션은 비규범적입니다.

이 섹션은 scrollbar-gutter 속성의 확장 시도를 기록합니다. 추가적인 사용 사례를 해결하기 위한 것이나, 아직 컨센서스에 도달하지 않았습니다. 논의를 촉진하기 위해 제시된 것이며, 실험적 구현 이외에는 권장하지 않습니다.

이 예시에서는 scrollbar-gutter 속성의 모든 추가 값들을 사용합니다:

• scrollbar-gutter: always force 헤더/툴바에 적용

• scrollbar-gutter: always 스크롤 컨테이너에 적용

• scrollbar-gutter: match-parent 스크롤 컨테이너 내부의 각 행에 적용

이름:	scrollbar-gutter
새 값:	auto | [ [ stable | always ] && both-edges? && force? ] || match-parent
적용 대상:	모든 요소

오버레이 스크롤바의 경우, scrollbar gutter의 정확한 너비는 UA 정의입니다. 단, 0이 아니어야 하며, 스크롤바 자체가 변경되어도 페이지 또는 스크롤바와의 상호작용에 따라 변하지 않아야 합니다. 가장 넓은 형태의 오버레이 스크롤바 너비를 커버해야 하며, 이것이 잘 정의되는 한 그 범위 내에서 동작해야 합니다.

이 속성의 새로운 값 의미는 다음과 같습니다:

always

스크롤바 거터는 overflow가 scroll, hidden 또는 auto인 경우, 스크롤바 유형이나 박스의 오버플로 여부와 관계없이 항상 존재한다.

scrollbar-gutter: always는 요소 가장자리 근처의 (작은) 대화형 요소가 나타난 오버레이 스크롤바에 가려지는 문제를 해결하는 데 사용할 수 있다. 대표적인 사례는 기본적인 할 일 목록으로, 각 줄은 텍스트로 시작하고 오른쪽 정렬된 체크박스로 끝난다. 클래식 스크롤바에서는 모든 것이 괜찮지만, 오버레이 스크롤바는 체크박스를 가려 상호작용하기 어렵게 만들 수 있다.

오버레이 스크롤바는 일반적으로 일시적이며 상호작용하지 않을 때 사라지므로, 그에 가려진 체크박스를 전혀 사용할 수 없는 것은 아니다. 하지만 스크롤바가 표시될 때는 실제로 방해가 되며, 이로 인해 상호작용이 불편해진다. 작성자는 오른쪽 패딩을 추가하여 문제를 해결하려 할 수 있지만, (1) 얼마나 추가해야 하는가?, 그리고 (2) 클래식 스크롤바의 경우에는 그 패딩이 필요하지 않다. scrollbar-gutter: always는 이 문제를 해결하여, 클래식 스크롤바의 첫 번째 경우에는 동일한 결과를 제공하면서, 오버레이 스크롤바에서는 원하는 거터를 추가한다:

Apple은 작성자가 이 값을 지나치게 광범위하게 사용하여, 대화형 요소 때문에 정당화되지 않는 경우에도 오버레이 스크롤바에 거터를 삽입함으로써, 오버레이 스크롤바의 공간 절약 이점을 무효화할 수 있다는 이유로 이 값의 추가를 꺼리고 있다.

대안적인 해결책이 제안되었다: 초점이 대화형 요소에 있으므로, 스크롤바 아래에 놓이지 않아야 하는 요소에 적용되는 속성을 둘 수 있을 것이다. 이 속성을 활성화하면, 요소가 오버레이 스크롤바 아래에 놓이게 될 경우 그 아래에서 밀어내는 데 딱 필요한 값만큼 요소의 오른쪽 또는 왼쪽 마진을 적절히 늘리고, 그렇지 않으면 요소를 변경하지 않은 채 둔다.

또한 추가 토글을 통해 요소가 한쪽만이 아니라 inline-end 및 inline-start 마진 모두를 늘리거나 둘 다 늘리지 않도록 할 수도 있다. 이는 보이는 테두리 또는 배경을 가진 스크롤러의 블록 수준 자손에 일반적으로 유용할 수 있다: 오버레이 스크롤바와의 충돌을 피하려고 한쪽에 공간을 추가하면 스크롤바가 사라질 때 중앙에서 벗어난 것처럼 보이게 된다. 양쪽의 마진을 늘리면 이를 피할 수 있다.

또 다른 가능성은 요소를 보호하기 위해 마진을 늘리는 것과, 요소의 콘텐츠를 보호하기 위해 패딩을 늘리는 것 중에서 선택할 수 있게 하는 것이다.

구문은 다음과 같은 형태일 수 있다. scrollbar-avoid: none | [self | content] && both-edges?.

흥미로운 고려 사항은 이것이 scrollbar-gutter: match-parent의 필요성을 줄일 수 있다는 점이다. 부모의 scrollbar-gutter: stable 또는 scrollbar-gutter: always와 선택된 자식의 scrollbar-gutter: match-parent로 해결했을 상황은 대신 부모를 scrollbar-gutter: auto로 두고 관련 자식에 scrollbar-avoid: self 또는 scrollbar-avoid: content를 사용하여 해결할 수 있을 것으로 보인다.

force

force 키워드가 있으면 stable 및 always는 overflow가 auto 또는 scroll인 경우뿐 아니라 visible, hidden 또는 clip인 경우에도 효력을 발휘한다. 이로 인해 스크롤바가 표시되는 것은 아니며, 스크롤바 거터만 생긴다.

이 값을 사용하면 작성자는 스크롤러 자체에 예약된 것과 같은 양의 공간을 스크롤러에 인접한 요소의 가장자리에도 예약하여, 콘텐츠가 시각적으로 정렬되도록 할 수 있다. 클래식 스크롤바에는 패딩을 추가하고 오버레이 스크롤바에는 패딩을 추가하지 않는 방식으로 동일한 효과를 얻을 수도 있지만, 이것이 없으면 작성자가 해당 패딩을 추가해야 하는지, 그리고 추가해야 한다면 얼마나 추가해야 하는지를 신뢰할 수 있게 알 방법이 없다.

구체적인 예는 (이 글을 작성하는 시점에) Gmail의 UI에서 볼 수 있다: Gmail은 메일 목록 위의 도구 모음에 있는 컨트롤을 메일 목록 안의 컨트롤과 정렬하려고 하지만 항상 성공하는 것은 아니다. 다음은 두 개의 스크린샷으로, 하나는 클래식 스크롤바가 (OS 수준에서) 활성화된 경우이며, Gmail이 목록 위의 도구 모음에 얼마나 많은 패딩을 추가해야 하는지 정확히 추정하고 있고, 다른 하나는 오버레이 스크롤바가 활성화된 경우이며, Gmail이 불필요한 패딩을 추가하여 정렬이 어긋난다 (논의 중인 지점을 강조하기 위해 주황색 점선을 수동으로 추가했다).

도구 모음에서 이 간격을 패딩 대신 scrollbar-gutter: stable force를 사용하여 만들면, 두 경우 모두 아이콘이 정렬된 상태를 유지하며, 스크롤바 크기가 일반적이지 않은 시스템에서도 정렬이 유지된다.

이 값 때문에 이 속성은 단순히 스크롤 컨테이너에만 적용되는 것이 아니라 모든 요소에 적용되도록 만들어졌다. 따라서 예제에 표시된 것처럼 overflow: visible 요소에도 적용할 수 있다. 이는 사용자 에이전트가 거터를 배치하기 위해 기존 코드에만 의존할 수 없으므로, 구현에 어려움을 야기할 수 있다. 이전에는 거터를 가질 수 없었던 요소에도 거터를 배치해야 할 수 있기 때문이다. 이를 overflow가 적용되는 모든 요소로 제한해도 사용 사례에는 아마 부정적인 영향이 없고 구현을 더 쉽게 만들 수 있을 것이다. 그러나 그조차도 스크롤 컨테이너로 제한하는 것보다 여전히 더 어려울 수 있다.

위에서 언급한 구현상의 과제 외에도, 이 값이 의도한 만큼 신뢰성 있게 문제를 해결하는지는 명확하지 않다. 스크롤바와 그 거터의 크기 및 위치는 UA가 정의하므로, 서로 다른 요소 사이에서 달라질 수 있다. 스크롤바의 모양과 위치는 사용자 에이전트가 결정하므로, 이에 영향을 미칠 수 있는 속성의 목록에는 제한이 없다. direction(HTML dir 속성을 설정하여) 또는 scrollbar-width와 같은 속성을 설정하면 해당 요소가 스크롤 가능할 경우 사용자 에이전트가 스크롤바를 어떻게 생성할지 알기에 충분한 맥락을 제공하고, 따라서 올바른 위치에 동일한 크기의 거터를 만들 수 있을 가능성이 높지만, 이를 보장할 수는 없다.

이 명세의 초기 버전에서는, 이 값이 예제에서 설명된 효과를 달성할 수 있는 유일한 방법이었다. 그러나 그 이후, scrollbar-gutter: stable은 overflow: hidden 요소에도 적용되도록 변경되었다. overflow: hidden을 적용하면 해당 맥락에서 바람직하지 않을 수 있는 다른 효과도 발생하지만, scrollbar-gutter: stable과 overflow: hidden의 조합도 scrollbar-gutter: stable force와 같은 방식으로 간격을 추가하며, 특히 위에서 설명한 다른 문제들을 고려하면, 충분한 우회 방법이 될 수 있다.

match-parent

부모에 스크롤바 거터(또는 양쪽 가장자리에 거터)가 있는 블록 수준 박스에서, 이 값은 박스가 부모의 거터와 같은 쪽에 같은 너비의 스크롤바 거터를 갖게 한다. 또한, 해당 거터는 부모 박스의 거터와 겹치도록 한다.

scrollbar-gutter: match-parent가 지정된 박스에서 거터가 예상되는 쪽의 테두리 또는 마진이 0이 아닌 경우, 해당 박스의 거터 크기는 parent.gutter - child.border - child.margin이며, 거터+테두리+마진이 부모의 거터와 겹쳐진다.

scrollbar-gutter/ match-parent가 지정된 박스 자체가 스크롤 컨테이너인 경우, 스크롤바의 유형, 해당 박스의 overflow 속성, 그리고 scrollbar-gutter 속성의 다른 값에 따라, 자체 스크롤바를 위한 추가 거터가 필요할 수 있다. 이는 match-parent 값을 위해 추가된 거터의 양에 더해지는 것이며, 부모의 거터와 겹쳐지지 않는다.

참고: 다음 표는 서로 다른 유형의 스크롤바에 대해 overflow와 scrollbar-gutter의 상호작용을 요약하며, 어떤 경우에 스크롤바 거터를 위한 공간이 예약되는지를 보여준다.

스크롤바 거터를 위한 공간을 예약해야 하는가?

overflow	scrollbar-gutter	클래식 스크롤바		오버레이 스크롤바 (오버플로 여부와 관계없이)
		오버플로됨	오버플로되지 않음
scroll	auto	예	예
	stable	예	예
	always	예	예	예
auto	auto	예
	stable	예	예
	always	예	예	예
hidden	auto
	stable	예	예
	always	예	예	예
visible, clip	auto
	stable	force인 경우	force인 경우
	always	force인 경우	force인 경우	force인 경우

부록 C: 개인정보 보호 고려사항

이 명세는 새로운 개인정보 보호 고려사항을 도입하지 않습니다.

부록 D: 보안 고려사항

이 명세는 새로운 보안 고려사항을 도입하지 않습니다.

변경 사항

최근 변경 사항

2017년 6월 워킹 드래프트 이후 주요 변경 사항:

• text-overflow 정의를 [CSS-UI-4]에서 이동함.
• scrollbar-gutter의 핵심 정의를 [CSS-OVERFLOW-3]로 이동함(명세가 diff 해제되면 다시 복사 예정) 그리고 탐구적 scrollbar-gutter 확장 아이디어는 부록으로 이동.
• overflow와 overflow-clip-margin의 교체된 요소 적용을 정의함. 동작 방식은 추가 논의 중. (이슈 7144)
• 롱핸드 overflow-clip-margin 정의. (이슈 7245)

Level 3 이후 변경 사항

추후 작성 예정

감사의 글

특히 다음 분들의 피드백에 감사드립니다: Rossen Atanassov, Bert Bos, Tantek Çelik, John Daggett, fantasai, Daniel Glazman, Vincent Hardy, Håkon Wium Lie, Peter Linss, Robert O’Callahan, Florian Rivoal, Alan Stearns, Steve Zilles, 그리고 www-style 커뮤니티의 모든 분들.