CSS 페이지형 미디어 모듈 레벨 3

1. 소개

1.1. 값 정의

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

속성 정의에 나열된 속성별 값들 외에, 이 명세서에서 정의된 모든 속성은 또한 CSS-wide 키워드들을 자신의 속성 값으로 허용합니다. 가독성을 위해 이들은 명시적으로 반복하지 않았습니다.

2. 페이지 용어

다음 용어와 부속 도해는 페이지 모델을 설명하는 데 도움이 됩니다:

Page sheet

페이지 시트는 물리적 매체의 한 면입니다. 오른쪽 그림은 페이지 시트의 왼쪽 상단 모서리 표현을 보여줍니다.

Printable and non-printable areas

비인쇄 가능 영역은 프린터와 같은 물리 장치가 신뢰성 있게 마킹할 수 없는 페이지 시트의 영역으로, 보통 프린터의 용지 취급 메커니즘 때문에 발생합니다. 이 값은 프린터에 따라 다르며 일반적으로 페이지 시트의 각 가장자리를 따라 있는 작은 영역입니다. 인쇄 가능 영역은 프린터가 신뢰성 있게 마킹할 수 있는 페이지 시트의 영역입니다. 인쇄 가능 영역의 크기는 페이지 시트의 크기에서 비인쇄 가능 영역의 크기를 뺀 값입니다. 사용자 에이전트는 특정 인쇄 장치에 대한 이 영역의 치수를 모를 수 있지만, 치수가 알려진 경우 사용자 에이전트는 문서의 포맷을 조정하여 콘텐츠가 인쇄 가능 영역 안에 들도록 할 수 있습니다. 이러한 조정이 어떻게 수행되는지는 장치에 따라 다르며 § 7.4 Rendering page boxes that do not fit a page sheet 및 § 3.2 Content outside the page box 섹션에 표현된 제약 내에서 결정됩니다.

Page Orientation

페이지 방향은 page box의 변 길이를 비교하여 정의됩니다. page box는 긴 변과 짧은 변이라 불리는 두 개의 수직 변을 가진 직사각형입니다. 긴 변의 길이는 항상 짧은 변의 길이보다 크거나 같습니다. page box가 정사각형인 경우 두 변은 같은 길이가 되며 어느 쪽을 긴 변으로 사용해도 됩니다. 이 명세서는 portrait과 landscape의 페이지 방향을 정의합니다.

Portrait Orientation

세로(포트레이트) 페이지는 높이가 너비보다 크거나 같습니다. 가로 요소는 짧은 변과 평행하고 세로 요소는 긴 변과 평행합니다.

Landscape Orientation

가로(랜드스케이프) 페이지는 너비가 높이보다 크거나 같습니다. 가로 요소는 긴 변과 평행하고 세로 요소는 짧은 변과 평행합니다.

참고: CSS3는 landscape와 reverse-landscape를 구분하지 않습니다. 그러나 향후 CSS 버전에서는 구분할 수 있습니다. 사용자 에이전트는 양면 인쇄를 포맷할 때 제본 가장자리, 페이지 진행 및 읽기 용이성을 고려하여 landscape와 reverse-landscape 렌더링 사이를 선택해야 합니다.

Duplex Printing

양면 인쇄는 페이지 시트의 각 면에 하나의 page box를 출력하여 페이지 시트의 양면을 사용합니다. 이 모듈은 문서가 양면 인쇄되는지 여부를 지정하는 기능을 제공하지 않지만, 왼쪽 페이지와 오른쪽 페이지의 개념은 문서가 실제로 양면 인쇄되는지 여부와 관계없이 양면 인쇄를 가정하여 정의됩니다.

Binding Edge

제본 가장자리는 재료가 제본된 경우 page box에서 제본 쪽을 향한 가장자리입니다. 제본 가장자리는 제본에 사용되는 공간을 제공하기 위해 반대쪽 가장자리보다 더 큰 여백을 가지는 경우가 많습니다. 제본 가장자리는 네 가장자리 중 어느 것이든 될 수 있습니다. 그러나 관례적으로 세로 방향의 page box는 제본 가장자리가 수직이 되도록 제본됩니다. 이 모듈은 제본 가장자리를 지정하는 방법을 제공하지 않습니다. 양면 인쇄의 경우 왼쪽 및 오른쪽 페이지에 대해 제본 가장자리가 서로 반대편에 있습니다.

Facing Pages

Facing pages는 연속된 두 페이지로, 문서를 양면 인쇄할 때 서로 다른 용지의 서로 다른 면에 놓이는 페이지들입니다. 일반적으로 이전 페이지는 한 용지의 뒷면이고 다음 페이지는 다른 용지의 앞면이 됩니다. 보통 facing pages는 정상적인 읽기 방향에서 제본 가장자리가 수직이고 인접하도록 배치됩니다.

Left Page

일반적으로 짝을 이루는 facing pages에서 왼쪽에 위치하는 페이지입니다. 왼쪽에서 오른쪽으로 진행하는 문서 레이아웃에서는 facing pages 중 더 이른 페이지가 왼쪽에 놓입니다. 왼쪽 페이지에 특정한 규칙은 :left page selector를 사용하여 지정할 수 있습니다.

Right Page

일반적으로 짝을 이루는 facing pages에서 오른쪽에 위치하는 페이지입니다. 오른쪽에서 왼쪽으로 진행하는 문서 레이아웃에서는 facing pages 중 더 이른 페이지가 오른쪽에 놓입니다. 오른쪽 페이지에 특정한 규칙은 :right page selector를 사용하여 지정할 수 있습니다.

3. 페이지 모델

paged media 포맷팅 모델에서는 문서가 하나 이상의 page box로 전송됩니다. page box는 용지의 한 페이지와 같은 직사각형 인쇄 매체 표면에 매핑되는 특수한 CSS 박스입니다. 이는 대략적으로 viewport와 유사합니다.

다른 CSS 박스와 마찬가지로, page box는 margin, border, padding 및 content 영역으로 구성됩니다. page box의 content 및 margin 영역은 특별한 기능을 가집니다:

CSS 2.1에서는 page box와 page area가 단순한 직사각형이었습니다. 둘 다 margin, border 및 padding을 가진 CSS 박스가 아니었습니다. 이 CSS 박스는 page box 및 page area와 구별되어야 하며, 각각은 그에 대응하는 margin 영역과 content 영역이 됩니다. 명칭에 대한 아이디어가 있나요?

• page box의 content 영역은 page area라고 불립니다. 문서의 내용은 하나 이상의 page box로 흘러들어갑니다. page area는 주어진 page box 내에 레이아웃되는 루트 요소와 그 자손들에 의해 생성된 모든 박스의 컨테이너로 작동합니다. 첫 페이지의 page area 가장자리는 문서의 초기 containing block를 설정하는 직사각형을 결정합니다.
• page box의 margin 영역은 16개의 page-margin boxes로 나뉩니다. 각 page-margin box는 자체의 margin, border, padding 및 content 영역을 가집니다. page-margin boxes는 보통 실행 머리글 및 바닥글을 표시하는 데 사용됩니다.

page box의 속성은 page context 내에 선언된 속성들에 의해 결정됩니다. page context는 선언 블록으로서 @page 규칙의 선언 블록입니다. 유사하게 page-margin box의 속성은 그 margin context 내에 선언된 속성들에 의해 결정됩니다. page context의 선언은 page box에 영향을 주거나 page-margin boxes에 상속될 수 있지만, 문서의 루트 요소 또는 다른 콘텐츠에는 적용되거나 상속되지 않습니다.

page box의 containing block은 page context에서 size 속성을 사용하여 지정됩니다. 그런 다음 page box의 너비와 수평 여백은 정상 흐름의 비대체 블록 요소에 대해 계산되는 방식과 동일하게 정확히 계산됩니다. [CSS2] page box의 높이 및 수직 여백은 유사하게 계산됩니다(블록 높이 공식 대신). 두 경우 모두 값이 과도하게 제약되는 경우, 어떠한 여백을 무시하는 대신 containing block이 page box의 여백 가장자리와 일치하도록 크기를 조정합니다.

3.1. 페이지 배경과 페인팅 순서

페이지의 내용을 그릴 때, 페이지 레이어는 다음 페인팅 순서(가장 아래부터)로 그려집니다:

1. 페이지 배경
2. 문서 캔버스
3. 페이지 테두리
4. 문서 내용
5. page-margin boxes

페이지 모델에서 페이지 배경은 루트 배경과 유사하게 동작합니다: 그 background painting area는 bleed area이며, 이는 page box 전체, 즉 여백을 포함하여 덮습니다(이는 background-clip의 값과 관계없이 적용됩니다). 페이지 배경은 기본적으로 page box의 패딩 영역 안에서 고정되며(사용자 에이전트가 [CSS-BACKGROUNDS-3]을 지원하는 경우 background-origin을 준수합니다). 그러나 background-attachment가 fixed이면 이미지는 page box와 그 여백을 포함한 영역을 기준으로 위치 지정됩니다(즉 background positioning area가 페이지의 margin box가 됩니다).

문서 캔버스 배경은 page box의 배경으로 그려집니다: 기본적으로 그 background painting area는 page box의 border box를 덮으며, [CSS-BACKGROUNDS-3]를 지원하는 UA의 경우 루트 요소에 지정된 background-clip 값을 따릅니다. 그러나 여전히 루트 요소 또는 page area에 대해 위치 지정됩니다.

page-margin boxes와 관련하여, 문서 캔버스, 페이지 테두리 및 모든 문서 내용은 z-index 값이 0인 단일 요소로 취급되어 스태킹 컨텍스트를 형성합니다 [CSS2]: page-margin boxes는 문서 내용의 일부와 섞이거나 내용과 캔버스 사이에 끼어들지 않습니다. 이들은 문서 내용 앞에만 그려지거나 문서 캔버스 뒤에만 그려질 수 있습니다. 페이지 배경은 항상 모든 것 아래에 그려집니다.

z-index 속성은 page-margin boxes에 적용됩니다. position 속성은 page-margin boxes에 적용되지 않으므로, z-index는 position 속성 값에 관계없이 항상 page-margin boxes에 대해 위치된 요소처럼 작용합니다. 각 page-margin box는 항상 스태킹 컨텍스트를 형성합니다.

page-margin boxes 상호 간의 기본 페인팅 순서(또는 CSS2.1 부록 E "트리 순서")는 다음과 같습니다:

1. @top-left-corner
2. @top-left
3. @top-center
4. @top-right
5. @top-right-corner
6. @right-top
7. @right-middle
8. @right-bottom
9. @bottom-right-corner
10. @bottom-right
11. @bottom-center
12. @bottom-left
13. @bottom-left-corner
14. @left-bottom
15. @left-middle
16. @left-top

시작은 @top-left-corner에서 시작하여 시계 방향으로 진행합니다. 이 순서는 임의적이며 z-index로 재정의할 수 있습니다. 이는 page-margin boxes가 겹칠 때만 눈에 띄는 효과를 가지며, 대부분의 경우에는 발생하지 않아야 합니다.

3.2. Page box 밖의 콘텐츠

페이지 모델에서 콘텐츠를 포맷할 때 일부 콘텐츠가 page box 밖으로 벗어날 수 있습니다. 예를 들어, white-space 속성 값이 pre인 요소는 page box보다 넓은 박스를 생성할 수 있습니다. 또 다른 예로, 박스가 절대 또는 상대적으로 위치 지정되면 "불편한" 위치에 놓일 수 있습니다. 예를 들어, 이미지가 page box의 가장자리에 놓이거나 page box보다 100,000미터 아래에 놓일 수 있습니다.

이러한 요소들의 정확한 포맷팅에 대한 명세는 이 문서의 범위 밖에 있습니다. 그러나 저자와 사용자 에이전트는 page box 밖의 콘텐츠에 관해 다음 일반 원칙을 따르는 것이 권장됩니다:

• 페이지가 "bleed"할 수 있도록 콘텐츠가 page box를 약간 넘어가도록 허용해야 합니다.
• 사용자 에이전트는 요소의 위치 지정을 존중하기 위해 많은 수의 콘텐츠-빈 페이지를 생성하지 않도록 SHOULD 피해야 합니다(예: 100장의 빈 페이지를 인쇄하는 것은 일반적으로 저자나 사용자의 의도가 아닐 것입니다). Content-empty page는 배경 및/또는 테두리 외에는 인쇄 가능한 콘텐츠를 포함하지 않는 page box입니다. page box의 page area가 생성된 콘텐츠를 포함하거나, 가시성이 hidden인 콘텐츠 또는 영-너비 공백 문자 같은 보이지 않는 콘텐츠를 포함하는 경우 이는 content-empty page가 아닙니다. 반면 배경 및/또는 테두리 및/또는 page-margin box 콘텐츠만 포함하는 페이지는 content-empty page입니다.

  참고로, page-break-before/break-before 및 page-break-after/break-after의 강제 분할 값들을 존중하기 위해 소수의 빈 page box를 생성하는 것이 때때로 필요할 수 있습니다. [CSS2] [CSS-BREAK-3]

• 저자는 요소를 렌더링을 피하려고 일부러 불편한 위치에 배치해서는 SHOULD NOT 합니다. 대신:
  • 박스 생성을 완전히 억제하려면 display 속성을 none으로 설정합니다.
  • 박스를 보이지 않게 하려면 visibility 속성을 설정합니다.
• 이 명세서는 page box 밖에 위치한 박스가 어떻게 처리되는지를 정의하지 않습니다. 가능한 처리 방식으로는 이를 버리거나 문서 끝에 대해 이들을 위한 page box를 생성하는 것이 있습니다.

3.3. 페이지 진행

CSS는 문서가 양면 인쇄되든 그렇지 않든 모든 문서에서 왼쪽 페이지와 오른쪽 페이지를 구별합니다. 각 왼쪽 페이지 뒤에는 오른쪽 페이지가 오고 그 반대도 마찬가지입니다. 왼쪽 및 오른쪽 페이지는 :left 및 :right 의사클래스를 사용하여 다르게 스타일링할 수 있습니다.

문서의 첫 페이지가 왼쪽 페이지인지 오른쪽 페이지인지는 문서의 페이지 진행에 달려 있습니다. page progression은 문서의 인쇄된 페이지가 나란히 배치될 때 어떤 방향으로 순서가 매겨지는지를 나타냅니다. 예를 들어, 영어 및 수평으로 설정된 일본어는 일반적으로 왼쪽에서 오른쪽으로 진행하는 반면, 아랍어 및 수직으로 설정된 일본어는 일반적으로 오른쪽에서 왼쪽으로 진행합니다.

페이지 진행 방향은 다음과 같이 결정됩니다:

• 텍스트가 수평 줄로 배치되는 경우, page progression은 inline base direction과 동일합니다.
• 텍스트가 수직 줄로 배치되는 경우, page progression은 block flow direction과 동일합니다.

UA가 CSS 3 Writing Modes Module의 direction 및 writing-mode 속성을 지원하는 경우 [CSS-WRITING-MODES-3], 결정되어야 하며 page progression은 principal writing mode에 의해 결정됩니다.

왼쪽에서 오른쪽으로 진행하는 page progression을 가진 문서에서는 문서의 첫 페이지가 오른쪽 페이지가 되며 그 반대도 마찬가지입니다. 문서가 왼쪽 또는 오른쪽 페이지에서 인쇄를 시작하도록 강제로 지정하려면, 저자는 루트로 페이지 분할을 전파하는 break-before 값을 지정할 수 있습니다. [CSS-BREAK-3] 이 경우 UA는 첫 번째(빈) 페이지들을 억제해야 하며 (:first 의사클래스는 첫 번째 인쇄된 페이지와 일치합니다).

html { break-before: always }

html { break-before: left }

4. 페이지 선택자 및 페이지 문맥

4.1. @page 규칙

저자는 @page 규칙 내에서 페이지 박스의 치수, 방향, 여백과 같은 다양한 측면을 지정할 수 있습니다. @page 규칙은 규칙 집합이 허용되는 곳이라면 어디서나 허용됩니다. @page 규칙은 키워드 @page, 선택자들의 선택적 콤마로 구분된 목록 및 선언 블록(이를 page context라 합니다)으로 구성됩니다. @page 규칙은 또한 선언들 사이에 다른 at-규칙들을 포함할 수 있습니다. 이 명세의 현재 레벨은 margin at-rules만을 @page 내부에서 허용합니다.

@page 규칙에 선택자 목록이 없으면 모든 페이지에 적용됩니다. 다른 @page 규칙은 자신의 선택자 중 적어도 하나와 일치(match)하는 페이지에 적용됩니다. page context 내에 선언된 속성들은 페이지 박스에 적용됩니다.

페이지 또는 margin 문맥 내의 선언 블록을 처리하는 동안 오류가 발생하면 구문 오류 처리 규칙이 적용됩니다. 즉, 블록 내의 유효한 선언들은 적용됩니다.

4.2. 페이지 선택자

page selector는 page type selector 또는 page pseudo-class 중 하나로 구성되며, 그 뒤에 0개 이상의 추가 page pseudo-class가 올 수 있습니다. 선택자 구성 요소 사이에는 공백이 허용되지 않습니다. <page-selector> 문법과 예시는 아래에서 찾을 수 있습니다.

page selector는 모든 구성 요소가 해당 페이지와 일치할 때에만 주어진 페이지와 일치(match)한다고 합니다.

page type selector 는 대소문자를 구별하는 CSS 식별자입니다. 이는 [CSS2]에 정의된 바와 같이, named page type으로 생성된 페이지들과 일치(matches)합니다. page type 이름으로 auto(ASCII 대소문자 구분 없음)가 사용되는 것은 규칙을 무효로 만들지는 않지만, 결코 일치해서는 안 됩니다.

page pseudo-class는 ASCII 대소문자 구분 없음이고, 일반 선택자에서의 의사클래스와 동일한 문법을 가집니다. [SELECT] 다양한 page pseudo-class들은 아래에 정의되어 있습니다.

4.2.1. 스프레드 의사클래스: :left, :right

양면 인쇄 문서에서는 왼쪽과 오른쪽 페이지가 종종 다르게 포맷됩니다. 이는 :left 및 :right 페이지 의사클래스를 사용하여 표현할 수 있습니다.

모든 페이지는 사용자 에이전트에 의해 자동으로 페이지 진행(page progression)에 기반하여 왼쪽 페이지 또는 오른쪽 페이지로 분류됩니다. :left 및 :right 의사클래스는 각각 일치하는 left 또는 right pages만을 매칭합니다.

@page :left {
margin-left: 3cm;
margin-right: 4cm;
}

@page :right {
margin-left: 4cm;
margin-right: 3cm;
}

왼쪽 및 오른쪽 페이지에 대해 서로 다른 선언이 주어졌다면, 사용자 에이전트는 페이지 박스를 실제로 왼쪽 및 오른쪽 시트로 전송하지 않더라도(예: 한 면만 인쇄하는 프린터) 해당 선언을 준수해야 합니다. 즉, 단면 인쇄 장치라도 올바르게 포맷된 출력을 생성해야 합니다.

4.2.2. 첫 페이지 의사클래스: :first

:first 의사클래스는 문서의 첫 번째 인쇄된 페이지와 일치(matches)합니다.

@page { margin: 2cm } /* 모든 여백을 2cm로 설정 */

@page :first {
margin-top: 10cm /* 첫 페이지의 상단 여백 10cm */
}

4.2.3. 공백 페이지 의사클래스: :blank

:blank 의사클래스는 content-empty pages와 일치(matches)하며, 이는 강제 페이지 분할의 결과로 나타나는 페이지들입니다.

h1 { break-before: left }

@page :blank {
  @top-center { content: "This page is intentionally left blank" }
}

:blank에 의해 매칭된 페이지는 다른 페이지 의사클래스와도 중복 매칭될 수 있습니다.

h1 { break-before: left }

@page :blank {
  @top-center { content: none }
}

@page :right {
  @top-center { content: "Preliminary edition" }
  @bottom-center { content: counter(page) }
}

4.3. @page 규칙 문법

@page 규칙은 다음 문법에 따라 파싱되며, 아래에 명시된 추가 규칙들이 적용됩니다:

@page = @page <page-selector-list>? { <declaration-rule-list> }
<page-selector-list> = <page-selector>#
<page-selector> = [ <ident-token>? <pseudo-page>* ]!
<pseudo-page> = ':' [ left | right | first | blank ]

/* Margin rules */
@top-left-corner = @top-left-corner { <declaration-list> };
@top-left = @top-left { <declaration-list> };
@top-center = @top-center { <declaration-list> };
@top-right = @top-right { <declaration-list> };
@top-right-corner = @top-right-corner { <declaration-list> };
@bottom-left-corner = @bottom-left-corner { <declaration-list> };
@bottom-left = @bottom-left { <declaration-list> };
@bottom-center = @bottom-center { <declaration-list> };
@bottom-right = @bottom-right { <declaration-list> };
@bottom-right-corner = @bottom-right-corner { <declaration-list> };
@left-top = @left-top { <declaration-list> };
@left-middle = @left-middle { <declaration-list> };
@left-bottom = @left-bottom { <declaration-list> };
@right-top = @right-top { <declaration-list> };
@right-middle = @right-middle { <declaration-list> };
@right-bottom = @right-bottom { <declaration-list> };

또한 다음 규칙들이 적용됩니다:

• <page-selector> 또는 <pseudo-page>의 구성 요소 사이에는 공백이 허용되지 않습니다(이는 <compound-selector>에 대한 규칙과 유사합니다).

• @page 규칙은 오직 page properties 및 margin at-rules만 포함할 수 있습니다.

• margin at-rules 은 오직 page-margin properties만 포함할 수 있습니다.

@page { ... }
@page :left { ... }
@page :right { ... }
@page LandscapeTable { ... }
@page CompanyLetterHead:first { ... } /*  식별자와 의사 페이지. */
@page:first { ... }
@page toc, index { ... }
@page :blank:first { ... }

@page {
 @top-left { ... /* 문서 이름 */ }
 @bottom-center { ... /* 페이지 번호 */}
}
@page :left { @left-middle { ... /* 왼쪽 여백의 페이지 번호 */ }}
@page :right{ @right-middle { ... /* 오른쪽 페이지의 오른쪽 여백의 페이지 번호 */}}

@page :left { @bottom-left-corner { ... /* 왼쪽 페이지 번호 */ }}
@page :right { @bottom-right-corner { ... /* 오른쪽 페이지 번호 */ }}
@page :first { @bottom-left-corner { ... /* 첫 페이지의 빈 바닥글 */ }
@bottom-right-corner { ... /* 빈 바닥글 */ } }

4.4. 페이지 문맥에서의 캐스케이딩

페이지 및 여백 문맥의 선언들은 요소를 위한 스타일 규칙의 선언들과 마찬가지로 캐스케이딩됩니다.

페이지 선택자의 specificity는 Selectors 모듈에서 정의된 계산 방식과 유사한 방식으로 계산됩니다:

• 페이지 타입 이름의 개수를 셉니다 (= f)

  페이지 선택자의 문법을 고려하면, f는 0 또는 1만 될 수 있습니다.

• ':first' 또는 ':blank' 의사클래스의 개수를 셉니다 (= g)
• ':left' 또는 ':right' 의사클래스의 개수를 셉니다 (= h)

참고: 동일한 의사클래스의 반복 발생은 허용되며 specificity를 증가시킵니다.

저장 공간의 제한으로 인해 구현체는 f, g 또는 h의 크기에 제한을 가질 수 있습니다. 그렇다면 한계보다 큰 값들은 그 한계로 강제 클램프되어야 하고, 오버플로우되어서는 안 됩니다.

Specificity는 세 구성 요소(f, g, h)를 순서대로 비교하여 비교합니다: f 값이 더 큰 specificity가 더 구체적입니다; 만약 두 f 값이 같다면 두 g 값을 비교하고, 그 다음으로 h를 비교합니다. 모든 값이 같으면 두 specificity는 동일합니다.

@page { } /* specificity = (0,0,0) */
@page :left { } /* specificity = (0,0,1) */
@page :first { } /* specificity = (0,1,0) */
@page :blank:left { } /* specificity = (0,1,1) */
@page artsy { } /* specificity = (1,0,0) */
@page artsy:left { } /* specificity = (1,0,1) */
@page artsy:first { } /* specificity = (1,1,0) */

@page :left {
  margin-left: 4cm;
}

@page {
  margin-left: 3cm;
}

@page :first {
  color: green;

  @top-left {
    content: "foo";
    color: blue;
  }
  @top-right {
    content: "bar";
  }
}

@page { color: red;
  @top-center {
    content: "Page " counter(page);
  }
}

@page { margin: 25mm;}
@page { font-size: 14pt;}

5. 페이지 여백 박스

페이지 여백 박스는 페이지 여백 내의 박스로, 의사 요소처럼 생성된 콘텐츠를 포함할 수 있습니다.

페이지 여백 박스는 페이지 번호나 문서 제목과 같은 보조 정보용으로 예약된 페이지의 일부인 페이지 머리글과 바닥글을 만드는 데 사용할 수 있습니다.

페이지 여백 박스는 페이지 영역을 기준으로 배치되며 페이지 방향과 독립적입니다. 예를 들어, 상단 페이지 여백 박스는 세로 또는 가로 방향 모두에서 페이지 영역 위에 있습니다. 다양한 페이지 여백 박스는 아래 도해에서 정의되고 예시로 제시되어 있습니다:

표 1 페이지 여백 박스 정의

박스	설명	배치
top-left-corner	페이지 박스의 상단 및 왼쪽 여백의 교차에 의해 정의되는 고정 크기 박스
top-left	top-left-corner 및 top-center 페이지 여백 박스 사이의 상단 페이지 여백을 채우는 가변 너비 박스
top-center	페이지의 좌우 테두리 가장자리 사이에 수평으로 중앙 정렬되고 top-left 및 top-right 페이지 여백 박스 사이의 상단 페이지 여백을 채우는 가변 너비 박스
top-right	top-center 및 top-right-corner 페이지 여백 박스 사이의 상단 페이지 여백을 채우는 가변 너비 박스
top-right-corner	페이지 박스의 상단 및 오른쪽 여백의 교차에 의해 정의되는 고정 크기 박스
left-top	top-left-corner 및 left-middle 페이지 여백 박스 사이의 왼쪽 페이지 여백을 채우는 가변 높이 박스
left-middle	페이지의 상단 및 하단 테두리 가장자리 사이에 수직으로 중앙 정렬되고 left-top 및 left-bottom 페이지 여백 박스 사이의 왼쪽 페이지 여백을 채우는 가변 높이 박스
left-bottom	left-middle 및 bottom-left-corner 페이지 여백 박스 사이의 왼쪽 페이지 여백을 채우는 가변 높이 박스
right-top	top-right-corner 및 right-middle 페이지 여백 박스 사이의 오른쪽 페이지 여백을 채우는 가변 높이 박스
right-middle	페이지의 상단 및 하단 테두리 가장자리 사이에 수직으로 중앙 정렬되고 right-top 및 right-bottom 페이지 여백 박스 사이의 오른쪽 페이지 여백을 채우는 가변 높이 박스
right-bottom	right-middle 및 bottom-right-corner 페이지 여백 박스 사이의 오른쪽 페이지 여백을 채우는 가변 높이 박스
bottom-left-corner	페이지 박스의 하단 및 왼쪽 여백의 교차에 의해 정의되는 고정 크기 박스
bottom-left	bottom-left-corner 및 bottom-center 페이지 여백 박스 사이의 하단 페이지 여백을 채우는 가변 너비 박스
bottom-center	페이지의 좌우 테두리 가장자리 사이에 수평으로 중앙 정렬되고 bottom-left 및 bottom-right 페이지 여백 박스 사이의 하단 페이지 여백을 채우는 가변 너비 박스
bottom-right	bottom-center 및 bottom-right-corner 페이지 여백 박스 사이의 하단 페이지 여백을 채우는 가변 너비 박스
bottom-right-corner	페이지 박스의 하단 및 오른쪽 여백의 교차에 의해 정의되는 고정 크기 박스

5.1. 페이지 여백 박스를 위한 at-규칙

페이지 여백 박스는 margin at-rules에 의해 page context 내부에서 생성됩니다. 저자들은 이러한 규칙을 페이지 문맥의 선언 뒤에 배치해야 합니다. 레거시 클라이언트는 margin at-rule 뒤의 선언을 올바르게 처리하지 못할 수 있기 때문입니다.

margin at-rule은 페이지 여백 박스(예: @top-left)를 식별하고 설명자 블록(이를 margin context라 합니다)을 포함하는 at-rule입니다.

@page {
  size: 8.5in 11in;
  margin: 10%;

  @top-left {
    content: "Hamlet";
  }
  @top-right {
    content: "Page " counter(page);
  }
}

5.2. 페이지 여백 박스에 콘텐츠 채우기

:before 및 :after 의사요소와 마찬가지로, 페이지 여백 박스에서 지정된 content: normal은 none으로 계산됩니다. 페이지 여백 박스는 그 content 속성의 계산된 값이 none이 아닐 때에만 생성된 것으로 간주됩니다. 그렇지 않으면, display: none인 요소와 마찬가지로 박스는 생성되지 않습니다.

display 속성은 페이지 여백 박스에 적용되지 않습니다.

@page {
  @top-left-corner { content: " "; border: solid green; }
  @top-right-corner { content: url(foo.png); border: solid green; }
  @bottom-right-corner { content: counter(page); border: solid green; }
  @bottom-left-corner { content: normal; border: solid green; }
}

5.3. 페이지 여백 박스 치수 계산

각 페이지 여백 박스의 너비와 높이는 아래 규칙들에 의해 결정됩니다. 이 규칙들은 페이지 여백 박스에 대한 CSS2.1 섹션 10.3 및 10.6의 등가물을 정의합니다.

min-height, max-height, min-width, 및 max-width를 적용하는 규칙들은 페이지 여백 박스에 적용되며, 지정된 width 또는 height로부터 계산된 치수가 그 제약을 위반하면 너비, 높이 및/또는 여백의 재계산을 유발할 수 있습니다. UA가 min-height 또는 min-width 속성을 지원하지 않는 경우, 마치 min-height와 min-width가 항상 0인 것처럼 동작해야 합니다.

5.3.1. 페이지 여백 박스 레이아웃 용어

CSS2.1의 박스 모델 정의 및 CSS Sizing의 크기 용어들 외에, 이후의 페이지 여백 박스 계산에서 사용하기 위해 다음 용어들이 정의됩니다:

available width

페이지의 왼쪽 테두리 너비, 왼쪽 패딩, page area 너비, 오른쪽 패딩 및 오른쪽 테두리 너비의 합계. 즉, 페이지 박스의 왼쪽 및 오른쪽 테두리 가장자리 사이의 거리입니다. 이 값은 상단 및 하단 페이지 여백 박스의 치수를 계산할 때 사용됩니다.

available height

페이지의 상단 테두리 너비, 상단 패딩, page area 높이, 하단 패딩 및 하단 테두리 너비의 합계. 즉, 페이지 박스의 상단 및 하단 테두리 가장자리 사이의 거리입니다. 이 값은 왼쪽 및 오른쪽 페이지 여백 박스의 치수를 계산할 때 사용됩니다.

outer width

outer edge의 너비로, [CSS-BOX-3]에 정의된 바와 같습니다.

min-content width

물리적 너비로서 min-content block size 또는 min-content inline size 중 어느 쪽인지에 따라 결정됩니다.

max-content width

물리적 너비로서 max-content block size 또는 max-content inline size 중 어느 쪽인지에 따라 결정됩니다.

outer min width

outer width와 유사하나, 계산된 width가 auto인 경우 min-content width가 사용됩니다.

outer max width

outer width와 유사하나, 계산된 width가 auto인 경우 max-content width가 사용됩니다.

페이지 여백 박스의 containing block 은 그 위치에 따라 달라집니다:

코너 페이지 여백 박스의 경우, 그것은 해당 코너에서 만나는 두 페이지 여백의 교차로 정의되는 직사각형입니다.

다른 모든 페이지 여백 박스의 경우, containing block은 캡슐화된 페이지 여백에서 인접한 코너의 페이지 여백 박스들의 containing block들을 뺀 직사각형입니다. 이는 이 containing block의 크기가 한 차원에서는 사용된 페이지 여백에 의해 주어지고 다른 차원에서는 available width(상단 및 하단 박스의 경우) 또는 available height(왼쪽 및 오른쪽 박스의 경우)에 의해 주어짐을 의미합니다.

5.3.2. 페이지 여백 박스 가변 치수 계산 규칙

다음 규칙들은 @top-left, @top-center 및 @top-right 페이지 여백 박스(이 절에서는 각각 A, B 및 C로 지칭됨)에 적용됩니다.

5.3.2.1. 여백

세 박스 중 어느 박스의 margin-left 또는 margin-right 속성이 계산되어 auto가 되면, 사용된 값은 0입니다.

5.3.2.2. auto 너비 해결

다음 알고리즘은 각 박스의 사용된 너비를 결정합니다. 이 목적을 위해, 생성되지 않은(generated가 아닌) 박스들은 너비와 외부 너비(outer width)가 0인 것으로 가정됩니다.

참고: 높은 수준의 목표는(우선순위 순서대로) 가운데 박스(B)가 생성된 경우 이를 중앙에 배치하고, 오버플로우와 겹침을 최소화하며, 콘텐츠의 양에 비례하여 공간을 분배하는 것입니다.

가운데 박스(B)가 생성되지 않은 경우, 사용 가능한 너비(available width)를 A와 C에 다음과 같이 분배합니다:

• 만약 한 박스만 'width: auto'라면, 그 사용된 너비는 외부 너비들의 합이 available width와 같아지도록 결정됩니다.
• 만약 A와 C 모두 'width: auto'인 경우, 각 박스에 공간을 다음과 같이 분배합니다:
  1. 만약 외부 max-content 너비들의 합이 available width보다 작다면, 그 차이를 flex space라 합니다. 각 박스의 flex factor는 그 박스의 외부 max-content 너비에 비례하도록 계산하고, 사용된 외부 너비를 다음으로 설정합니다: max-content width + flex space × flex factor ÷ ∑flex factors
  2. 그렇지 않고 외부 min-content 너비들의 합이 available width보다 작다면, 그 차이를 flex space라 하고 각 박스의 flex factor를 그 박스의 max-content 너비와 min-content 너비의 차이에 비례하도록 계산한 뒤, 사용된 외부 너비를 다음으로 설정합니다: min-content width + flex space × flex factor ÷ ∑flex factors
  3. 그 외의 경우에는 이전 경우와 동일하게 외부 크기를 계산하되, 각 박스의 flex factor를 그 박스의 외부 min-content 너비에 비례하도록 설정합니다.
  모든 경우에 두 flex factor의 합이 0이면, 각 flex factor는 1로 가정됩니다.

가운데 박스(B)가 생성된 경우, A, B 및 C의 auto 너비를 다음과 같이 결정합니다:

1. 먼저 가운데 박스(B)의 auto 너비를 해결합니다: B와 AC라는 두 박스가 있다고 가정하는데, AC의 각 치수는 A와 C의 최대값의 두 배입니다. (이것은 B의 중앙 정렬을 유지합니다.) 이들 두 박스(B와 가상의 AC)에 공간을 분배하는 방식은 위의 A와 C에 대한 설명을 따릅니다.
2. 그런 다음, 측면 박스(A 및 C)의 auto 너비를 해결하는데, 그 박스의 외부 너비를 다음으로 설정합니다: (available width − used outer widths of B) ÷ 2

5.3.2.3. min-width 및 max-width 처리

min-width 및 max-width 속성은 가변 치수에서 일반 요소와 마찬가지로 페이지 여백 박스에 적용되지만, 같은 쪽의 세 박스는 함께 고려된다는 점이 다릅니다.

더 정확히는:

1. tentative 사용된 너비들은 (min-width 및 max-width 없이) § 5.3.2.2의 auto 너비 해결 규칙을 따라 계산됩니다.
2. 만약 세 박스 중 어느 하나의 tentative 사용된 너비가 max-width보다 크면, 위 규칙들이 다시 적용되지만 이번에는 max-width의 계산된 값을 width의 계산된 값으로 사용합니다.
3. 만약 그 결과로 나온 어느 박스의 너비가 min-width보다 작으면, 위 규칙들이 다시 적용되지만 이번에는 min-width 값을 width의 계산된 값으로 사용합니다.

5.3.2.4. 배치

박스들의 치수가 결정되면, 다음과 같이 배치됩니다:

• A의 왼쪽 외부 가장자리는 containing block의 왼쪽 가장자리에 맞춰 정렬됩니다.
• B의 외부 영역은 containing block 안에서 중앙에 배치됩니다.
• C의 오른쪽 외부 가장자리는 containing block의 오른쪽 가장자리에 맞춰 정렬됩니다.

5.3.2.5. 다른 쪽의 박스들

@bottom-left, @bottom-center 및 @bottom-right 페이지 여백 박스의 사용된 값들은 각각 @top-left, @top-center 및 @top-right에 대한 동일한 규칙들에 의해 정해집니다.

@left-top, @left-middle 및 @left-bottom 박스들의 사용된 값들은 동일한 규칙들에 의해 정해지지만 "width"가 "height"로, "left"가 "top"으로, "right"가 "bottom"으로, 그리고 "center"가 "middle"로 각각 대체되어 적용됩니다.

@right-top, @right-middle 및 @right-bottom 페이지 여백 박스의 사용된 값들은 각각 @left-top, @left-middle 및 @left-bottom에 대한 동일한 규칙들에 의해 정해집니다.

5.3.3. 페이지 여백 박스 고정 치수 계산 규칙

아래 규칙들은 각 @top-left-corner, @top-left, @top-center, @top-right, 및 @top-right-corner 페이지 여백 박스의 height, margin-top, 및 margin-bottom 속성의 사용된 값을 계산하는 데 사용됩니다:

1. 다음 제약은 마진 박스의 사용된 값들 사이에 성립해야 합니다:

   margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom = 상단 페이지 여백

2. 만약 border-top-width + padding-top + height (만약 auto가 아니면) + padding-bottom + border-bottom-width에, margin-top 및/또는 margin-bottom (auto가 아닌 경우)을 더한 값이 상단 페이지 여백의 높이보다 크면, 이후 규칙들에서는 margin-top 또는 margin-bottom의 auto 값들은 0으로 취급됩니다.
3. 이 시점에서 height, margin-top 및 margin-bottom의 계산된 값이 모두 auto가 아닌 값이면, 그 값들은 "과도하게 제약됨(over-constrained)"이라고 불립니다. 이 경우 margin-top의 지정된 값은 auto로 취급됩니다.
4. 지금 정확히 하나의 값만 auto로 지정되어 있다면, 그 사용된 값은 등식으로부터 결정됩니다.
5. 만약 height가 auto로 설정되어 있다면, 다른 auto 값들은 0이 되고 height는 결과 등식으로부터 결정됩니다.
6. 만약 margin-top과 margin-bottom이 둘 다 auto라면, 그들의 사용된 값은 서로 같습니다. 이는 페이지 여백 내에서 페이지 여백 박스 콘텐츠를 수직으로 중앙에 배치합니다.

동일한 규칙들이 하단 페이지 여백 박스들(bottom-left-corner, bottom-left, bottom-center, bottom-right, 및 bottom-right-corner)에 적용되지만, 과도하게 제약된 경우에는 margin-top 대신 margin-bottom이 무시됩니다.

유사한 규칙들이 왼쪽 및 오른쪽 페이지 여백 박스들의 속성을 너비에 관하여 지배합니다(top-left-corner, left-top, left-middle, left-bottom, bottom-left-corner; top-right-corner, right-top, right-middle, right-bottom, bottom-right-corner). 이 경우에는 "top"이 "left"로, "bottom"이 "right"로, "height"가 "width"로 각각 대체됩니다. 왼쪽(오른쪽) 페이지 여백 박스의 과도하게 제약된 경우에는 지정된 margin-left (margin-right)이 무시됩니다.

5.4. 페이지 여백 박스 예시

다음은 페이지 여백 박스 사용 예시 모음입니다.

@page {
  @top-left { content: "Header in Left Cell (top-left)" }
}

@page {
  @top-center { content: "Header in Center Cell (top-center)" }
}

@page {
  @top-right { content: "Header in Right Cell (top-right)" }
}

@page {
  @top-left { content: "Left Cell (top-left)" }
  @top-center { content: "Header in Center Cell (top-center)" }
}

@page {
  @top-center { content: "Header in Center Cell (top-center)" }
  @top-right { content: "Right Cell (top-right)" }
}

@page {
  @top-left { content: "Header in top-left with approx. twice as many words as right cell." }
  @top-right { content: "Right cell (top-right)" }
}

6. 페이지 속성

부록 A는 페이지 박스에 적용되는 CSS 2.1의 규범적 속성 목록을 정의합니다([CSS2]). 준수하는 사용자 에이전트가 이러한 속성들 중 블록 박스에 대해 어떤 것을 지원한다면, 그 속성은 page context에서도 지원해야 합니다. 이 명세서는 또한 페이지 문맥에서만 적용되는 size 속성을 정의합니다.

페이지 여백 박스에 적용되는 속성들은 페이지 문맥 내에서도 설정할 수 있습니다: 상속 가능하거나 명시적으로 상속된 경우(inherit 키워드를 margin context에서 사용), 그것들은 페이지 여백 박스에 상속됩니다.

같은 부록은 페이지 여백 박스에 적용되는 CSS 2.1의 규범적 속성 목록도 정의합니다. 준수하는 사용자 에이전트가 이러한 속성들 중 블록 박스에 대해 어떤 것을 지원한다면, 그 속성은 margin context에서도 지원해야 합니다.

다른 CSS2에 정의된 속성들은 이러한 문맥에서는 적용되지 않습니다. CSS 2.1에 포함되지 않은 속성들의 동작은 정의되어 있지 않습니다.

참고: 다른 속성을 정의하지 않은 의도는 적절한 CSS3 속성이 등장함에 따라 이 명세를 매번 업데이트하지 않고 점진적으로 추가할 수 있게 하기 위함입니다.

문서의 요소들과 마찬가지로, 페이지 문맥과 마진 문맥은 해당 문맥에 적용되지 않는 속성이라도 모든 속성에 대해 계산된 값을 가집니다.

일반적인 CSS 속성 규칙이 적용되며 다음 예외가 있습니다:

• 페이지 여백 박스는 페이지 문맥에서 상속됩니다. 페이지 문맥은 루트 요소에서 상속됩니다. 그러나 이전 CSS Paged Media Level 3 개정판은 이 점을 명시하지 않았으므로, 페이지 문맥에서 상속된 속성을 루트 요소와 같이 초기값으로 설정하는 구현도 CSS Paged Media Level 3에 적합합니다. 이 예외는 Level 4에서 제거될 예정입니다.
• em 및 ex 단위의 값은 해당 문맥과 연관된 글꼴을 기준으로 해석됩니다. margin context에서 font-size 속성에 사용될 때에는 페이지 문맥의 글꼴을 기준으로 하고, page context에서 font-size에 사용될 때에는 루트 요소의 font-size를 기준으로 합니다. 그러나 이전 개정판이 이 점에서 모호했기 때문에 font-size에 대한 em 및 ex를 초기값을 기준으로 처리하는 구현도 적합하다고 간주됩니다. 이 예외도 Level 4에서 제거될 예정입니다.
• margin 및 padding 속성의 백분율 값은 containing block의 치수를 기준으로 합니다. 왼쪽/오른쪽 값은 containing block의 너비를, 위/아래 값은 containing block의 높이를 기준으로 합니다.
• width 및 height의 사용된 값은 페이지 박스와 페이지 여백 박스에 대해 특수한 계산 규칙을 갖습니다; Page Size 및 Computing Page-Margin Box Dimensions를 참조하세요.
• 페이지 배경은 위에서 설명한 대로 배치되고 페인팅됩니다.
• 카운터 스코핑 규칙이 수정됩니다(아래의 page-based counters 참조).
• '::before' 및 '::after' 의사요소와 마찬가지로, page-margin 박스에서 content 속성의 normal 값은 none으로 계산됩니다.
• 페이지 여백 박스에서 vertical-align 속성은 테이블 셀에 대해 지정된 대로 동작합니다. 쓰기 모드와 상관없이 항상 수직 방향 정렬을 수행합니다.

사용자 에이전트는 비인쇄 가능 영역을 포함하는 사용자 에이전트 스타일시트를 통해 기본 페이지 여백을 설정해야 합니다. 저자들은 기본 페이지 영역이 인쇄 불가능 영역을 포함하지 않을 것이라고 가정해야 합니다.

6.1. 페이지 기반 카운터

카운터는 @page 규칙 내에서 정의 및 제어될 수 있으며, 페이지 여백 박스의 content로 사용할 수 있습니다. 이는 페이지 수를 유지하는 데 유용합니다.

페이지 또는 마진 문맥 내의 counter-increment은 각 page box가 생성될 때 카운터를 증가시킵니다.

카운터가 페이지 문맥 내에서 리셋되거나 증가되면, 그것은 모든 페이지 여백 박스의 범위에 들어가며 문서 내 같은 이름의 모든 카운터를 가립니다.

카운터가 마진 문맥 내에서 리셋되거나 증가되면, 그것은 그 페이지 여백 박스의 범위에 들어가고 페이지 문맥 및 문서의 같은 이름 카운터들을 가립니다.

마진 문맥이나 페이지 문맥에서 리셋 또는 증가되지 않은 카운터가 margin context에서 counter() 또는 counters()에 의해 사용된다면, 그 결과 값은 페이지 여백 박스가 페이지 시작 시 문서 내의, 페이지 분할을 가로지르는 정상 흐름의 가장 깊은 요소 내부에 있는 요소인 것과 정확히 동일하게 간주됩니다. 이렇게 카운터를 사용하는 것은 카운터 값 계산에 영향을 주지 않습니다.

page라는 이름의 카운터는 자동으로 생성되며 문서의 모든 페이지에서 1씩 증가합니다. 단, counter-increment 속성이 page context에서 page 카운터에 대해 다른 증가값을 명시적으로 지정하면 예외입니다. 암시된 page 카운터는 실제 카운터이며, 해당 이름을 명시적으로 사용해 counter-increment 및 counter-reset 속성으로 직접 영향을 줄 수 있습니다. 또한 counter() 및 counters() 함수 형태에서 사용할 수 있습니다.

@page {
  margin: 10%;

  @top-center {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 2em;
    content: counter(page);
  }
}

@page {
  counter-increment: page 2;
}

추가로, pages라는 이름의 카운터는 UA에 의해 자동으로 생성됩니다. 이 값은 항상 문서의 전체 페이지 수입니다. (연속 매체에서는 항상 1입니다.) pages 값은 조작할 수 없습니다: counter-reset 및 counter-increment 문이 이를 설정하더라도 유효하지만 아무 영향이 없습니다.

그 밖의 모든 면에서 페이지 관련 카운터는 [CSS2], 중첩 카운터와 스코프 및 카운터에 대해 설명된 대로 동작합니다.

6.2. 페이지 여백 박스와 기본값

페이지 또는 마진 문맥 내에서 사용되는 속성들은 해당 속성 정의에서 초기값을 가져옵니다; 그러나 사용자 에이전트는 다음 표의 값들이 UA 기본 스타일시트의 규칙으로 설정된 것처럼 동작해야 합니다.

body {counter-reset: chapter;}
div.chapter {counter-increment: chapter;}
@page {
  margin: 10%;
  @top-center { content: "Chapter" counter(chapter) }
}

7. 페이지 크기

전 세계적으로 많은 다른 용지 크기가 사용됩니다. 이 명세의 목표 중 하나는 웹 콘텐츠가 각 용지 크기에 대해 별도의 스타일시트를 작성하지 않고도 다양한 크기에 적응할 수 있도록 하는 것입니다.

그러나 어떤 상황에서는 특정 페이지 크기가 특정한 스타일을 달성하는 것이 중요할 수 있습니다. 이 목표를 달성하는 한 가지 방법은 문서가 특정 크기의 표면에 우선적으로 표시되어야 함을 나타내는 size 속성을 활용하는 것이고, 다른 방법은 Media Queries를 사용하여 다른 페이지 크기에 서로 다른 스타일시트를 적용하는 것입니다.

7.1. 페이지 크기: size 속성

이 속성은 page box의 containing block의 대상 크기와 방향을 지정합니다. 일반적인 경우, 하나의 page box가 하나의 page sheet에 렌더링될 때, size 속성은 대상 페이지 시트의 크기도 나타냅니다.

페이지 박스의 크기는 "절대"(고정 크기) 또는 "확장 가능"(즉 사용 가능한 시트 크기에 맞춤)일 수 있습니다. 아래 표의 처음 세 값은 확장 가능한 페이지 박스를 만드는 데 사용될 수 있습니다. 다른 값들은 고정 크기 페이지 박스를 정의하며, 따라서 선호되는 출력 매체 크기를 나타냅니다. 가능하면 출력은 지정된 매체 크기에 렌더링되어야 합니다. 지정된 크기를 사용할 수 없는 경우, 페이지 박스를 다른 크기로 변환하는 규칙이 적용됩니다.

만약 size 선언이 width, height, device-width, device-height, aspect-ratio, device-aspect-ratio 또는 orientation 미디어 쿼리(또는 용지 크기에 대한 다른 조건)로 한정되어 있다면, 그 선언은 무시되어야 합니다. 미디어 쿼리는 size를 존중하지 않습니다: 미디어 쿼리는 어떤 @page 규칙도 지정되지 않은 경우 선택될 용지 크기를 가정합니다.

@page {
  size: 4in 6in;
}

@media (max-width: 6in) {
  @page {
    size: letter;
  }
}

auto

페이지 박스는 UA가 선택한 크기와 방향으로 설정됩니다. 일반적인 경우 페이지 박스 크기와 방향은 대상 매체 시트와 일치하도록 선택됩니다.

landscape

페이지의 내용이 가로 방향으로 인쇄되도록 지정합니다. 페이지 박스의 긴 쪽이 수평입니다. <page-size>가 지정되지 않으면, 페이지 시트의 크기는 UA가 선택합니다.

portrait

페이지의 내용이 세로 방향으로 인쇄되도록 지정합니다. 페이지 박스의 짧은 쪽이 수평입니다. <page-size>가 지정되지 않으면, 페이지 시트의 크기는 UA가 선택합니다.

<length>

페이지 박스는 주어진 절대 치수로 설정됩니다. 하나의 length 값만 지정되면 너비와 높이 모두를 설정하여 정사각형이 됩니다. 두 개의 length 값이 지정되면 첫 번째는 페이지 박스의 너비를, 두 번째는 높이를 정합니다. em 및 ex 단위의 값은 페이지 문맥의 글꼴을 참조합니다. 음수 길이는 허용되지 않습니다.

<page-size>

페이지 크기는 다음의 미디어 이름들 중 하나를 사용하여 지정할 수 있습니다. 이는 길이 값을 사용하는 size 지정과 동등합니다. 미디어 이름의 정의는 Media Standardized Names에서 가져왔습니다.

A5

ISO A5 매체 크기와 동등: 너비 148mm, 높이 210mm.

A4

ISO A4 매체 크기와 동등: 너비 210mm, 높이 297mm.

A3

ISO A3 매체 크기와 동등: 너비 297mm, 높이 420mm.

B5

ISO B5 매체 크기와 동등: 너비 176mm, 높이 250mm.

B4

ISO B4 매체 크기와 동등: 너비 250mm, 높이 353mm.

JIS-B5

JIS B5 매체 크기와 동등: 너비 182mm, 높이 257mm.

JIS-B4

JIS B4 매체 크기와 동등: 너비 257mm, 높이 364mm.

letter

북미 letter 매체 크기와 동등: 너비 8.5인치, 높이 11인치.

legal

북미 legal 매체 크기와 동등: 너비 8.5인치, 높이 14인치.

ledger

북미 ledger 매체 크기와 동등: 너비 11인치, 높이 17인치.

<page-size> 이름들은 landscape 또는 portrait과 함께 사용되어 크기와 방향을 모두 지정할 수 있습니다.

@page {
size: A4 landscape;
}

@page {
size: auto;/* auto is the initial value */
margin: 10%;
}

@page {
size: 8.5in 11in;/* width height */
}

7.1.1. 미디어 쿼리

이 절은 정보 제공용입니다.

미디어 쿼리 [MEDIAQ]를 사용하면 하나의 스타일시트로 서로 다른 페이지 크기에 대한 다양한 스타일 선호를 표현할 수 있습니다. 예를 보십시오:

/* style sheet for "A4" printing */
@media print and (width: 21cm) and (height: 29.7cm) {
  @page {
     margin: 3cm;
  }
 }

/* style sheet for "letter" printing */
@media print and (width: 8.5in) and (height: 11in) {
  @page {
  margin: 1in;
  }
}

위 예에서 "A4" 용지에는 "3cm" 페이지 여백이, "letter" 용지에는 "1in" 페이지 여백이 주어집니다.

7.1.2. 인쇄 페이지 회전: page-orientation 속성

고품질 인쇄 구현은 서로 다른 크기와 방향의 페이지를 처리할 수 있으므로, 저자는 각 페이지의 내용에 가장 적합한 페이지 크기를 선택할 수 있습니다. 예를 들어, 대부분의 페이지에는 size: letter portrait;를 사용하고, 넓은 정보 표 레이아웃에는 size: letter landscape;로 전환할 수 있습니다.

그러나 서로 다른 너비의 페이지에 걸쳐 흐르는 콘텐츠를 처리하는 것은 상대적으로 복잡한 작업이며, 많은 인기 있는 인쇄 구현(특히 웹 브라우저)에서는 아직 완전히 해결되지 않았습니다. page-orientation 기술자는 그러한 구현을 돕기 위해 고안되었으며, 레이아웃은 단일 일관된 크기로 수행하되, 출력 매체(예: PDF)에서 레이아웃 후에 방향을 변경하여 다른 방향으로 표시하고자 하는 페이지들이 그렇게 보이도록 할 수 있게 합니다.

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

upright

특별한 방향이 적용되지 않습니다; 페이지는 평상시처럼 레이아웃되고 포맷됩니다.

rotate-left

페이지가 레이아웃된 후, 출력 매체가 회전을 지원하면, 이 값은 페이지가 레이아웃된 방식에서 왼쪽으로 90도(반시계 방향) 회전되어 표시되어야 함을 나타냅니다.

rotate-right

rotate-left과 동일하나, 페이지는 레이아웃된 방식에서 오른쪽으로 90도(시계 방향) 회전되어 표시되어야 합니다.

참고: 여백 상자 및 기타 위치 관련 요소들은 이 속성과 특별한 상호작용이 없습니다; 회전되지 않은 페이지에서 평상시처럼 레이아웃된 다음, 다른 모든 요소들과 함께 회전됩니다.

7.2. 재단 및 등록 표시: marks 속성

이 속성은 문서에 재단(crop) 및/또는 등록(registration) 표시를 추가합니다. 이는 용지의 재단 및 정렬을 쉽게 하기 위해 페이지 박스 바깥에 인쇄됩니다. 값의 의미는 다음과 같습니다:

none

재단 표시나 등록 표시가 인쇄되지 않음을 지정합니다: bleed area 밖 영역은 완전히 비어있습니다.

crop

재단 표시가 인쇄되어야 함을 지정합니다. 이는 일반적으로 페이지 박스의 네 모서리 외부에 짧은 선으로, 페이지 박스의 네 가장자리 위치를 잉크를 페이지 박스 안에 놓지 않고 표시합니다.

cross

등록 표시가 인쇄되어야 함을 지정합니다. 이는 일반적으로 페이지 박스 각 가장자리 밖에 있는 십자형 표식으로, 인쇄 과정에서 용지 정렬에 사용됩니다.

페이지 박스가 인쇄 가능 영역보다 작을 때에만 재단 표시와 등록 표시가 보인다는 점에 유의하십시오.

@page { marks: crop cross }

7.3. 블리드 영역: bleed 속성

이 속성은 페이지 박스 밖의 bleed area의 범위를 지정합니다; 즉 페이지 렌더링이 잘려 나가는 페이지 박스 바깥의 범위를 말합니다. 값의 의미는 다음과 같습니다:

auto

marks가 crop이면 6pt로 계산되고, 그렇지 않으면 0으로 계산됩니다.

<length>

각 방향으로 페이지 박스를 얼마나 벗어나 블리드 영역이 확장되는지를 지정합니다. 값은 음수일 수 있으나 구현별로 제한이 있을 수 있습니다.

7.4. 페이지 시트에 맞지 않는 페이지 박스 렌더링

페이지 박스가 대상 페이지 시트 치수와 일치하지 않는 경우, 사용자 에이전트는 다음 중 하나를 수행해야 합니다(선호 순서대로):

1. 지정된 크기로 더 큰 페이지 시트에 페이지 박스를 렌더링합니다.
2. 페이지 박스가 페이지 시트에 맞는다면 페이지 박스를 90° 회전시킵니다.
3. 페이지 박스의 가로세로 비율을 유지하면서 페이지 시트에 맞게 페이지 박스를 축소합니다.
4. 그래픽적으로 페이지 박스를 여러 페이지 시트에 "슬라이스"합니다.
5. 오버플로된 내용을 잘라냅니다(가장 덜 선호).

사용자 에이전트는 이러한 작업을 수행하기 전에 사용자와 상의하는 것이 좋습니다.

7.5. 시트 위의 페이지 박스 배치

페이지 박스가 페이지 시트보다 작은 경우, 사용자 에이전트는 다음 중 하나를 수행해야 합니다:

• 페이지 박스를 시트 중앙에 배치하여 양면 페이지를 정렬하고 시트 가장자리 근처에 인쇄된 정보의 우발적 손실을 방지합니다; 또는
• 페이지 박스를 페이지 시트의 왼쪽 상단 코너(또는 다른 코너, 페이지 박스의 direction 및 writing-mode 속성에 따라 다름)에 배치하여 매체 소비를 최소화할 수 있습니다.

사용자 에이전트는 이와 관련하여 사용자와 상의하는 것이 좋습니다.

8. 페이지 구분

CSS Fragmentation Module [CSS-BREAK-3] 모듈은 페이지 분할을 포함하여 CSS 박스들이 어떻게 그리고 어디에서 분절(fragmented)될 수 있는지를 정의합니다. 이 모듈은 사용자 에이전트가 페이지를 어디에서 또는 반드시 중단할 수 있는지를 나타내는 몇몇 속성들과, 다음 콘텐츠가 어느 페이지(왼쪽 또는 오른쪽)에서 재개되는지를 정의합니다. 각 페이지 분할은 현재 page box의 레이아웃을 종료시키며 문서 트리의 남은 부분들은 새 페이지 박스에서 레이아웃됩니다.

8.1. 이름 있는 페이지 사용: page

page 속성은 요소가 표시되어야 할 특정 종류의 페이지(이를 named page)를 지정하는 데 사용됩니다. 필요하면 강제 페이지 분할이 도입되어 지정된 타입의 새 페이지가 생성됩니다.

참고: 이 페이지는 동일한 타입 이름을 페이지 선택자에서 사용하여 스타일링할 수 있습니다.

페이지 타입 이름은 대소문자를 구별하는 식별자입니다. 그러나 auto 값은 CSS 키워드이므로 ASCII 대소문자 구분 없음입니다.

page 속성은 상속되지 않습니다. 그러나 요소의 page 값이 auto이면, 그 사용된 값은 비-자동 값을 가진 가장 가까운 조상에 지정된 값이 됩니다. 루트 요소에 지정된 경우, auto의 사용된 값은 빈 문자열입니다.

이전 버전의 명세는 page 속성이 상속된다고 명시했으므로, page 속성을 상속하고 auto를 항상 빈 문자열로 처리하는 구현도 CSS Paged Media Level 3에 적합합니다. 이 예외는 Level 4에서 제거될 예정입니다. 따라서 저자들은 비-auto 값을 가진 요소의 자손에 대해 명시적으로 auto 값을 지정하지 않아야 합니다. 그 결과 동작이 예측 불가능할 수 있습니다.

page 속성은 다음과 같이 동작합니다:

1. 먼저, 모든 auto 값들은 비-auto 조상에 대해 해결됩니다(위에서 지정한 대로).
2. 다음으로, 각 박스에 대해 시작 page 값(start page value)과 끝 page 값(end page value)이, 각각 그 박스의 첫 번째 또는 마지막 자식 박스(각각)로부터 전파된 값(있다면)으로 결정되며, 그렇지 않으면 박스 자체의 사용된 값입니다. 자식은 자신의 start 또는 end page value를 전파하는데, 이는 page 속성이 그에게 적용될 때에만 해당합니다.

   참고: 첫 번째 또는 마지막 자식 박스는 항상 첫 번째 또는 마지막 자식 요소에 의해 생성되는 것은 아닙니다. 예를 들어, 어떤 요소는 이전 형제가 'display: none'만 갖고 있어 어떤 박스도 생성하지 않을 수 있습니다.

3. 루트의 시작 페이지 값이 첫 번째 인쇄 페이지의 타입입니다.
4. 만약 class A 분기점에서 만나는 두 박스에 대해, 분할 이전의 박스의 end page value와 분할 이후의 박스의 start page value가 일치하지 않는다면, 두 박스 사이에 페이지 분할이 강제되고, 분할 이후의 내용은 지정된 타입의 페이지 박스에서 재개됩니다.

참고: 본질적으로 비교되는 두 page 값은 class A 분기점에서 만나는 가장 깊은 박스들로부터 온 값들이며, page 속성이 적용되지 않는 박스들로 루트된 어떤 서브트리도 무시합니다.

페이지 분할에 대한 추가 세부사항은 [CSS-BREAK-3]를 참조하십시오.

@page narrow { size: 9cm 18cm }
@page rotated { size: landscape }
div { page: narrow }
table { page: rotated }

<div>
<table>...</table>
<table>...</table>
<p>This text is rendered on a 'narrow' page</p>
</div>

<!DOCTYPE html>
<html lang="ja">
  <style>
    html   {
      writing-mode: vertical-rl;
      line-height: 1.6;
    }
    .main  {
      page: main;
      columns: 2;
      column-gap: 1rem;
    }
    .index {
      page: index;
      columns: 3;
      column-gap: 1rem;
    }
    @page {
      margin: auto;  /* center kihon hanmen on page */
      width:  40rem; /* 1.6 × 25 lines        */
    }
    @page main  { height: 61rem; } /* 2 × 30 chars + 1 × gap */
    @page index { height: 62rem; } /* 3 × 20 chars + 2 × gap */
  </style>
  <section class="main"> ... </section>
  <section class="index"> ... </section>
</html>

9. 이미지 속성

Note: 이 절은 [CSS-IMAGES-3]로 옮겨졌습니다.

부록 A: 적용 가능한 CSS2.1 속성

페이지 문맥에 적용되는 CSS 2.1 속성

이 목록은 page properties를 정의합니다. 이들은 § 6 페이지 속성에서 더 자세히 설명됩니다.

페이지 여백 문맥에 적용되는 CSS 2.1 속성

이 목록은 page-margin properties를 정의합니다. 이들은 § 6 페이지 속성에서 더 자세히 설명됩니다.

부록 B: 전송 가능성

종종(그러나 항상은 아니며) 페이지 박스는 문서가 최종적으로 렌더링되는 물리적 표면과 일대일 대응합니다. CSS3 페이지 모델은 페이지 박스 내에서의 포맷팅을 지정하지만, 페이지 박스를 시트로 전송하는 책임은 사용자 에이전트에게 있습니다. CSS3에서 다루지 않는 일부 사용자 에이전트 전송 가능성에는 다음이 포함됩니다:

• 하나의 페이지 박스를 하나의 시트로 전송(예: 단면 인쇄);
• 두 개의 페이지 박스를 동일한 시트의 앞면과 뒷면으로 전송(예: 양면 인쇄);
• 하나의 시트에 N개의(작은) 페이지 박스를 전송(이른바 "N-up");
• 하나의(큰) 페이지 박스를 N x M 시트로 전송(이른바 "타일링");
• 시그니처(signature) 생성. signature는 한 시트에 인쇄된 페이지 그룹으로, 접고 잘라 책처럼 만들면 올바른 순서로 보이는 것;
• 하나의 문서를 여러 출력 트레이에 인쇄;
• 인쇄 명령을 포함하는 파일 생성.

개인정보 및 보안 고려사항

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

변경사항

2018년 10월 18일 작업 초안(Working Draft) 이후의 변경사항은 다음과 같습니다:

• page-orientation 기술자(descriptor)를 추가함.

2013년 3월 14일 작업 초안 이후의 변경사항은 다음과 같습니다:

• marks 및 bleed 속성을 [CSS3GCPM]에서 가져옴.
• auto를 bleed의 초기값으로 추가하고, marks가 none인 경우에도 적용되도록 허용함.
• JIS-B4 및 JIS-B5 추가.

감사의 글

CSS 작업 그룹은 이 모듈의 전 편집자들에게 특별한 감사를 표합니다: Robert Stevahn (Hewlett-Packard), Håkon Wium Lie (Opera Software), Jim Bigelow (Hewlett-Packard), Jacob Refstrup (Hewlett-Packard), 그리고 Melinda Grant (Hewlett-Packard).

또한 전문가 기여자들인 Michael Day (YesLogic), Shinyu Murakami (Antenna House), Peter Linss (Hewlett-Packard), 및 CSS 작업 그룹과 www-style 커뮤니티의 다른 구성원들이 CSS Paged Media Level 3에 대해 리뷰와 코멘트를 제공해 주신 것에 대해 감사드립니다.