Yayınlanma tarihi: 30 Ekim 2024
Chrome 131'den itibaren, sayfalar yazdırılırken kenarlara içerik eklemek için CSS'yi kullanabilirsiniz. Bu yayında, sayfalandırılmış medya için sayfa modeli ve bu özelliği kullanarak web sayfalarınızdaki yazdırma çıktısını nasıl iyileştireceğiniz açıklanmaktadır.
CSS, sayfalara ayrılmış medya, CSS Sayfalara Ayrılmış Medya Modülü ve Sayfalara Ayrılmış Medya İçin CSS Tarafından Oluşturulan İçerik ile ilgili spesifikasyonlar içerir. Bu özellikler yalnızca bir sayfa yazdırıldığında (PDF olarak yazdırma dahil) kullanılır. Bu CSS'yi destekleyen ve HTML ile CSS'den kitaplar ve diğer basılı materyaller oluşturmanıza olanak tanıyan kullanıcı aracıları vardır. Ancak, uygulamalardan yazdırma veya PDF oluşturma ihtiyacımız olmasına rağmen bu işlev web tarayıcılarında hiçbir zaman iyi bir şekilde desteklenmemiştir.
Chrome ve Firefox, @page @ kuralını destekler. Bu kural, yazdırdığınız sayfanın boyutunu ve içerik etrafındaki kenar boşluklarının boyutunu tanımlamanıza olanak tanır. Chrome 131'den itibaren, ilgili kenar boşluğu @kuralını hedefleyerek kenar boşluklarına içerik eklemek için oluşturulan içeriği de kullanabilirsiniz.
Sayfa modeli
Sayfalandırılmış medyada kullanılan sayfa modeli, sayfa kutusunu tanımlar. Bu, kağıdınızdır. Sayfa kutusunun içinde sayfa kenar boşluğu, sayfa kenarlığı, sayfa dolgusu ve son olarak içeriğinizin görüntülendiği sayfa alanı bulunur. İçerik yazdırıldığında, içeriği barındırmak için gereken sayıda sayfaya bölünür.
Sayfa kenar boşluğu daha sonra 16 kutuya bölünür ve her bir kutuya karşılık gelen bir @kuralı bulunur.
@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
Kenar boşluğu kutusu boyutlandırma
Üst ve alt kutuların yüksekliği ile sol ve sağ taraftaki kutuların genişliği, @page kullanılarak ayarlanan kenar boşluğu boyutuyla tanımlanır. Bu nedenle, köşe kutularının bu kenar boşluklarının kesişimiyle oluşturulan sabit bir boyutu vardır. Ancak her köşe arasındaki üç kutu esnektir. flex: auto kullanılarak oluşturulan esnek düzendeki kutulara benzer şekilde davranırlar. Bu nedenle, alanı doldurmak için genişlerler. Ancak birine uzun bir metin dizesi yerleştirirseniz ve diğerlerine hiçbir şey koymazsanız metni sarmak yerine metnin bulunduğu kutu büyür.
Kenar boşluğu kutularına içerik ekleme
Kenar boşluğu kutularına içerik eklemek için ::before ve ::after sözde öğelerinde olduğu gibi CSS tarafından oluşturulan içeriği kullanın. Bu durumda, hedeflemek istediğiniz kutuyla ilgili @ kuralını kullanın. Aşağıdaki CSS, "Kitabım" metnini sol alt kenar boşluğu kutusuna veya sağ taraftaki sayfalara ekler. Ayrıca bu metni biçimlendirir.
@page :right {
@bottom-left {
content: "My book";
font-size: 9pt;
color: #333;
}
}
Metin dizilerinin yanı sıra kenar boşluklarına sayfa sayaçları da ekleyebilirsiniz. Önceden tanımlanmış page sayacı, geçerli sayfayı içeriyor. Aşağıdaki CSS, bunu sağ sayfaların sağ alt kısmına, sol sayfaların ise sol alt kısmına ekler.
@page :right {
@bottom-right {
content: counter(page);
}
}
@page :left {
@bottom-left {
content: counter(page);
}
}
Ayrıca, her zaman toplam sayfa sayısını içeren bir pages sayacı da vardır.
Sayfa kenar boşluklarını kullanırken dikkat edilmesi gerekenler
Tarayıcıdan yazdırma işlemi yapılıyorsa tarayıcı, görüntüleme alanı varsa otomatik olarak sayfa kenarlığı içeriği ekler. İçerik eklemiş olsanız bile bu işlem yapılır. Otomatik olarak oluşturulan bu üstbilgiler ve altbilgiler, yazdırma iletişim kutusunda devre dışı bırakılabilir.
Bir sayfadaki kenar boşluklarını 0 olarak veya tarayıcı üstbilgileri ve altbilgileri için yer kalmayacak kadar küçük bir değere ayarlarsanız bu öğeler gösterilmez.
Chromium'daki varsayılan sayfa düzeni kavramı nedeniyle, yazdırılan belgenizin ilk sayfasında otomatik içerik için yer yoksa bu durum, sonraki sayfalarda yer olsa bile tarayıcı içeriğinin gösterilmesini engeller.
Sayfalandırılmış medya için gelecekteki olanaklar
Sayfalandırılmış medya spesifikasyonları, CSS ile Baskı İçin Tasarlama başlıklı makalede açıklanan başka birçok özellik içerir. Aşağıdaki özelliklerden herhangi biri için kullanım alanınız varsa bunu bağlı hatalara ekleyin.
Dizeleri ayarlama
Kitaplarda genellikle mevcut bölüm başlığı kenar boşluklarına yazılır. Bu başlık, kitapta ilerledikçe değiştiği için CSS'nize sabit kodlanamaz. string-set özelliği, HTML'nizden bir değer ayarlamanıza ve bu değeri daha sonra oluşturulan içerikte kullanmanıza olanak tanır. Aşağıdaki CSS, bölüm başlıklarının <h1> olarak işaretlendiğini varsayar. Her <h1> öğesinin içeriğini alır ve sağ taraftaki sayfalarda sağ üst kenar boşluğunda kullanır. Bir sonraki <h1> değerine ulaşıldığında, bu noktadan sonraki marjlar için değer güncellenir.
h1 {
string-set: doctitle content();
}
@page :right {
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 8pt;
}
}
string-set ve string() için Chromium hatası.
Çapraz referanslar
Bir belge yazdırıldıktan sonra, diğer sayfalara yapılan referanslar genellikle referansın bulunduğu sayfa numarası kullanılarak belirtilir. Bu çapraz referanslar target-counter kullanılarak oluşturulabilir. Bir bağlantıya uygulandığında bağlantı, web'deki referansa gitmek için kullanılır. Yazdırıldığında sayfa numarası gösterilir.
<a class="xref" href="#ref1">my reference</a>
a.xref:after {
content: " (page " target-counter(attr(href, url), page) ")";
}
Çapraz referanslarla ilgili Chromium hatası.
Dipnotlar
Sayfalandırılmış medya spesifikasyonlarında dipnotlar da yer alır. HTML'de, dipnot olması gereken metni tanımlamak için bir sınıf kullanın. Örneğin:
<p>This is some text <span class=”fn”>this is a footnote</span>.</p>
Ardından, bu metni dipnotlara dönüştürmek için float değerini kullanın.footnote Belge yazdırıldığında paragraftan kaldırılır ve dipnot olarak gösterilir.
.fn {
float: footnote;
}