Print from browser

Web is coming. More and more ordinary desktop applications are moving to the Internet. No one is surprised by an online text or graphic editor. And so various multi-user complexes, databases, reporting systems - there is a space for web technologies. For example, a few years ago it would be quite normal to make a registration and accounting system for clients, say a dental clinic or library in Delphi, add a database and a network part. But now this solution will be unreasonable: it is much simpler, more convenient, and therefore more efficient to use all that the Web provides us, even if the application is 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 a free OS. All that is needed on client computers is a browser, no settings, settings, and other things.

But the decision to do everything on the web has a flaw (not even one, but I will not list everything now): the inconvenience when printing reports, forms of documents 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 undermined for printing, which often leads to the spread 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 very convenient: the user needs to install programs that work with these formats, each time to download the generated file from the server, to print from a third-party program, and not the browser. Therefore it is worth making an effort to create pages that are correctly printed out directly from the browser.


Once there are separate versions of the page for display on the screen and for printing, then the CSS should be divided into two parts by purpose. Properties of elements that are special for display on the screen will be stored in a block.
media screen {}
and for printing, respectively, in
media print {}
')
The first thing to do is turn off all unnecessary graphical elements: banners (they are unlikely to be in the web application for the local network), a menu, or something else. This is achieved by the following construction in CSS:

media print {
.banner {display: none;}
}

Also prohibit the display of other unnecessary blocks. Perhaps some blocks on the contrary should be displayed when printing, and on the screen to hide. A beautiful color logo on a black-and-white printer will probably print dirty or not clear enough; you should replace it with a special contrast 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 a page on an A4 printer (unless this application is for printing). We restrict the page to the desired size by inserting the page construction. 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 intended, then the left and right pages should be distinguished:
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: on paper look better fonts with serifs.

When printing multi-page reports or completed document forms, each part of the report 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 to do a page break:
media print {
hr {PAGE-BREAK-AFTER: always; visibility: hidden;}
}

Let me remind you that PAGE-BREAK-AFTER causes 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 is not displayed when printing (visibility: hidden), but this does not prevent it from controlling the printer.

In one of my projects, the operator needed to fill out a form with client data, after which he might need to print out this form with special formatting. I decided to combine on one page both the version for display on the screen with form input fields and the version for printing. This simplifies the operator's task: after entering the data and saving it, it suffices to press the “Print” button without loading a special page.

For this, I created a data entry form in the form of an empty document form. By the way, this is a good idea: the shape is compact and looks almost like on paper. Next, we collect on the same page two versions of the document, deftly 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 margins and footers. This can at once spoil the entire beautifully formed form of the document or stretch the page into two. JavaScript will not solve this problem. Therefore, it remains only to ask the user (by highlighting a reminder) to remove fields and headers and footers in the browser.