Printable Version: HTML vs CSS vs JavaScript

    In the age of modern technology, when more and more sites support Google Gears, or other methods of offline viewing of documents, the creation of sane versions for printing is fading into the background. Nevertheless, a huge number of "mastodon" users stubbornly print pages of sites, so that later they can read on the road or at home. At the same time, of course, mother is what the developers of the sites are worth, who could not provide a sane way to print only the necessary information.

    Today we will consider some options for creating printable versions, as well as discuss their pros and cons.

    So, at the moment there are three main ways to create printable versions:
    1. HTML tools
    2. CSS tools
    3. JavaScript
    Each of these methods has its pros and cons. Let's consider them in detail.


    This is the easiest, and at the same time, the most common way. You simply 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 to create and maintain a site increases exactly twice. If you have a large site 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 minus if your project is monetized by means of banner advertising. Inserting banners into the print version is absurd, and writing a script for, for example, Proxomitorn, which will replace all pages on their print version, is a matter of ten minutes. This is especially true for projects where the main content is articles that are much more convenient and pleasant to read from the print version.


    This method is now used by most site developers. A line is simply added to the header of the HTML code: 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 the elements that are unnecessary for printing, leaving only the content that the user expects to see on paper. Especially dodgy CSS writers manage to make the page more beautiful by adding small headings and a little text to the bottom of the page after the main content.

    The main disadvantage of this approach is the intuitiveness for the user. The subconscious mind tells the user that if he just clicks "Print ...", then on paper he will get an exact cast of what he sees on the screen, but why does he need other people's banners, unnecessary indents and a colored background? Unfortunately, a rare user guesses to go into the preview and make sure that the page prints as it should ...


    In fact, this is a combination of the two previous methods. The “Print” button is put on the page, by clicking on which a new window opens (using JS tools), and it displays (!) A version with CSS applied for printing. Some additional page decorations are also possible. Thus, you solve two problems: 1) the user sees what he will print, calms down that there is nothing superfluous; 2) the page is created dynamically and it is impossible to use it for the main viewing 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 now disables JS? Another significant drawback - scripts that implement this functionality, you need to write for each project separately, since the elements will have to be listed almost manually.


    As we see, all methods have their 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 one wants. Such is life ...

    PS : This review does not consider various services for printing pages, which are plentiful on the Internet. About them next time.

    Also popular now: