Print from browser
Web is coming. More and more conventional desktop applications are moving to the Internet. Already no one to be surprised with an online text or graphics editor. And already various multi-user complexes, databases, reporting systems - here expanse for web technologies. For example, a few years ago it would be quite normal to create a system for registering and registering clients, say a dental clinic or library in Delphi, add a database and a network part. But now such a solution will be unreasonable: it is much simpler, more convenient, and therefore more efficient to use everything that the Web provides us, even if the application will be used only inside the local network. In addition, this solution is cross-platform, which is relevant in connection with the emerging trend of transition to free OS.
But the decision to do everything on the web has a drawback (not even one, but I will not list everything now): the inconvenience of printing reports, letterheads and other printed pages. This is due to the fact that web pages are calculated primarily for display on the monitor screen and are not thawed for printing, which often leads to creeping of the printed page. Fortunately, these are all temporary difficulties and can be circumvented. You can, for example, generate reports in pdf or doc. But I think this is not too convenient: the user needs to install programs that work with these formats, every time download the generated file from the server, print from a third-party program, not a browser. Therefore, it is worth the effort to create pages that print correctly directly from the browser.
Since there are separate versions of the page for display on the screen and for printing, it is necessary to divide CSS into two parts according to their purpose. Properties of elements special for display on the screen will be stored in the block
media screen {}
and for printing, respectively, in
media print {}
The first thing to do is to disable all unnecessary graphic elements: banners (in the web application for the local network, they will), the menu, something else. This is achieved by the following construction in CSS:
media print {
.banner {display: none;}
}
We also prohibit the display of other extra blocks. Perhaps, on the contrary, some blocks should be displayed when printing, and hidden on the screen. The beautiful color logo will probably print dirty or not clear on a black and white printer, you should replace it with a special contrasting one:
media screen {
div.logo {background: url (img / logo.png) no-repeat top;}
}
media print {
div .logo {background: url (img / logo_print.png) no-repeat top;}
}
Most likely the user of the web application will print the page on an A4 printer (unless this application is for printing). Limit the page to the desired size by inserting the page construct . You can specify the page size (required in centimeters or inches, in no case in pixels!), So for A4 it is 8.5x11 inches or 21x29.7 cm.
Page {
size 8.5in 11in;
margin: 1cm
}
If two-sided printing is assumed, then you should distinguish between left and right pages:
page : left {
margin-left: 4cm;
margin-right: 3cm;
}
page : right {
margin-left: 3cm;
margin-right: 4cm;
}
Also, the sizes of all elements on the page should be set in relative units. It does not hurt to replace the font: serif fonts look better on paper.
When printing multi-page reports or completed forms of documents, each part of the report will be required or each form should be displayed on a separate page. It seemed to me very convenient to show a page break on the screen using the horizontal line hr, and when printing on it do a page break:
media print {
hr {PAGE-BREAK-AFTER: always; visibility: hidden;}
}
Let me remind you that PAGE-BREAK-AFTER forces the printer to continue printing from the next page after displaying an element with this property, and PAGE-BREAK-BEFORE before printing. In my example, hr does not display (visibility: hidden) when printing, but this does not prevent it from controlling the printer.
In one of my projects, the operator needed to fill out a form with customer data, after which he might need to print this form with special formatting. I decided on one page to combine the version for display on the screen with the input fields of the form and the print version. This simplifies the operator’s task: after entering data and saving it is enough to press the “Print” button without loading a special page.
To do this, I formed a data entry form in the form of an empty document form. By the way, this is a good idea: the form is compact and looks almost like on paper. Next, we collect two versions of the document on one page, cleverly manipulating the display property. Each field in HTML looks like this (simplified): Pay attention to this span - it duplicates the value of the field. The CSS file is: media
screen {
.field {display: none;}
}
media print {
input {display: none;}
td {border: 1px solid;}
.field {text-decoration: underline;}
}
Thus, when displayed on the screen, we see the input fields , and when printing - the finished result.
Finally, I want to say about one unpleasant moment. The browser sets its page fields and headers. This can spoil the entire beautifully formed form of the document at once or stretch the page into two. JavaScript will not solve this problem. Therefore, it remains only to ask the user (highlighting the reminder) to remove the fields and headers in the browser.
But the decision to do everything on the web has a drawback (not even one, but I will not list everything now): the inconvenience of printing reports, letterheads and other printed pages. This is due to the fact that web pages are calculated primarily for display on the monitor screen and are not thawed for printing, which often leads to creeping of the printed page. Fortunately, these are all temporary difficulties and can be circumvented. You can, for example, generate reports in pdf or doc. But I think this is not too convenient: the user needs to install programs that work with these formats, every time download the generated file from the server, print from a third-party program, not a browser. Therefore, it is worth the effort to create pages that print correctly directly from the browser.
Since there are separate versions of the page for display on the screen and for printing, it is necessary to divide CSS into two parts according to their purpose. Properties of elements special for display on the screen will be stored in the block
media screen {}
and for printing, respectively, in
media print {}
The first thing to do is to disable all unnecessary graphic elements: banners (in the web application for the local network, they will), the menu, something else. This is achieved by the following construction in CSS:
media print {
.banner {display: none;}
}
We also prohibit the display of other extra blocks. Perhaps, on the contrary, some blocks should be displayed when printing, and hidden on the screen. The beautiful color logo will probably print dirty or not clear on a black and white printer, you should replace it with a special contrasting one:
media screen {
div.logo {background: url (img / logo.png) no-repeat top;}
}
media print {
div .logo {background: url (img / logo_print.png) no-repeat top;}
}
Most likely the user of the web application will print the page on an A4 printer (unless this application is for printing). Limit the page to the desired size by inserting the page construct . You can specify the page size (required in centimeters or inches, in no case in pixels!), So for A4 it is 8.5x11 inches or 21x29.7 cm.
Page {
size 8.5in 11in;
margin: 1cm
}
If two-sided printing is assumed, then you should distinguish between left and right pages:
page : left {
margin-left: 4cm;
margin-right: 3cm;
}
page : right {
margin-left: 3cm;
margin-right: 4cm;
}
Also, the sizes of all elements on the page should be set in relative units. It does not hurt to replace the font: serif fonts look better on paper.
When printing multi-page reports or completed forms of documents, each part of the report will be required or each form should be displayed on a separate page. It seemed to me very convenient to show a page break on the screen using the horizontal line hr, and when printing on it do a page break:
media print {
hr {PAGE-BREAK-AFTER: always; visibility: hidden;}
}
Let me remind you that PAGE-BREAK-AFTER forces the printer to continue printing from the next page after displaying an element with this property, and PAGE-BREAK-BEFORE before printing. In my example, hr does not display (visibility: hidden) when printing, but this does not prevent it from controlling the printer.
In one of my projects, the operator needed to fill out a form with customer data, after which he might need to print this form with special formatting. I decided on one page to combine the version for display on the screen with the input fields of the form and the print version. This simplifies the operator’s task: after entering data and saving it is enough to press the “Print” button without loading a special page.
To do this, I formed a data entry form in the form of an empty document form. By the way, this is a good idea: the form is compact and looks almost like on paper. Next, we collect two versions of the document on one page, cleverly manipulating the display property. Each field in HTML looks like this (simplified): Pay attention to this span - it duplicates the value of the field. The CSS file is: media
ФИО клиента:
/>
Вася Пупкинscreen {
.field {display: none;}
}
media print {
input {display: none;}
td {border: 1px solid;}
.field {text-decoration: underline;}
}
Thus, when displayed on the screen, we see the input fields , and when printing - the finished result.
Finally, I want to say about one unpleasant moment. The browser sets its page fields and headers. This can spoil the entire beautifully formed form of the document at once or stretch the page into two. JavaScript will not solve this problem. Therefore, it remains only to ask the user (highlighting the reminder) to remove the fields and headers in the browser.