Ngày xuất bản: ngày 30 tháng 10 năm 2024
Từ Chrome 131, bạn có thể sử dụng CSS để thêm nội dung vào lề của trang khi chúng được in. Bài đăng này giải thích mô hình trang cho nội dung đa phương tiện được phân trang và cách sử dụng tính năng này để cải thiện kết quả in từ trang web.
CSS bao gồm các thông số kỹ thuật xử lý nội dung đa phương tiện được phân trang, Mô-đun nội dung đa phương tiện được phân trang của CSS và Nội dung do CSS tạo cho nội dung đa phương tiện được phân trang. Tệp này xác định các tính năng chỉ dùng khi in một trang (bao gồm cả PDF). Có các tác nhân người dùng hỗ trợ CSS này và cho phép bạn tạo sách cũng như 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 trên các trình duyệt web, mặc dù chúng ta thường phải in hoặc tạo tệp PDF từ các ứng dụng.
Chrome và Firefox hỗ trợ quy tắc tại @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 lề xung quanh nội dung. Kể 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 mục tiêu lề at-rule có liên quan.
Mô hình trang
Mô hình trang 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à khu vực trang nơi nội dung của bạn được hiển thị. Khi nội dung được in, nội dung đó sẽ được chia thành số trang tuỳ ý.
Sau đó, lề trang được chia thành 16 hộp, mỗi hộp có một at-rule 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 hộp trên cùng và dưới cùng cũng như chiều rộng của 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 được tạo bằng giao điểm của các lề đó. Tuy nhiên, ba hộp giữa mỗi góc là linh hoạt. Các lớp này hoạt động theo cách tương tự như các hộp trong bố cục linh hoạt khi sử dụng flex: auto, vì vậy chúng kéo dài để lấp đầy không gian, nhưng nếu bạn đặt một chuỗi văn bản dài vào một chuỗi và không đặt chuỗi văn bản vào các chuỗi khác, thì chuỗi có văn bản sẽ phát triển thay vì gói văn bản.
Thêm nội dung vào hộp lề
Để thêm nội dung vào hộp lề, hãy sử dụng nội dung do CSS tạo, giống như bạn làm với các phần tử giả ::before và ::after. Trong trường hợp này, hãy sử dụng at-rule liên quan đến hộp mà bạn muốn nhắm đến. CSS sau đây sẽ thêm văn bản "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;
}
}
Cũng như các 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 thêm thẻ này vào
g dưới cùng bên phải của trang bên phải và góc dưới cùng bên trái của 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ó 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 bạn in trên trình duyệt, trình duyệt sẽ tự động thêm một số nội dung lề trang nếu còn chỗ để hiển thị. Ứng dụng sẽ thực hiện việc này ngay cả khi bạn đã thêm nội dung. Bạn có thể tắt các đầu trang 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 một 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 nguyên tắc 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 trình duyệt sẽ không hiển thị trên các trang sau, ngay cả khi các trang đó có không gian.
Các khả năng trong tương lai đối với nội dung nghe nhìn được phân trang
Thông số kỹ thuật về nội dung nghe nhìn được phân trang bao gồm một số tính năng khác như được mô tả trong bài viết Thiết kế để 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 lỗi được liên kết.
Đặt chuỗi
Sách thường in tiêu đề 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 di chuyển qua sách. Thuộc tính string-set cho phép bạn đặt một giá trị từ HTML để 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>. Phương thức này lấy nội dung của mỗi <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 tài liệu được in, thông tin tham chiếu tới các trang khác thường được biểu thị bằng cách sử dụng số trang nơi có thể tìm thấy tài liệu tham chiếu. Bạn có thể tạo các tệp đối 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 sẽ hoạt động để chuyển đến tham chiếu trên web khi số trang xuất hiện trên máy in.
<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 tệp 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 thông số kỹ thuật nội dung nghe nhìn được phân trang. Trong HTML, hãy sử dụng một lớp để xác định văn bản sẽ là chú thích cuối trang, ví dụ:
<p>This is some text <span class=”fn”>this is a footnote</span>.</p>
Sau đó, sử dụng giá trị footnote float để chuyển văn bản này thành chú thích cuối trang. Chú thích sẽ bị xoá khỏi đoạn văn bản khi tài liệu được in và hiển thị dưới dạng chú thích cuối trang.
.fn {
float: footnote;
}