Gepubliceerd: 30 oktober 2024
Vanaf Chrome 131 kun je CSS gebruiken om inhoud toe te voegen aan de marges van pagina's wanneer ze worden afgedrukt. Dit bericht legt het paginamodel voor gepagineerde media uit en hoe je deze functie kunt gebruiken om de afdrukkwaliteit van je webpagina's te verbeteren.
CSS bevat specificaties voor gepagineerde media, zoals de CSS Paged Media Module en CSS Generated Content for Paged Media . Deze definiëren functies die alleen worden gebruikt wanneer een pagina wordt afgedrukt (inclusief naar PDF). Er zijn user agents die deze CSS ondersteunen en waarmee je boeken en ander drukwerk kunt genereren vanuit HTML en CSS. Deze functionaliteit is echter nooit goed ondersteund in webbrowsers, ondanks het feit dat we vaak PDF's moeten afdrukken of maken vanuit applicaties.
Chrome en Firefox ondersteunen de @page at-regel. Met deze regel kunt u de afmetingen van de pagina waarop u afdrukt en de grootte van de marges rond de inhoud definiëren. Vanaf Chrome 131 kunt u ook gegenereerde inhoud gebruiken om inhoud aan de marges toe te voegen door de relevante margin at-regel te gebruiken.
Het paginamodel
Het paginamodel dat wordt gebruikt in gepagineerde media definieert een paginakader , oftewel uw vel papier. Binnen het paginakader bevinden zich een paginamarge , een paginarand , paginavulling en ten slotte het paginagebied waar uw inhoud wordt weergegeven. Wanneer inhoud wordt afgedrukt, wordt deze verdeeld over zoveel pagina's als nodig is om de inhoud te bevatten.
De paginamarge wordt vervolgens verdeeld in 16 vakjes, elk met een bijbehorende lijn.
-
@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
Grootte van de margebox
De hoogte van de bovenste en onderste vakken en de breedte van de linker en rechter zijvakken worden bepaald door de marges die zijn ingesteld met @page . De hoekvakken hebben daarom een vaste grootte, die ontstaat door de intersectie van die marges. De drie vakken tussen elke hoek zijn echter flexibel. Ze gedragen zich op een vergelijkbare manier als vakken in een flex-layout met flex: auto , dus ze rekken uit om de ruimte te vullen. Maar als je een lange tekst in één vak plaatst en niets in de andere, zal het vak met de tekst groter worden in plaats van dat de tekst wordt afgebroken.
Voeg inhoud toe aan margevakken
Om inhoud aan margevakken toe te voegen, gebruikt u CSS-gegenereerde inhoud, net zoals u dat zou doen met de pseudo-elementen ::before en ::after . Gebruik in dit geval de at-regel die hoort bij het vak waarop u zich wilt richten. De volgende CSS voegt de tekst "Mijn boek" toe aan het margevak linksonder of aan de rechterpagina's. Deze tekst wordt ook opgemaakt.
@page :right {
@bottom-left {
content: "My book";
font-size: 9pt;
color: #333;
}
}
Naast tekstreeksen kun je ook paginatellers aan de marges toevoegen. De vooraf gedefinieerde page bevat de huidige pagina. De volgende CSS voegt deze toe aan de rechteronderhoek van pagina's aan de rechterkant en aan de linkeronderhoek van pagina's aan de linkerkant.
@page :right {
@bottom-right {
content: counter(page);
}
}
@page :left {
@bottom-left {
content: counter(page);
}
}
Er is ook een pages die altijd het totale aantal pagina's weergeeft.
Aandachtspunten bij het gebruik van paginamarges
Bij het afdrukken vanuit een browser voegt de browser automatisch paginamarges toe als daar ruimte voor is. Dit gebeurt zelfs als u zelf al inhoud hebt toegevoegd. Deze automatisch gegenereerde kop- en voetteksten kunnen worden uitgeschakeld in het afdrukdialoogvenster.
Als je de marges van een pagina op 0 instelt, of op een waarde die zo klein is dat er geen ruimte meer is voor de kop- en voetteksten van de browser, worden deze niet weergegeven.
Vanwege het concept van een standaard pagina-indeling in Chromium , zal de browserinhoud niet worden weergegeven op latere pagina's als er op de eerste pagina van uw afgedrukte document geen ruimte is voor de automatisch gegenereerde inhoud, zelfs als daar wel ruimte is.
Toekomstmogelijkheden voor media met paginering
De specificaties voor gepagineerde media bevatten diverse andere functies, die worden beschreven in het artikel 'Ontwerpen voor print met CSS' . Als u een van de volgende functies wilt gebruiken, kunt u dit toevoegen aan de gekoppelde bugrapporten.
Stel tekenreeksen in
In boeken wordt de titel van het huidige hoofdstuk vaak in de marges afgedrukt. Deze titel kan niet in je CSS worden vastgelegd, omdat deze verandert naarmate je verder leest. Met de eigenschap string-set kun je een waarde uit je HTML instellen die vervolgens in de gegenereerde content wordt gebruikt. De volgende CSS gaat ervan uit dat hoofdstuktitels zijn opgemaakt als een ` <h1> . De inhoud van elke <h1> wordt gebruikt in de rechterbovenhoek van rechterpagina's. Wanneer de volgende <h1> wordt bereikt, wordt de waarde aangepast aan de marges vanaf dat punt.
h1 {
string-set: doctitle content();
}
@page :right {
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 8pt;
}
}
Een bug in Chromium voor string-set en string() .
Kruisverwijzingen
Wanneer een document is afgedrukt, worden verwijzingen naar andere pagina's meestal aangegeven met het paginanummer waar de verwijzing te vinden is. Deze kruisverwijzingen kunnen worden gemaakt met behulp van target-counter . Wanneer dit wordt toegepast op een link, zorgt het ervoor dat de link naar de verwijzing op het web springt; bij het afdrukken wordt het paginanummer weergegeven.
<a class="xref" href="#ref1">my reference</a>
a.xref:after {
content: " (page " target-counter(attr(href, url), page) ")";
}
Chromium-bug voor kruisverwijzingen .
Voetnoten
Voetnoten zijn ook een kenmerk van de specificaties voor gepagineerde media. In HTML kun je een klasse gebruiken om tekst te identificeren die een voetnoot moet zijn, bijvoorbeeld:
<p>This is some text <span class=”fn”>this is a footnote</span>.</p>
Gebruik vervolgens de float -waarde voor footnote om deze tekst in voetnoten om te zetten. Deze wordt bij het afdrukken van het document uit de alinea verwijderd en als voetnoot weergegeven.
.fn {
float: footnote;
}