Chiều rộng an toàn tính bằng pixel để in một trang web là bao nhiêu?
Trang của tôi bao gồm các hình ảnh lớn và tôi muốn đảm bảo rằng chúng sẽ không bị cắt khi in ra.
Tôi biết về các lề trình duyệt khác nhau và các khổ giấy US Letter / DIN A4. Vì vậy, chúng tôi đã có kích thước chữ cái chuẩn và một số giá trị DPI mặc định. Nhưng tôi có thể chuyển đổi những giá trị này thành giá trị pixel để chỉ định trong widththuộc tính của hình ảnh không?
Câu trả lời:
Đối với một "câu trả lời phổ quát" thực sự, tôi không thể cung cấp một. Tuy nhiên, tôi có thể đưa ra một câu trả lời đơn giản và dứt khoát cho một số chi tiết ...
670 PIXELS
Ít nhất đây có vẻ là một câu trả lời an toàn cho các sản phẩm của Microsoft. Tôi đã đọc nhiều đề xuất, bao gồm cả 675, nhưng sau khi tự mình kiểm tra, 670 là những gì tôi đã nghĩ ra.
Bỏ tất cả DPI, các vấn đề về lề, sự khác biệt về phần cứng, câu trả lời này dựa trên thực tế là nếu tôi sử dụng chế độ xem trước bản in trong IE9 (với lề tiêu chuẩn) - và ĐẶT KÍCH THƯỚC IN THÀNH 100% thay vì mặc định là “thu nhỏ để vừa vặn” , mọi thứ đều vừa vặn trên trang mà không bị cắt ở chiều rộng này.
Nếu tôi gửi một email HTML cho chính mình và nhận nó bằng Windows Live Mail 2011 (phiên bản Outlook Express đã trở thành) và tôi in trang ở chiều rộng 670 - thì mọi thứ lại phù hợp. Điều này đúng nếu tôi gửi nó đến một bản cứng thực tế hoặc một tệp MS XPS (bản in ảo).
Trước khi thử nghiệm, tôi đang sử dụng chiều rộng tùy ý là 700. Trong tất cả các trường hợp được đề cập ở trên, một phần của trang bị cắt bỏ. Khi tôi giảm xuống còn 670, mọi thứ hoàn toàn phù hợp.
Về cách tôi đặt chiều rộng - tôi chỉ sử dụng một bảng html “wrapper” nguyên thủy và xác định chiều rộng của nó là 670.
Nếu bạn có thể ra lệnh cho phần mềm của người dùng cuối, những vấn đề như vậy có thể được thực hiện ngay. Nếu không thể (tất nhiên là như vậy), bạn có thể kiểm tra các chi tiết cụ thể như trình duyệt họ đang sử dụng, v.v. và mã hóa các giải pháp cho những trình duyệt quan trọng. Giữa IE và FF, bạn sẽ bao gồm khoảng 90% người dùng web. Đặt một số mã khác cho “mọi người khác” thường có vẻ hoạt động và gọi nó là một ngày ...
Nó không đơn giản như vẻ ngoài. Tôi vừa gặp một câu hỏi tương tự, và đây là những gì tôi nhận được: Đầu tiên, một chút thông tin cơ bản về wikipedia .
Tiếp theo, trong CSS, đối với giấy, chúng có pt, là điểm, hoặc 1/72 inch. Vì vậy, nếu bạn muốn có cùng kích thước hình ảnh như trên màn hình, trước tiên bạn phải biết DPI / PPI của màn hình của bạn (thường là 96, như đã đề cập trên bài viết wikipedia), sau đó chuyển nó sang inch, sau đó chuyển nó thành điểm (chia cho 72).
Tuy nhiên, một lần nữa, các trình duyệt gặp phải tất cả các vấn đề với nội dung có thể in, ví dụ: nếu bạn cố gắng sử dụng thẻ float css, các trình duyệt dựa trên Gecko sẽ cắt hình ảnh của bạn ở giữa trang, ngay cả khi bạn sử dụng ngắt trang: tránh ; trên hình ảnh của bạn (xem tại đây, trong hệ thống theo dõi lỗi Mozilla ).
Có (nhiều) hơn nữa về in từ trình duyệt trong bài viết này trên A List Apart .
Hơn nữa, bạn phải xử lý chiều rộng "Co lại cho vừa vặn" trong bản xem trước khi in, cũng như các kích thước và hướng giấy khác nhau.
Vì vậy, bạn chỉ cần tìm ra kích thước hình ảnh tốt theo inch, ý tôi là điểm, (7,1 "* 72 = 511,2 vì vậy width: 511pt;sẽ phù hợp với giấy có kích thước chữ cái) bất kể kích thước pixel hoặc chiều rộng phần trăm chiều rộng và căn cứ vào chiều rộng hình ảnh của bạn trên khổ giấy.
Chúc may mắn...
Một giải pháp cho vấn đề mà tôi tìm thấy là chỉ đặt chiều rộng bằng inch. Cho đến nay, tôi chỉ thử nghiệm / xác nhận điều này hoạt động trong Chrome. Nó hoạt động tốt cho những gì tôi đang sử dụng nó (để in ra một tờ 8,5 x 11)
@media print {
.printEl {
width: 8.5in;
height: 11in;
}
}
@media print, bạn có thể đặt chúng. Bạn có thể đặt size: letterhoặc size: A4. smashingmagazine.com/2015/01/designs-for-print-with-css
Để in, tôi không đặt bất kỳ chiều rộng nào và loại bỏ bất kỳ chướng ngại nào khiến bố cục in của bạn không có chiều rộng động. Có nghĩa là nếu bạn làm cho cửa sổ trình duyệt của mình ngày càng nhỏ hơn, không có nội dung nào bị cắt / ẩn mà tài liệu sẽ dài hơn. Như vậy, bạn có thể chắc chắn rằng phần còn lại sẽ được xử lý bởi máy in / pdf-Creator.
Còn các phần tử có chiều rộng cố định như hình ảnh hoặc bảng thì sao?
Các tùy chọn tôi có thể nghĩ đến:
http://www.intensivstation.ch/en/css/print/
hoặc bất kỳ kết quả nào khác của google cho sự kết hợp của: CSS, print, media, layout
Một giải pháp để đảm bảo rằng hình ảnh không bị cắt khi in trong một trang Web là có quy tắc CSS sau:
@media print {
img {
max-width:100% !important;
}
}
Một máy in không hiểu pixel, nó hiểu dấu chấm (pt trong CSS). Giải pháp tốt nhất là viết thêm một CSS để in, với tất cả các thước đo của nó ở dạng dấu chấm.
Sau đó, trong mã HTML của bạn, ở phần đầu, hãy đặt:
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<link href="style_print.css" rel="stylesheet" type="text/css" media="print">
<img>thẻ một surroundig <div>div được chiều rộng một chiều cao trong pt và img bịwidth:100%; height:100%;
Tôi nghi ngờ có một ... Nó phụ thuộc vào trình duyệt, vào máy in (dpi tối đa vật lý) và trình điều khiển của nó, vào khổ giấy như bạn chỉ ra (và tôi cũng có thể muốn in trên giấy B5 ...), vào cài đặt ( ngang hay dọc?), ngoài ra bạn có thể thường xuyên thay đổi tỷ lệ (phần trăm), v.v.
Hãy để người dùng chỉnh sửa cài đặt của họ ...
width:automà sẽ điều chỉnh độ rộng nội dung với độ rộng của giấy