Data publikacji: 30 października 2024 r.
Od wersji 131 Chrome możesz używać CSS, aby dodawać treści do marginesów stron podczas ich drukowania. Z tego artykułu dowiesz się, czym jest model strony w przypadku mediów podzielonych na strony, i jak go używać, aby poprawić jakość wydruku stron internetowych.
CSS zawiera specyfikacje dotyczące mediów na stronach, moduł mediów na stronach w CSS i treści generowane w CSS dla mediów na stronach. Określają one funkcje używane tylko podczas drukowania strony (w tym do pliku PDF). Istnieją przeglądarki, które obsługują ten CSS i umożliwiają generowanie książek oraz innych materiałów drukowanych z HTML i CSS. Jednak ta funkcja nigdy nie była dobrze obsługiwana w przeglądarkach internetowych, mimo że często musimy drukować lub tworzyć pliki PDF z aplikacji.
Chrome i Firefox obsługują instrukcję at-rule @page. Ta reguła umożliwia określenie rozmiaru strony, na którą drukujesz, oraz rozmiaru marginesów wokół treści. Od wersji 131 Chrome możesz też używać generowanych treści do dodawania treści do marginesów, kierując się na odpowiednią regułę at-rule dotyczącą marginesów.
Model strony
Model strony używany w multimediów z podziałem na strony definiuje pole strony, czyli arkusz papieru. W ramce strony znajduje się margines strony, obwód strony, odstęp strony, a na końcu obszar strony, na którym wyświetlane są treści. Gdy treści są drukowane, są dzielone na tyle stron, ile jest to konieczne.
Margines strony jest następnie podzielony na 16 boksów, z których każdy ma odpowiadającą mu regułę 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
Rozmiar ramki marginesu
Wysokość górnych i dolnych pól oraz szerokość pól po lewej i prawej stronie są definiowane przez rozmiar marginesów ustawiony za pomocą @page. Dlatego pola narożne mają stały rozmiar utworzony przez przecięcie tych marginesów. Trzy pola między każdym rogiem są jednak elastyczne. Działa on w podobny sposób do pól w układzie elastycznym z użyciem flex: auto, więc rozciąga się, aby wypełnić dostępne miejsce, ale jeśli w jednym z nich umieścisz długi ciąg tekstowy, a w pozostałych nic, to pole z tekstem będzie się rozszerzać, a nie przenosić tekstu na kolejny wiersz.
Dodawanie treści do pól na marginesie
Aby dodać zawartość 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 AT, która odnosi się do pola, na które chcesz kierować reklamy. Ten kod CSS dodaje tekst „Moja książka” do lewego dolnego pola marginesu lub prawej strony. Może też nadać mu styl.
@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ę. Ten kod CSS dodaje je 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.
Ważne informacje o używaniu marginesów strony
Jeśli drukujesz z przeglądarki, przeglądarka automatycznie doda margines strony, jeśli jest miejsce na wyświetlenie treści. Dotyczy to nawet treści dodanych przez Ciebie. Automatycznie generowane nagłówki i stopki można wyłączyć w oknie drukowania.
Jeśli marginesy na stronie nadasz wartość 0 lub tak małą, ż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 automatycznie wyświetlane treści, nie będą one widoczne na kolejnych stronach, nawet jeśli jest na nie miejsce.
Przyszłe możliwości dotyczące multimediów podzielonych na strony
Specyfikacje mediów stron obejmują kilka innych funkcji opisanych w artykule Projektowanie na potrzeby druku za pomocą CSS. Jeśli masz zastosowanie dla którejś z tych funkcji, dodaj je do powiązanych błędów.
Ustaw ciągi znaków
W książkach często drukuje się tytuł bieżącego rozdziału na marginesie. Tego tytułu nie można zakodować na stałe w pliku CSS, ponieważ zmienia się on w trakcie czytania książki. Właściwość string-set umożliwia ustawienie wartości z HTML, która będzie używana w generowanych treściach. Ten kod CSS zakłada, że tytuły rozdziałów są oznaczone jako <h1>. Pobiera ona zawartość każdej <h1> i wykorzystuje ją w prawym górnym rogu stron po prawej stronie. Gdy dojdzie do następnego <h1>, wartość zostanie zaktualizowana 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 odniesienia do innych stron są zwykle wskazywane za pomocą numeru strony, na której można znaleźć odniesienie. Te wzajemne odniesienia można utworzyć za pomocą funkcji target-counter. Gdy zastosujesz go do linku, możesz przejść do odwołania w internecie, a po wydrukowaniu dokumentu wyświetli się 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 wzajemnych odniesień.
Przypisy
Przypisy są też funkcją specyfikacji multimediów na stronach. W kodzie HTML użyj klasy, aby wskazać tekst, który powinien być przypisem, na przykład:
<p>This is some text <span class=”fn”>this is a footnote</span>.</p>
Następnie użyj wartości footnote z float, aby przekształcić ten tekst w przypisy. Zostanie ona usunięta z akapitu, gdy dokument zostanie wydrukowany, i wyświetlona jako przypis.
.fn {
float: footnote;
}