CSS không hoạt động trong bản xem trước khi in

Tôi đã thiết lập CSS tùy chỉnh cho một trang web trên WordPress. Khi tôi nhấp vào nút in và nó chuyển hướng tôi đến URL thân thiện với bản in, trang có vẻ ổn nhưng khi tôi nhấp vào nút In hoặc PDF thì CSS in không hoạt động

Tôi không thể chuyển URL nhưng có thể thực hiện riêng tư

Đang xem 1 trả lời [trong tổng số 1]

• Tác giả plugin In & PDF bởi PrintFriendly

  [@inthân thiện]

  Bạn có thể gửi URL tới một trang cụ thể tới support@printfri…. com

  Ngoài ra, nếu bạn gặp vấn đề với màu nền hoặc hình ảnh, hãy đảm bảo bao gồm những điều sau đây trong CSS tùy chỉnh PrintFriendly của bạn

  Hãy xem cách thực hiện trong các trình duyệt khác nhau. Mặc dù lưu ý ngày của bài viết blog này. Nội dung này có xu hướng thay đổi theo thời gian, vì vậy nếu có gì sai ở đây, hãy cho chúng tôi biết và chúng tôi có thể cập nhật nội dung đó

  Trong Firefox…

  Đó là một nút nhỏ trong DevTools. Quá dễ

  1. Mở DevTools [Command+Option+i]
  2. Chuyển đến tab "Thanh tra"
  3. Nhấp vào biểu tượng trang nhỏ

  Trong Chrome và Edge…

  Tôi nghĩ nó hơi lạ một chút, nhưng nó vẫn là một việc khá dễ thực hiện trong DevTools

  • Mở DevTools [Command+Option+i]
  • Nếu bạn không có thứ-đặc-biệt-lạ-dưới-diện tích, hãy nhấn phím Escape
  • Nhấp vào biểu tượng menu để chọn các tab để mở
  • Chọn tab “Kết xuất”
  • Cuộn xuống cuối tùy chọn tab “Rendering”
  • Chọn in từ các tùy chọn cho Giả lập phương tiện CSS

  Trong Safari…

  Safari có một nút nhỏ rất giống Firefox, nhưng có vẻ khác

  1. Mở DevTools [Command+Option+i]
  2. Chuyển đến tab "Thanh tra"
  3. Nhấp vào biểu tượng trang nhỏ

  Khi in một trang web, điều quan trọng là phải điều chỉnh bố cục và nội dung trang của bạn. Nhiều yếu tố không liên quan đến việc in ấn, điều quan trọng là phải kiểm soát ngắt trang đúng cách và xử lý các siêu liên kết. Tất cả điều này có thể được kiểm soát bởi CSS và thậm chí bạn có thể kích hoạt in bằng Javascript hoặc phản ứng với hành động in của người dùng. Hãy học cách

  Thêm biểu định kiểu in

  Khi bạn muốn áp dụng một số quy tắc CSS nhất định khi in, bạn có thể dễ dàng thêm một biểu định kiểu riêng, biểu định kiểu này sẽ chỉ được sử dụng cho mục đích in

  Nếu bạn thêm biểu định kiểu của mình theo cách này, nó sẽ được áp dụng cùng với biểu định kiểu thông thường của bạn. Đây thường là những gì bạn cần. Tuy nhiên, nếu bạn muốn có hai biểu định kiểu riêng biệt - một chỉ dành cho màn hình, một chỉ để in, bạn có thể thực hiện như sau

  Có biểu định kiểu riêng chỉ để in có thể hữu ích, nếu bạn muốn tải nó động, chỉ khi cần hoặc bạn muốn các kiểu in của mình được tách biệt hoàn toàn

  Truy vấn phương tiện truyền thông

  Một cách hiện đại hơn để bao gồm CSS dành riêng cho bản in là sử dụng truy vấn phương tiện

  Bạn có thể xác định rằng chỉ có thể áp dụng một bộ quy tắc CSS nhất định khi in

  @media print {
    ...
  }

  Hoặc chỉ khi sử dụng màn hình

  @media screen {
    ...
  }

  Cách tiếp cận này có thể được ưa thích hơn để tách biểu định kiểu in vì bạn có thể dễ dàng có CSS ​​thường và CSS in cho một trang/thành phần ở cùng một nơi. Điều này làm cho việc bảo trì dễ dàng hơn và ít có khả năng bạn sẽ quên cập nhật kiểu in khi thực hiện các thay đổi đối với kiểu thông thường

  Kiểm tra khung CSS của bạn

  Nếu bạn đang sử dụng các kiểu CSS bên ngoài, chẳng hạn như một khung như Bootstrap, trước tiên bạn nên kiểm tra hỗ trợ in của nó

  Bootstrap, ví dụ, cung cấp một số hỗ trợ ngay lập tức - nó ẩn thanh điều hướng, v.v.

  Xóa nội dung không cần thiết

  Trang web chứa nhiều nội dung không thực sự hữu ích khi in. Điều này có thể là

  • Thanh điều hướng
  • Nút chia sẻ xã hội
  • Nội dung phương tiện như video hoặc âm thanh
  • Cookie và thanh công cụ đăng ký
  • Quảng cáo

  Và nhiều hơn nữa. Rất hữu ích khi xóa nội dung này để in. Bằng cách này, người dùng của bạn tiết kiệm giấy, mực và đầu ra dễ đọc và không lộn xộn

  Thật dễ dàng để ẩn các phần tử bằng cách đặt

  @media print {
    ...
  }

  0

  @media print {
    .navigation {
      display: none;
    }
  }

  Tất nhiên, bạn có thể thực hiện bất kỳ điều chỉnh nào cần thiết như giảm kích thước, thay đổi phông chữ, đơn giản hóa đồ họa - gần như bất kỳ điều gì bạn có thể làm trong CSS

  Lề trang

  Khi in, có thể hữu ích khi ghi đè cài đặt mặc định cho lề trang của bạn [ví dụ: để cung cấp không gian để viết ghi chú]

  @page {
    margin: 20mm;
  }

  Tất nhiên, bạn có thể đặt riêng các lề riêng lẻ. Điều này có thể hữu ích khi in tài liệu hai mặt. Đó là bởi vì khi bạn muốn liên kết các tài liệu của mình với nhau, bạn cần thêm dung lượng để dễ đọc hơn. Tuy nhiên, với các trang hai mặt, khoảng trống này nằm ở bên trái hoặc bên phải của trang, tùy thuộc vào trang đó là số lẻ hay số chẵn

  May mắn thay, bạn có thể chọn các trang chẵn và lẻ trước ngày

  @media print {
    ...
  }

  1 và

  @media print {
    ...
  }

  2. Left ở đây có nghĩa là trang hướng về bên trái, và right là hướng về bên phải

  @page:left {
    margin-right: 30mm;
  }
  
  @page:right {
    margin-left: 30mm;
  }

  Nếu bạn muốn xử lý riêng trang đầu tiên, bạn có thể sử dụng

  @media print {
    ...
  }

  3

  ngắt trang

  Để dễ đọc hơn, có thể hữu ích khi kiểm soát vị trí ngắt trang được chèn vào

  Tránh nghỉ

  Có thể bất tiện nếu hình ảnh hoặc ví dụ mã bị chia thành hai trang. May mắn thay, bạn có thể đảm bảo rằng một số yếu tố nhất định sẽ không bao giờ bị chia cắt. Giả sử chúng tôi muốn làm điều đó cho hình ảnh và khối mã

  1

  Bạn cũng có thể chỉ định ngắt trang không được chèn trước hoặc sau một phần tử. Điều này có thể hữu ích, ví dụ, để tiêu đề không được đặt ở phần cuối cùng trên trang và không bị tách khỏi đoạn sau

  2

  phá vỡ rõ ràng

  Đôi khi, có thể hữu ích khi chèn ngắt trang trước hoặc sau một số thành phần nhất định

  Ví dụ: bạn có thể cần mỗi chương bắt đầu trên trang riêng của nó. Bạn có thể đạt được nó bằng cách sử dụng

  @media print {
    ...
  }

  4 trên tiêu đề chương của bạn
  4

  Bạn cũng có thể chèn dấu ngắt trang sau phần tử bằng cách sử dụng

  @media print {
    ...
  }

  5

  Có các thuộc tính cũ hơn ngắt trang trước, ngắt trang sau và ngắt trang bên trong, hiện không được dùng nữa thay cho ngắt trước, ngắt sau và ngắt bên trong

  Tách đoạn

  May mắn thay, bạn có quyền kiểm soát chi tiết đối với cách các đoạn văn được chia sang trang tiếp theo. Chúng tôi có hai tài sản cho việc này -

  @media print {
    ...
  }

  6 và

  @media print {
    ...
  }

  7. Cách đặt tên nghe có vẻ kỳ quặc, nhưng đó là vì nó bắt nguồn từ nghệ thuật sắp chữ

  trẻ mồ côi

  Khi một đoạn văn được chia thành hai trang, thuộc tính

  @media print {
    ...
  }

  7 xác định số lượng dòng tối thiểu nên được giữ trên trang đầu tiên
  0

  quả phụ

  Điều này rất giống với trẻ mồ côi. Đó là số dòng tối thiểu, nên có trên trang thứ hai khi một đoạn văn được chia thành hai trang

  1

  Do cách đặt tên khác thường, có thể khó nhớ sự khác biệt giữa góa phụ và trẻ mồ côi và đâu là đâu. Bạn có thể sử dụng cách ghi nhớ sau

  Một đứa trẻ mồ côi bắt đầu một mình, một góa phụ kết thúc một mình

  Lưu ý rằng trình duyệt không được đảm bảo 100% tuân theo các quy tắc này khi in. Nó có thể quyết định phá vỡ quy tắc này để có lợi cho một số tối ưu hóa in ấn khác

  Có một [tính đến tháng 4/2020] cho góa phụ và trẻ mồ côi, 93. 76%, ngoại trừ Firefox

  siêu liên kết

  Bạn nên cẩn thận hơn khi xử lý các siêu liên kết được in. Nhiều trang ngày nay không sử dụng gạch chân cho các siêu liên kết và thay vào đó phân biệt các liên kết bằng màu sắc. Điều này không thuận tiện lắm khi in, đặc biệt là với bản in đen trắng. Đánh dấu các siêu liên kết bằng gạch dưới là một cách truyền thống tốt để nhận ra chúng ngay cả khi in

  2

  Một vấn đề khác với các siêu liên kết là trong một tài liệu in, không có cách nào để xác định nơi liên kết trỏ đến. May mắn thay, điều này có thể được khắc phục chỉ bằng một chút CSS

  3

  Điều này bao gồm URL sau mỗi phần tử

  @media print {
    ...
  }

  9, vì vậy bạn có thể thấy rõ nơi nó đang trỏ đến. URL nhỏ hơn một chút so với văn bản thông thường để dễ đọc hơn. Đây là giao diện của nó

  Điều này là tốt, nhưng chúng ta có thể làm tốt hơn nữa. Vấn đề đầu tiên cần giải quyết là đảm bảo chỉ các liên kết trong văn bản được xử lý chứ không phải tất cả các liên kết trên trang. Chúng ta có thể đặt trước bộ chọn

  @media print {
    ...
  }

  9 trong mã của mình bằng

  @media screen {
    ...
  }

  1. Hoặc tốt hơn nữa, với vùng chứa cho văn bản trang của chúng tôi, chẳng hạn như

  @media screen {
    ...
  }

  2 [hoặc bất kỳ tên nào bạn có thể có]

  Cải tiến thứ hai có thể hạn chế điều này chỉ với các liên kết bên ngoài. Chúng tôi có thể làm điều này bằng cách chỉ chọn các thẻ

  @media print {
    ...
  }

  9 trong đó

  @media screen {
    ...
  }

  4 bắt đầu bằng

  @media screen {
    ...
  }

  5
  4

  Giải pháp này hoạt động, nhưng nếu bạn có nhiều liên kết, đặc biệt là với các URL dài, nó có thể trở nên khó đọc. Có một giải pháp thay thế được mô tả bởi Aaron Gustafson

  Ý tưởng không phải là đặt URL sau mỗi liên kết, mà là một số tham chiếu [1,2,3,. ] và sau đó ở cuối tài liệu cung cấp bảng tham chiếu với tất cả số và URL của chúng. Nó cũng bao gồm các trường hợp một liên kết xuất hiện nhiều lần - trong những trường hợp như vậy, các liên kết trùng lặp có cùng một số

  Điều này cũng liên quan đến một chút JavaScript, nhưng nó có thể hữu ích khi làm việc với nhiều liên kết. Đây là một ví dụ về cách tiếp cận này trong hành động

  Hộp lề trang

  Khi in các trang web, trình duyệt có thể bao gồm nhiều thông tin khác nhau trong phần đầu và phần cuối của mỗi trang, chẳng hạn như

  • Số trang
  • tiêu đề trang
  • URL gốc

  Hiện tại, bạn không có quyền kiểm soát nội dung này. May mắn thay, điều này sắp thay đổi. Có một thông số kỹ thuật giải quyết vấn đề này

  Điều này có thể hữu ích để thêm thông tin như bản quyền, logo trang, bộ đếm trang tùy chỉnh, v.v.

  Có 16 vùng mà bạn có thể nhắm mục tiêu

  • 4 góc của trang
  • 3 vùng ở mỗi cạnh [trên, dưới, phải, trái]

  Ví dụ: nếu bạn muốn nhắm mục tiêu đến cuối trang, bạn có thể chọn từ

  • @media screen {
      ...
    }

    6

  • @media screen {
      ...
    }

    7

  • @media screen {
      ...
    }

    8

  • @media screen {
      ...
    }

    9

  • @media print {
      .navigation {
        display: none;
      }
    }

    0

  Hãy xem xét một ví dụ cụ thể

  5

  Bạn có thể chỉ định không chỉ nội dung mà cả các thuộc tính bổ sung như phông chữ hoặc đường viền

  6

  Thông số kỹ thuật hiện đang ở giai đoạn Bản nháp của Biên tập viên [kể từ tháng 4/2020] và hiện tại. Hy vọng, điều này sẽ thay đổi trong tương lai gần. Bạn có thể theo dõi sự cố Chrome tương ứng. Các phần cũ hơn của thông số kỹ thuật này đã được triển khai [chẳng hạn như đặt lề trang], nhưng nội dung tùy chỉnh cho hộp lề vẫn chưa xuất hiện

  Xử lý in trong JS

  Với JavaScript, bạn không cần phải dựa vào người dùng để bắt đầu in trang của mình. Bạn có thể tự kích hoạt nó bằng cách sử dụng

  7

  Bạn có thể muốn sử dụng nút in của riêng mình nếu bạn cần thực hiện một số logic JS tùy chỉnh trước khi in - chẳng hạn như thao tác DOM, tải dữ liệu mới, v.v.

  Vấn đề là bạn không thể đảm bảo rằng người dùng sẽ sử dụng nút của bạn thay vì in trình duyệt gốc

  Đối với những trường hợp như vậy, khi bạn cần thực hiện một số logic tùy chỉnh trước [hoặc thậm chí sau khi] in, có hai sự kiện hữu ích

  • bản in trước
  • dấu vết

  Như tên gợi ý, hộp thoại đầu tiên được kích hoạt trước khi bạn vào hộp thoại in, vì vậy bạn có thể làm bất cứ điều gì cần thiết. Cái thứ hai được kích hoạt sau khi quá trình in kết thúc và bạn có thể sử dụng nó để hoàn nguyên về trạng thái ban đầu

  Bạn có thể đăng ký trình nghe sự kiện của mình như thế này [tất nhiên, điều này có thể khác nếu sử dụng khung]

  8

  Người ta thường ưu tiên làm càng nhiều càng tốt trong CSS, nhưng đôi khi việc sử dụng JS có thể là cần thiết

  Bản xem trước bản in của Công cụ dành cho nhà phát triển

  Có thể tốn thời gian để mở hộp thoại xem trước bản in trong trình duyệt của bạn bất cứ khi nào bạn thực hiện thay đổi và muốn kiểm tra xem trang của bạn trông như thế nào khi in. May mắn thay, trong Công cụ dành cho nhà phát triển, bạn có thể dễ dàng mô phỏng giao diện của trang khi in mà không cần kích hoạt hộp thoại in

  Trình duyệt Chrome

  Trong Chrome Devtools, bạn có thể chuyển sang chế độ xem in

  1. Mở Devtools của bạn
  2. Nhấn hoặc Ctrl+Shift+P [hoặc ⌘+⇧+P trên máy Mac]
  3. Tìm kiếm

     @media print {
       .navigation {
         display: none;
       }
     }

     1
  4. Chọn

     @media print {
       .navigation {
         display: none;
       }
     }

     2 và nhấn Enter

  Một cửa sổ

  @media print {
    .navigation {
      display: none;
    }
  }

  3 mới sẽ xuất hiện

  Ở đây bạn có thể chọn

  9

  Mặc dù không liên quan đến in ấn, nhưng bạn có thể mô phỏng một số tùy chọn kết xuất thú vị hơn trong tab này, chẳng hạn như người dùng thích chủ đề sáng hay tối hay giảm chuyển động, bạn có thể hiển thị FPS, v.v.

  firefox

  Trong Firefox, bạn chỉ cần nhấp vào nút

  @media print {
    .navigation {
      display: none;
    }
  }

  4 được đánh dấu màu đỏ trong hình ảnh sau

  Phần kết luận

  Hỗ trợ in ấn thường bị bỏ qua và không được thực hiện. Nhiều người dùng vẫn in các trang web và bạn nên chú ý thiết kế các trang của mình sao cho thân thiện với máy in. Nó thường không khó lắm, nhưng nó có thể nâng cao đáng kể trải nghiệm người dùng và khả năng sử dụng trang web của bạn

  Ngay cả khi người dùng không in các trang của bạn trên giấy, họ vẫn có thể in chúng thành PDF để sau này có thể đọc ngoại tuyến trên máy tính bảng hoặc trình đọc sách điện tử của họ. Đối với những trường hợp này, biểu định kiểu in cũng hữu ích

  Chúng tôi có thể áp dụng CSS cho trang để in không?

  Bạn có thể sử dụng CSS để thay đổi giao diện của trang web khi được in trên giấy . Bạn có thể chỉ định một phông chữ cho phiên bản màn hình và một phông chữ khác cho phiên bản in.

  Làm cách nào để sử dụng CSS để in?

  Công cụ dành cho nhà phát triển. DevTools [ F12 hoặc Cmd/Ctrl + Shift + I ] có thể mô phỏng các kiểu in, mặc dù ngắt trang sẽ không được hiển thị. Trong Chrome, mở Công cụ dành cho nhà phát triển và chọn Công cụ khác, sau đó chọn Kết xuất từ ​​menu biểu tượng ba chấm ở trên cùng bên phải. Thay đổi Phương tiện giả lập CSS để in ở cuối bảng điều khiển đó.