Yayınlanma tarihi: 30 Ekim 2024
Chrome 131'den itibaren, sayfalar yazdırıldığında sayfa kenar boşluklarına içerik eklemek için CSS'yi kullanabilirsiniz. Bu yayında, sayfalı medya için sayfa modeli ve web sayfalarınızdan alınan baskı çıktısını iyileştirmek için bu özelliğin nasıl kullanılacağı açıklanmaktadır.
CSS, sayfalı medya, CSS Sayfalı Medya Modülü ve Sayfalı Medya İçin CSS Tarafından Oluşturulan İçerik ile ilgili spesifikasyonları içerir. Yalnızca bir sayfa yazdırıldığında (PDF dahil) kullanılan özellikleri tanımlar. Bu CSS'yi destekleyen ve HTML ile CSS'den kitap ve diğer basılı materyaller oluşturmanıza olanak tanıyan kullanıcı aracıları vardır. Ancak, uygulamalardan PDF yazdırmamız veya oluşturmamız gerektiğinde bu işlev web tarayıcılarında hiçbir zaman iyi desteklenmedi.
Chrome ve Firefox, @page at-kuralı destekler. Bu kural, yazdırdığınız sayfanın boyutunu ve içeriğin etrafındaki kenar boşluklarının boyutunu tanımlamanıza olanak tanır. Chrome 131'den itibaren, ilgili kenar boşluğu at-kuralını hedefleyerek kenar boşluklarına içerik eklemek için oluşturulan içeriği de kullanabilirsiniz.
Sayfa modeli
Sayfalı medyada kullanılan sayfa modeli, sayfa kutusu tanımlar. Bu, kağıdınızdır. Sayfa kutusunun içinde bir sayfa marjı, sayfa kenarlığı, sayfa dolgusu ve son olarak içeriğinizin gösterildiği sayfa alanı bulunur. İçerik yazdırıldığında, içermesi için gereken sayıda sayfaya bölünür.
Ardından sayfa kenar boşluğu 16 kutuya bölünür ve her kutuya karşılık gelen bir at-kuralı atanır.
@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ğ kenar kutularının genişliği, @page kullanılarak ayarlanan kenar boşluğu boyutuna göre belirlenir. Bu nedenle, köşe kutuları bu kenar boşluklarının kesişimi tarafından oluşturulan sabit bir boyuta sahiptir. Ancak her köşe arasındaki üç kutu esnektir. flex: auto kullanan esnek bir düzendeki kutulara benzer şekilde davranırlar. Bu nedenle, alanı doldurmak için uzarlar. Ancak bir kutuya uzun bir metin dizesi, diğerine ise hiçbir şey koyarsanız metin içeren kutu, metni sarmalamak yerine büyür.
Kenarlık kutularına içerik ekleme
Kenarlık kutularına içerik eklemek için ::before ve ::after sözde öğelerinde yaptığınız gibi CSS tarafından oluşturulan içeriği kullanın. Bu durumda, hedeflemek istediğiniz kutuyla ilgili at-kuralı kullanın. Aşağıdaki CSS, sol alt kenar boşluğu kutusuna veya sağ sayfalara "Kitabım" metnini ekler. Ayrıca bu metne stil de uygular.
@page :right {
@bottom-left {
content: "My book";
font-size: 9pt;
color: #333;
}
}
Kenar boşluklarına metin dizelerinin yanı sıra sayfa sayaçları da ekleyebilirsiniz. Önceden tanımlanmış page sayacı, geçerli sayfayı içerir. Aşağıdaki CSS, kodu sağdaki sayfaların sağ alt kısmına, soldaki 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
Bir tarayıcıdan baskı alıyorsanız tarayıcı, gösterilecek yer varsa otomatik olarak sayfa kenarlığı içeriği ekler. Bu işlem, içerik eklemiş olsanız bile yapılır. Otomatik olarak oluşturulan bu üstbilgi ve altbilgiler, yazdırma iletişim kutusunda devre dışı bırakılabilir.
Bir sayfadaki kenar boşluklarını 0'a veya tarayıcı üstbilgi ve altbilgilerinin sığmayacağı kadar küçük bir değere ayarlarsanız bunlar gösterilmez.
Chromium'daki varsayılan sayfa düzeni kavramı nedeniyle, yazdırılan dokümanınızın ilk sayfasında otomatik içeriğe yer yoksa bu durum, alan olsa bile tarayıcı içeriğinin sonraki sayfalarda görüntülenmesini engeller.
Sayfalı medya için gelecekte sunulan olanaklar
Sayfaya ayrılmış medya spesifikasyonları, CSS ile Baskı için Tasarım makalesinde açıklanan diğer birçok özelliği içerir. Aşağıdaki özelliklerden herhangi biri için bir kullanım alanınız varsa bağlantılı hatalara ekleyin.
Dize ayarları
Kitaplarda genellikle mevcut bölüm başlığı kenar boşluklarına basılır. Bu başlık, kitapta ilerledikçe değiştiği için CSS'nize sabit kod olarak eklenemez. string-set mülkü, oluşturulan içerikte kullanmak üzere HTML'nizde bir değer ayarlamanıza olanak tanır. Aşağıdaki CSS'de, bölüm başlıklarının <h1> olarak işaretlendiği varsayılmaktadır. Her <h1> öğesinin içeriğini alıp sağdaki sayfaların sağ üst kenar boşluğunda kullanır. 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 doküman yazdırıldıktan sonra, diğer sayfalara yapılan referanslar genellikle referansın bulunabileceği 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 atlamak için çalışır. Baskı sırasında ise sayfa numarası gösterilir.
<a class="xref" href="#ref1">my reference</a>
a.xref:after {
content: " (page " target-counter(attr(href, url), page) ")";
}
Çapraz referanslar için Chromium hatası.
Dipnotlar
Dipnotlar, sayfalı medya özelliklerinin bir parçasıdı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 öğesinin footnote değerini kullanın. Doküman yazdırıldığında dipnot olarak gösterilir ve paragraftan kaldırılır.
.fn {
float: footnote;
}