Hướng dẫn what is a print css file? - tệp css in là gì?

• 20 phút đọc
• Mã hóa, CSS, kỹ thuật, in

Trong một thời gian mà mọi người dường như có một máy tính bảng, điều này có thể tiêu thụ mọi thứ bằng kỹ thuật số và giấy thực duy nhất chúng ta sử dụng là mô phòng tắm, có vẻ kỳ lạ khi viết về thói quen bị lãng quên từ lâu là in trang web. Tuy nhiên, kỳ lạ như nó dường như đối với các nhà sản xuất có tầm nhìn và máy tính bảng, chúng tôi vẫn còn xa thực tế của một thế giới không giấy tờ. [Liên kết đã kiểm tra tháng 2/08/2017] Trên thực tế, hàng tấn giấy nổi ra khỏi máy in trên toàn thế giới mỗi ngày, bởi vì không phải ai cũng có máy tính bảng và máy tính luôn luôn ở trong tầm tay. Hơn nữa, nhiều người trong chúng ta cảm thấy rằng văn bản bằng văn bản chỉ được tiêu thụ tốt hơn. Bởi vì tôi thích nấu ăn, đôi khi tôi in các công thức nấu ăn ở nhà, hoặc email và ảnh chụp màn hình tại nơi làm việc, mặc dù tôi hiếm khi có thể xem xét môi trường.

In fact, tons of paper float out of printers worldwide every day, because not everyone has a tablet yet and a computer isn’t always in reach. Moreover, many of us feel that written text is just better consumed offline. Because I love to cook, sometimes I print recipes at home, or emails and screenshots at work, even though I do so as rarely as possible out of consideration for the environment.

Trong một thời gian mà mọi người dường như có một máy tính bảng, điều này có thể tiêu thụ mọi thứ bằng kỹ thuật số và giấy thực duy nhất chúng ta sử dụng là mô phòng tắm, có vẻ kỳ lạ khi viết về thói quen bị lãng quên từ lâu là in trang web. Tuy nhiên, kỳ lạ như nó dường như đối với các nhà sản xuất có tầm nhìn và máy tính bảng, chúng tôi vẫn còn xa thực tế của một thế giới không giấy tờ.

Đọc thêm về SmashingMag: on SmashingMag:

• Thiết kế để in với CSS
• Thiết kế bố cục CSS với flexbox cũng dễ dàng như bánh
• Sách biệt ngữ ngành thiết kế web: Thuật ngữ và tài nguyên
• Đưa thư viện mẫu lên cấp độ tiếp theo

Trên thực tế, hàng tấn giấy nổi ra khỏi máy in trên toàn thế giới mỗi ngày, bởi vì không phải ai cũng có một máy tính bảng và một máy tính luôn luôn ở trong tầm tay. Hơn nữa, nhiều người trong chúng ta cảm thấy rằng văn bản bằng văn bản chỉ được tiêu thụ tốt hơn. Bởi vì tôi thích nấu ăn, đôi khi tôi in các công thức nấu ăn ở nhà, hoặc email và ảnh chụp màn hình tại nơi làm việc, mặc dù tôi hiếm khi có thể xem xét môi trường.

Một bảng phong cách in là hữu ích và đôi khi thậm chí cần thiết. Một số độc giả có thể muốn lưu trữ thông tin của bạn tại địa phương dưới dạng PDF được định dạng tốt để chỉ thông tin sau này, khi họ không có kết nối Internet. Tuy nhiên, các kiểu in thường bị lãng quên trong thời đại thiết kế web phản hồi. Tin tốt là một bảng kiểu in thực sự rất dễ dàng để tạo ra: bạn có thể làm theo một vài kỹ thuật CSS đơn giản để tạo ra trải nghiệm tốt cho độc giả và cho họ thấy rằng bạn đã đi xa hơn để cung cấp một người dùng tốt hơn một chút trải qua. Vì vậy, làm thế nào để chúng ta bắt đầu?

Thêm sau khi nhảy! Tiếp tục đọc bên dưới & NBSP; ↓

Bắt đầu

Hãy cùng xem xét quá trình thiết lập một bảng kiểu in. Phương pháp tốt nhất là bắt đầu từ đầu và dựa vào bảng kiểu mặc định của trình duyệt, chăm sóc đầu ra in khá tốt theo mặc định. Trong trường hợp này, chèn tất cả các khai báo để in ở phần cuối của bảng kiểu chính của bạn và kèm theo chúng với quy tắc riêng biệt này:

@media print {
   …
}

Để làm việc này, chúng tôi phải chuẩn bị hai điều:

1. Bao gồm tất cả các kiểu màn hình trong quy tắc

   
   img {
   max-width: 500px;
   }
   

   9 riêng biệt;
2. Bỏ qua loại phương tiện cho bảng kiểu cô đọng:

   
   @page {
   margin: 0.5cm;
   }
   

   0

Trong những trường hợp hiếm hoi, sử dụng các kiểu màn hình để in là cách tiếp cận thiết kế của bảng kiểu in. Mặc dù làm cho hai đầu ra tương tự về ngoại hình sẽ dễ dàng hơn theo cách này, nhưng giải pháp không tối ưu vì màn hình và in là những chiếc ấm cá khác nhau. Nhiều yếu tố sẽ cần được đặt lại hoặc tạo kiểu khác nhau để chúng trông bình thường trên một tờ giấy. Nhưng những hạn chế lớn nhất là chiều rộng trang giới hạn và nhu cầu về đầu ra rõ ràng, không lộn xộn. Xây dựng phong cách in riêng biệt với kiểu màn hình là tốt hơn. Đây là những gì chúng tôi sẽ làm trong suốt bài viết này.

Tất nhiên, bạn có thể tách các khai báo cho màn hình và in thành hai tệp CSS. Chỉ cần đặt loại phương tiện cho đầu ra màn hình thành

@page {
margin: 0.5cm;
}

@page {
margin: 0.5cm;
}

Để minh họa, tôi đã thiết lập một trang web đơn giản & NBSP; của nhà máy rượu vang hư cấu.

Mọi thứ cần thiết cho một màn hình phù hợp được đưa ra. Nhưng ngay khi môi trường thay đổi từ các pixel ảo sang giấy thực, điều duy nhất quan trọng là nội dung thực tế.

Do đó, như một nhiệm vụ đầu tiên, chúng tôi sẽ che giấu tất cả sự lộn xộn: cụ thể là điều hướng chính và chân trang.

header nav, footer {
display: none;
}

Tùy thuộc vào loại trang web, bạn cũng có thể xem xét ẩn hình ảnh theo mặc định. Nếu hình ảnh lớn, điều này sẽ là khôn ngoan, để tiết kiệm cho người dùng của bạn một số chi phí in ấn. Nhưng nếu các hình ảnh chủ yếu hỗ trợ nội dung và loại bỏ chúng sẽ thỏa hiệp ý nghĩa, chỉ cần để chúng vào. Bất cứ điều gì bạn quyết định, hãy giới hạn hình ảnh ở một chiều rộng nhất định, để chúng không bị chảy máu. Tôi đã thấy rằng 500 pixel là một thỏa hiệp tốt.

img {
max-width: 500px;
}

Ngoài ra, bạn cũng có thể dựa vào

@page {
margin: 0.5cm;
}

Bạn có thể muốn sử dụng một mẹo đơn giản để có được hình ảnh chất lượng cao khi in. Chỉ cần cung cấp một phiên bản có độ phân giải cao hơn của mỗi hình ảnh cần thiết và thay đổi kích thước ban đầu với CSS. Tìm hiểu thêm về kỹ thuật này trong bài viết in hình ảnh độ phân giải cao trên một danh sách.

Tất nhiên, chúng ta nên ẩn video và các yếu tố tương tác khác, bởi vì chúng vô dụng trên giấy tờ. Chúng bao gồm

@page {
margin: 0.5cm;
}

@page {
margin: 0.5cm;
}

@page {
margin: 0.5cm;
}

@page {
margin: 0.5cm;
}

Điều chỉnh đúng kích thước

Để xác định lề trang, bạn có thể sử dụng quy tắc

@page {
margin: 0.5cm;
}

@page {
margin: 0.5cm;
}

Sẽ đặt lề trang ở tất cả các mặt thành 0,5cm. Bạn cũng có thể điều chỉnh lề cho mọi trang khác. Mã sau đây đặt trang bên trái (1, 3, 5, v.v.) và trang bên phải (2, 4, 6, v.v.) một cách độc lập.

@page :left {
margin: 0.5cm;
}

@page :right {
margin: 0.8cm;
}

Bạn cũng có thể sử dụng lớp giả pseudo trang

@page {
margin: 0.5cm;
}

@page :first {
  margin: 1cm 2cm;
}

Thật không may,

@page {
margin: 0.5cm;
}

@page :left {
margin: 0.5cm;
}

@page :right {
margin: 0.8cm;
}

Bây giờ, hãy để điều chỉnh một số cài đặt chung cho các phông chữ. Hầu hết các trình duyệt đặt mặc định thành thời gian New Roman, bởi vì phông chữ serif được coi là dễ dàng hơn trên mắt khi đọc trên giấy. Chúng ta có thể sử dụng Georgia ở kích thước phông chữ 12 điểm và chiều cao dòng cao hơn một chút để có mức độ dễ đọc hơn.

body {
font: 12pt Georgia, "Times New Roman", Times, serif;
line-height: 1.3;
}

Tuy nhiên, để giữ lại một số kiểm soát, chúng ta nên đặt rõ ràng các kích thước phông chữ bên dưới. Biểu đồ trên Reeddesign cho chúng ta cảm giác về điều này; Nhưng với tất cả các kích thước và độ phân giải màn hình ngoài kia, đây chỉ là những ước tính sơ bộ.

h2 {
font-size: 24pt;
}

h2 {
font-size: 14pt;
margin-top: 25px;
}

aside h2 {
font-size: 18pt;
}

Ngoài các trường hợp đặc biệt (như tiêu đề

@page :left {
margin: 0.5cm;
}

@page :right {
margin: 0.8cm;
}

@page :left {
margin: 0.5cm;
}

@page :right {
margin: 0.8cm;
}

@page :left {
margin: 0.5cm;
}

@page :right {
margin: 0.8cm;
}

@page :left {
margin: 0.5cm;
}

@page :right {
margin: 0.8cm;
}

blockquote, ul {
margin: 0;
}

Hoặc bạn có thể ghi đè kiểu đạn mặc định trong danh sách không có thứ tự

ul {list-style: none}

Và thay thế nó bằng một tùy chỉnh; Ví dụ: một mũi tên kép (và một không gian trống để cung cấp cho nó một số phòng):

header nav, footer {
display: none;
}

Bạn cũng có thể làm cho

@page :left {
margin: 0.5cm;
}

@page :right {
margin: 0.8cm;
}

Hiện tại, những điều còn lại cần được xử lý trong tiêu đề là tiêu đề

@page :left {
margin: 0.5cm;
}

@page :right {
margin: 0.8cm;
}

Thật không may, một phần của nhà máy rượu vang trên mạng là màu trắng và do đó không lý tưởng để in trên giấy màu sáng. Đó là lý do tại sao hai phiên bản của logo nằm trong mã nguồn, một cho màn hình hiển thị, một phiên bản để in. Hình ảnh thứ hai không có văn bản

@page :left {
margin: 0.5cm;
}

@page :right {
margin: 0.8cm;
}

header nav, footer {
display: none;
}

Đầu tiên, chúng ta cần ẩn logo màn hình và tiêu đề

@page :left {
margin: 0.5cm;
}

@page :right {
margin: 0.8cm;
}

header nav, footer {
display: none;
}

Trong trường hợp này, chúng tôi phải mang lại logo in. Tất nhiên, bạn có thể sử dụng bộ chọn anh chị em liền kề cho công việc (

@page :first {
  margin: 1cm 2cm;
}

header nav, footer {
display: none;
}

Nếu không, bạn chỉ có thể sử dụng

@page :first {
  margin: 1cm 2cm;
}

@page :first {
  margin: 1cm 2cm;
}

@page :first {
  margin: 1cm 2cm;
}

Voilà! Bây giờ chúng tôi có một tiêu đề đẹp cho bản in của chúng tôi cho thấy rõ nguồn gốc của mọi thứ. Ngoài ra, bạn vẫn có thể xóa logo thứ hai khỏi mã nguồn và sử dụng tiêu đề tiêu đề ____ ____42 mà chúng tôi đã tắt trước đó (nói cách khác, xóa nó khỏi dòng

@page :first {
  margin: 1cm 2cm;
}

header nav, footer {
display: none;
}

Khi thêm một chút, tiêu đề trong bản in có thể hiển thị URL của trang web. Điều này được thực hiện bằng cách áp dụng phần tử giả

@page :first {
  margin: 1cm 2cm;
}

@page :first {
  margin: 1cm 2cm;
}

header nav, footer {
display: none;
}

Để xem những yếu tố giả này có thể làm gì khác, hãy đọc mô tả trên mạng Mozilla Developer.

Một điều nữa về IE 6 đến 8 là các thẻ HTML5 có thể được in. Bởi vì chúng tôi sử dụng các thẻ này trên trang web ví dụ, chúng tôi sẽ phải áp dụng Remy Sharp, HTML5SHIV trong tiêu đề. Shiv cho phép bạn không chỉ tạo kiểu cho các thẻ HTML5 mà còn in chúng. Nếu bạn đã sử dụng Modernizr, thì hoàn hảo, bởi vì shiv được bao gồm trong đó.

header nav, footer {
display: none;
}

Thật không may, hành vi của IES vẫn còn một chút lỗi ngay cả khi Shiv này được áp dụng. Các thẻ HTML5 được tạo kiểu cho bố cục màn hình cần được đặt lại, nếu không thì kiểu dáng sẽ được áp dụng cho bản in.

Một số nhà phát triển thêm một thông điệp ngắn dưới dạng bổ sung (hoặc thay thế) cho URL được hiển thị, nhắc nhở người dùng họ đang ở đâu khi họ in trang và kiểm tra lại nội dung mới. Chúng ta có thể làm điều này với phần tử giả

@page :first {
  margin: 1cm 2cm;
}

header nav, footer {
display: none;
}

Để phân biệt nó với nội dung thực tế, chúng tôi đã cho nó một đường viền màu xám, một chút đệm và in nghiêng. Cuối cùng, tôi đã biến nó thành một phần tử khối, để đường viền đi khắp nơi và cho logo một biên độ.

Để làm cho nó kín đáo hơn, chúng tôi có thể di chuyển tin nhắn này xuống cuối trang và nối nó vào thùng chứa chính của trang, có lớp

@page :first {
  margin: 1cm 2cm;
}

@page :first {
  margin: 1cm 2cm;
}

Cuối cùng, chúng ta cần loại bỏ đường viền của logo để ngăn nó hiển thị trong các trình duyệt di sản và di chuyển

@page :first {
  margin: 1cm 2cm;
}

header nav, footer {
display: none;
}

Liên kết bị thiếu

Rõ ràng, trên giấy tờ, các liên kết aren có thể nhấp và vì vậy là khá vô dụng. Bạn có thể cố gắng xây dựng một cách giải quyết, thay thế các liên kết bằng mã QR một cách nhanh chóng, nhưng giải pháp có thể không khả thi. Để đặt các liên kết để sử dụng, bạn có thể hiển thị URL sau mỗi chuỗi văn bản neo. Nhưng văn bản tràn ngập URL có thể gây mất tập trung và có thể làm giảm trải nghiệm đọc; và tiết lộ thông tin quá mức của người đọc khi có thể là nên.

Giải pháp tốt nhất là phần tử giả

@page :first {
  margin: 1cm 2cm;
}

header nav, footer {
display: none;
}

Chúng tôi đã giới hạn kỹ thuật này trong các liên kết trong các yếu tố

body {
font: 12pt Georgia, "Times New Roman", Times, serif;
line-height: 1.3;
}

img {
max-width: 500px;
}

Các khả năng cho các liên kết trong các tài liệu in dường như gần như vô tận, vì vậy hãy để thử thêm một số. Để phân biệt tất cả các liên kết nội bộ, hãy để chúng đi trước chúng với tên miền của trang web (bỏ qua tất cả các thuộc tính khác, để giữ cho mọi thứ ngắn gọn và rõ ràng):

img {
max-width: 500px;
}

Sau đó, chúng ta có thể ẩn các liên kết nội bộ (

body {
font: 12pt Georgia, "Times New Roman", Times, serif;
line-height: 1.3;
}

img {
max-width: 500px;
}

Ngoài ra, các liên kết bên ngoài sẽ được thêm vào, như trên. Chúng ta cũng xem xét các trang web được bảo mật của SSL (nghĩa là các trang web bắt đầu bằng

body {
font: 12pt Georgia, "Times New Roman", Times, serif;
line-height: 1.3;
}

img {
max-width: 500px;
}

Nhưng có một điều cần nhớ, đặc biệt là với các liên kết bên ngoài. Một số rất dài, chẳng hạn như những người trong thư viện nhà phát triển Safari. Các liên kết như vậy có thể dễ dàng phá vỡ một bố cục, như ở đầu ra màn hình. May mắn thay, một tài sản đặc biệt sẽ chăm sóc điều này:

img {
max-width: 500px;
}

Điều này phá vỡ các URL dài khi chúng đạt đến một giới hạn nhất định hoặc, như trong trường hợp của chúng tôi, khi chúng vượt quá chiều rộng của trang. Chỉ cần thêm thuộc tính này vào các khai báo đầu tiên trên. Mặc dù thuộc tính này về cơ bản được hỗ trợ trong một loạt các trình duyệt - thậm chí IE 6 - nó chỉ hoạt động trong Chrome khi in. Trong khi Firefox tự động phá vỡ các URL dài, Internet Explorer không có khả năng cho việc này.

Cuối cùng, chúng tôi đặt màu liên kết thành màu đen để cải thiện trải nghiệm cho độc giả.

img {
max-width: 500px;
}

Aaron Gustafson đã tiến thêm một bước và xây dựng các liên kết chú thích nhỏ. Theo mô tả:

Tập lệnh này xây dựng một danh sách các URI từ bất kỳ thẻ nào trong một thùng chứa được chỉ định và nối danh sách là chú thích cho tài liệu ở một vị trí được chỉ định. Bất kỳ phần tử được tham chiếu nào đều được cung cấp một số được chỉ định động tương ứng với liên kết trong danh sách chú thích.

Bài viết của Aaron, trong một danh sách khác nhau, Hiển thị liên kết cải tiến cho In cho in cho hiểu biết thêm về ý tưởng đằng sau kịch bản này.

Trong khi chúng tôi ở đó, cho người đọc biết các trích dẫn đến từ đâu, chẳng hạn như các trích dẫn được bọc trong các thẻ

@page :left {
margin: 0.5cm;
}

@page :right {
margin: 0.8cm;
}

body {
font: 12pt Georgia, "Times New Roman", Times, serif;
line-height: 1.3;
}

body {
font: 12pt Georgia, "Times New Roman", Times, serif;
line-height: 1.3;
}

img {
max-width: 500px;
}

Cạnh bên nhau

Chúng tôi chưa xử lý nội dung thanh bên. Mặc dù nó xuất hiện sau nội dung chính theo mặc định, hãy để cho nó một số điều trị đặc biệt. Để giữ cho nó khác biệt, chúng tôi sẽ cung cấp cho thanh bên một đường viền trên cùng màu xám và bộ đệm an toàn 30 pixel. Tài sản cuối cùng,

body {
font: 12pt Georgia, "Times New Roman", Times, serif;
line-height: 1.3;
}

img {
max-width: 500px;
}

Để tách nó ra nhiều hơn, chúng tôi có thể đặt một thuộc tính in đặc biệt:

img {
max-width: 500px;
}

Điều này sẽ di chuyển nội dung của thanh bên đến một trang mới khi được in. Nếu chúng ta làm điều này, chúng ta có thể bỏ qua tất cả các thuộc tính khác.

Chúng tôi có thể làm tương tự cho các bình luận. Nhận xét don lồng xuất hiện trong ví dụ, nhưng họ vẫn đáng để chạm vào. Bởi vì đôi khi chúng chạy dài, việc bỏ qua chúng trong bản in có thể là hợp lý (chỉ cần đặt

@page :first {
  margin: 1cm 2cm;
}

h2 {
font-size: 24pt;
}

h2 {
font-size: 14pt;
margin-top: 25px;
}

aside h2 {
font-size: 18pt;
}

h2 {
font-size: 24pt;
}

h2 {
font-size: 14pt;
margin-top: 25px;
}

aside h2 {
font-size: 18pt;
}

h2 {
font-size: 24pt;
}

h2 {
font-size: 14pt;
margin-top: 25px;
}

aside h2 {
font-size: 18pt;
}

h2 {
font-size: 24pt;
}

h2 {
font-size: 14pt;
margin-top: 25px;
}

aside h2 {
font-size: 18pt;
}

Chúng tôi cũng có thể sử dụng các thuộc tính

h2 {
font-size: 24pt;
}

h2 {
font-size: 14pt;
margin-top: 25px;
}

aside h2 {
font-size: 18pt;
}

h2 {
font-size: 24pt;
}

h2 {
font-size: 14pt;
margin-top: 25px;
}

aside h2 {
font-size: 18pt;
}

h2 {
font-size: 24pt;
}

h2 {
font-size: 14pt;
margin-top: 25px;
}

aside h2 {
font-size: 18pt;
}

h2 {
font-size: 24pt;
}

h2 {
font-size: 14pt;
margin-top: 25px;
}

aside h2 {
font-size: 18pt;
}

h2 {
font-size: 24pt;
}

h2 {
font-size: 14pt;
margin-top: 25px;
}

aside h2 {
font-size: 18pt;
}

h2 {
font-size: 24pt;
}

h2 {
font-size: 14pt;
margin-top: 25px;
}

aside h2 {
font-size: 18pt;
}

Bây giờ chúng tôi đã chăm sóc thanh bên, bảng kiểu in đã sẵn sàng! Bạn có thể tải xuống ở đây. Tệp được ghi lại đầy đủ và do đó có thể phục vụ như một điểm tham chiếu hữu ích hoặc điểm bắt đầu.

Chỉ để cho vui

Bạn có thể hỏi, Tại sao chúng ta có thể đặt thanh bên cạnh nội dung chính, như trên trang web? Vâng, màn hình và đầu ra in là một chút khác nhau. Không giống như trước đây, in ra aren rất rộng và do đó don don có nhiều không gian để lấp đầy. Nhưng tùy thuộc vào kích thước phông chữ, độ dài dòng có thể vượt quá tối đa 75 ký tự và vì vậy khó đọc hơn.

Trong trường hợp này, tất nhiên, chúng ta có thể giới hạn chiều rộng của nội dung chính (tốt nhất là không quá nhiều - chúng ta không nên đặt chiều dài đường xuống dưới khoảng 55 ký tự) và sau đó định vị hoàn toàn thanh bên ngay bên dưới nó, giống như Trong màn hình hiển thị. Nhưng việc mô tả phương pháp này nằm ngoài phạm vi của bài viết này, vì vậy vui lòng tham khảo bảng kiểu màn hình của trang web ví dụ (số dòng 112 và 141 trở xuống).

Theo ý kiến ​​khiêm tốn của tôi, tránh những thí nghiệm như vậy. Mặc dù về nguyên tắc, bố cục in có khả năng vô tận, tập trung vào nội dung và loại bỏ mọi thứ khác là tốt hơn. Cách tốt hơn để đảm bảo chiều dài dòng tối ưu chỉ là thu nhỏ chiều rộng của trang hoặc phóng to kích thước phông chữ.

Xem trước làm cho dễ dàng

Bản xem trước in của Tim Connell là một plugin jQuery nhỏ tiện dụng, sao chép chức năng in in tích hợp, nhưng với một sự khác biệt. Thay vì mở một trang riêng biệt, nó hiển thị một lớp phủ bóng bẩy, với các nút Đóng Đóng và Bản in ở trên cùng. Nó cũng có lối tắt thuận tiện. Bạn cũng có thể muốn xem trang demo.

Một cơ hội bị bỏ lỡ

Hãy tưởng tượng rằng bạn đã có thể truy cập bất kỳ trang nào, nhấn vào bản in và nhận được một phiên bản tối ưu của trang để thưởng thức trên giấy. Thật không may, chúng tôi không sống trong thế giới hoàn hảo này. Một số trang web vẫn dựa vào JavaScript để tạo các phiên bản in và nhiều nhà thiết kế khác chỉ đơn giản là không quan tâm. Nhưng đây là một cơ hội bị bỏ lỡ. Một bảng kiểu in được sáng tác cẩn thận có thể được sử dụng không chỉ để in mà để tối ưu hóa mức độ dễ đọc cho việc đọc màn hình.

Là chủ sở hữu trang web, bạn có thể xác định hình ảnh để hiển thị (nếu có), phông chữ và kích thước tối ưu và trình bày các yếu tố khác. Bạn có thể làm cho nội dung hấp dẫn hơn so với các phiên bản được tạo bởi Instapaper và khả năng đọc bằng cách cung cấp cho phiên bản in sự chú ý thêm mà nó xứng đáng.

Tương lai

Mặc dù sử dụng CSS3 cho bố cục màn hình là khá phổ biến hiện nay, nhưng nó vẫn chưa được thiết lập trong môi trường in. W3C có một mô tả rộng rãi về phương tiện truyền thông phân trang, nhưng không may hỗ trợ rất hạn chế tại thời điểm này, Opera và Chrome là trình duyệt duy nhất cho phép một số thuộc tính liên quan của nó. Với sự hỗ trợ tốt, có thể sử dụng quy tắc

@page {
margin: 0.5cm;
}

Các trang web được thiết kế tốt để in

Hãy cùng xem một số ví dụ về các trang web được tối ưu hóa để in.

Một danh sách tách biệt thiết kế nhiều cột trơn được đơn giản hóa thành một cột duy nhất, chiều rộng đầy đủ, trong đó phản ánh trực giác hệ thống phân cấp hợp lý của trang web. Tiêu đề bài viết và tác giả không còn liên kết hoạt động. Và kiểu chữ sạch đẹp được giữ nguyên, nhờ các phông chữ tương thích và màu đơn giản; & nbsp; không cần thay đổi phông chữ, mặc dù giá trị kích thước phông chữ tăng nhẹ. Các kiểu quảng cáo và liên kết được ẩn, và kết quả là một trang in đơn giản, đơn giản, dễ dàng phù hợp với bất kỳ máy in hoặc trang được thiết lập trong tài liệu. Một danh sách ngoài là mẫu mực, lưu cho một điểm quan trọng: logo không xuất hiện ở bất cứ đâu trong bản in.

Các hội chợ thế giới bị mất Trang được in mượt mà giúp mang hình ảnh của trang web cho các hội chợ thế giới bị mất. Tiêu đề chính và nền đầy màu sắc của nó được hoán đổi cho một phiên bản đơn giản hóa theo kiểu in ấn. Tuy nhiên, một số hình ảnh có thể được gỡ bỏ để lưu một số mực máy in đắt tiền. (Cập nhật).

Tin tức buổi sáng mà người ta mong đợi hầu hết các trang web tin tức sẽ sử dụng chức năng in ấn, nhưng đó không phải là trường hợp. Tin tức buổi sáng đã chuẩn bị nội dung của nó để in mà không quan tâm nhiều, vui vẻ loại trừ hình ảnh nền và màu sắc, trong khi vẫn nhận được thông điệp của nó.

James Li James Li đã thiết kế trang web cá nhân của mình đặc biệt tốt cho mục đích này, cẩn thận bảo tồn tất cả các yếu tố khoảng cách và chính. Logo là một phần của sản phẩm in, trong khi các liên kết điều hướng không: rất thông minh, bởi vì điều hướng không có giá trị trên trang in trừ khi nó có nhiều thông tin. Các phông chữ không phải WEB được chuyển đổi thành các phông chữ có thể in đơn giản (xem các thứ khác khác, phạm vi). Được thực hiện rực rỡ để in.

TechCrunch TechCrunch, thiết kế lại gần đây đã điều chỉnh không chỉ thiết kế trực quan của trang web, mà cả các chi tiết nhỏ phải được xem xét khi trang web được xem trên thiết bị di động hoặc được in ra. Bố cục in rất sạch sẽ và tối giản, không có chi tiết không cần thiết, nhưng cũng không có liên kết đến trang thực tế được in ra. Logo TechCrunch cũng được bỏ qua.

R/Ga Mặc dù logo không có mặt trong phiên bản in của trang web này, nhưng sự chú ý được trả cho khoảng cách của nội dung bên trong. Mặc dù phiên bản web có các dòng đơn giản và không gian sạch, trang in thắt chặt các yếu tố để sử dụng tốt nhất không gian. Một lưới mạnh và kiểu chữ hiệu quả thêm vào hiệu ứng. Trong ví dụ này, một số hình ảnh cũng có thể được xóa.

Studio Mister Một công việc tuyệt vời của chức năng in ấn. Trang này đã được thiết kế tỉ mỉ cho một lưới và yêu cầu rất ít để chuẩn bị cho nó để in; & nbsp; một số sự chú ý đến màu nền của văn bản và không nhiều thứ khác. Thật không may, mặc dù, logo là một hình ảnh nền và do đó bị loại trừ.

Bottlerocket Creative Mặc dù logo này cũng không được thể hiện trong bản in, những người ở Bottlerocket Creative đã làm rất tốt để điều chỉnh phong cách đánh máy của họ để xem ngoại tuyến. Giả sử thiết kế được tạo ra chủ yếu với hình ảnh sẽ dễ dàng, nhưng sự chú ý tỉ mỉ đối với loại là rõ ràng khi kiểm tra kỹ hơn.

Omniti Omniti đã tối ưu hóa nội dung của nó để in không phải bằng cách thu nhỏ cột chính, mà bằng cách tăng kích thước của văn bản và không tập trung các hình ảnh lại với nhau. Cái nhìn vui tươi tuân thủ khoảng cách tốt. Hạn chế duy nhất? Nhiều lần phá vỡ dòng đã bị loại bỏ, khiến một số từ và câu chạy vào nhau.

Tóm lại là

Có rất nhiều điều để xem xét khi chuẩn bị trang web của bạn được in ra bởi độc giả. Quá trình buộc bạn phải xem xét kỹ lưỡng mọi yếu tố của nội dung của bạn hơn bao giờ hết, tất cả vì ai đó sẽ muốn một bản sao cứng của công việc của bạn. Tuy nhiên, hầu hết tất cả, điều quan trọng là phải nhận ra sự khác biệt giữa in và thực sự đọc. Có lẽ những kỹ thuật này có công trong việc giúp bạn trực quan hóa nội dung cho các thiết bị di động. Còn cách nào tốt hơn để giết hai con chim bằng một viên đá hơn là tìm ra bố cục của bạn cho điện thoại di động trong khi xem xét việc in chế độ xem cùng một lúc để đảm bảo rằng nội dung của bạn in hoàn hảo để lưu trữ ngoại tuyến? Thời gian bạn đầu tư có thể tăng gấp đôi giá trị.

Để biết thêm thông tin về việc chuẩn bị nội dung để in, bao gồm bằng cách sửa đổi CSS, hãy xem các bài viết sau:

• Hướng dẫn dứt khoát, Trenton Moss, Webcredible
• 6 điều tôi đã học về CSS in từ HTML5 Boilerplate, Joshua Johnson, DesignShack
• CSS-Tricks cuối cùng cũng được in CSS, Chris Coyier, CSS-Tricks
• Cấu hình in CSS, W3C
• Truy vấn truyền thông, W3C

(AL) (VF) (IL)

Làm cách nào để xem CSS in trong Firefox?

In có nghĩa là gì trong HTML?

Làm cách nào để in một trang web bằng CSS?

Ghế kiểu trong phương tiện truyền thông in ấn là gì?