In trang có kiểu CSS bằng JavaScript

Christian đã từng rất tích cực trong cộng đồng Sketch và thậm chí còn viết một cuốn sách về ứng dụng thiết kế. Ngày nay, anh ấy làm việc với tư cách là Nhà truyền giáo cho Gravit …

Tìm hiểu thêm về Christian ↬

Bản tin email

Email (đập vỡ) của bạn

Mẹo hàng tuần về front-end & UX
Được hơn 200.000 người tin cậy

• Chuẩn bị cho các vai trò giao tiếp ngày nay Thạc sĩ Thiết kế Thông tin của Northwestern

• Giao diện người dùng SmashingConf 2023

• Quảng cáo trên tạp chí Smashing

• Các mẫu thiết kế giao diện Đào tạo UX

• Các mẫu thiết kế giao diện thông minh, khóa học 9h-video

Vào thời điểm mà mọi người dường như đều có máy tính bảng, thứ cho phép tiêu thụ mọi thứ bằng kỹ thuật số và loại giấy thật duy nhất mà chúng tôi sử dụng là khăn giấy trong phòng tắm, có vẻ kỳ quặc khi viết về thói quen in ấn đã bị lãng quên từ lâu . Tuy nhiên, dù có vẻ kỳ lạ đối với những người nhìn xa trông rộng và các nhà sản xuất máy tính bảng, chúng ta vẫn còn cách xa thực tế về một thế giới không giấy tờ. [Các liên kết được kiểm tra vào ngày 08/02/2017]

Trên thực tế, hàng tấn giấy trôi ra khỏi máy in trên toàn thế giới mỗi ngày vì không phải ai cũng có máy tính bảng và không phải lúc nào máy tính cũng ở trong tầm với. Hơn nữa, nhiều người trong chúng ta cảm thấy rằng văn bản viết được sử dụng ngoại tuyến tốt hơn. Vì tôi thích nấu ăn nên đôi khi tôi in các công thức nấu ăn ở nhà, hoặc gửi email và ảnh chụp màn hình tại nơi làm việc, mặc dù tôi làm như vậy ít nhất có thể vì lý do bảo vệ môi trường.

Vào thời điểm mà mọi người dường như đều có máy tính bảng, thứ cho phép tiêu thụ mọi thứ bằng kỹ thuật số và loại giấy thực sự duy nhất chúng ta sử dụng là khăn giấy trong phòng tắm, có vẻ kỳ lạ khi viết về thói quen in trang Web đã bị lãng quên từ lâu. Tuy nhiên, dù có vẻ kỳ lạ đối với những người nhìn xa trông rộng và các nhà sản xuất máy tính bảng, chúng ta vẫn còn cách xa thực tế về một thế giới không giấy tờ

Đọc thêm trên SmashingMag.

• Thiết kế để in bằng CSS
• Thiết kế bố cục CSS với Flexbox dễ như ăn bánh
• 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 trô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 không phải lúc nào cũng trong tầm với. Hơn nữa, nhiều người trong chúng ta cảm thấy rằng văn bản viết được sử dụng ngoại tuyến tốt hơn. Vì tôi thích nấu ăn nên đôi khi tôi in các công thức nấu ăn ở nhà, hoặc gửi email và ảnh chụp màn hình tại nơi làm việc, mặc dù tôi làm như vậy ít nhất có thể vì lý do bảo vệ môi trường

Một biểu định kiểu in rất hữu ích và đôi khi còn cần thiết. Một số người đọc có thể muốn lưu trữ cục bộ thông tin của bạn dưới dạng PDF có định dạng phù hợp để tham khảo 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 đáp ứng. Tin tốt là một biểu định kiểu in thực sự rất dễ tạo. bạn có thể làm theo một số kỹ thuật CSS đơn giản để tạo trải nghiệm tốt cho người đọc và cho họ thấy rằng bạn đã nỗ lực hết mình để mang lại trải nghiệm người dùng tốt hơn một chút. 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 ↓

Gặp gỡ các Hội thảo Smashing về giao diện người dùng & UX, với các bài học thực tế, phiên trực tiếp, bản ghi video và phần Hỏi & Đáp thân thiện. Trên các hệ thống thiết kế, UX, hiệu suất web và CSS/JS. Với Brad Frost, Christine Vallaure và rất nhiều người khác

Chuyển đến hội thảo ↬

Bắt đầu

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

@media print {
   …
}

Để làm được điều này, chúng ta phải chuẩn bị hai thứ

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 biểu định kiểu thu gọn.

   
   @page {
   margin: 0.5cm;
   }
   

   0

Trong một số ít trường hợp, 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 có hình thức giống nhau sẽ dễ dàng hơn theo cách này, nhưng giải pháp này không phải là tối ưu vì màn hình và bản in là các loại cá khác nhau. Nhiều yếu tố sẽ cần được đặt lại hoặc tạo kiểu khác để 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 hạn chế và nhu cầu về đầu ra rõ ràng, gọn gàng. Xây dựng các kiểu in riêng biệt với các kiểu màn hình sẽ 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 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;
}

1 và loại phương tiện để in thành

@page {
margin: 0.5cm;
}

2, bỏ qua phương tiện đầu tiên nếu bạn muốn xây dựng biểu định kiểu màn hình

Để minh họa, tôi đã thiết lập một trang web đơn giản về Smashing Winery hư cấu

Trang web ví dụ của chúng tôi

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

Hai trang của bản xem trước bản in không thay đổi. Header chưa tối ưu, cả navigation chính và footer đều thừa

Do đó, như một nhiệm vụ đầu tiên, chúng tôi sẽ ẩn 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 hình ảnh chủ yếu hỗ trợ nội dung và việc xóa chúng sẽ ảnh hưởng đến ý nghĩa, hãy để chúng ở. Dù bạn quyết định thế nào, hãy giới hạn hình ảnh ở một độ rộng nhất định để chúng không bị nhòe ra khỏi giấy. Tôi nhận thấy rằng 500 pixel là một sự 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;
}

3 đã được thử nghiệm và đáng tin cậy, hiển thị hình ảnh ở kích thước tối đa nhưng không lớn hơn chiều rộng của trang

Bạn có thể muốn sử dụng một thủ thuật đơn giản để có được hình ảnh chất lượng cao khi in. Chỉ cần cung cấp phiên bản có độ phân giải cao hơn cho mọi hình ảnh cần thiết và thay đổi kích thước của nó thành kích thước ban đầu bằng CSS. Đọc thêm về kỹ thuật này trong bài viết “In ảnh độ phân giải cao” trên A List Apart

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

@page {
margin: 0.5cm;
}

4,

@page {
margin: 0.5cm;
}

5,

@page {
margin: 0.5cm;
}

6 và

@page {
margin: 0.5cm;
}

7. Bạn cũng có thể muốn xem xét việc thay thế từng thành phần video bằng một hình ảnh trong biểu định kiểu in

Với điều hướng chính, chân trang và hình ảnh đã biến mất, văn bản thực tế ngày càng tiến gần hơn đến giai đoạn trung tâm. Nhưng vẫn còn nhiều việc phải làm, đặc biệt là với tiêu đề

Điều chỉnh kích thước phù hợp

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

@page {
margin: 0.5cm;
}

8 để chỉ cần áp dụng lề cho toàn bộ trang. e. g

@page {
margin: 0.5cm;
}

sẽ đặt lề trang ở tất cả các bên thành 0. 5cm. Bạn cũng có thể điều chỉnh lề cho mọi trang khác. Đoạn mã sau đặt trang bên trái (1, 3, 5, v.v. ) và trang bên phải (2, 4, 6, v.v. ) lề độ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ả trang

@page {
margin: 0.5cm;
}

9 mô tả kiểu dáng của trang đầu tiên khi in tài liệu

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

Thật không may,

@page {
margin: 0.5cm;
}

8 không được hỗ trợ trong Firefox, nhưng được hỗ trợ trong Chrome 2. 0+, TỨC LÀ 8. 0+, Opera 6. 0+ và Safari5. 0+.

@page :left {
margin: 0.5cm;
}

@page :right {
margin: 0.8cm;
}

1 chỉ được hỗ trợ trong IE8+ và Opera 9. 2+. (cảm ơn về mẹo, Designshack)

Bây giờ, hãy tinh chỉnh một số cài đặt chung cho phông chữ. Hầu hết các trình duyệt đặt mặc định thành Times New Roman, vì phông chữ serif được coi là dễ nhìn hơn khi đọc trên giấy. Chúng tôi có thể sử dụng Georgia ở cỡ chữ 12 điểm và chiều cao dòng cao hơn một chút để 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ố quyền 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 nhận về điều này;

h1 {
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;
}

2, nếu không sẽ quá gần với đoạn trước), chúng ta không cần chạm vào lề hoặc hình thức của bất kỳ thành phần nào, vì chúng được xử lý khá độc đáo theo cài đặt mặc định. Nếu bạn không thích việc một số phần tử được thụt lề, chẳng hạn như

@page :left {
margin: 0.5cm;
}

@page :right {
margin: 0.8cm;
}

3,

@page :left {
margin: 0.5cm;
}

@page :right {
margin: 0.8cm;
}

4 và

@page :left {
margin: 0.5cm;
}

@page :right {
margin: 0.8cm;
}

5, bạn luôn có thể đặt lại lề của chúng

blockquote, ul {
margin: 0;
}

Hoặc bạn có thể ghi đè kiểu dấu đầu dòng 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;

header nav, footer {
display: none;
}

0

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

@page :left {
margin: 0.5cm;
}

@page :right {
margin: 0.8cm;
}

3 nổi bật một chút bằng cách phóng to nó và in nghiêng văn bản

tiêu đề

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

@page :left {
margin: 0.5cm;
}

@page :right {
margin: 0.8cm;
}

7 và logo. Cái đầu tiên chỉ dành cho mục đích trợ năng và được ẩn để hiển thị màn hình bằng CSS. Mặc dù chúng ta có thể sử dụng nó như một loại tiêu đề trong bản in để cho biết nguồn gốc của nội dung, nhưng hãy thử một cái gì đó hấp dẫn hơn. Sẽ không hay ho gì khi hiển thị logo thực tế thay vì văn bản nhàm chán phải không?

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

@page :left {
margin: 0.5cm;
}

@page :right {
margin: 0.8cm;
}

8, nếu không, trình đọc màn hình sẽ lặp lại việc đọc “Smashing Winery. ”

header nav, footer {
display: none;
}

1

Đầ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;
}

7. Tùy thuộc vào mức độ liên quan của hình ảnh, chúng tôi có thể đã quyết định ẩn chúng cùng với các yếu tố không cần thiết khác

header nav, footer {
display: none;
}

2

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;
}

0) để lưu tên lớp và chấp nhận nó không hoạt động trong Internet Explorer 6

header nav, footer {
display: none;
}

3

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

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

1 (hoặc

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

2) để ẩn logo chính. Và sau đó logo thứ hai sẽ vẫn còn. Hãy nhớ rằng trong bố cục in, chỉ những hình ảnh được nhúng qua thẻ

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

3 mới được hiển thị. Hình nền không

thì đấy. Bây giờ chúng tôi có một tiêu đề đẹp cho bản in của chúng tôi hiển thị rõ ràng 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 đề

@page :left {
margin: 0.5cm;
}

@page :right {
margin: 0.8cm;
}

7 của tiêu đề 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;
}

5). Có lẽ bạn sẽ cần ẩn logo còn lại như chúng tôi đã làm trước đây. Ngoài ra, kích thước phông chữ có thể được mở rộng để nó được nhận dạng rõ ràng như tiêu đề của trang web

header nav, footer {
display: none;
}

4

Ngoài ra, 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;
}

6 cho thẻ

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

7, không may là thẻ này sẽ không hoạt động trong IE trước phiên bản 8;

header nav, footer {
display: none;
}

5

Để xem những phần tử giả này có thể làm gì khác, hãy đọc mô tả trên Mạng nhà phát triển Mozilla

Một điều nữa về IE 6 đến 8 là không thể in các thẻ HTML5. Bởi vì chúng tôi đang sử dụng các thẻ này trên trang web mẫu, chúng tôi sẽ phải áp dụng HTML5shiv của Remy Sharp 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, điều đó thật hoàn hảo, vì shiv được bao gồm trong đó

header nav, footer {
display: none;
}

6

Thật không may, hành vi của IE 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 phải được đặt lại, nếu không, kiểu này sẽ được áp dụng cho bản in

Một số nhà phát triển thêm một thông báo ngắn làm phần bổ sung (hoặc thay thế) cho URL được hiển thị, nhắc nhở người dùng về vị trí của họ 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;
}

8 để nó xuất hiện trước logo. Một lần nữa, điều này sẽ không hoạt động trong IE 6 hoặc 7

header nav, footer {
display: none;
}

7

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

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

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

9. Nếu vậy, chúng tôi sẽ sử dụng phần tử

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

6 và lề trên để giữ cho nó khác biệt với nội dung của thanh bên. Theo như tôi biết, URL là đủ chỉ dẫn, vì vậy tôi sẽ dựa vào đó và bỏ qua thông báo

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

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

7 ra khỏi nội dung

header nav, footer {
display: none;
}

8

Tiêu đề được hiển thị theo hai cách khác nhau, một có logo và URL đơn giản, còn tiêu đề kia có thông báo và tiêu đề ở dạng văn bản thuần túy

Liên kết bị thiếu

Rõ ràng, trên giấy tờ, các liên kết không thể nhấp được và do đó khá vô dụng. Bạn có thể cố gắng xây dựng một giải pháp thay thế, 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 này có thể không khả thi. Để đưa các liên kết vào sử dụng, bạn có thể hiển thị URL sau mỗi chuỗi văn bản neo. Tuy nhiên, văn bản tràn ngập các URL có thể gây mất tập trung và có thể làm giảm trải nghiệm đọc;

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

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

6. Nó hiển thị URL sau mỗi văn bản neo, được bao quanh bởi dấu ngoặc. Và kích thước phông chữ được giảm bớt để làm cho nó ít xâm nhập hơn

header nav, footer {
display: none;
}

9

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

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

3 để đề phòng. Để tiến thêm một bước, chúng tôi có thể chọn chỉ hiển thị URL của các liên kết bên ngoài. Một bộ chọn thuộc tính là hoàn hảo cho việc này

img {
max-width: 500px;
}

0

Khả năng liên kết trong tài liệu in dường như là vô tận, vì vậy hãy thử thêm. Để phân biệt tất cả các liên kết nội bộ, hãy đặt tên miền của trang web trước chúng (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;
}

1

Sau đó, chúng tôi 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;
}

4), vì không có nhiều thứ để hiển thị

img {
max-width: 500px;
}

2

Ngoài ra, các liên kết bên ngoài sẽ được thêm vào, như trên. Hãy xem xét các trang web bảo mật SSL, để (i. e. những cái bắt đầu bằng

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

5)

img {
max-width: 500px;
}

3

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 cái trong. Các liên kết như vậy có thể dễ dàng phá vỡ bố cục, chẳng hạn như ở đầu ra màn hình. May mắn thay, một tài sản đặc biệt chăm sóc điều này

img {
max-width: 500px;
}

4

Đ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 phần 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 nhiều loại trình duyệt — kể cả IE 6 — nhưng thuộc tính này chỉ hoạt động trong Chrome khi in. Trong khi Firefox tự động ngắt các URL dài, Internet Explorer không có khả năng 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 người đọc

img {
max-width: 500px;
}

5

Các URL, dù là bên trong hay bên ngoài, hiện hiển thị bên cạnh các liên kết được xử lý đặc biệt

Aaron Gustafson đã tiến thêm một bước và xây dựng kịch bản nhỏ Liên kết chú thích cuối trang. Theo mô tả

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

Bài viết của Aaron trên A List Apart “Cải thiện hiển thị liên kết cho bản in” cung cấp thêm thông tin chi tiết về ý tưởng đằng sau tập lệnh này

Trong khi chúng tôi đang làm việc đó, việc cho người đọc biết nguồn gốc của các trích dẫn, chẳng hạn như những trích dẫn được đặt trong các thẻ

@page :left {
margin: 0.5cm;
}

@page :right {
margin: 0.8cm;
}

3 và

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

7, sẽ rất đáng suy nghĩ. Chỉ cần thêm thuộc tính

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

8 (sẽ là URL) sau dấu ngoặc kép, như vậy

img {
max-width: 500px;
}

6

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, nhưng hãy đối xử đặc biệt với nó. Để 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à vùng đệm an toàn là 30 pixel. Thuộc tính cuối cùng,

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

9, đảm bảo rằng đường viền hiển thị đúng cách

img {
max-width: 500px;
}

7

Để tách nó ra nhiều hơn, chúng ta có thể thiết lập một thuộc tính in đặc biệt

img {
max-width: 500px;
}

8

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

Thanh bên trên màn hình (trái) và in ra (phải). Tôi đã bôi xám mọi thứ khác để làm cho nó rõ ràng hơn ở đây

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

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

5 cho toàn bộ vùng chứa). Nếu bạn muốn hiển thị các bình luận, ít nhất hãy đặt

h1 {
font-size: 24pt;
}

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

aside h2 {
font-size: 18pt;
}

1. Bạn cũng có thể sử dụng

h1 {
font-size: 24pt;
}

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

aside h2 {
font-size: 18pt;
}

2 nếu có nội dung cần in trên một trang mới. Các thuộc tính

h1 {
font-size: 24pt;
}

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

aside h2 {
font-size: 18pt;
}

1 và

h1 {
font-size: 24pt;
}

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

aside h2 {
font-size: 18pt;
}

4 được hỗ trợ trong tất cả các trình duyệt chính

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

h1 {
font-size: 24pt;
}

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

aside h2 {
font-size: 18pt;
}

5 và

h1 {
font-size: 24pt;
}

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

aside h2 {
font-size: 18pt;
}

6. Các thuật ngữ bắt nguồn từ cách in truyền thống và chúng lấy số làm giá trị. Thuộc tính

h1 {
font-size: 24pt;
}

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

aside h2 {
font-size: 18pt;
}

5 đặt số dòng tối thiểu trong một đoạn văn để rời khỏi đầu trang trước khi di chuyển chúng hoàn toàn sang một trang mới. Thuộc tính

h1 {
font-size: 24pt;
}

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

aside h2 {
font-size: 18pt;
}

6 đặt số dòng cho cuối trang. Các thuộc tính

h1 {
font-size: 24pt;
}

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

aside h2 {
font-size: 18pt;
}

6 và

h1 {
font-size: 24pt;
}

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

aside h2 {
font-size: 18pt;
}

5 được hỗ trợ trong IE 8+ và Opera 9. 2+, nhưng tiếc là không có trong Firefox, Safari hoặc Chrome

Bây giờ chúng ta đã xử lý thanh bên, biểu định kiểu in đã sẵn sàng. Bạn có thể tải về tại đây. Tệp được ghi lại đầy đủ và do đó có thể đóng vai trò là tài liệu tham khảo hoặc điểm khởi đầu hữu ích

Biểu định kiểu in đã hoàn thành

chỉ để giải trí

Bạn có thể hỏi, "Tại sao chúng ta không thể đặt thanh bên cạnh nội dung chính, giống như trên chính trang web?" . Không giống như trước đây, bản in không rộng lắm và do đó không có nhiều khoảng trống để 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à do đó khó đọc hơn

Trong trường hợp này, tất nhiên, chúng tôi có thể giới hạn độ rộng của nội dung chính (tốt nhất là không quá nhiều — chúng tôi không nên đặt độ dài dòng xuống dưới khoảng 55 ký tự) và sau đó đặt thanh bên hoàn toàn ngay bên dưới nó, giống như . 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 biểu định kiểu màn hình của trang web mẫu (dòng số 112 và 141 trở xuống)

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

Xem trước dễ dàng

Print Preview của Tim Connell là một plugin jQuery nhỏ tiện dụng sao chép chức năng xem trước bản in tích hợp, nhưng có một điểm khác biệt. Thay vì mở một trang riêng biệt, nó hiển thị một lớp phủ đẹp mắt, với các nút “Đóng” và “In” ở trên cùng. Nó cũng có phím tắt “P” tiện lợi. 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 “In” và nhận phiên bản trang được tối ưu hóa để thưởng thức trên giấy. Thật không may, chúng ta 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 đơn giản là không quan tâm. Nhưng đây là một cơ hội bị bỏ lỡ. Một biểu định kiểu in được sắp xếp cẩn thận có thể được sử dụng không chỉ để in mà còn để tối ưu hóa mức độ dễ đọc khi đọc màn hình

Là chủ sở hữu trang web, bạn có thể xác định hình ảnh sẽ hiển thị (nếu có), phông chữ và kích thước tối ưu cũng như cách 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 do Instapaper và Readability tạo ra bằng cách dành nhiều sự chú ý hơn cho phiên bản in mà nó đáng được hưởng

Tương lai

Mặc dù hiện nay việc sử dụng CSS3 cho bố cục màn hình khá phổ biến, nhưng nó vẫn chưa được thiết lập hoàn toàn trong môi trường in ấn. W3C có một mô tả mở rộng về “Phương tiện được phân trang”, nhưng tiếc là hiện tại hỗ trợ rất hạn chế, Opera và Chrome là trình duyệt duy nhất kích hoạt 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;
}

8 để đặt kích thước của trang, chuyển sang chế độ xem ngang, thay đổi lề và làm nhiều việc khác. Thậm chí được hình thành để đáp ứng các kích thước trang khác nhau

Trang web được thiết kế phù hợp để in

Chúng ta hãy xem một số ví dụ về các trang web được tối ưu hóa cho việc in ấn

A List Apart Thiết kế nhiều cột bóng bẩy được đơn giản hóa thành một cột duy nhất, có chiều rộng đầy đủ, phản ánh trực quan 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 hoạt động liên kết. Và kiểu chữ sạch đẹp được giữ nguyên vẹn nhờ các phông chữ tương thích và màu sắc đơn giản; . Các kiểu quảng cáo và liên kết bị ẩn và kết quả là một trang in đơn giản, rõ ràng, dễ dàng phù hợp với bất kỳ máy in hoặc thiết lập trang nào trong tài liệu. A List Apart là ví dụ điển hình, hãy lưu lại một điểm quan trọng. logo không xuất hiện ở bất cứ đâu trong bản in

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

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

James Li James Li đã thiết kế trang web cá nhân của mình đặc biệt phù hợp với mục đích này, cẩn thận giữ lại tất cả khoảng cách và các yếu tố 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 một trang in trừ khi bản thân nó mang tính thông tin. Các phông chữ không dành cho Web được chuyển đổi thành các phông chữ có thể in được đơn giản (xem “Những nội dung khác…”). Thực hiện rực rỡ để in

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

R/GA Mặc dù logo không có trong bản in của trang web này, nhưng cần chú ý đến khoảng cách của nội dung bên trong. Trong khi phiên bản Web có các đường nét đơn giản và không gian sạch sẽ, thì trang in thắt chặt các yếu tố để sử dụng không gian một cách tốt nhất. 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ể bị xóa

Studio Mister Một công việc tuyệt vời của chức năng xem trước bản in. Trang đã được thiết kế tỉ mỉ thành lưới và yêu cầu rất ít để chuẩn bị in; . Tuy nhiên, thật không may, logo là một hì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 những người ở Bottlerocket Creative đã làm rất tốt trong việc điều chỉnh kiểu chữ của họ để xem ngoại tuyến. Giả sử thiết kế được tạo chủ yếu bằng hình ảnh sẽ dễ dàng, nhưng sự chú ý tỉ mỉ đến kiểu chữ thể hiện rõ 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 chèn các hình ảnh vào nhau. Cái nhìn vui tươi tuân thủ khoảng cách tốt. Hạn chế duy nhất?

Tóm lại là

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

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

Làm cách nào để in div có kiểu trong JavaScript?

Chúng tôi có thể thêm kiểu vào trang web bằng JavaScript không?

Bạn có thể tạo kiểu JavaScript bằng CSS không?

Tôi có thể đặt cài đặt in cửa sổ bằng JavaScript không?