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 posta dowiesz się, jaki jest model strony w przypadku multimediów i jak używać tej funkcji do ulepszenia wydruków ze 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ą klienty użytkownika, które obsługują ten kod CSS i umożliwiają generowanie książek oraz innych materiałów drukowanych za pomocą kodu HTML i CSS. Ta funkcja nigdy nie była jednak dobrze obsługiwana w przeglądarkach, mimo że często musimy drukować lub tworzyć pliki PDF w aplikacjach.
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 dla 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, wypełnienie strony oraz 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ść lewej i prawej strony są określone przez rozmiar marginesów ustawiony w parametrze @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 dotyczy pola, na które chcesz kierować reklamy. Ten kod CSS dodaje tekst „Moja książka” do lewego dolnego pola marginesu lub prawej strony. Jest on też stylizowany.
@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 uwagi podczas korzystania z 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 kodzie CSS, ponieważ zmienia się on podczas przeglądania 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 strony <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 dotyczący 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 tworzyć 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 ma 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 on usunięty z akapitu, gdy dokument zostanie wydrukowany i wyświetlony jako przypis.
.fn {
float: footnote;
}