📜 ⬆️ ⬇️

Printable version: HTML vs CSS vs JavaScript

In the age of modern technology, when more and more sites support Google Gears, or other ways of offline viewing of documents, the creation of sane print versions recedes into the background. Nevertheless, a huge number of "mastodon" users stubbornly print out the pages of sites, then read on the road or at home. In parallel, of course, mothers are worth a lot of website developers who could not foresee a sane way to print only the necessary information.

Today we will look at some options for creating versions for printing, as well as discuss their pros and cons.

So, at the moment there are three main ways to create versions for printing:
  1. in HTML
  2. using CSS
  3. using javascript
Each of these methods has its own advantages and disadvantages. Consider them in detail.
')

HTML

This is the easiest, and, at the same time, the most common way. You just make a separate version of each page, specially designed for normal display on paper, that is, on a white background in black letters, without Flash animation, banners and other decorations. If your site does not use any server programming, then the amount of work on creating and maintaining the site doubles exactly. If you have a large website, created with the latest technology, using template engines, then creating a print version is limited to creating a new template.

This method has another significant disadvantage, if your project is monetized by means of banner advertising. Embedding banners in the print version is absurd, and writing a script for, for example, Proxomitorn'a, which will replace all pages with their print versions is a matter of ten minutes. This is especially true of projects where the main content is articles that are much more convenient and more pleasant to read from the print version.

CSS

This method is now used by most site developers. A line is simply added to the HTML header:

<link rel = "stylesheet" type = "text / css" media = "print" href = "print.css" />

The loaded CSS file is used only for printing and does not affect the display of elements in the browser. In this file, the developer usually hides all unnecessary elements for printing, leaving only the content that the user intends to see on paper. Particularly quirky CSS writers manage to make the page more beautiful by adding small headings and a bit of text to the bottom of the page after the main content.

The main disadvantage of this approach is non-intuitiveness for the user. The subconscious tells the user that if he simply clicks "Print ...", then on paper he will receive an exact copy of what he sees on the screen, and why does he need someone else's banners, unnecessary indents and a colored background? Unfortunately, a rare user guesses to go to the preview and make sure that the page will be printed as it should ...

Javascript

In fact, this is a combination of the two previous methods. The “Print” button is placed on the page, by clicking on which a new window opens (using JS tools), and it displays (!) The version with the applied CSS for printing. Also some additional page decorations are possible. So you solve two problems: 1) the user sees what will be printed, it calms down that there is nothing superfluous; 2) the page is created dynamically and cannot be used for the main view of the site.

The disadvantage of this method: the user must have javascript enabled, and (depending on the implementation) pop-ups are allowed. Although, who is now disconnecting JS? Another major drawback is that the scripts that implement this functionality need to be written for each project separately, since the elements will have to be listed almost manually.

Summary

As we see, all methods have their own advantages and disadvantages. Each of these options is very widely used on an incredible number of sites. And, nevertheless, it is not always possible to achieve what you want. That is life…

PS : This review does not cover various services for printing pages that are abundant on the Internet. About them next time.

Source: https://habr.com/ru/post/27485/


All Articles