Ngày xuất bản: 30 tháng 10 năm 2024
Từ Chrome 131, bạn có thể dùng CSS để thêm nội dung vào lề của các trang khi in. Bài đăng này giải thích mô hình trang cho nội dung nghe nhìn được phân trang và cách sử dụng tính năng này để cải thiện đầu ra in từ các trang web của bạn.
CSS bao gồm các quy cách liên quan đến phương tiện được phân trang, CSS Paged Media Module và CSS Generated Content for Paged Media. Chúng xác định những tính năng chỉ được dùng khi một trang được in (kể cả khi in ra tệp PDF). Có những tác nhân người dùng hỗ trợ CSS này, cho phép bạn tạo sách và các tài liệu in khác từ HTML và CSS. Tuy nhiên, chức năng này chưa bao giờ được hỗ trợ tốt trong các trình duyệt web, mặc dù thực tế là chúng ta khá thường xuyên cần in hoặc tạo tệp PDF từ các ứng dụng.
Chrome và Firefox hỗ trợ quy tắc @page. Quy tắc này cho phép bạn xác định kích thước của trang mà bạn đang in và kích thước của lề xung quanh nội dung. Từ Chrome 131, bạn cũng có thể sử dụng nội dung được tạo để thêm nội dung vào lề bằng cách nhắm đến quy tắc @lề có liên quan.
Mô hình trang
Mô hình trang được dùng trong nội dung đa phương tiện phân trang xác định một hộp trang, đây là tờ giấy của bạn. Bên trong hộp trang là lề trang, đường viền trang, khoảng đệm trang và cuối cùng là vùng trang nơi nội dung của bạn xuất hiện. Khi nội dung được in, nội dung đó sẽ được chia thành nhiều trang tuỳ theo nhu cầu.
Sau đó, lề trang được chia thành 16 ô, mỗi ô có một quy tắc @ tương ứng.
@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
Định cỡ hộp lề
Chiều cao của các hộp trên cùng và dưới cùng, cũng như chiều rộng của các hộp bên trái và bên phải được xác định bằng kích thước lề được đặt bằng @page. Do đó, các hộp góc có kích thước cố định do giao điểm của các lề đó tạo ra. Tuy nhiên, 3 ô giữa mỗi góc có thể linh hoạt. Chúng hoạt động tương tự như các hộp trong bố cục linh hoạt bằng cách sử dụng flex: auto, vì vậy, chúng sẽ kéo dài để lấp đầy khoảng trống, nhưng nếu bạn đặt một chuỗi văn bản dài vào một hộp và không đặt gì vào các hộp khác, thì hộp có văn bản sẽ tăng kích thước thay vì bao bọc văn bản.
Thêm nội dung vào hộp lề
Để thêm nội dung vào các hộp lề, hãy sử dụng nội dung do CSS tạo, giống như khi bạn sử dụng các phần tử giả ::before và ::after. Trong trường hợp này, hãy sử dụng quy tắc @ liên quan đến hộp mà bạn muốn nhắm đến. CSS sau đây sẽ thêm văn bản "My book" (Sách của tôi) vào hộp lề dưới cùng bên trái hoặc các trang bên phải. Thao tác này cũng tạo kiểu cho văn bản đó.
@page :right {
@bottom-left {
content: "My book";
font-size: 9pt;
color: #333;
}
}
Ngoài chuỗi văn bản, bạn có thể thêm bộ đếm trang vào lề. Bộ đếm page được xác định trước chứa trang hiện tại. CSS sau đây sẽ thêm phần tử này vào cuối trang bên phải và cuối trang bên trái.
@page :right {
@bottom-right {
content: counter(page);
}
}
@page :left {
@bottom-left {
content: counter(page);
}
}
Ngoài ra, còn có một bộ đếm pages luôn chứa tổng số trang.
Những điều cần lưu ý khi sử dụng lề trang
Nếu in từ trình duyệt, trình duyệt sẽ tự động thêm một số nội dung lề trang nếu có đủ chỗ để hiển thị. Thao tác này sẽ xoá nội dung ngay cả khi bạn đã thêm nội dung. Bạn có thể tắt các tiêu đề và chân trang được tạo tự động này trong hộp thoại in.
Nếu bạn đặt lề trên trang thành 0 hoặc một giá trị quá nhỏ đến mức không có khoảng trống cho tiêu đề và chân trang của trình duyệt, thì các tiêu đề và chân trang đó sẽ không hiển thị.
Do khái niệm về bố cục trang mặc định trong Chromium, nếu trang đầu tiên của tài liệu in không có chỗ cho nội dung tự động, thì nội dung này sẽ ngăn nội dung trình duyệt xuất hiện trên các trang sau, ngay cả khi các trang đó có chỗ.
Các khả năng trong tương lai đối với nội dung nghe nhìn dạng trang
Quy cách về nội dung nghe nhìn có phân trang bao gồm một số tính năng khác, được mô tả trong bài viết Thiết kế cho bản in bằng CSS. Nếu bạn có trường hợp sử dụng cho bất kỳ tính năng nào sau đây, hãy thêm trường hợp đó vào các lỗi được liên kết.
Đặt chuỗi
Sách thường in tên chương hiện tại ở lề. Bạn không thể mã hoá cứng tiêu đề này vào CSS vì tiêu đề sẽ thay đổi khi bạn đọc sách. Thuộc tính string-set cho phép bạn đặt một giá trị từ HTML để sau đó sử dụng trong nội dung được tạo. CSS sau đây giả định rằng tiêu đề chương được đánh dấu là <h1>. Thẻ này lấy nội dung của từng <h1> và sử dụng nội dung đó ở lề trên cùng bên phải trên các trang bên phải. Khi đến <h1> tiếp theo, giá trị sẽ được cập nhật cho lề sau điểm đó.
h1 {
string-set: doctitle content();
}
@page :right {
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 8pt;
}
}
Lỗi Chromium cho string-set và string().
Tham chiếu chéo
Sau khi in tài liệu, các thông tin tham khảo đến các trang khác thường được biểu thị bằng cách sử dụng số trang mà bạn có thể tìm thấy thông tin tham khảo đó. Bạn có thể tạo các thông tin tham chiếu chéo này bằng target-counter. Khi được áp dụng cho một đường liên kết, đường liên kết này sẽ hoạt động để chuyển đến thông tin tham khảo trên web, khi in, số trang sẽ xuất hiện.
<a class="xref" href="#ref1">my reference</a>
a.xref:after {
content: " (page " target-counter(attr(href, url), page) ")";
}
Lỗi Chromium đối với các phần tham chiếu chéo.
Chú thích chân trang
Chú thích cuối trang cũng là một tính năng của quy cách về nội dung đa phương tiện dạng trang. Trong HTML, hãy sử dụng một lớp để xác định văn bản phải là chú thích, ví dụ:
<p>This is some text <span class=”fn”>this is a footnote</span>.</p>
Sau đó, hãy dùng giá trị footnote của float để chuyển văn bản này thành chú thích. Nội dung này sẽ bị xoá khỏi đoạn văn khi tài liệu được in và xuất hiện dưới dạng chú thích.
.fn {
float: footnote;
}