게시일: 2024년 10월 30일
Chrome 131부터 CSS를 사용하여 페이지가 인쇄될 때 페이지의 여백에 콘텐츠를 추가할 수 있습니다. 이 게시물에서는 페이징된 미디어의 페이지 모델과 이 기능을 사용하여 웹페이지의 인쇄 출력을 개선하는 방법을 설명합니다.
CSS에는 페이징된 미디어를 다루는 사양인 CSS 페이징된 미디어 모듈과 페이징된 미디어용 CSS 생성 콘텐츠가 포함되어 있습니다. 페이지가 인쇄될 때만 사용되는 기능 (PDF 포함)을 정의합니다. 이 CSS를 지원하고 HTML 및 CSS에서 서적 및 기타 인쇄물을 생성할 수 있는 사용자 에이전트가 있습니다. 그러나 애플리케이션에서 PDF를 인쇄하거나 만들어야 하는 경우가 많음에도 불구하고 이 기능은 웹브라우저에서 잘 지원되지 않습니다.
Chrome과 Firefox는 @page at-rule을 지원합니다. 이 규칙을 사용하면 인쇄할 페이지의 크기와 콘텐츠 주위의 여백 크기를 정의할 수 있습니다. Chrome 131부터 생성된 콘텐츠를 사용하여 관련 마진 at-rule을 타겟팅하여 여백에 콘텐츠를 추가할 수도 있습니다.
페이지 모델
페이징된 미디어에 사용되는 페이지 모델은 종이 시트인 페이지 상자를 정의합니다. 페이지 상자 안에는 페이지 여백, 페이지 테두리, 페이지 패딩, 마지막으로 콘텐츠가 표시되는 페이지 영역이 있습니다. 콘텐츠가 인쇄되면 콘텐츠를 포함하는 데 필요한 만큼 여러 페이지로 분할됩니다.
그러면 페이지 여백이 16개의 상자로 분할되며 각 상자에는 상응하는 at-rule이 있습니다.
@top-left-corner@top-left@top-center@top-right@top-right-corner@left-top@left-middle@left-bottom@right-top@right-middle@right-bottom@bottom-left-corner@bottom-left@bottom-center@bottom-right@bottom-right-corner
마진 상자 크기 조정
상단 및 하단 상자의 높이와 왼쪽 및 오른쪽 상자의 너비는 @page를 사용하여 설정된 여백 크기로 정의됩니다. 따라서 모서리 상자는 이러한 여백의 교차로 인해 생성된 고정된 크기를 갖습니다. 하지만 각 모서리 사이의 세 상자는 유연합니다. flex: auto를 사용하는 플렉스 레이아웃의 상자와 비슷한 방식으로 작동하므로 공간을 채우기 위해 늘어납니다. 하지만 하나의 상자에 긴 텍스트 문자열을 넣고 다른 상자에 아무것도 넣지 않으면 텍스트가 있는 상자가 텍스트를 줄바꿈하는 대신 커집니다.
여백 상자에 콘텐츠 추가
여백 상자에 콘텐츠를 추가하려면 ::before 및 ::after 의사 요소와 마찬가지로 CSS 생성 콘텐츠를 사용합니다. 이 경우 타겟팅하려는 상자와 관련된 at-rule을 사용합니다. 다음 CSS는 왼쪽 하단 여백 상자 또는 오른쪽 페이지에 '내 사진첩'이라는 텍스트를 추가합니다. 텍스트의 스타일도 지정합니다.
@page :right {
@bottom-left {
content: "My book";
font-size: 9pt;
color: #333;
}
}
텍스트 문자열 외에도 여백에 페이지 카운터를 추가할 수 있습니다. 사전 정의된 page 카운터에는 현재 페이지가 포함됩니다. 다음 CSS는 오른쪽 페이지의 오른쪽 하단과 왼쪽 페이지의 왼쪽 하단에 섹션을 추가합니다.
@page :right {
@bottom-right {
content: counter(page);
}
}
@page :left {
@bottom-left {
content: counter(page);
}
}
항상 총 페이지 수가 포함된 pages 카운터도 있습니다.
페이지 여백을 사용할 때 유의해야 할 사항
브라우저에서 인쇄하는 경우 표시할 공간이 있으면 브라우저에서 일부 페이지 여백 콘텐츠를 자동으로 추가합니다. 콘텐츠를 추가한 경우에도 이 작업이 실행됩니다. 이러한 자동 생성 머리글과 바닥글은 인쇄 대화상자에서 사용 중지할 수 있습니다.
페이지의 여백을 0으로 설정하거나 브라우저 헤더 및 바닥글에 여백이 없을 만큼 작은 값을 설정하면 헤더와 바닥글이 표시되지 않습니다.
Chromium의 기본 페이지 레이아웃 개념으로 인해 인쇄된 문서의 첫 페이지에 자동 콘텐츠를 위한 공간이 없으면 공간이 있더라도 이후 페이지에 브라우저 콘텐츠가 표시되지 않습니다.
페이지가 있는 미디어의 미래 가능성
페이지가 지정된 미디어 사양에는 CSS로 인쇄용 디자인 도움말에 설명된 몇 가지 다른 기능이 포함되어 있습니다. 다음 기능에 대한 사용 사례가 있는 경우 링크된 버그에 추가하세요.
문자열 설정
책에는 현재 장 제목이 여백에 인쇄되는 경우가 많습니다. 이 제목은 사용자가 책을 탐색할 때 변경되므로 CSS에 하드코딩할 수 없습니다. string-set 속성을 사용하면 생성된 콘텐츠에 사용할 HTML의 값을 설정할 수 있습니다. 다음 CSS는 챕터 제목이 <h1>로 마크업되어 있다고 가정합니다. 각 <h1>의 콘텐츠를 가져와 오른쪽 페이지의 오른쪽 상단 여백에 사용합니다. 다음 <h1>에 도달하면 그 시점 이후의 여백 값이 업데이트됩니다.
h1 {
string-set: doctitle content();
}
@page :right {
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 8pt;
}
}
string-set 및 string()의 Chromium 버그
교차 참조
문서가 인쇄되면 다른 페이지에 대한 참조는 일반적으로 참조를 찾을 수 있는 페이지 번호를 사용하여 표시됩니다. 이러한 교차 참조는 target-counter를 사용하여 만들 수 있습니다. 링크에 적용하면 링크가 웹의 참조로 이동하고 인쇄하면 페이지 번호가 표시됩니다.
<a class="xref" href="#ref1">my reference</a>
a.xref:after {
content: " (page " target-counter(attr(href, url), page) ")";
}
각주
각주도 페이지가 있는 미디어 사양의 기능입니다. HTML에서는 클래스를 사용하여 각주가 되어야 하는 텍스트를 식별합니다. 예를 들면 다음과 같습니다.
<p>This is some text <span class=”fn”>this is a footnote</span>.</p>
그런 다음 footnote 값 float을 사용하여 이 텍스트를 각주로 변환합니다. 문서가 인쇄되고 각주로 표시되면 단락에서 삭제됩니다.
.fn {
float: footnote;
}