Print this page, CSS Media Print, and Print blah..blah..blah..

Gampang ternyata. Cukup meletakkan sepotong kode ini entah di anchor, button, ataupun clickable element lainnya.

javascript:window.print()

misalnya,

<a href="javascript:window.print()" id="print_link">Print This Report</a>

Hal pertama yang Anda pikirkan adalah bagaimana membuat hasil print otomatis landscape. Jawabannya nggak ada cara untuk membuat hasil print otomatis landscape.

Mungkin hal kedua yang Anda pikirkan selanjutnya adalah bagaimana membuat tampilan printnya oke. Artikel berikut cukup membantu saya dalam memahami beberapa konsep css untuk media print.

Mungkin beberapa kalian sudah tahu kalau CSS memiliki atribut media yang dapat diisi dengan diantaranya screen (untuk tampilan di monitor), print (tampilan di print), dan lain-lain. Nah, untuk membuat tampilan hasil print oke berarti kita harus membuat css untuk media print.

Ini adalah panduan dari artikel tersebut tentang bagaimana membuat halaman web Anda secara tampilan printer baik.

***

Defining a Style Sheet for Print

As with screen style sheets, you use the LINK element to define the print stylesheet your web page should use:

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

The only difference between this link element and the link to your screen style sheet is the attribute:

media="print"

Most style sheets are written for the screen, so the media can be left off, or written as:

media="screen"

Building the Style Sheet

When you build a print-friendly style sheet, you need to keep in mind all the rules that were defined in my previous articleWhat is a Printer-Friendly Web Page?:

  • Change colors to black on white.
  • Change the font to serif.
  • Watch the font size.
  • Underline all links.
  • Remove non-essential images.
  • Remove navigation.
  • Remove some or most of the advertising.
  • Remove all JavaScript, Flash, and animated images.

Change these rules into CSS:
Black on white with 12-point, serif fonts:

body {
color : #000000;
background : #ffffff;
font-family : "Times New Roman", Times, serif;
font-size : 12pt;
}

Underline links:

a {
text-decoration : underline;
color : #0000ff;
}

I also like to make the links blue, to stand out on color printers.

Remove Non-Essential Images, Ads, Navigation, and Scripting
The best way to do this is to put DIV elements around each section of your page. For example, you might have the following sections:

  • top, bottom, left, and right navigation
  • internal advertising
  • content
  • other elements

Define each of them with a DIV element:

  • <div id="navigation" name="navigation">
  • <div id="advertising" name="advertising">
  • <div id="content" name="content">
  • <div id="other" name="other">

Then, in your style sheet, get rid of the ads, navigation, and other information:

#navigation, #advertising, #other { display : none; }

The print.css Style Sheet

The print.css style sheet looks like this:

body {
color : #000000;
background : #ffffff;
font-family : "Times New Roman", Times, serif;
font-size : 12pt;
}
a {
text-decoration : underline;
color : #0000ff;
}
#navigation, #advertising, #other {
display : none;
}

Save print.css in the same directory as the file, include the <link rel="stylesheet" type="text/css" href="print.css" media="print"> in the head of your document, and your page will print perfectly while displaying however you would like.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s