Kalau anda menjadi web programmer, masalah utama yang akan anda hadapi adalah ketika anda dihadapkan untuk melakukan pencetakan laporan di kertas dengan format tertentu. Dalam format cetakan, besar font, ukuran kertas, dan letak “page break” harus dipertimbangkan dengan tepat.

Selama ini, ada beberapa cara yang dilakukan. Pertama menggunakan format PDF. Dengan format PDF kita bisa memformat halaman dengan tepat sebelum di cetak pada kertas. Namun, menggunakan PDF membutuhkan penggunaan sumber daya komputer yang cukup besar, selain pembuatannya rumit dan menghabiskan waktu.

Kedua menggunakan teks biasa yang hasilnya seperti hasil cetak aplikasi lama yang menggunakan foxpro. Fungsi str_pad() digunakan untuk urusan ini, dan hasilnya dilemparkan ke printer “dot matrix”. Namun penggunaan cara ini masih harus menggunakan sebuah file exe di sisi client untuk melakukan interpretasi terhadap perintah-perintah text pada mesin-mesin printer dot matrik.

Ketiga dengan menggunakan CSS. Sebenarnya ide ini sudah lama. Menurut saya menggunakan CSS akan lebih mudah, powerful dan lebih ringan. Namun dulu kendalanya pada “pagebreak”. Selama ini, halaman web akan mencetak dokumen pada kertas secara kontinyu, dimana kita tidak bisa memaksa sebuah halaman web untuk berhenti di tengah dan berganti halaman ketika dicetak.

Mimipi itu menjadi kenyataan ketika saya membaca buku “CSS – The Missing Manual”. Dikatakan bahwa pada CSS 2.1 ada fungsi-fungsi pengaturan printer seperti ganti halaman, dan pengaturan margin meskipun saat ini masih sangat sedikit browser yang mengimplementasikan ini.

Version 2.1 of the Cascading Style Sheet standard includes many CSS properties aimed at better formatting a printed Web page: from setting the orientation of the page to defining margins and paper size. (You can see the full list at www.w3.org/TR/CSS21/page.html.) Unfortunately, today’s Web browsers recognize very few of these print styles’

Karena kertas membutuhkan ukuran-ukuran pasti, maka gunakan batasan-batasan berikut,

1. Gunakan ukuran yang berhubungan dengan jarak atau panjang dengan satuan-satuan ukuran pada kertas seperti cm, mm atau inchi.
2. Gunakan ukuran pt untuk ukuran font, bukan em atau px, karena ukuran pt dirancang untuk ukuran-ukuran cetakan.
3. Gunakan “page-break-after: always” atau “page-break-after: always” untuk berganti halaman.
4. Gunakan “@page” sebagaimana yang ada pada contoh untuk mengatur margin halaman.

Saya mencoba riset kecil-kecilan dengan membuat report sederhana. Data saya hasilkan dari proses looping yang bisa dilihat pada contoh skrip dibawah. Pada setiap 40 loop, saya melakukan ganti halaman (lihat lampiran bawah). Hasilnya bisa dilihat dari tangkapan layar berikut.

Kesimpulan yang saya ambil sebagai berikut :

1. Sintak page-break-after, untuk membuat ganti halaman sudah berjalan di IE6, Firefox 1.5, dan Opera 9
2. Sedangkan @page yang digunakan untuk mengatur margin hanya berjalan di Opera 9. Pada IE 6 dan Firefox 1.5 atau 2 margin cetakan hanya berjalan jika kita mengubah magin pada “Page Setup”. Jadi untuk saat ini, urusan cetak mencetak report yang menggunakan CSS, serahkan saja kepada Opera 9.
3. Pemberian border bawah (border-bottom) pada “td” dengan CSS menghasilkan cetakan printer yang kurang mulus , beberapa garis mempunyai ketebalan yang terlihat agak beda. Berbeda dengan tampilan yang ada pada browser.

Secara umum, solusi yang disuguhkan CSS 2.1 ini cukup luar biasa. Paling tidak bisa menggantikan peran PDF yang selama ini menjadi solusi format cetakan. Hanya, saya tidak menjumpai fungsi untuk menentukan ukuran kertas, sehingga penentuan ukuran kertas kita lakukan secara manual misalnya dengan mengganti halaman ketika baris telah mencapai 40 baris (row).

Lampiran : Contoh CSS yang siap dicetak dengan printer.


< !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
< ?
function myheader(){
?>

< ?
}

function myfooter(){
echo “

“;
}

for($i=1;$i< =60;$i++){
$jumlah = $i * 1000;

if(($i%40) == 1){
if($i > 1){
myfooter();
echo “

“;
}
myheader();
}

echo “
“;
echo “ $i

“;
echo “ Item Barang ke $i

“;
echo “ $i

“;
echo “ 1000

“;
echo “ $jumlah

“;
echo “ Tidak ada

“;
echo “

“;

}

myfooter();
?>

Source :

http://theeqush.wordpress.com/2008/05/26/cetak-laporan-dengan-css/