Home >Web Front-end >Front-end Q&A >Set printing css
Set printing css
- WBOYOriginal
- 2023-05-21 11:10:371568browse
Setting Print CSS
With the advent of the Internet era, paper documents have gradually been replaced by electronic documents. However, in some specific situations, such as school exams, official document approval, etc., paper documents Documentation still plays an important role. In this case, we need to consider how to present web content gracefully on paper documents, and this process needs to follow certain rules, which is printing CSS style sheets.
The so-called CSS style sheet is a collection of rules used to define the appearance, position and behavior of HTML elements in different states, including screen style sheets and print style sheets. A printing style sheet is a style sheet specially designed for printing. It allows us to better control the size, position and arrangement of elements on the printed page, so that paper documents can be better presented.
So how to set up the printing CSS style sheet? Below I will introduce it from the following three aspects:
1. Basic settings
When setting up printing CSS, we need to consider the following points:
- Print Style sheets should be defined in HTML files.
- Print style sheets should be defined after screen style sheets.
- Print style sheets should be defined using @media print.
The basic template is as follows:
@media print {
/ Define the print style here/
}
If you have multiple print style requirements, you can use @page rules to define them. For example, if you need to set the header of the page to the company name, you can use the following code:
@page {
@top {
content: "Company Name";
}
}
2. Layout of page elements
For paper documents, the layout of page elements is a very important point. We need to ensure the readability and aesthetics of paper documents. For CSS style sheets for printing, the following points need to be noted:
- Chinese and English mixed layouts need to be processed
In the case of mixed Chinese and English layouts, We need to pay attention to the problem of different font sizes in Chinese and English. Usually, setting the English font to half of the Chinese font can make the page cleaner.
body {
font-family: Arial, Helvetica, sans-serif;
}
body.zh {
font -family: "宋体", Arial, Helvetica, sans-serif;
}
body.zh p {
line-height: 1.6em;
}
body.en {
font-size: 12px;
}
body.en p {
line -height: 1.2em;
}
- The page width should consider the size of the paper
For printing, we need to adjust the page width to fit Paper, usually A4 paper, has a width of 210mm, so setting the page width to around 200mm is the best choice.
- Try to avoid text truncation
When printing, if a line of text is too long, it will be truncated. In order to avoid this situation, we can use word-break Properties to implement automatic line wrapping of text.
p {
word-break: break-all;
}
3. Hiding and displaying elements
On the web page We usually use the display attribute to set the display mode of elements, but for printing, the display of some elements requires special processing. The following elements need to be hidden or displayed:
- Hide the page navigation bar and the copyright statement at the bottom of the page
@media print {
.navbar ,
.navbar-default,
.navbar-right,
.footer {
display: none;
}
}
- Display text links
We usually use icons to represent links on web pages, but when printing, these icons are not convenient to view. , so a::after can be used for text replacement.
a[href]:after {
content: "(" attr(href) ")";
}
- Show subtitle
When printing, the subtitle of the article is usually displayed below the main title.
h2 {
display: block;
position: static;
page-break-after: always;
}
To sum up, the setting of printing CSS style sheet not only contributes to the beauty and readability of paper documents, but is also a fashionable expression. For front-end developers, proficiency in setting up print CSS style sheets is a very necessary skill. I hope this article has inspired you.
The above is the detailed content of Set printing css. For more information, please follow other related articles on the PHP Chinese website!