- Thiết kế responsive, cốt lõi của trải nghiệm web, cần tính đến không chỉ thiết bị mà cả phương tiện đầu ra (in ấn)
- Vì khả năng truy cập, yêu cầu pháp lý, du lịch và nhiều lý do khác, chất lượng và tính hữu dụng của việc in trang web vẫn rất quan trọng
- Với các tính năng dành riêng cho in ấn của CSS như @media print, @page, đơn vị tuyệt đối, page-break, có thể triển khai bố cục gọn gàng, chia trang hợp lý và in hiệu quả
- Cần ẩn các thành phần không cần thiết như điều hướng, footer và bổ sung thông tin cho liên kết, từ viết tắt... để phù hợp với bản in trên giấy
- Cần cân nhắc in đen trắng, tiết kiệm mực, khả năng đọc, hạn chế dùng màu sắc và nền, đồng thời thúc đẩy việc cải thiện bổ trợ lẫn nhau giữa bản in và màn hình
Sự cần thiết của thiết kế web cho in ấn
- Về khả năng truy cập, những người không thể nhìn màn hình trong thời gian dài vẫn có thể tiếp cận thông tin qua nội dung được in ra
- Khi di chuyển không có Internet, hoặc nghĩa vụ lưu trữ theo pháp lý/chính sách trong tổ chức, vẫn còn rất nhiều tình huống cần sử dụng tài liệu in
- Có nhiều điểm chung với các định dạng xuất bản số như EPUB, nên kinh nghiệm làm print style là một kỹ năng có khả năng mở rộng cao
- Vì mọi người thực sự in website ra để sử dụng, hỗ trợ in ấn góp phần nâng cao chất lượng trải nghiệm người dùng tổng thể
Cách áp dụng print style
- Có thể dùng
@media print của CSS để định nghĩa style riêng cho in ấn
- Có nhiều cách như
<link rel="stylesheet" media="print">, @import url("...") print, hoặc @media print { ... } trong CSS nội bộ
- Style chỉ dành cho màn hình thì dùng
@media screen
Kiểm thử print style
- Các trình duyệt như Edge, Chrome, Firefox, Safari đều cung cấp tính năng mô phỏng print media
- Kết quả mô phỏng có thể khác với bản in thực tế, và hầu hết trình duyệt mặc định tắt nền (để tiết kiệm mực)
- Khuyến nghị kiểm thử có tính đến môi trường in thực tế
Đơn vị tuyệt đối và quy tắc @page
- CSS cung cấp nhiều đơn vị tuyệt đối như cm, mm, in, pt, px, rất hữu ích để điều chỉnh kích thước chính xác khi in thực tế
- Có thể dùng quy tắc
@page để thiết lập khổ giấy (A4, A5...), lề, hướng giấy...
- Cũng cần tính đến giới hạn vùng in của máy in và footer/header mà trình duyệt có thể tự động thêm vào
Chia trang và quản lý đoạn văn
- Với nội dung dài, chia trang là điều bắt buộc; có thể kiểm soát vị trí phù hợp bằng các thuộc tính break-before, break-after, break-inside
- Cú pháp cũ
page-break-* vẫn còn tương thích
- Có thể dùng thuộc tính orphans, widows để giảm thiểu các dòng bị lẻ loi ở đầu/cuối đoạn (dù một số trình duyệt chưa hỗ trợ)
- Dùng box-decoration-break để giữ tính nhất quán giao diện như đường viền khi nội dung bị ngắt qua trang
Hỗ trợ in cho các thành phần tương tác
- Trên giấy, liên kết, từ viết tắt và các thành phần tương tác không thể sử dụng trực tiếp, nên có thể thêm URL/thông tin vào bản in bằng
a[href]:after, abbr[title]:after
- Các thành phần form nên được bố trí như ô nhập dành cho bản in, còn các vùng cuộn như scroll container cần mở rộng bằng
overflow: visible...
- Các thành phần không cần thiết như điều hướng, footer nên bị loại bỏ bằng
display: none, và có thể kiểm soát để chỉ in main
Màu sắc, mực in và khả năng đọc
- Lấy in đen trắng và tiết kiệm mực làm tiền đề mặc định, có thể thay thế việc nhấn mạnh bằng màu nền bằng các cách như dùng đường viền
- Có thể dùng print-color-adjust: exact để buộc chỉ một số thành phần giữ nguyên màu sắc (chỉ nên dùng khi thật cần thiết)
- Nên tối thiểu hóa hình ảnh, và khuyến nghị loại bỏ các thành phần tiêu tốn nhiều mực như quảng cáo
Kết luận
- Web không chỉ tồn tại trên màn hình mà còn trong thế giới vật lý (giấy)
- CSS print style là yếu tố cốt lõi giúp nâng cao khả năng truy cập và độ hoàn thiện của trải nghiệm người dùng
- Để mọi người dùng có thể tiêu thụ nội dung theo nhiều cách khác nhau, hỗ trợ in ấn là năng lực thiết yếu của phát triển web hiện đại cần được chú trọng
2 bình luận
Mặt khác, chính bài viết đó lại không thân thiện với việc in ấn.
Các UI vô ích khi in như COPY TO CLIPBOARD cũng bị in ra,
các đoạn mã bị cắt và thanh cuộn ngang cũng được in theo.
Hãy tham khảo thêm cả tổng hợp CSS để in ra giấy đã được đăng trước đó.
Việc in trang web ra giấy và xuất ra PDF lại là hai chuyện khác nhau (ví dụ như có thể dùng màu mà không lo tốn mực, hoặc có thể dùng hyperlink), và thư viện liên quan có thể kể đến như paged.js.
Rất đáng để cân nhắc khi tạo trang cho sách hướng dẫn, tài liệu đào tạo và phiếu học tập!