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>

overflow clip edge의 기준이 되는 박스 엣지를 지정합니다. 즉, 지정된 오프셋이 0일 때 기준이 되는 위치입니다.

생략 시, 교체되지 않은 요소는 padding-box가 기본값, 교체된 요소는 content-box가 기본값입니다.

overflow-clip-margin을 교체된 요소에 적용하는 부분은 아직 작업 중입니다. [이슈 #7144]

<length [0,∞]>

지정된 오프셋은 overflow clip edge가 박스 엣지에서 얼마나 확장되는지를 결정합니다. 음수 값은 허용되지 않습니다. 생략 시 기본값은 0입니다.

overflow clip edge의 코너 모양은 박스의 외부 박스-섀도우와 누적 오프셋이 동일한 spread-radius를 가질 때와 정확히 동일합니다. CSS Backgrounds 3 § 4.2 코너 모양 및 CSS Backgrounds 3 § 6.1.1 섀도우 모양, 확장, 노크아웃을 참고하세요. 특히 border edge를 넘는 outset 공식에 유의하세요.

참고: 이 속성은 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 속성

이 속성은 잘림/중단된 콘텐츠의 연속성을 표시하기 위해 (강제 또는 비강제) region break 직전의 마지막 라인 박스에 콘텐츠를 삽입할 수 있게 해줍니다. 블록 컨테이너 자체가 직접 포함하는 라인 박스에만 영향을 미치지만, 상속되므로 오버라이드하지 않으면 하위 요소의 라인 박스에도 영향을 줄 수 있습니다. 박스에 region break 직전 라인 박스가 없으면, 이 속성은 아무 효과가 없습니다.

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

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

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

none

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

auto

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

<string>

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

block-ellipsis가 none이 아니면, block overflow ellipsis 문자열은 익명 인라인에 감싸져 라인 박스 끝에 위치하며, 블록 컨테이너의 루트 인라인 박스의 직접 하위로 들어갑니다. 이로 인해 해당 라인 박스의 다른 콘텐츠가 사용할 수 있는 공간이 줄어듭니다. 이 인라인은 unicode-bidi: plaintext와 line-height: 0가 할당되며, 라인 박스의 마지막 소프트 랩 기회([CSS-TEXT-3] 참고) 뒤에 배치됩니다. 이때 overflow-wrap 속성으로 추가된 소프트 랩 기회는 무시합니다. 라인 박스 전체 내용이 밀려날 경우, 해당 라인 박스는 strut을 포함하는 것으로 간주합니다(CSS 2.1 § 10.8.1 Leading and half-leading 참고). 텍스트 정렬 및 자간은 위치가 정해진 후에 이루어지며, 삽입된 block overflow ellipsis도 라인 콘텐츠와 함께 측정됩니다.

참고: block overflow ellipsis의 line-height를 0으로 설정하면 삽입된 요소로 인해 라인 높이가 증가하지 않아 추가 레이아웃 또는 순환이 발생하는 것을 방지할 수 있습니다. 이는 block overflow ellipsis를 페인트 타임에 삽입하는 것과 거의 동일하지만, 정렬 및 자간에는 참여합니다. 단점은 block overflow ellipsis에 비정상적으로 높은/깊은 글리프가 있으면 오버플로우될 수 있다는 점입니다.

block overflow ellipsis는 ::first-letter나 ::first-line 의사 요소에 포함되면 안 됩니다.

이후 fragmentation container가 해당 fragmentation context에 존재하여 이후 콘텐츠를 받을 경우, block overflow ellipsis로 인해 밀려난 콘텐츠는 해당 fragmentation container로 이동해야 합니다.

UA는 block overflow ellipsis를 끊김 없는 문자열로 처리해야 하며, block overflow ellipsis의 일부가 오버플로우될 경우, scrollable overflow로 처리하며, 렌더링은 text-overflow 속성의 영향을 받습니다.

block overflow ellipsis는 이벤트를 캡처하지 않습니다: 포인터 이벤트는 그 아래에 있는 요소로 전달됩니다.

박스의 고유 크기에도 영향을 미치지 않습니다: min-content 및 max-content 크기는 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 속성 등으로), 또는 비강제일 수도 있습니다(예: 콘텐츠가 크기 제약으로 인해 단편화 컨테이너를 넘칠 때). 다른 단편화 컨텍스트 (예: 박스 자체의 페이지네이션)에 적용되는 분할은 콘텐츠 폐기를 유발하지 않습니다.

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

지나치게 긴 오버플로우 행이 하나 있고, 블록 방향에 4줄이 넘는 추가 행이 있는 기사의 경우(아래 그림 참고), 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

ページ分割オーバーフローの現実装は、[CSS3GCPM]ドラフト（[CSS3-MARQUEE]案にも一致）で提案されたoverflow-styleプロパティではなく、overflow/overflow-x/overflow-yプロパティを使用しています。また、ここで説明されているcontinueプロパティでもありません。

단편화 오버플로우

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

요소의 continue 계산값이 fragments이고, 구현체가 요소에 박스를 생성하려고 할 때, 구현체는 해당 요소에 대해 fragment box 시퀀스를 생성해야 합니다. (continue: fragments가 설정된 요소가 fragment box를 하나만 생성하는 경우도 있습니다. 하지만 요소의 continue가 fragments가 아니면, 해당 박스는 fragment box가 아닙니다.) 모든 fragment box는 단편화 컨테이너이며, 해당 단편화 컨테이너가 단편화되어야 할 만큼 오버플로우가 발생하면 이전 박스의 다음 형제(sibling)로 추가 fragment box가 생성됩니다. 그런데 이전 요소의 다음 형제처럼 생성하는 것이 맞는가? 다른 박스 수준의 처리와 정확히 어떻게 상호작용하는지 명확히 해야 함. 또한 fragment box가 [css-multicol-1]이 정의한 멀티컬럼 박스라면 용어는 multi-column container임 overflow columns가 생성될 상황에서는 추가 fragment box로 콘텐츠가 흐릅니다. 단, fragment box 자체가 외부 단편화 컨텍스트(페이지, 컬럼, 다른 fragment box 등)에서 분할될 수도 있습니다; 이런 분할은 여러 fragment box가 아닌 하나의 fragment box의 여러 fragment(조각)로 처리됩니다. (이것이 중요한 이유는 fragment box가 인덱스로 스타일링될 수 있기 때문입니다; 단일 인덱스의 fragment box가 여러 fragment에 걸쳐 분할될 때, 페이지 단위로 분할하더라도 해당 인덱스와 콘텐츠의 연결이 끊기지 않도록 의도했습니다.) 강제 분할이 외부 단편화 컨텍스트로 분할될 때 새로운 fragment box를 생성해야 할까, 아니면 단일 fragment box의 새로운 fragment만 생성해야 할까? 여기서 fragment box 대신 적절한 용어를 찾는 것이 혼동을 줄일 수 있을까?

요소가 다른 종류의 단편화 컨텍스트에서 분할된 조각을 스타일링하고 싶다면? 현재 규칙은 ::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이 적용되는 것이 바람직할 것 같습니다.

이 명세는 fragment를 포함하는 레이아웃이 fragment의 고유 크기를 사용해 fragment에 할당되는 공간을 변경하는 특성을 가진 경우 적용되는 처리 모델도 필요합니다. [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() 의사 요소가 없는 규칙이 없을 때, 각 fragment box의 계산된 스타일은 해당 fragment box를 생성한 요소의 계산된 스타일입니다. 하지만 fragment box의 스타일은 셀렉터의 subject [SELECT]가 ::nth-fragment() 의사 요소를 포함하는 규칙에 의해 영향을 받으며, 1부터 시작하는 fragment box의 번호가 해당 ::nth-fragment() 의사 요소와 셀렉터(의사 요소 제외 부분)가 단편을 생성한 요소에 매칭될 때 적용됩니다.

fragment box의 스타일을 결정할 때, 해당 fragment 의사 요소에 매칭되는 규칙들과 요소 자체에 매칭되는 규칙들이 함께 캐스케이드되며, fragment 의사 요소는 의사 클래스와 동일한 특이성을 추가합니다. 이 내용을 cascading 모듈에도 명시해야 할까요?

<!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 등의 다른 값은 지정할 수 있지만, 내부 display 타입을 변경하는 것은 허용되지 않습니다. (continue 속성은 블록 컨테이너, flex 컨테이너, grid 컨테이너에만 적용되기 때문) 정확한 동작 명세 필요

다른 의사 요소와 마찬가지로, 의사 요소는 해당 요소 내부에 존재하는 모델을 따르기 때문에, ::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. 의사 요소를 제거한 경우, 해당 선언이 fragment(또는 그 의사 요소)에 적용되어야 하며, 각 단순 셀렉터 시퀀스와 매칭되는 요소 간의 특정 연결이 있어야 함
3. 제거된 ::nth-fragment() 의사 요소마다, 그 fragment는 해당 의사 요소가 붙은 셀렉터에 연결된 요소의 fragment box 내에 존재해야 하며, 인덱스가 의사 요소와 일치해야 함

<!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

scrollbar gutter는 overflow가 scroll, hidden, auto일 때 항상 존재합니다. 스크롤바 종류나 박스 오버플로우 여부와 무관하게 적용됩니다.

scrollbar-gutter: always는 요소 가장자리의 (작은) 인터랙티브 요소가 오버레이 스크롤바에 가려지는 문제를 해결하는 데 사용됩니다. 예를 들어, 기본 todo 리스트에서 각 줄 끝에 오른쪽 정렬된 체크박스가 있을 때, 클래식 스크롤바에서는 문제가 없지만, 오버레이 스크롤바는 체크박스를 가려 상호작용이 불편해집니다.

오버레이 스크롤바는 일반적으로 일시적이며, 상호작용하지 않으면 사라지므로 체크박스 사용 자체가 불가능하지는 않습니다. 하지만 스크롤바가 나타나면 상호작용이 불편해집니다. 작성자는 오른쪽 패딩을 추가해 문제를 해결하려 할 수 있지만, (1) 얼마나 추가해야 할지, (2) 클래식 스크롤바의 경우엔 필요 없는 패딩임을 알기 어렵습니다. scrollbar-gutter: always는 이 문제를 해결하며, 클래식 스크롤바의 경우엔 변화 없고, 오버레이 스크롤바의 경우엔 바람직한 gutter가 추가됩니다:

애플은 이 값을 추가하는 데 소극적입니다. 작성자가 너무 넓게 사용해 오버레이 스크롤바의 공간 절약 장점을 무효화할 수 있기 때문입니다.

대안으로, 인터랙티브 요소에만 적용되는 속성을 제안하는 의견이 있습니다. 활성화되면 적절한 만큼의 margin을 자동으로 늘려 오버레이 스크롤바에 가려지지 않게 하며, 그렇지 않은 경우엔 변화를 주지 않습니다.

토글을 추가해 요소의 inline-end와 inline-start margin을 모두 늘리거나 아무것도 하지 않을 수도 있습니다. 이것은 scroller의 블록 레벨 자식 중 테두리나 배경이 있는 요소에 유용할 수 있습니다: 한 쪽에만 공간을 주면 스크롤바가 사라질 때 중심이 어긋납니다. 양쪽 margin을 늘리면 이런 현상을 피할 수 있습니다.

padding을 늘려 요소의 콘텐츠를 보호하는 방법도 있습니다.

문법은 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가 visible, hidden, clip일 때도 적용되며, auto 또는 scroll인 경우에도 적용됩니다. 스크롤바가 표시되지는 않고, scrollbar gutter만 생성됩니다.

이 값은 스크롤러 옆에 있는 요소의 가장자리에도 스크롤러와 동일한 공간을 확보해, 콘텐츠가 시각적으로 정렬되게 해줍니다. 클래식 스크롤바에는 패딩을 추가하고, 오버레이 스크롤바에는 추가하지 않는 방법도 있지만, 실제로 얼마나 추가해야 할지 알 수 없으므로 신뢰할 수 없습니다.

실제 예시는 Gmail UI에서 볼 수 있습니다. OS 레벨에서 클래식 스크롤바를 켜면 Gmail은 툴바에 적절한 패딩을 추가해 아이콘이 정렬되고, 오버레이 스크롤바를 켜면 불필요한 패딩이 더해져 정렬이 어긋납니다(오렌지 점선은 설명을 위해 수동 추가됨).

툴바에서 scrollbar-gutter: stable force를 사용하면, 어떤 경우에도 아이콘이 정렬되고, 스크롤바 크기가 특이한 시스템에서도 일관된 결과를 얻을 수 있습니다.

이 값 때문에 속성은 모든 요소에 적용되도록 변경되었습니다. scroll container에만 적용했다면 사용 사례에 문제는 없고 구현도 쉬웠을 수 있습니다. 하지만 모든 요소에 적용하는 것은 구현 난이도를 높일 수 있습니다. scroll container로 제한하는 것이 더 쉬울 수 있습니다.

구현 난이도 외에도, 이 값이 문제를 항상 해결한다고 보장할 수 없습니다. 스크롤바와 gutter의 크기, 위치는 UA 정의이므로 요소마다 다를 수 있습니다. 스크롤바의 모양과 위치는 UA에 달려 있으므로 여러 속성이 영향을 줄 수 있습니다. direction(HTML dir 속성)이나 scrollbar-width 등을 설정하면 UA가 해당 요소에 스크롤바를 어떻게 생성할지 알 수 있어 gutter도 맞게 만들 수 있지만, 보장할 수는 없습니다.

초기 명세에서는 이 값만으로 예시의 효과를 낼 수 있었습니다. 이후 scrollbar-gutter: stable이 overflow: hidden 요소에도 적용되게 바뀌었고, overflow: hidden을 적용하면 부작용이 있을 수 있지만, scrollbar-gutter: stable과 overflow: hidden 조합으로 동일한 공간을 만들 수 있어, 위 문제의 우회책이 될 수 있습니다.

match-parent

부모에 scrollbar gutter(혹은 양쪽 gutter)가 있는 블록 레벨 박스에서, 동일한 쪽, 동일한 너비의 gutter를 자식 박스에도 적용합니다. 그리고 부모 박스의 gutter와 겹치도록 만듭니다.

match-parent 박스에서 해당 쪽 border나 margin이 0이 아니면, 박스의 gutter는 parent.gutter - child.border - child.margin이 되고, gutter+border+margin이 부모의 gutter와 겹칩니다.

scrollbar-gutter/ match-parent 박스가 스스로 scroll container인 경우, 스크롤바 종류, overflow 속성, scrollbar-gutter 속성 등에 따라 자체 스크롤바용 gutter가 추가로 필요할 수 있습니다. 이 gutter는 match-parent 값에 의해 추가된 gutter와는 별도로 존재하며, 부모의 gutter와 겹치지 않습니다.

참고: 아래 표는 overflow와 scrollbar-gutter가 다양한 종류의 스크롤바에서 어떻게 상호작용하는지, scrollbar gutter 공간이 언제 확보되는지 요약합니다.

scrollbar gutter 공간을 확보해야 할까?

overflow	scrollbar-gutter	클래식 스크롤바		오버레이 스크롤바 (오버플로우 여부와 무관)
		오버플로우 발생	오버플로우 없음
scroll	auto	예	예
	stable	예	예
	always	예	예	예
auto	auto	예
	stable	예	예
	always	예	예	예
hidden	auto
	stable	예	예
	always	예	예	예
visible, clip	auto
	stable	if force	if force
	always	if force	if force	if 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 커뮤니티의 모든 분들.