Gepubliceerd: 30 oktober 2024
Vanaf Chrome 131 kun je CSS gebruiken om inhoud toe te voegen aan de marges van pagina's wanneer deze worden afgedrukt. In dit bericht wordt het paginamodel voor gepagineerde media uitgelegd en hoe u deze functie kunt gebruiken om de afdrukuitvoer van uw webpagina's te verbeteren.
CSS bevat specificaties die betrekking hebben op gepagineerde media, de CSS Paged Media Module en CSS Generated Content for Paged Media . Ze definiëren functies die alleen worden gebruikt wanneer een pagina wordt afgedrukt (ook naar PDF). Er zijn user-agents die deze CSS ondersteunen, waarmee u boeken en ander gedrukt materiaal kunt genereren uit HTML en CSS. Deze functionaliteit wordt echter nooit goed ondersteund in webbrowsers, ondanks het feit dat we vrij vaak PDF's moeten afdrukken of maken vanuit applicaties.
Chrome en Firefox ondersteunen de @page at-regel. Met deze regel kunt u het formaat definiëren van de pagina waarop u afdrukt, en het formaat van de marges rond de inhoud. Vanaf Chrome 131 kun je gegenereerde content ook gebruiken om content aan de marges toe te voegen, door de relevante marge-at-regel te targeten.
Het paginamodel
Het paginamodel dat wordt gebruikt in gepagineerde media definieert een paginavak , dit is uw vel papier. In het paginavak bevindt zich een paginamarge , een paginarand , paginaopvulling en ten slotte het paginagebied waar uw inhoud wordt weergegeven. Wanneer inhoud wordt afgedrukt, wordt deze gefragmenteerd in zoveel pagina's als nodig is om de inhoud te bevatten.
De paginamarge wordt vervolgens opgesplitst in 16 vakken, waarbij elk vak een overeenkomstige at-regel heeft.
-
@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 margedoos
De hoogte van de bovenste en onderste vakken en de breedte van de linker- en rechterzijvakken worden bepaald door de margegrootte die is ingesteld met @page . De hoekvakken hebben dus een vaste maat gecreëerd door het snijpunt van die marges. De drie vakken tussen elke hoek zijn echter flexibel. Ze gedragen zich op dezelfde manier als vakken in een flex-indeling met behulp van flex: auto , dus ze strekken zich uit om de ruimte te vullen, maar als je een lange reeks tekst in de ene plaatst en niets in de andere, zal degene met de tekst groter worden. in plaats van de tekst om te laten lopen.
Voeg inhoud toe aan margevakken
Om inhoud aan margevakken toe te voegen, gebruikt u door CSS gegenereerde inhoud, net zoals u zou doen met de ::before en ::after pseudo-elementen. Gebruik in dit geval de at-regel die betrekking heeft op de box die u wilt targeten. De volgende CSS voegt de tekst 'Mijn boek' toe aan het margevak linksonder of aan de rechterpagina's. Het stijlt ook die tekst.
@page :right {
@bottom-left {
content: "My book";
font-size: 9pt;
color: #333;
}
}
Naast tekstreeksen kunt u paginatellers aan de marges toevoegen. De vooraf gedefinieerde page bevat de huidige pagina. De volgende CSS voegt het toe aan de rechteronderzijde van de rechterpagina's en de linkeronderzijde van de linkerpagina's.
@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 bevat.
Waar u op moet letten bij het gebruik van paginamarges
Als u afdrukt vanuit een browser, voegt de browser automatisch wat paginamarge-inhoud toe als er ruimte is om deze weer te geven. Dit gebeurt zelfs als u inhoud heeft toegevoegd. Deze automatisch gegenereerde kop- en voetteksten kunnen worden uitgeschakeld in het afdrukdialoogvenster.
Als u de marges op een pagina instelt op 0, of op een waarde die zo klein is dat er geen ruimte is voor de kop- en voetteksten van de browser, worden deze niet weergegeven.
Vanwege het concept van een standaardpagina-indeling in Chromium , als de eerste pagina van uw afgedrukte document geen ruimte heeft voor de automatische inhoud, wordt voorkomen dat de browserinhoud op latere pagina's wordt weergegeven, zelfs als er wel ruimte is.
Toekomstige mogelijkheden voor gepagineerde media
De specificaties voor gepagineerde media omvatten verschillende andere functies, die worden beschreven in het artikel Ontwerpen voor afdrukken met CSS . Als u een gebruiksscenario heeft voor een van de volgende functies, voeg deze dan toe aan de gekoppelde bugs.
Snaren instellen
Bij boeken wordt vaak de huidige hoofdstuktitel in de marge afgedrukt. Deze titel kan niet hardgecodeerd worden in uw CSS, aangezien deze verandert naarmate u door het boek bladert. Met de eigenschap string-set kunt u een waarde uit uw HTML instellen die u vervolgens in de gegenereerde inhoud kunt gebruiken. De volgende CSS gaat ervan uit dat hoofdstuktitels zijn gemarkeerd als <h1> . Het neemt de inhoud van elke <h1> en gebruikt deze in de rechterbovenmarge op rechterpagina's. Wanneer de volgende <h1> wordt bereikt, wordt de waarde bijgewerkt voor de marges na dat punt.
h1 {
string-set: doctitle content();
}
@page :right {
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 8pt;
}
}
Chromium-bug voor string-set en string() .
Kruisverwijzingen
Nadat een document is afgedrukt, worden verwijzingen naar andere pagina's meestal aangegeven met behulp van het paginanummer waar de verwijzing te vinden is. Deze kruisverwijzingen kunnen worden gemaakt met behulp van target-counter . Wanneer toegepast op een link, springt de link naar de referentie op internet; bij 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. Gebruik in HTML een klasse om tekst te identificeren die een voetnoot zou moeten zijn, bijvoorbeeld:
<p>This is some text <span class=”fn”>this is a footnote</span>.</p>
Gebruik vervolgens de footnote van float om deze tekst in voetnoten om te zetten. Het wordt uit de alinea verwijderd wanneer het document wordt afgedrukt en als voetnoot wordt weergegeven.
.fn {
float: footnote;
}