Mengekspor laporan kerja, ringkasan biodata karyawan, atau faktur dari aplikasi pengolah dokumen maupun halaman berbasis HTML ke format PDF sering kali menghasilkan tampilan yang berantakan—seperti tabel yang terbelah di pergantian halaman, warna latar yang hilang, hingga munculnya teks URL otomatis di bagian atas kertas.

Panduan ini membahas standar ukuran margin dokumen resmi serta konfigurasi aturan cetak (@media print) agar dokumen PDF Anda selalu presisi dalam ukuran kertas A4.

Standar Ukuran Kertas dan Margin Dokumen Administrasi

Sebelum mengatur tata letak, pastikan dimensi dasar dokumen sudah sesuai dengan standar pencetakan kantor di Indonesia:

Pengaturan CSS Khusus untuk Template HTML Siap Export PDF

Jika Anda membuat template laporan atau biodata menggunakan HTML yang akan disimpan menjadi PDF melalui fitur Print to PDF (di Chrome/Edge) atau pustaka pembuat PDF, tempelkan blok aturan CSS berikut di bagian <style> dokumen Anda:

/* 1. Kunci ukuran kertas ke A4 dan matikan header/footer otomatis browser */
@page {
  size: A4 portrait;
  margin: 15mm 15mm 15mm 15mm;
}

@media print {
  /* 2. Paksa warna background tabel dan badge tetap tercetak */
  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    background-color: #ffffff;
    font-size: 11pt;
  }

  /* 3. Sembunyikan elemen navigasi web atau tombol saat jadi PDF */
  .no-print, nav, button, footer.web-footer {
    display: none !important;
  }

  /* 4. Cegah baris tabel atau kartu biodata terpotong di tengah halaman */
  tr, .card-section, .signature-block {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* 5. Ulangi judul kolom tabel (thead) otomatis di halaman ke-2 dst */
  thead {
    display: table-header-group;
  }
}

Penjelasan Fungsi Pengaturan di Atas

• @page { size: A4 portrait; }: Memaksa mesin pencetak PDF langsung mengunci ukuran kertas ke A4 tanpa peduli pengaturan default printer pengguna (yang sering kali berada di ukuran Letter).
• print-color-adjust: exact: Memastikan warna kepala tabel (<th>) dan garis pembatas tetap tampil tajam di file PDF hasil ekspor.
• break-inside: avoid: Mencegah kotak tanda tangan atau satu baris riwayat pekerjaan terbelah setengah di halaman pertama dan setengahnya lagi di halaman kedua.

Studi Kasus Penerapan: Merapikan Dokumen Biodata Onboarding

Ketika menyusun dokumen ringkasan biodata karyawan baru (onboarding summary) yang terdiri dari blok Data Pribadi, Riwayat Pendidikan, dan Kontak Darurat, masalah yang paling sering terjadi adalah judul sub-bagian berada di bagian paling bawah halaman 1, sedangkan tabel isinya pindah ke halaman 2.

Untuk mengatasinya, bungkus setiap judul beserta tabelnya di dalam satu kontainer <section class="card-section">, atau tambahkan aturan break-after: avoid; pada elemen judul <h2> dan <h3>. Dengan begitu, judul dan isi tabel akan selalu berpindah halaman secara bersamaan.

Kendala Umum dan Cara Mengatasinya (Troubleshooting)

1. Tabel Lebar Terpotong di Sisi Kanan Kertas PDF: Jangan gunakan ukuran piksel tetap (seperti width: 1000px) pada tabel. Ubah lebar tabel menjadi width: 100%; dan tambahkan table-layout: fixed; disertai word-wrap: break-word; agar teks panjang otomatis turun ke baris berikutnya.
2. Muncul Halaman Kosong Tambahan di Akhir File PDF: Halaman kosong di akhir dokumen biasanya dipicu oleh elemen pembungkus utama yang memiliki min-height: 100vh; atau margin-bottom yang terlalu besar. Pada blok @media print, ubah menjadi min-height: auto;.
3. Ukuran Font Terlihat Terlalu Besar Saat Dicetak: Satuan px di layar monitor sering kali tampak terlalu besar di atas kertas A4. Gunakan satuan poin cetak (pt) di dalam blok @media print—idealnya 10pt hingga 11pt untuk teks isi dan 14pt untuk judul bagian.