Opublikowano: 30 października 2024 r.
Od wersji 131 Chrome możesz używać CSS do dodawania treści do marginesów stron podczas ich drukowania. Z tego posta dowiesz się, jak działa model strony w przypadku mediów stronicowanych i jak używać tej funkcji, aby poprawić jakość wydruku stron internetowych.
CSS zawiera specyfikacje dotyczące mediów stronicowanych, moduł CSS Paged Media i treści generowane w CSS na potrzeby mediów stronicowanych. Definiują one funkcje, które są używane tylko podczas drukowania strony (w tym do pliku PDF). Istnieją programy klienckie, które obsługują ten CSS i umożliwiają generowanie książek oraz innych materiałów drukowanych z HTML i CSS. Ta funkcja nigdy nie była jednak dobrze obsługiwana w przeglądarkach internetowych, mimo że często musimy drukować lub tworzyć pliki PDF z aplikacji.
Przeglądarki Chrome i Firefox obsługują regułę @@page. Ta reguła umożliwia określenie rozmiaru drukowanej strony i rozmiaru marginesów wokół treści. Od Chrome 131 możesz też używać wygenerowanych treści, aby dodawać treści do marginesów, kierując reklamy na odpowiednią regułę @margin.
Model strony
Model strony używany w przypadku mediów stronicowanych definiuje pole strony, czyli arkusz papieru. Wewnątrz ramki strony znajduje się margines strony, obramowanie strony, wypełnienie strony i wreszcie obszar strony, w którym wyświetlana jest treść. Gdy treść jest drukowana, jest dzielona na tyle stron, ile jest potrzebnych do jej umieszczenia.
Margines strony jest następnie dzielony na 16 pól, z których każde ma odpowiadającą mu regułę @.
@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
Określanie rozmiaru ramki marginesu
Wysokość górnego i dolnego pola oraz szerokość lewego i prawego pola są określone przez rozmiar marginesu ustawiony za pomocą @page. Pola narożne mają więc stały rozmiar, który wynika z przecięcia tych marginesów. Trzy pola między każdym rogiem są jednak elastyczne. Zachowują się podobnie do pól w układzie elastycznym z użyciem flex: auto, więc rozciągają się, aby wypełnić przestrzeń, ale jeśli w jednym z nich umieścisz długi ciąg tekstu, a w pozostałych nic, to pole z tekstem powiększy się, zamiast zawijać tekst.
Dodawanie treści do pól marginesu
Aby dodać treść do pól marginesów, użyj treści generowanych w CSS, tak jak w przypadku pseudoelementów ::before i ::after. W takim przypadku użyj reguły @ powiązanej z polem, na które chcesz kierować reklamy. Poniższy kod CSS dodaje tekst „Moja książka” do lewego dolnego pola marginesu lub do stron po prawej stronie. Stylizuje też ten tekst.
@page :right {
@bottom-left {
content: "My book";
font-size: 9pt;
color: #333;
}
}
Oprócz ciągów tekstowych możesz dodawać do marginesów liczniki stron. Wstępnie zdefiniowany licznik page zawiera bieżącą stronę. Poniższy kod CSS dodaje go w prawym dolnym rogu stron po prawej stronie i w lewym dolnym rogu stron po lewej stronie.
@page :right {
@bottom-right {
content: counter(page);
}
}
@page :left {
@bottom-left {
content: counter(page);
}
}
Jest też licznik pages, który zawsze zawiera łączną liczbę stron.
O czym należy pamiętać podczas korzystania z marginesów strony
Jeśli drukujesz z przeglądarki, automatycznie doda ona treść marginesu strony, jeśli będzie na to miejsce. Zrobi to nawet wtedy, gdy dodasz treści. Te nagłówki i stopki generowane automatycznie można wyłączyć w oknie drukowania.
Jeśli ustawisz marginesy na stronie na 0 lub na tak małą wartość, że nie będzie miejsca na nagłówki i stopki przeglądarki, nie będą się one wyświetlać.
Ze względu na koncepcję domyślnego układu strony w Chromium, jeśli na pierwszej stronie drukowanego dokumentu nie ma miejsca na automatyczną zawartość, uniemożliwi to wyświetlanie zawartości przeglądarki na kolejnych stronach, nawet jeśli jest na nich miejsce.
Przyszłe możliwości mediów stronicowanych
Specyfikacje mediów stronicowanych obejmują kilka innych funkcji opisanych w artykule Projektowanie na potrzeby druku za pomocą CSS. Jeśli masz pomysł na wykorzystanie którejś z tych funkcji, dodaj go do połączonych błędów.
Ustawianie ciągów znaków
W książkach tytuł bieżącego rozdziału jest często drukowany na marginesach. Tego tytułu nie można zakodować na stałe w arkuszu CSS, ponieważ zmienia się on w miarę czytania książki. Właściwość string-set umożliwia ustawienie wartości z kodu HTML, która będzie później używana w wygenerowanych treściach. Poniższy kod CSS zakłada, że tytuły rozdziałów są oznaczone jako <h1>. Pobiera zawartość każdego elementu <h1> i używa jej w prawym górnym marginesie na stronach po prawej stronie. Gdy osiągnie kolejny <h1>, wartość jest aktualizowana w przypadku marginesów po tym punkcie.
h1 {
string-set: doctitle content();
}
@page :right {
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 8pt;
}
}
Błąd Chromium w przypadku string-set i string().
Odsyłacze
Po wydrukowaniu dokumentu odwołania do innych stron są zwykle oznaczane numerem strony, na której można znaleźć odwołanie. Te odwołania
można tworzyć za pomocą target-counter. Po zastosowaniu do linku działa on w taki sposób, że po kliknięciu przenosi do odwołania w internecie, a po wydrukowaniu wyświetla numer strony.
<a class="xref" href="#ref1">my reference</a>
a.xref:after {
content: " (page " target-counter(attr(href, url), page) ")";
}
Błąd w Chromium dotyczący odwołań
Przypisy
Przypisy to również funkcja specyfikacji mediów stronicowanych. W HTML-u użyj klasy, aby zidentyfikować tekst, który powinien być przypisem, np.:
<p>This is some text <span class=”fn”>this is a footnote</span>.</p>
Następnie użyj wartości footnote w float, aby przekształcić ten tekst w przypisy. Zostanie on usunięty z akapitów podczas drukowania dokumentu i będzie wyświetlany jako przypis.
.fn {
float: footnote;
}