Hướng dẫn create html page for printing - tạo trang html để in

Ngày nay, vì thực tế mọi người đều có quyền truy cập vào một thiết bị kỹ thuật số, có vẻ như việc in các trang web gần như lỗi thời. Tuy nhiên, có một số trường hợp bạn vẫn có thể cần in một trang, chẳng hạn như in buổi hòa nhạc hoặc vé du lịch, in một công thức cho danh sách các thành phần để sử dụng làm danh sách mua sắm, hóa đơn để giữ tài khoản hoặc một số hướng dẫn tuyến đường hoặc hướng dẫn thời gian biểu. Nhưng đôi khi, in một trang web có thể là một trải nghiệm rất khó chịu vì:

• Hàng tấn quảng cáo được bao gồm trên trang và mực bị lãng phí trên nền và hình ảnh màu không cần thiết
• Văn bản có thể có các kích thước khác nhau, có thể quá nhỏ hoặc quá lớn
• Các cột có thể quá hẹp hoặc vượt trội
• các phần của các phần được cắt nhỏ hoặc hoàn toàn không được hiển thị

Nhưng các nhà phát triển có thể làm cho web được in có thể truy cập bằng cách sử dụng điều khiển in CSS và thiết lập khả năng phản hồi của trang web & nbsp; - & nbsp; kích thước trang, định dạng, bố cục hoặc lề. Một phương pháp tốt để bao gồm các kiểu in là bằng cách sử dụng cú pháp CSS3 @Media, đây là một kỹ thuật hợp lý để đưa một bảng kiểu phù hợp (thiết kế web đáp ứng) cho máy tính để bàn, máy tính xách tay, máy tính bảng và điện thoại di động. Quy tắc @Media chỉ định rằng một số kiểu chỉ dành cho các tài liệu được in hoặc cho đầu đọc màn hình (loại phương tiện: in, màn hình hoặc lời nói).

@media print {
   ...
}

Tất cả các cài đặt CSS đi giữa dấu ngoặc mở và đóng. Tiếp theo, chúng ta cần đặt các thuộc tính trang, chẳng hạn như kích thước, lề, biên giới và kích thước phông chữ. Hộp trang & nbsp; là một vùng hình chữ nhật chứa hai khu vực nhúng:

• Khu vực trang & nbsp; chứa tất cả các thùng chứa trang.
• Khu vực ký quỹ áp dụng cho hộp trang và có thể có các thuộc tính: ký quỹ bên trái, tỷ lệ lợi nhuận

Một ví dụ đơn giản về việc thiết lập lề trái và bên phải của trang:

@page  {
         margin-left: 1.2 cm;
         margin-right: 2.1 cm;
      }

Kích thước trang

Kích thước & nbsp; thuộc tính chỉ định kích thước và hướng của hộp trang. Bốn giá trị có thể được sử dụng cho kích thước trang là:

• Auto & nbsp; - & nbsp; hộp trang sẽ được đặt thành kích thước và hướng của bảng đích.
• Phong cảnh & nbsp; - & nbsp; hộp trang có cùng kích thước với mục tiêu, nhưng các cạnh rộng hơn nằm ngang.
• Chân dung & nbsp; - & nbsp; hộp trang có cùng kích thước với mục tiêu, nhưng các cạnh ngắn hơn nằm ngang.
• Chiều dài & nbsp; - & nbsp; giá trị độ dài cho thuộc tính ‘kích thước, tạo một hộp trang tuyệt đối và nếu chỉ một

@media print 
{
   @page
   {
    size: A4;
    size: portrait;
  }
}

Ví dụ dưới đây đặt kích thước trang thành tự động, có nghĩa là hộp trang sẽ được căn chỉnh theo mục tiêu và 5% số tiền lãi đại diện cho tỷ lệ phần trăm từ trang (nếu trang có 25 cm với 15 cm, thì lề sẽ là 2,5 cm với 1,5cm).

@media print 
{
@page {
    size: auto;
    margin: 10%;
  }
}

Một bước quan trọng khác trong việc in trang CSS là sử dụng Breaks trang & NBSP; để đặt chính xác điểm mà trang sẽ bị gián đoạn. Ba thuộc tính CSS được sử dụng cho điều này là:page breaks for setting exactly the point where the page will be interrupted. The three CSS attributes used for this are:

• Trang-Break-Before & nbsp;-& nbsp; thêm một lần ngắt trang trước một phần tử được chỉ định. — adds a page break before a specified element.
• trang-break-sau & nbsp;-& nbsp; thêm một lần ngắt trang sau một phần tử được chỉ định. — adds a page break after a specified element.
• Trang-Break-Inside & nbsp;-& nbsp; đặt trường hợp khi nên tránh phá vỡ trang bên trong một phần tử được chỉ định — sets the case when a page-break should be avoided inside a specified element

Các giá trị có thể được đặt cho ba thuộc tính này là Auto & nbsp; đại diện cho trang phá vỡ trang tự động, luôn luôn & nbsp; (không có sẵn để phá vỡ trang). Các giá trị được sử dụng để tiếp tục các trang được định dạng bên trái hoặc phải, tương ứng, ban đầu & nbsp; đặt thuộc tính này thành giá trị mặc định của nó, kế thừa & nbsp; từ cha mẹ của nó giá trị. Một số ví dụ về việc sử dụng các thuộc tính này được liệt kê dưới đây:auto represents the automatic page-break, always (not available for page-break-inside) places a break every time, avoid blocks the break, left and right  (not available for page-break-inside). Values are used to continue pages that are formatted left or right, correspondingly, initial sets this property to its default value, inherit from its parent the value. some examples of using these properties are listed below:

//Using the page breaks on different sections of the webpage 

@media print {
  
	footer {page-break-after: always;}

	a {page-break-inside: avoid;}
	
	h2, h2, h3, h4, h5 {page-break-before: always;}

	table, figure { page-break-inside: avoid;}
}

Như bạn có thể trải nghiệm trong quá trình in một trang web, các yếu tố không mong muốn khác nhau phát sinh trên trang in của bạn, vì vậy, đó là một bước quan trọng để loại bỏ chúng vì là một sự lãng phí mực. Đối với điều này, chúng ta cần che giấu tất cả các lĩnh vực không quan trọng. Chủ yếu, các phần thường xuyên nhất được loại bỏ là logo, tiêu đề trang, thanh bên, tiêu đề, chân trang, danh mục, nhận xét và một số nút hoặc hình ảnh, v.v.

//Hiding various unwanted sections of the webpage 

#header-widgets, nav, .sidebar, .content-ads, .make-comment, .author-bio, .heading, .related-posts, #footer,
.site-title img, .logo
{
	display: none;
}

Đôi khi, bạn có thể muốn in nhiều trang và có lẽ bạn cần đánh số chúng. Bạn có thể làm điều đó trong CSS bằng cách sử dụng quầy. Quy tắc @page: Đầu tiên đặt lại bộ đếm cho trang đầu tiên về giá trị 5, điều này có nghĩa là bộ đếm sẽ bắt đầu từ trang 5, v.v.

@page { counter-increment: page } 
@page:first { counter-reset: page 4 }

Làm nổi bật các liên kết

Khi cố gắng in nội dung có chứa các liên kết, bạn sẽ nhận thấy rằng các liên kết không được phân biệt với phần còn lại của văn bản, vì vậy các liên kết nên được tô sáng để được chú ý. Điều này có thể được thực hiện bằng cách sử dụng các thuộc tính sau:

// Displaying link color and link behaviour 
a:link, a:visited {
    background-color: DarkSalmon ;
    border: none;
    color: #0000ff;
    padding: 5px 5px;
    text-align: center;
    text-decoration: none;
    font-size: 20px;
    text-align: center; 
    display: inline-block;
}

Việc che giấu video và iframes khác là một bước quan trọng khác trong việc tạo trang CSS thân thiện với in. Mã sau đây cho phép bạn ẩn hoàn toàn ifRams, cũng như video.

Đôi khi, nó có thể rất hữu ích để thêm tin nhắn trước và sau nội dung được in chính. Bạn có thể liệt kê một tin nhắn bản quyền hoặc một tin nhắn cụ thể được gửi đến người đọc và bạn cần tìm nơi hoàn hảo để đưa nó vào mã của bạn:

//Adding a specific message before and after the content
.entry:after {
content: "\ All Rights Reserved. (c) November 2019";
color: #FF2446 !important;
font-size: 2em;
padding-top: 20px;
}

#header:before {
content: "\ Thank you for printing our article!";
color: #dcba00 !important;
font-size: 2 em;
padding-top: 20px;
text-align: center !important;    
}

Kết luận Bài viết này đã chỉ cho bạn cách thực hiện các hành động khác nhau sẽ giúp bạn in nội dung ngắn gọn từ các trang web khác nhau. Sử dụng các kỹ thuật này, bạn sẽ tiết kiệm mực và giấy, chưa kể đến thời gian.

Làm thế nào để bạn tạo một trang HTML có thể in?

Làm thế nào tôi có thể làm cho máy in của tôi thân thiện?

Mã HTML để in là gì?

Làm thế nào đặt kích thước A4 trong HTML?