페이징 미디어용 CSS 생성 콘텐츠 모듈

소개

페이징 미디어는 오랜 인쇄 서적의 역사 속에서 발전해온 특수한 요구사항을 많이 가지고 있습니다. 러닝 헤더와 푸터는 내비게이션을 돕는 역할을 하며, 각주는 페이지 하단에 나타날 수 있습니다. 페이지 자체의 속성은 문서 내의 위치나 내용에 따라 달라질 수 있습니다. 리더(leader)는 관련된 콘텐츠를 시각적으로 연결합니다. 교차 참조는 생성된 텍스트가 필요할 수 있습니다. PDF와 같은 일부 페이징 미디어 형식에서는 북마크가 내비게이션에 사용됩니다.

이 모듈은 저자가 이러한 기법을 페이징 미디어에 적용할 수 있도록 새로운 속성과 값을 정의합니다.

값 정의

이 명세는 CSS 속성 정의 관례와 [CSS21]의 값 정의 문법을 따릅니다([CSS-VALUES-3] 참조). 이 명세에서 정의되지 않은 값 타입은 CSS Values & Units [CSS-VALUES-3]에 정의되어 있습니다. 다른 CSS 모듈과의 조합으로 이러한 값 타입의 정의가 확장될 수 있습니다.

각 속성별로 정의된 값 외에도, 이 명세에 정의된 모든 속성은 CSS-전역 키워드를 속성값으로 허용합니다. 가독성을 위해 본문에 반복적으로 기재하지 않았습니다.

1. 러닝 헤더와 푸터

1.1. 명명된 문자열

1.1.1. string-set 속성

사용자 에이전트는 비시각적 미디어를 포함한 모든 미디어에서 이 속성을 지원해야 합니다.

string-set 속성은 하나 이상의 쌍으로 구성되며, 각각은 사용자 지정 식별자(명명된 문자열의 이름)와 <content-list> 값(명명된 문자열의 값을 생성하는 방법을 설명)을 포함합니다.

<content-list> 는 아래의 값 중 하나 이상(순서 무관)으로 확장됩니다.

<content-list> = [ <string> | <counter()> | <counters()> | <content()> | <attr()> ]+

<string>

문자열(string). [CSS21] 참고

<counter()>

counter() 함수. [CSS21] 참고

<counters()>

counters() 함수. [CSS21] 참고

<content()>

아래에 설명된 content() 함수

<attr()>

attr() 함수. [CSS-VALUES-3] 참고

1.1.1.1. content() 함수

content() = content([text | before | after | first-letter ])

이 함수의 기본값을 어떻게 정의할 것인가?

text

요소의 문자열 값. white-space: normal이 설정된 것처럼 결정됩니다(기본값).

before

::before 의사 요소의 문자열 값. white-space: normal이 적용된 것처럼 결정됨.

after

::after 의사 요소의 문자열 값. white-space: normal이 적용된 것처럼 결정됨.

first-letter

요소의 첫 번째 문자. ::first-letter 의사 요소 정의에 따름

명명된 문자열의 콘텐츠 값은 요소의 콘텐츠 박스가 처음 생성될 때(또는 display 값이 none이라면 생성될 수 있었던 시점)에 할당됩니다. 한 페이지의 entry value는 이전 페이지 끝에서의 할당입니다. exit value는 현재 페이지 끝에서의 할당입니다.

요소 값이 변경될 때마다 명명된 문자열의 값도 갱신됩니다. 사용자 에이전트는 string() 함수가 과거, 현재, 미래의 할당 값을 반환할 수 있으므로 여러 값을 기억할 수 있어야 합니다.

<h1>Loomings</h1>

h1::before { content: 'Chapter ' counter(chapter); }
h1 { string-set: header content(before) ':' content(text); }
h1::after { content: '.'; }

<section title="Loomings">

section { string-set: header attr(title) }

1.1.2. string() 함수

string() 함수의 두 번째 인자는 다음 키워드 중 하나입니다:

first

페이지에서 첫 번째 할당 값을 사용합니다. 해당 페이지에 할당이 없다면 entry value를 사용합니다. first가 기본값입니다.

start

해당 요소가 페이지의 첫 번째 요소일 경우 첫 번째 할당 값을 사용합니다. 그렇지 않으면 entry value를 사용합니다. entry value는 요소가 아직 등장하지 않았다면 비어 있을 수 있습니다.

last

명명된 문자열의 exit value를 사용합니다.

first-except

이는 first와 같으나, 값이 할당되는 페이지에서는 빈 문자열을 사용합니다.

CSS:

@page {
   size: 15cm 10cm;
   margin: 1.5cm;

   @top-left {
   content: "first: " string(heading, first);
   }
   @top-center {
   content: "start: " string(heading, start);
   }
    @top-right {
    content: "last: " string(heading, last);
   }
  }

h2 { string-set: heading content() }

아래 그림은 여러 페이지에서 “heading” 문자열의 first, start, last 할당 값을 보여줍니다.

1.2. 러닝 요소

@page {
  @top { content: element(header); }
}

h1 { position: running(header); }

1.2.1. running() 값

position: running(custom-ident)는 요소(및 관련된 ::before, ::after 의사 요소)를 일반 플로우에서 제거하고, element()를 사용해 페이지 마진 박스에 배치할 수 있게 만듭니다. 요소는 문서 내 원래 위치의 속성을 상속하지만, 그 위치엔 표시되지 않습니다.

running() = running( <custom-ident> )

<p class="rh"><i>Miranda v. Arizona</i> in Context</p>
<h2><i>Miranda v. Arizona</i> in Context</h2>

@top-center {
  content: element(heading);
  }

p.rh {
  position: running(heading);
  }

p.rh::before {
  content: counter(page) ' / ';
  }

value() 요소는 오직 페이지 마진 박스에서만 사용할 수 있습니다. 그리고 content 속성의 다른 값과 함께 쓸 수 없습니다.

h2 {
display: block;
running: chapter;
font-size: 18pt;
font-weight: bold;
}

h2:running {
display: inline;
font-size: 11pt;
font-weight: normal;
font-variant: small-caps;
letter-spacing: 1pt;
}

@page {
  @top-center {
    content: element(chapter);
    }
  }

1.2.2. element() 값

element() 값은 content 속성에서 사용되며, running() 을 통해 일반 플로우에서 제거된 요소를 페이지의 마진 박스에 배치합니다. 요소의 값이 변경될 때마다 element()의 값도 업데이트됩니다.

string()과 마찬가지로, element()도 한 페이지에 여러 번 할당된 경우 어떤 값을 사용할지 설명하는 선택적 키워드를 받을 수 있습니다. element()는 과거, 현재, 미래의 할당 값을 반환할 수 있으므로, 사용자 에이전트는 여러 값을 기억할 수 있어야 합니다.

element() = element( <custom-ident> , [ first | start | last | first-except ]? )

2. 각주

2.1. 용어 정의

각주는 복잡한 객체입니다(각주 섹션 참조, [dpub-latinreq]). 따라서 진행하기 전에 몇 가지 용어를 정의하는 것이 도움이 됩니다.

각주 요소

각주 내용을 포함하는 요소로, 플로우에서 제거되어 각주로 표시됩니다.

각주 마커(각주 번호라고도 함)

각주 본문 옆에 위치한 숫자나 기호로, 특정 각주를 구분합니다. 각주 마커는 해당 각주 호출과 동일한 번호나 기호를 사용해야 하며, 추가 기호가 포함될 수 있습니다.

각주 본문

각주 마커는 각주 요소 앞에 위치하며, 이 둘이 합쳐져 각주 본문을 구성하고, 각주 영역에 배치됩니다.

각주 호출(각주 참조라고도 함)

본문에서 각주 본문을 가리키는 숫자나 기호입니다.

각주 영역

각주를 표시하는 페이지 영역입니다.

각주 구분선(각주 분리선이라고도 함)

가로줄로 각주 영역을 페이지의 나머지 부분과 구분하는 데 자주 사용됩니다. 분리선(및 전체 각주 영역)은 각주가 없는 페이지에서는 렌더링되지 않습니다.

2.2. 각주 생성

1. 각주 요소가 플로우에서 제거되고, 그 자리에 ::footnote-call 의사 요소가 삽입되어 각주 참조 역할을 합니다.
2. 각주를 식별하는 ::footnote-marker 의사 요소가 각주 요소의 시작 부분에 배치됩니다. 이 두 요소가 합쳐져 각주 본문이 됩니다.
3. footnote counter가 증가합니다.
4. 각주 본문이 페이지 하단의 각주 영역에 배치됩니다. 한 페이지의 각주 요소들은 문서 순서대로 그 페이지의 각주 영역에 배치됩니다.

<p>Though the body was erect, the head was thrown back so that the closed eyes were pointed towards the needle of the tell-tale that swung from a beam in the ceiling.<span class="footnote">The cabin-compass is called the tell-tale, because without going to the compass at the helm, the Captain, while below, can inform himself of the course of the ship.</span></p>

@page {
  @footnote {
    float: bottom;
  }
}

span.footnote { float: footnote; }

왜 footnote 영역에 float:bottom이 사용되는가? 각주를 footnote 영역으로 플로팅하고, footnote 영역 자체도 플로팅하는 것은 구현체들이 footnote 영역을 다른 곳으로 플로팅하지 않는 점을 생각하면 너무 복잡해보입니다. 일부 구현체는 footnote 영역을 절대 위치로 배치하게 할 수도 있습니다.

2.3. 각주 유형

footnote

각주 요소는 해당 페이지의 footnote 영역에 배치됩니다.

footnote-display 속성은 각주가 블록 요소로 표시될지, 인라인 요소로 표시될지 결정합니다.

block

각주 요소가 블록 요소로 footnote 영역에 배치됨

inline

각주 요소가 인라인 요소로 footnote 영역에 배치됨

compact

사용자 에이전트가 주어진 각주 요소를 블록 또는 인라인 요소로 배치할지 결정합니다. footnote 영역에 두 개 이상의 각주가 한 줄에 들어갈 수 있다면 인라인 배치되어야 합니다.

2.4. 각주 영역

이 부분을 CSS3-Page 문법으로 어떻게 설명해야 할까?

2.4.1. 각주 영역의 위치

여러 컬럼 텍스트에서 각주는 어떻게 동작하는가? Prince는 float: prince-column-footnote를 사용해 컬럼 하단에 각주를 생성합니다.

각주를 지원하는 구현체는 일반적으로 float: bottom 같은 페이지 플로트도 지원합니다. 페이지 플로트는 각주 영역 위에 배치되어야 합니다. 이를 어떻게 명세할 수 있을까요?

2.4.2. 각주 영역의 크기

max-height 속성은 footnote 영역의 크기를 제한합니다. 단, 페이지에 각주만 있을 경우(문서의 마지막 페이지 등)에는 제한되지 않을 수 있습니다.

페이지 전체가 각주로만 이루어지는 것은 바람직하지 않으므로, 사용자 에이전트는 footnote 영역에 대해 기본 max-height 값을 설정할 수 있습니다.

2.5. 각주 카운터

footnote counter는 각주 요소와 연결된 미리 정의된 카운터입니다. 이 값은 각주를 식별하는 데 쓰이는 숫자 또는 기호이며, 각주 호출과 각주 마커 모두에서 사용됩니다. 각주마다 값이 증가해야 합니다.

2.5.1. 각주 카운터의 값

각주 카운터는 다른 카운터와 마찬가지로 어떤 카운터 스타일도 사용할 수 있습니다. 각주에서는 흔히 기호의 연속을 사용합니다.

::footnote-call { content: counter(footnote, symbols('*', '†', '‡', '§')); }

::footnote-marker { content: counter(footnote, symbols('*', '†', '‡', '§')) '. '; }

2.5.2. 각주 카운터 리셋

각주 카운터는 각 페이지마다 리셋될 수 있습니다.

@page {
  counter-reset: footnote;
  @footnote { … }
}

각주 카운터의 값은 각주 요소가 문서 트리 내에서 위치한 순서에 따라 결정되어야 하며, 실제로 어디에 배치되는지와는 무관함에 유의하세요. 각주 요소가 때때로 각주 호출 뒤의 페이지에 배치될 수 있지만, 두 곳 모두에서 동일한 카운터 값을 사용해야 합니다.

2.6. footnote-call 의사 요소

::footnote-call {
content: counter(footnote);
vertical-align: baseline;
font-size: 100%;
line-height: inherit;
font-variant-position: super;
}

2.7. footnote-marker 의사 요소

::footnote-marker {
content: counter(footnote);
}

::footnote-marker::after {
content: '. ';
}

2.8. 각주 렌더링과 footnote policy

각주 렌더링은 복잡할 수 있습니다. 각주가 페이지 하단 근처에 위치할 경우, 각주 본문을 배치할 공간이 부족할 수 있습니다. footnote-policy 속성은 저자가 난이도 있는 페이지의 렌더링에 영향을 줄 수 있게 합니다.

auto

사용자 에이전트가 각주를 렌더링하는 방법을 결정하며, 각주 본문을 각주 참조보다 나중 페이지에 배치할 수도 있습니다. 각주 본문은 각주 참조보다 앞 페이지에 배치되어서는 안 됩니다.

line

해당 각주 본문을 현재 페이지에 배치할 공간이 없으면, 사용자 에이전트는 각주 참조가 포함된 줄의 시작 부분에 강제 페이지 나누기를 삽입하여 참조와 각주 본문이 모두 다음 페이지에 위치하도록 합니다. 이때 widow와 orphan 설정도 준수해야 하므로, 더 앞줄에 페이지 나누기를 삽입할 수도 있습니다.

block

line과 동일하지만, 각주를 포함하는 문단 앞에서 강제 페이지 나누기가 일어납니다.

각주 배치 알고리즘이 필요합니다

2.9. 향후 방향

3. 페이지 선택

페이지로 분할된 문서는 일련의 페이지로 구성됩니다. [CSS3PAGE]는 페이지 선택자를 정의하며, 이를 통해 문서의 첫 페이지, 왼쪽/오른쪽 페이지, 빈 페이지를 선택할 수 있습니다. 여기서는 임의의 문서 페이지를 선택할 수 있도록 페이지 선택자의 개념을 확장합니다.

3.1. 페이지 선택자

:nth() = :nth( <an+b> [of <custom-ident>]? )

:nth()는 페이지 카운터와 관련이 없으며, 페이지 카운터는 리셋될 수 있고 다양한 번호 체계를 사용할 수 있습니다.

:nth() 선택자가 명명된 페이지에 적용되고, 해당 명명된 페이지가 아래의 page-group의 일부라면, 그 page-group 내에서 n번째 페이지를 선택합니다.

@page :nth(1)

@page :nth(2n)

3.2. 페이지 그룹

page 속성이 강제 분할 속성과 함께 요소에 적용될 경우, page group이 생성됩니다. page group은 해당 요소 인스턴스에 의해 생성된 모든 페이지의 모음입니다. 새 인스턴스가 렌더링되면 새로운 page group이 시작됩니다.

한 페이지는 여러 page group의 일부가 될 수 있으며, 한 page group에 상위나 하위 그룹이 포함될 수 있습니다.

CSS:

div { 
  page: A;
  break-before: page;
}
child { 
  page: B;
  break-before: page;
}

page 5는 다음 세 가지 방법으로 선택할 수 있습니다:

@page :nth(5 of A) /* 모든 <div>의 5번째 페이지 선택 */
@page :nth(1 of B) /* 모든 <child>의 첫 번째 페이지 선택 */
@page :nth(5)   /* 문서의 5번째 페이지 선택 */

<div class="chapter">
<h1>Chapter One</h1>
<p>some text</p>
<table class="broadside">
...
</table>
...
</div>
<div class="chapter">
<h1>Chapter Two</h1>
<p>some text</p>
...
<table class="broadside">
...
</table>
...
</div>

div.chapter {
  page: body;
  break-before: page;
}

table.broadside {
  page: broadside;
  break-before: page;
}

4. 리더(이동됨)

이제 [CSS3-CONTENT]에서 설명됩니다.

5. 교차 참조(이동됨)

이제 [CSS3-CONTENT]에서 설명됩니다.

6. 북마크(이동됨)

이제 [CSS3-CONTENT]에서 설명됩니다.

부록 A: 이전 항목의 위치

2011년 11월 29일 워킹드래프트에 있던 많은 섹션이 다른 명세로 이동하였습니다. 아래는 이동 내역에 대한 안내입니다.

페이지 마크 및 블리드 영역

이 섹션은 CSS Paged Media Module Level 3로 이동되었습니다.

CMYK 색상

이 섹션은 CSS Color Module Level 5로 이동되었습니다.

빈 페이지 스타일링

이 섹션은 CSS Paged Media Module Level 3로 이동되었습니다.

페이징 프레젠테이션

이 섹션은 CSS Overflow Module Level 4로 이동되었습니다.

페이지 간 내비게이션

이는 WHATWG CSS Books에서 논의되었습니다.

페이지 플로트

이 섹션은 CSS Page Floats로 이동되었습니다.

컬럼 및 페이지 선택

컬럼 선택에 대한 짧은 언급은 WHATWG CSS Books에서 찾을 수 있습니다.

부록 B: 기본 UA 스타일시트

이 부록은 참고용이며 UA 개발자가 HTML용 기본 스타일시트를 구현하는 데 도움이 되도록 작성되었습니다. 하지만 UA 개발자는 필요에 따라 무시하거나 수정할 수 있습니다.

@page {
  counter-reset: footnote;
  @footnote {
    counter-increment: footnote;
    float: bottom;
    column-span: all;
    height: auto;
  }
}

::footnote-marker {
  content: counter(footnote);
  list-style-position: inside;
}

::footnote-marker::after {
  content: '. ';
}

::footnote-call {
  content: counter(footnote);
  vertical-align: super;
  font-size: 65%;
}

@supports ( font-variant-position: super ) {
  ::footnote-call {
    content: counter(footnote);
    vertical-align: baseline;
    font-size: 100%;
    line-height: inherit;
    font-variant-position: super;
  }
}

h1 { bookmark-level: 1 }
h2 { bookmark-level: 2 }
h3 { bookmark-level: 3 }
h4 { bookmark-level: 4 }
h5 { bookmark-level: 5 }
h6 { bookmark-level: 6 }

부록 C: 변경사항

2014년 5월 13일 워킹드래프트 이후의 변경점:

• bookmark는 bookmark-level 속성을 통해서만 생성됨을 명시. bookmark-label의 none 값 제거.
• 교차 참조, 리더, 북마크 섹션을 CSS Generated Content Module로 이동.
• 잘못된 break 값 수정. 이슈 #3524 참고.
• 명세의 새 에디터 추가.

2013년 9월 24일 에디터스 드래프트 이후의 변경점:

• 명세의 새 에디터 추가.
• 모든 텍스트와 예시 재작성.
• string-set 속성에 attr(<identifier>) 값 추가. Prince와 AntennaHouse에서 지원.
• footnote-policy 속성 추가. 난이도 있는 각주 렌더링 제어.
• footnote-display 속성 추가. 인라인 각주 허용.
• 사이드노트 섹션 삭제.
• 페이지 내부/컬럼 내 요소 선택 섹션 삭제
• page-group 속성 삭제, nth() 페이지 의사 클래스에 page group 내 선택을 위한 인자 추가.

2011년 11월 29일 워킹드래프트 이후의 변경점:

• Page Marks and Bleeds 섹션을 CSS Paged Media Module Level 3로 이동
• CMYK Colors 섹션을 CSS Colors Level 5로 이동
• Styling Blank Pages 섹션 삭제
• Paged Presentations 섹션을 CSS Overflow Module Level 3로 이동
• Navigation Between Pages를 WHATWG CSS Books로 이동
• Page floats 섹션을 CSS Page Floats로 이동
• First-page pseudo-element 섹션 삭제
• Selecting Columns and Pages 섹션 삭제
• string-set 속성에서 env() 함수 제거
• leaders의 정렬 값 제거
• leader는 한 줄만 차지하도록 명시
• target-text의 content() 값을 content(text)로 변경
• content 속성의 target-pull() 값 제거

WHATWG CSS Books 명세와의 차이점:

• string-set 속성에 attr(<identifier>) 값 추가. Prince와 AntennaHouse에서 지원.
• CSS Books에는 footnote-display 속성이 없음.
• CSS Books에는 footnote-policy 속성이 없음.
• nth() 페이지 의사 클래스와 page-group 개념 간의 관계가 명확해짐. page-group 속성이 불필요할 수 있음.
• 이 명세는 :first 페이지 의사 선택자가 page-group의 첫 페이지를 선택하도록 재정의하지 않음.
• 이 명세는 다음을 고려하지 않음:
  1. 명명된 영역
  2. 페이지/컬럼 내 요소 선택
  3. range() 페이지 의사 클래스
  4. 컬럼 선택
  5. 기준선 리듬
  6. 박스 모델 확장
  7. 문자 치환
  8. 마이크로타이포그래피

프라이버시 고려 사항

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

보안 고려 사항

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

감사의 글

Chris Lilley, Elika J. Etemad, Alan Stearns, L. David Baron, Bert Bos, Florian Rivoal, [$your_name, ", " ]+ 그리고 Liam Quin이 귀중한 피드백을 제공하였습니다.