Dipublikasikan: 30 Oktober 2024
Mulai Chrome 131, Anda dapat menggunakan CSS untuk menambahkan konten ke margin halaman saat dicetak. Postingan ini menjelaskan model halaman untuk media yang di-page, dan cara menggunakan fitur ini untuk meningkatkan output cetak dari halaman web Anda.
CSS menyertakan spesifikasi yang menangani media dengan penomoran halaman, Modul Media dengan Penomoran Halaman CSS dan Konten Buatan CSS untuk Media dengan Penomoran Halaman. Elemen ini menentukan fitur yang hanya digunakan saat halaman dicetak (termasuk ke PDF). Ada agen pengguna yang mendukung CSS ini, dan memungkinkan Anda membuat buku serta materi cetak lainnya dari HTML dan CSS. Namun, fungsi ini tidak pernah didukung dengan baik di browser web, meskipun kita sering kali perlu mencetak atau membuat PDF dari aplikasi.
Chrome dan Firefox mendukung
aturan @page. Aturan ini
memungkinkan Anda menentukan ukuran halaman yang akan dicetak, dan ukuran
margin di sekitar konten. Mulai Chrome 131, Anda juga dapat menggunakan konten yang dihasilkan
untuk menambahkan konten ke margin, dengan menargetkan margin yang relevan sesuai aturan.
Model halaman
Model halaman yang digunakan dalam media yang dibagi-bagi menentukan kotak halaman, yaitu lembar kertas Anda. Di dalam kotak halaman terdapat margin halaman, batas halaman, padding halaman, dan akhirnya area halaman tempat konten Anda ditampilkan. Saat dicetak, konten akan difragmentasi menjadi halaman sebanyak yang diperlukan untuk menampungnya.
Margin halaman kemudian dibagi menjadi 16 kotak, dengan masing-masing memiliki at-rule yang sesuai.
@top-left-corner@top-left@top-center@top-right@top-right-corner@left-top@left-middle@left-bottom@right-top@right-middle@right-bottom@bottom-left-corner@bottom-left@bottom-center@bottom-right@bottom-right-corner
Ukuran kotak margin
Tinggi kotak atas dan bawah serta lebar kotak sisi kiri dan kanan
ditentukan oleh ukuran margin yang ditetapkan menggunakan @page. Oleh karena itu, kotak sudut
memiliki ukuran tetap yang dibuat oleh perpotongan dari margin-margin tersebut. Namun,
tiga kotak di antara setiap sudut bersifat fleksibel. Perilakunya mirip
dengan kotak dalam tata letak fleksibel menggunakan flex: auto, sehingga kotak tersebut akan meluas untuk mengisi
ruang, tetapi jika Anda menempatkan string teks yang panjang di salah satu kotak, dan tidak ada di kotak lainnya,
kotak yang berisi teks akan bertambah, bukan menggabungkan teks.
Menambahkan konten ke kotak margin
Untuk menambahkan konten ke kotak margin, gunakan konten buatan CSS, seperti yang Anda lakukan dengan elemen pseudo ::before dan ::after. Dalam hal ini, gunakan aturan yang
terkait dengan kotak yang ingin ditarget. CSS berikut menambahkan teks "Buku saya"
ke kotak margin kiri bawah atau halaman sebelah kanan. Ia juga menata gaya teks tersebut.
@page :right {
@bottom-left {
content: "My book";
font-size: 9pt;
color: #333;
}
}
Selain string teks, Anda dapat menambahkan penghitung halaman ke margin. Penghitung
page yang telah ditetapkan berisi halaman saat ini. CSS berikut menambahkannya
ke kanan bawah halaman sebelah kanan dan kiri bawah halaman sebelah kiri.
@page :right {
@bottom-right {
content: counter(page);
}
}
@page :left {
@bottom-left {
content: counter(page);
}
}
Ada juga penghitung pages yang selalu berisi jumlah total halaman.
Hal yang perlu diperhatikan saat menggunakan margin halaman
Jika mencetak dari browser, browser akan otomatis menambahkan beberapa konten margin halaman jika ada ruang untuk ditampilkan. Tindakan ini akan dilakukan meskipun Anda telah menambahkan konten. Header dan footer yang dibuat secara otomatis ini dapat dinonaktifkan di dialog cetak.
Jika Anda menetapkan margin di halaman ke 0, atau nilai yang sangat kecil sehingga tidak ada ruang untuk header dan footer browser, header dan footer tidak akan ditampilkan.
Karena adanya konsep tata letak halaman default di Chromium, jika halaman pertama dokumen cetak tidak memiliki ruang untuk konten otomatis, konten browser tidak akan ditampilkan di halaman berikutnya meskipun halaman tersebut memiliki ruang.
Kemungkinan mendatang untuk media dengan penomoran halaman
Spesifikasi media dengan penomoran halaman mencakup beberapa fitur lainnya, yang dijelaskan dalam artikel Mendesain untuk Cetak dengan CSS. Jika Anda memiliki kasus penggunaan untuk salah satu fitur berikut, tambahkan ke bug tertaut.
Menetapkan string
Buku sering kali mencetak judul bab saat ini di margin. Judul ini tidak dapat
di-hardcode ke dalam CSS karena akan berubah saat Anda membaca buku. Properti
string-set memungkinkan Anda menetapkan nilai dari HTML untuk kemudian digunakan dalam
konten yang dihasilkan. CSS berikut mengasumsikan bahwa judul bab ditandai
sebagai <h1>. Fungsi ini mengambil konten dari setiap <h1> dan menggunakannya di margin kanan atas
di halaman sebelah kanan. Saat mencapai <h1> berikutnya, nilai akan diperbarui
untuk margin setelah titik tersebut.
h1 {
string-set: doctitle content();
}
@page :right {
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 8pt;
}
}
Bug Chromium untuk string-set dan string().
Referensi silang
Setelah dokumen dicetak, referensi ke halaman lain biasanya ditunjukkan dengan menggunakan nomor halaman tempat referensi tersebut dapat ditemukan. Referensi silang ini
dapat dibuat menggunakan target-counter. Jika diterapkan ke link, link tersebut berfungsi untuk melompat ke referensi di web, saat dicetak, nomor halaman akan ditampilkan.
<a class="xref" href="#ref1">my reference</a>
a.xref:after {
content: " (page " target-counter(attr(href, url), page) ")";
}
Bug Chromium untuk referensi silang.
Catatan kaki
Catatan kaki juga merupakan fitur dari spesifikasi media yang diberi nomor halaman. Dalam HTML, gunakan class untuk mengidentifikasi teks yang harus menjadi catatan kaki, misalnya:
<p>This is some text <span class=”fn”>this is a footnote</span>.</p>
Lalu, gunakan nilai footnote dari float, untuk mengubah teks ini menjadi catatan kaki. Catatan tersebut
akan dihapus dari paragraf saat dokumen dicetak dan ditampilkan sebagai
catatan kaki.
.fn {
float: footnote;
}