Khả năng in đầu trang/chân trang HTML

Question

Tôi đang cố gắng hết sức để cung cấp khả năng in đầu trang/chân trang HTML đầy đủ cho dự án Mediboard của chúng tôi.

Dài hạn, tôi biết rằng mô-đun Phương tiện trang CSS3 sẽ đáp ứng nhu cầu của tôi, nhưng ít nhất là hai hoặc ba năm.

Vì vậy, tôi đã cố gắng làm cho nó hoạt động với khả năng CSS2, và nó gần như hoạt động như bạn có thể thấy trên printable document này. Tuy nhiên, tôi vẫn có một giới hạn về chân trang nơi nội dung in dưới chân trang (xem trang 3-4 với Xem trước bản in).

Mặc dù tôi khá chắc chắn rằng padding-bottom của div.body sử dụng để làm cho nó hoạt động trong Firefox 2.

Dù sao, không ai có một đầu mối phức tạp để giúp tôi về vấn đề đó?

EDIT: Để cung cấp thêm chi tiết, chúng tôi hiện có header và footer bằng cách sử dụng các yếu tố vị trí với position: fixed, với top:0 hoặc bottom:0 tuỳ nếu nó là một tiêu đề hoặc một chân. Điều này hoạt động tốt và khi in, các phần tử này được lặp lại trên mỗi trang ở đúng vị trí (xem ví dụ "tài liệu có thể in"). Vấn đề duy nhất là khi một ngắt trang xảy ra, các văn bản được rút ra đằng sau những yếu tố này (xem trang 3/4)

EDIT2: Cập nhật URL của tài liệu

Answer 1

Bạn sẽ muốn thực hiện loại phương tiện truyền thông có khả năng nhất. Vui lòng xem http://www.w3.org/TR/CSS2/media.html để biết thêm thông tin. Bạn có thể có một trang CSS không có chân trang nổi để in và phần còn lại của màn hình.

<LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="foo.css">

Đó là ví dụ.

Bạn cũng có thể xem xét làm cho chân trang ẩn trên trang in nếu bạn không cần nó.

Answer 2

Từ kinh nghiệm của tôi, ngắt trang không hoạt động trong phần tử. Nếu một phần tử như [p] [/ p] kéo dài hai trang được in, mã HTML không biết nơi nào xảy ra sự cố giữa các trang. Điều này là do người dùng có thể đặt lề máy in của riêng họ là 1 hoặc 1,75 inch hoặc một số giá trị khác. Không thể đặt lề máy in thực tế qua CSS. CSS chỉ có thể thiết lập lề và đệm cho trang HTML - tới các lề được xác định của "máy in". Không có thông tin về cài đặt máy in, chẳng hạn như lề, được gửi tới trình duyệt. Điều này giải thích tại sao nội dung đang được ghi đè dưới tiêu đề vì trình duyệt không có ý tưởng khi nguồn cấp dữ liệu trang xảy ra. Giải pháp đơn giản nhất là chỉ để có thông tin tiêu đề trên trang đầu tiên, nhưng đó không phải là những gì bạn muốn. Cách tiếp cận bạo lực là chèn ngắt trang [br style = "page-break-before: always;" /] trong đoạn văn tại địa điểm thích hợp nhưng, điều này không thực tế đối với một số lượng lớn tài liệu. Ngoài ra, sự khác biệt tinh tế giữa các máy in bao gồm các máy in của cùng một nhà sản xuất khác nhau một cách tinh tế - cho exanmple, một bản in có thể in nội dung chỉ trên một trang, máy in tiếp theo có thể có dòng cuối cùng trên trang tiếp theo mặc dù cả hai máy in đều có cùng lề cài đặt. Tuy nhiên, đối với thông tin dạng bảng ([bảng] [/ bảng]) việc gán CSS như vậy trở nên dễ dàng để giữ các bảng với nhau. Tôi đang suy đoán rằng người ta có thể đếm các ký tự trên một trang và tự động chèn ngắt trang qua javascript (dễ dàng, nếu bạn sử dụng JQuery) để ước tính phương pháp tiếp cận vũ lực.

Answer 3

Có một câu trả lời hay là here liên quan đến bảng. Nó thực hiện chính xác những gì bạn muốn và được cho là thậm chí hoạt động trong IE6.

Answer 4

Dường như CSS2 có một quy tắc @page, trong đó bạn có thể xác định kích thước trang của bạn và một margin:

@page { size:8.5in 11in; margin: 6em 1em 2em } 

-hoặc-

@page { size:auto; margin: 6em 1em 2em } 

Đáng tiếc là tôi không có thời gian để kiểm tra nó, nhưng tôi rất muốn biết nếu nó hoạt động. Tôi có thể sử dụng nó.

Tôi thích những gì bạn đang lập kế hoạch với đầu trang/chân trang. Làm việc tốt :)