Nếu bạn đã thực hiện bất kỳ thiết kế đáp ứng nào, bạn sẽ biết về quy tắc @media. Cũng như các kích thước màn hình khác nhau, @media cũng cho phép bạn nhắm mục tiêu phương tiện "in". Đây là một ví dụ
Sử dụng quy tắc này, bạn có thể chỉ định CSS tiêu chuẩn của mình như bình thường và sau đó thêm một số kiểu tùy chỉnh sẽ chỉ được sử dụng khi in
p {lề. 1em 0;
@media in {
/* Ẩn các liên kết bài viết liên quan khi in. */
. bài viết liên quan { hiển thị. không ai;
}
Nếu bạn muốn "bỏ qua" tất cả các kiểu màn hình tiêu chuẩn của mình và bắt đầu lại từ đầu, bạn có thể bọc các kiểu màn hình của mình trong một quy tắc @media khác
màn hình @media {
/* phong cách tiêu chuẩn ở đây. */
}
@media in {
/* phong cách in ở đây. */
}
Thuộc tính ngắt trang
Để đảm bảo nội dung trôi chảy trên các trang, bạn sẽ muốn kiểm soát thời điểm nội dung được phân chia giữa các trang. Ví dụ: có vẻ khó xử nếu một tiêu đề lớn xuất hiện ở cuối trang - thay vào đó bạn muốn nó bắt đầu trên một trang mới. Tương tự, bạn có thể muốn tránh một bảng kéo dài nhiều trang nếu có thể
Bạn có thể thực hiện việc này bằng ngắt trang trước, ngắt trang sau và ngắt trang bên trong. Bạn có thể đặt giá trị cho các thuộc tính này thành luôn luôn hoặc tránh
h1 {
/* phần tử h1 luôn bắt đầu ở đầu trang mới. */
ngắt trang trước. luôn;
}
tiết diện. bản đồ thành phố {
/* phần này luôn chiếm một hoặc nhiều trang riêng của nó. */
ngắt trang trước. luôn;
ngắt trang sau. luôn;
}
bàn {
/* bảng không phân chia giữa các trang nếu có thể. */
phá trang. tránh xa;
}
Mẹo. Lặp lại tiêu đề bảng
Nếu tài liệu của bạn có các bảng trải rộng trên nhiều trang, thì sẽ khó đọc khi được in trừ khi các tiêu đề bảng được lặp lại ở đầu mỗi trang. Điều này khá dễ thực hiện - chỉ cần sử dụng các phần tử thead và tbody trong bảng của bạn
Khi được in, bảng của bạn sẽ trông giống như thế này
Mẹo. Thêm hoặc xóa nội dung
Đôi khi bạn có thể muốn thêm nội dung chỉ hiển thị khi in. Ví dụ: bạn có thể muốn liên kết các URL sẽ được in. Bạn có thể làm điều này bằng cách sử dụng. sau phần tử giả
@media in {
một[href]. sau đó {
nội dung. " [" attr[href] "]";
}
}
Bạn cũng có thể chỉ muốn ẩn hoặc hiển thị một số thành phần khi in. Bằng cách kết hợp @media và hiển thị, điều này có thể được thực hiện khá dễ dàng
/* ẩn watermark trên màn hình. */
Chữ ký ảnh {
trưng bày. không ai;
}
@media in {
/* ẩn điều hướng khi in. */
điều hướng {
trưng bày. ẩn giấu;
}
/* hiển thị watermark khi in */
. Chữ ký ảnh {
trưng bày. ban đầu;
}
}
Mẹo. Sử dụng phương tiện CSS giả lập để phát triển
Để tăng tốc vòng phản hồi của bạn trong quá trình phát triển, bạn có thể đặt trình duyệt của mình hiển thị các kiểu in. Để thực hiện việc này trong Chrome trên máy Mac, hãy mở công cụ dành cho nhà phát triển, sau đó sử dụng phím tắt command-shift-P cho “Run Command” và tìm kiếm “Emulate CSS print media type”
Các trình duyệt khác sẽ có tính năng tương tự trong công cụ dành cho nhà phát triển của họ
Thật không may khi thấy ngắt trang, bạn sẽ cần phải in PDF theo cách thủ công mỗi lần
Mẹo nâng cao. Trẻ mồ côi và góa phụ
Thuộc tính mồ côi và góa phụ kiểm soát cách văn bản trong phần tử được phân chia trên các trang. Đôi khi, việc điều chỉnh các giá trị này có thể cải thiện khả năng đọc tài liệu in của bạn
P {
/* nếu không có ít nhất ba dòng trước trang
ngắt, di chuyển phần tử đến đầu trang mới. */
trẻ mồ côi. 3;
}
Ở bên trái bên dưới, mồ côi được đặt thành 2, vì vậy đoạn thứ hai bắt đầu trước khi ngắt trang. Bằng cách đặt orphans thành 3, như ở bên phải, đoạn văn được buộc xuống đầu trang tiếp theo
Thuộc tính góa phụ ngược lại với thuộc tính mồ côi - nó chỉ định số dòng tối thiểu có thể ở đầu trang mới
Mẹo nâng cao. quy tắc @page
Với quy tắc @page, bạn có thể tùy chỉnh lề trang cho các trang cụ thể
@trang. đầu tiên {
/* Không có lề trên trang đầu tiên. */
lề. 0;
}
@trang {
/* Đặt lề trên tất cả các trang khác. */
lề. 2cm;
}
Thật không may, hỗ trợ trình duyệt cho điều này hiện có một chút hạn chế và bạn chỉ có thể sử dụng. đầu tiên,. Cuối cùng,. bên trái,. Phải và. bộ chọn giả trống để chọn các trang
Tóm lược
Bây giờ bạn đã quen thuộc với các thuộc tính quan trọng đối với bố cục in được hỗ trợ bởi các trình duyệt hiện đại như Chrome, Firefox và Safari
Thật không may, hỗ trợ cho các tính năng bố cục in nâng cao hơn trong các trình duyệt hiện đại thường bị hạn chế. Ví dụ: các trình duyệt không cung cấp cách tiêu chuẩn để thêm nội dung đầu trang hoặc chân trang tùy chỉnh bằng CSS. Bạn có thể muốn kiểm tra phân trang. js cung cấp một polyfill cho nhiều tính năng bố cục in mà các trình duyệt hiện đang thiếu
Cuối cùng, nếu bạn đang chạy một ứng dụng web và muốn thêm chức năng PDF, hãy xem Paperplane - API chuyển đổi HTML sang PDF dễ sử dụng của chúng tôi