Ngày xuất bản: 30 tháng 10 năm 2024
Kể từ Chrome 131, bạn có thể sử 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 đ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 quy cách 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. Các thuộc tính này xác định các tính năng chỉ được sử dụng khi in trang (bao gồm cả in sang 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 và 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 trình duyệt web, mặc dù chúng ta 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 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 hiển thị. Khi được in, nội dung sẽ được phân mảnh thành nhiều trang nếu cần để chứa nội dung đó.
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ại linh hoạt. Các thành phần này hoạt động tương tự như các hộp trong bố cục flex bằng cách sử dụng flex: auto, vì vậy, các thành phần này sẽ kéo giãn để 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 thành phần và không đặt gì vào các thành phần khác, thì thành phần có văn bản sẽ tăng kích thước 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. Phương thức này cũng định kiểu cho văn bản đó.
@page :right {
@bottom-left {
content: "My book";
font-size: 9pt;
color: #333;
}
}
Ngoài 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 sẽ thêm phần tử này vào góc dưới cùng bên phải của các trang bên phải và góc dưới cùng bên trái của các 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 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ó đủ không gian để 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 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ì điều này sẽ ngăn nội dung trình duyệt 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
Quy cách nội dung đa phương tiệ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 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 in tài liệu, các tệp tham chiếu đến các trang khác thường được chỉ báo bằng số trang chứa tệp 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 tài liệu tham khảo trên web, khi in, số trang sẽ hiển thị.
<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 của 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;
}