- Đang làm việc tái tạo và thay thế các biểu mẫu trước đây được viết tay trên giấy/Excel bằng công cụ nền web sử dụng HTML tại công ty, nên tổng hợp lại nội dung này
- Giải thích những điều cơ bản của CSS để kiểm soát trang web trông như thế nào khi được in, cùng với một số mẹo và thủ thuật
@page
@page là quy tắc CSS dùng để báo cho trình duyệt biết các thiết lập in của website.@page bao gồm DOM; trên web, phần tử <html> bị giới hạn bởi các cạnh màn hình, nhưng khi in thì bị giới hạn bởi @page.- Thiết lập
@page tương ứng gần đúng với các thiết lập bạn thấy trong hộp thoại in của trình duyệt khi nhấn Ctrl+P.
@media print
- Có media query
print để viết các style chỉ áp dụng khi in.
- Thêm
display:none cho header, tùy chọn, văn bản trợ giúp người dùng và các thành phần khác không nên xuất hiện trên bản in.
Chiều rộng, chiều cao, lề, đệm
- Cần hiểu về box model; lý do đặt @page
margin: 0 là vì tác giả muốn xử lý lề ở các phần tử DOM.
- Sẽ dễ nhớ hơn nếu coi
<html> chiếm toàn bộ tờ giấy vật lý và phần lề nằm bên trong DOM.
Định vị phần tử
- Khi thiết kế tài liệu, hãy dùng HTML/CSS phù hợp để bố trí các phần tử.
- Cũng có thể dùng định vị tuyệt đối khi cần tạo các hình chữ nhật khớp với giấy nhãn dán có kích thước cụ thể, hoặc khi phải in dữ liệu lên loại giấy có nhãn đặc biệt.
Tài liệu nhiều trang và phần tử lặp lại
- Khi viết trình tạo bản in có dữ liệu dạng bảng như hóa đơn, nếu
<table> tràn sang trang thứ hai thì trình duyệt sẽ tự động sao chép <thead> lên đầu mỗi trang.
- Có thể dùng JavaScript để chia bảng thành nhiều bảng nhỏ và tạo trang.
Chế độ dọc/ngang
- Người dùng có thể ghi đè quy tắc @page nếu muốn.
- Có thể tạo các phần tử
<style> riêng cho chế độ dọc và ngang, rồi dùng JavaScript để chuyển đổi.
Nguồn dữ liệu
- Có một vài cách để đưa dữ liệu vào trang: gói toàn bộ dữ liệu vào tham số URL, hoặc dùng JavaScript để lấy bản ghi cơ sở dữ liệu qua API.
- Thiết lập
contenteditable để người dùng có thể chỉnh sửa nhỏ trước khi in.
Ý kiến của GN⁺
- Bài viết này cung cấp một hướng dẫn hữu ích cho các lập trình viên web về cách viết CSS dành cho in ấn. Đặc biệt, nó sẽ hữu ích với những người đang làm công việc chuyển đổi trang web thành tài liệu vật lý.
- CSS cho in ấn thường là chủ đề hay bị bỏ qua, nhưng ở nhiều doanh nghiệp vẫn thường xuyên phải in các giấy tờ quan trọng, nên kiến thức này rất có giá trị.
- Cách tiếp cận kỹ thuật được trình bày trong bài có vẻ đã được thử nghiệm và kiểm chứng trong môi trường làm việc thực tế, đồng thời cung cấp các giải pháp thực dụng để giải quyết vấn đề thật.
- Việc sử dụng quy tắc CSS
@page và query @media print là rất quan trọng để kiểm soát kích thước giấy và lề khi in trang web, và đây là nội dung mà lập trình viên web nhất định phải biết.
- Bài viết không chỉ dừng ở mức hiểu biết cơ bản về CSS cho in ấn mà còn đưa ra các ví dụ và mẹo thực tế về cách áp dụng, giúp thu hẹp khoảng cách giữa lý thuyết và thực hành.
2 bình luận
Lần tới tôi muốn thử làm một dự án đồ chơi với cái này.
Ý kiến Hacker News
Giải thích về kiểu in ưa thích trên trang web cá nhân:
Trải nghiệm biên tập sách bằng Pagedjs.org:
Vấn đề về hỗ trợ trình duyệt đối với CSS in ấn:
Sự dễ dàng của việc in ấn bằng CSS:
Tình huống phải tạo ứng dụng native vì hỗ trợ in ấn của trình duyệt quá kém:
Suy ngẫm về lịch sử và tình hình hiện tại của CSS:
Cách tạo hóa đơn và một số sách điện tử bằng HTML & CSS:
Nhắc đến paper-css, công cụ đã được dùng để tạo PDF thông qua trình duyệt.
Ưu điểm của việc tạo tài liệu in bằng HTML/CSS:
Trải nghiệm dùng kỹ năng CSS để cung cấp hồ sơ mạng xã hội ở định dạng in: