In the beginning was the Print Button, and it was good - but not great

This site is dedicated to making it easier for developers to make it easier for their users to print.

There are scores of variations on that theme. Printing from mobile phones and tablets is now a hot topic. However, all the print APIs trace their code roots back to the humble Print Button – an on-screen button that opened the print dialog box.

Savvy consumers, while browsing websites, know that the print button is unnecessary. Most browsers have menu commands (File> Print), mouse commands (Right-click Print), or keyboard commands (Ctrl+P) that open a print dialog box. But there are lots of less savvy consumers who never venture up to the menu bar, and who have no idea that a bazillion keystroke commands are right under their fingertips.

Rather than lament the ignorance of users or the dearth of cyber education, developers can just drop a print button on the page wherever it makes sense. The print button makes it obvious to the user that at this point in the web experience, they have an option to print. Just click the button.

The code behind the Print Button is pure simplicity. Here is JavaScript’s window.print() function in action:

<button type="button" onclick="window.print()">Print</button>

When dropped into the HTML, the Java Script tells the browser to:

  1. Create a button
  2. When the button is clicked (“onclick”), open the browser’s native print dialog box

Once the dialog box opens, the user picks their printer and sets their print preferences (like the number of copies and the page orientation) then prints the web page.


Google Chrome&#039;s print dialog boxBrowser roll call

Normally at this point, we have to list which browsers this JavaScript works in. However, this is like the mother of all APIs. Over the past 20 years, printing has become a fixture in every desktop web browser.

Good but not great

Of course, we all know from personal experience the unfortunate results of printing web pages. Have you ever tried to print an online recipe? You won’t be tucking that in the family recipe box without cutting and folding. For starters, you don’t want the web ads. Most desktop browsers have a mouse control (right-click print) which usually strips out most of the ads.

But have you ever printed a long article using right-click printing? It may nix the ads, but it does nothing for layout. The text goes stringing all the way across the page. A short paragraph becomes a single line from margin to margin. There is a reason that every newspaper is laid out with columns. It makes reading easier.

Alpha and omega

There are scripts that can improve web printing – stripping out ads and laying out text in eye-pleasing columns. Future posts here will detail how to make web printing the best possible experience. But these more intricate printing APIs will all end with that simple, practical script:

<button type="button" onclick="window.print()">Print</button>

It was one of the first printing Java scripts, and it is usually the last line of script in a printing API, making window.print() a kind of alpha and omega of web page printing.

Arjun at HP

Author : TheSkipper