페이지 매체(예: 종이, 투명 필름, 컴퓨터 화면에 표시되는 페이지 등)는 문서의 콘텐츠가 하나 이상의 개별 페이지로 나뉘는 점에서 연속 매체와 다릅니다. 페이지를 처리하기 위해, CSS 2.2는 페이지 박스에서 페이지 여백이 설정되는 방법과 페이지 나누기가 선언되는 방법을 설명합니다.
사용자 에이전트는 문서의 페이지 박스를 문서가 최종적으로 렌더링될 실제 시트(종이, 투명 필름, 화면 등)로 이동하는 책임이 있습니다. 종종 하나의 페이지 박스와 하나의 시트 사이에는 1:1의 관계가 있지만, 항상 그런 것은 아닙니다. 전송 가능한 경우는 다음과 같습니다:
페이지 박스는 두 개의 영역을 포함하는 직사각형 영역입니다:
페이지 박스의 크기는 CSS 2.2에서 지정할 수 없습니다.
작성자는 @page 규칙 내에 페이지 박스의 여백을 지정할 수 있습니다. @page 규칙은 키워드 "@page", 선택적 페이지 선택자, 선언 및 at-규칙을 포함하는 블록으로 구성됩니다. 주석과 공백은 @page 토큰과 페이지 선택자 사이, 그리고 페이지 선택자와 블록 사이에 허용되지만 선택 사항입니다. @page 규칙의 선언은 페이지 컨텍스트에 있다고 합니다.
참고: CSS 레벨 2에는 @page 내부에 나타날 수 있는 at-규칙이 없지만, 이러한 at-규칙은 레벨 3에서 정의될 것으로 예상됩니다.
페이지 선택자는 어떤 페이지에 선언이 적용되는지를 지정합니다. CSS 2.2에서 페이지 선택자는 첫 번째 페이지, 모든 왼쪽 페이지 또는 모든 오른쪽 페이지를 지정할 수 있습니다.
CSS 2.2에서는 여백 속성('margin-top', 'margin-right', 'margin-bottom', 'margin-left', 및 'margin')만이 페이지 컨텍스트 내에서 적용됩니다. 다음 다이어그램은 시트, 페이지 박스, 페이지 여백 간의 관계를 보여줍니다:
다음은 모든 페이지의 모든 페이지 여백을 설정하는 간단한 예입니다:
@page {
margin: 3cm;
}
페이지 컨텍스트는 글꼴 개념이 없으므로 'em' 및 'ex' 단위는 허용되지 않습니다. 여백 속성의 백분율 값은 페이지 박스의 치수를 기준으로 하며, 왼쪽 및 오른쪽 여백의 경우 페이지 박스의 너비를, 위쪽 및 아래쪽 여백의 경우 페이지 박스의 높이를 참조합니다. CSS 2.2 속성과 관련된 기타 모든 단위는 허용됩니다.
페이지 박스나 요소에 음수 여백 값이 있거나 절대 위치를 지정하면 콘텐츠가 페이지 박스 밖으로 나갈 수 있지만, 이 콘텐츠는 사용자 에이전트, 프린터 또는 최종적으로 종이 커터에 의해 "잘릴" 수 있습니다.
양면 문서를 인쇄할 때, 왼쪽 페이지와 오른쪽 페이지의 페이지 박스가 다를 수 있습니다. 이는 페이지 선택자에서 사용할 수 있는 두 개의 CSS 의사 클래스에 의해 표현될 수 있습니다.
모든 페이지는 사용자 에이전트에 의해 자동으로 :left 또는 :right 의사 클래스로 분류됩니다. 문서의 첫 번째 페이지가 :left인지 :right인지는 루트 요소의 주요 쓰기 방향에 따라 달라집니다. 예를 들어, 주요 쓰기 방향이 왼쪽에서 오른쪽인 문서의 첫 번째 페이지는 :right 페이지가 되고, 주요 쓰기 방향이 오른쪽에서 왼쪽인 문서의 첫 번째 페이지는 :left 페이지가 됩니다. 문서가 왼쪽 또는 오른쪽 페이지에서 인쇄를 시작하도록 명시적으로 강제하려면, 작성자는 첫 번째 생성된 박스 이전에 페이지 나누기를 삽입할 수 있습니다.
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
}
왼쪽 및 오른쪽 페이지에 대해 다른 선언이 제공된 경우, 사용자 에이전트가 페이지 박스를 왼쪽 및 오른쪽 시트로 전송하지 않더라도 (예: 단면 인쇄만 지원하는 프린터), 사용자 에이전트는 이러한 선언을 준수해야 합니다.
작성자는 :first 의사 클래스를 사용하여 문서의 첫 번째 페이지에 대한 스타일도 지정할 수 있습니다:
@page { margin: 2cm } /* 모든 여백을 2cm로 설정 */
@page :first {
margin-top: 10cm /* 첫 번째 페이지의 위쪽 여백 10cm */
}
:left 또는 :right @page 규칙에서 지정된 속성은 의사 클래스가 지정되지 않은 @page 규칙에서 지정된 속성을 재정의합니다. :first @page 규칙에서 지정된 속성은 :left 또는 :right @page 규칙에서 지정된 속성을 재정의합니다.
첫 번째 생성된 박스 이전에 강제 나누기가 발생하는 경우, CSS 2.2에서는 ':first'가 나누기 이전의 빈 페이지에 적용되는지 아니면 나누기 이후의 페이지에 적용되는지 정의되지 않았습니다.
왼쪽, 오른쪽, 첫 번째 페이지의 여백 선언은 서로 다른 페이지 영역 너비를 초래할 수 있습니다. 구현을 단순화하기 위해, 사용자 에이전트는 왼쪽, 오른쪽, 첫 번째 페이지에서 단일 페이지 영역 너비를 사용할 수 있습니다. 이 경우 첫 번째 페이지의 페이지 영역 너비를 사용해야 합니다.
페이지 모델에서 콘텐츠를 포맷할 때, 일부 콘텐츠가 현재 페이지 박스 밖에 위치할 수 있습니다. 예를 들어, 'white-space' 속성이 'pre' 값인 요소는 페이지 박스보다 넓은 박스를 생성할 수 있습니다. 또 다른 예로, 박스가 절대 또는 상대적으로 배치될 때 "불편한" 위치에 놓일 수 있습니다. 예를 들어, 이미지는 페이지 박스 가장자리나 페이지 박스 아래 100,000미터에 배치될 수 있습니다.
이러한 요소의 정확한 포맷은 이 명세의 범위를 벗어납니다. 하지만, 페이지 박스 밖의 콘텐츠와 관련하여 작성자와 사용자 에이전트가 다음 일반 원칙을 준수할 것을 권장합니다:
이 섹션에서는 CSS 2.2에서 페이지 나누기를 설명합니다. 다섯 가지 속성은 사용자 에이전트가 페이지를 나눌 수 있거나 나눠야 하는 위치와, 이후 콘텐츠가 재개될 페이지(왼쪽 또는 오른쪽)를 나타냅니다. 각 페이지 나누기는 현재 페이지 박스에서 레이아웃을 종료하고, 문서 트리의 나머지 부분을 새 페이지 박스에 배치합니다.
| 이름: | page-break-before |
|---|---|
| 값: | auto | always | avoid | left | right | inherit |
| 초기값: | auto |
| 적용 대상: | 블록 수준 요소(하지만 텍스트 참조) |
| 상속됨: | 아니요 |
| 백분율: | N/A |
| 미디어: | 시각적, 페이지 매체 |
| 계산값: | 지정된 대로 |
| 이름: | page-break-after |
|---|---|
| 값: | auto | always | avoid | left | right | inherit |
| 초기값: | auto |
| 적용 대상: | 블록 수준 요소(하지만 텍스트 참조) |
| 상속됨: | 아니요 |
| 백분율: | N/A |
| 미디어: | 시각적, 페이지 매체 |
| 계산값: | 지정된 대로 |
| 이름: | page-break-inside |
|---|---|
| 값: | avoid | auto | inherit |
| 초기값: | auto |
| 적용 대상: | 블록 수준 요소(하지만 텍스트 참조) |
| 상속됨: | 아니요 |
| 백분율: | N/A |
| 미디어: | 시각적, 페이지 매체 |
| 계산값: | 지정된 대로 |
이 속성의 값은 다음과 같은 의미를 가집니다:
준수하는 사용자 에이전트는 'left'와 'right' 값을 'always'로 해석할 수 있습니다.
잠재적인 페이지 나누기 위치는 일반적으로 부모 요소의 'page-break-inside' 속성, 이전 요소의 'page-break-after' 속성, 그리고 다음 요소의 'page-break-before' 속성의 영향을 받습니다. 이러한 속성이 'auto' 이외의 값을 가질 때, 'always', 'left', 및 'right' 값이 'avoid'보다 우선합니다.
사용자 에이전트는 이러한 속성을 루트 요소의 정상 흐름에 있는 블록 수준 요소에 적용해야 합니다. 사용자 에이전트는 또한 'table-row' 요소와 같은 다른 요소에 이러한 속성을 적용할 수도 있습니다.
페이지 나누기가 박스를 나눌 때, 박스의 여백, 테두리, 패딩은 나누기가 발생하는 위치에서 시각적 효과를 갖지 않습니다.
| 이름: | orphans |
|---|---|
| 값: | <integer> | inherit |
| 초기값: | 2 |
| 적용 대상: | 블록 컨테이너 요소 |
| 상속됨: | 예 |
| 백분율: | N/A |
| 미디어: | 시각적, 페이지 매체 |
| 계산값: | 지정된 대로 |
| 이름: | widows |
|---|---|
| 값: | <integer> | inherit |
| 초기값: | 2 |
| 적용 대상: | 블록 컨테이너 요소 |
| 상속됨: | 예 |
| 백분율: | N/A |
| 미디어: | 시각적, 페이지 매체 |
| 계산값: | 지정된 대로 |
'orphans' 속성은 페이지 하단에 남아 있어야 하는 블록 컨테이너의 최소 줄 수를 지정합니다. 'widows' 속성은 페이지 상단에 남아 있어야 하는 블록 컨테이너의 최소 줄 수를 지정합니다. 페이지 나누기를 제어하는 방법의 예는 아래에 나와 있습니다.
양수 값만 허용됩니다.
단락 포맷팅에 대한 정보는 라인 박스 섹션을 참조하십시오.
일반적인 흐름에서 페이지 나누기는 다음 위치에서 발생할 수 있습니다:
참고: CSS3에서는 강제 페이지 나누기 이후에 관련 'margin-top'이 적용됨(즉, '0'으로 설정되지 않음)을 지정할 것으로 예상됩니다.
이러한 나누기는 다음 규칙을 따릅니다:
위의 규칙이 페이지 박스에서 콘텐츠가 넘치는 것을 방지하기에 충분한 나누기 지점을 제공하지 않는 경우, 추가 나누기 지점을 찾기 위해 규칙 A, B 및 D가 삭제됩니다.
그럼에도 불구하고 여전히 충분한 나누기 지점을 찾지 못하면, 규칙 C도 삭제되어 더 많은 나누기 지점을 찾습니다.
페이지 나누기는 (1)에서 반드시 발생해야 합니다. 만약 이 여백에서 만나는 박스를 생성하는 모든 요소의 'page-break-after' 및 'page-break-before' 속성 중 하나 이상이 'always', 'left', 또는 'right' 값을 가진 경우입니다.
CSS 2.2는 허용된 페이지 나누기 세트 중 어느 것을 사용해야 하는지 정의하지 않습니다. CSS 2.2는 사용자 에이전트가 가능한 모든 나누기 지점에서 나누거나, 전혀 나누지 않는 것을 금지하지 않습니다. 그러나 CSS 2.2는 사용자 에이전트가 다음과 같은 휴리스틱을 준수할 것을 권장합니다 (이들이 때로는 상충된다는 것을 인식하면서):
예를 들어, 스타일 시트에 'orphans: 4', 'widows: 2'가 포함되어 있고, 현재 페이지 하단에 20줄의 (라인 박스) 공간이 있다고 가정합니다:
이제 'orphans'가 '10', 'widows'가 '20'이고, 현재 페이지 하단에 8줄의 공간이 있다고 가정합니다:
페이지 컨텍스트의 선언은 계단식을 일반 CSS 선언과 마찬가지로 따릅니다.
다음 예제를 고려하십시오:
@page {
margin-left: 3cm;
}
@page :left {
margin-left: 4cm;
}
더 높은 특이성을 가진 의사 클래스 선택자 때문에, 왼쪽 페이지의 왼쪽 여백은 '4cm'가 되고, 다른 모든 페이지(즉, 오른쪽 페이지)는 왼쪽 여백이 '3cm'가 됩니다.