PrintPage

Purpose

One printed page, or one part of a document that prints as such: a section that starts on a fresh sheet or refuses to be cut, with what only the screen shows and what only the paper shows. The rules of the paper itself are in styles/print.css, which this frame and ReportDocument share.

When to use, when not

Use it inside a document the product hands over, for a part with print needs of its own: a chapter, a figure with its caption, a table that must hold. Use ReportDocument for the document as a whole, with its cover and its table of contents. A page that is not a document has no print promise and takes neither.

Anatomy

1. The element, section by default, named by its heading.
2. The screen-only slot.
3. The paper-only slot.
4. The content.

Props

Props of PrintPage

Name	Type	Default	What it does
as?	'section' | 'article' | 'div'	'section'	The element: a `section` named by its heading, an `article`, or a plain `div`.
labelledBy?	string | undefined		The id of the heading that names the section.
breakBefore?	boolean	false	Starts on a new sheet.
keep?	boolean	false	Refuses to be split across two sheets: a figure with its caption, a short table.
class?	string	''	Layout classes only.
screen?	Snippet		What only the screen shows: an action, a notice, a status region.
paper?	Snippet		What only the paper shows: a running title, a note for the reader of the printed copy.
children	Snippet		The content, shown on both.

States

A part that starts a sheet with both slots, a kept block, and a plain section.

kept

A block that refuses to be split: a short table with its heading.

Light

Les pages de l'échantillon

Trois pages, dont deux non conformes. Le tableau et son titre restent sur la même feuille.

Dark

Les pages de l'échantillon

Trois pages, dont deux non conformes. Le tableau et son titre restent sur la même feuille.

320 px, light

Les pages de l'échantillon

Trois pages, dont deux non conformes. Le tableau et son titre restent sur la même feuille.

320 px, dark

Les pages de l'échantillon

Trois pages, dont deux non conformes. Le tableau et son titre restent sur la même feuille.

216 px, light

Les pages de l'échantillon

Trois pages, dont deux non conformes. Le tableau et son titre restent sur la même feuille.

Forced colours, captured

part

A part of a document that starts on a new sheet, with a screen-only action and a paper-only note.

Light

Imprimer cette partie

Rapport d'audit, Boutique GreenShop, partie 2.

Description des erreurs

Chaque thématique est introduite par ce qu'elle exige, puis par les critères non conformes relevés.

Dark

Imprimer cette partie

Rapport d'audit, Boutique GreenShop, partie 2.

Description des erreurs

Chaque thématique est introduite par ce qu'elle exige, puis par les critères non conformes relevés.

320 px, light

Imprimer cette partie

Rapport d'audit, Boutique GreenShop, partie 2.

Description des erreurs

Chaque thématique est introduite par ce qu'elle exige, puis par les critères non conformes relevés.

320 px, dark

Imprimer cette partie

Rapport d'audit, Boutique GreenShop, partie 2.

Description des erreurs

Chaque thématique est introduite par ce qu'elle exige, puis par les critères non conformes relevés.

216 px, light

Imprimer cette partie

Rapport d'audit, Boutique GreenShop, partie 2.

Description des erreurs

Chaque thématique est introduite par ce qu'elle exige, puis par les critères non conformes relevés.

Forced colours, captured

plain

A section with nothing particular: the frame marks it and print.css keeps its headings with their text.

Light

Conclusion

Les corrections se hiérarchisent selon trois axes.

Dark

Conclusion

Les corrections se hiérarchisent selon trois axes.

320 px, light

Conclusion

Les corrections se hiérarchisent selon trois axes.

320 px, dark

Conclusion

Les corrections se hiérarchisent selon trois axes.

216 px, light

Conclusion

Les corrections se hiérarchisent selon trois axes.

Forced colours, captured

Accessibility contract

• Role and name: a section named by labelledBy; an article or a div when asked.
• Keyboard, focus: the content’s own.
• Live regions: none. A status region for the screen goes in the screen slot, so it is not printed.
• The content order is the same on screen and on paper; only the two slots differ.

Content rules

French. The paper slot carries what a printed copy needs and a screen does not: a running title, a mention of the source.

Do and don’t

• Do load @rgaa-dev/design/print.css after base.css on a surface that prints a document; without it the frame marks and nothing breaks.
• Do mark a part with breakBefore rather than writing a page break in the page’s own style.
• Do not put the print action in the content; it goes in screen.

Examples

<PrintPage breakBefore labelledBy="errors-heading">
	{#snippet screen()}<Button variant="secondary" onclick={() => window.print()}>Imprimer</Button>{/snippet}
	<Heading level={2} size="xl" id="errors-heading">Description des erreurs</Heading>
	...
</PrintPage>

Surfaces

• App: the parts of the report and of the declaration preview.
• Design site: the print pattern.

Related

ReportDocument, Heading, Table.

Decisions

• 2026-09-26: the page rules moved out of ReportDocument’s style into styles/print.css, so two frames and a page share one sheet; the component keeps only the visibility of its two slots, which works without the sheet.

Criteria held by construction

• 12.6, Les zones de regroupement de contenus présentes dans plusieurs pages web (zones d'en-tête, de navigation principale, de contenu principal, de pied de page et de moteur de recherche) peuvent-elles être atteintes ou évitées ?
  A section named by its heading through aria-labelledby, so the part is a landmark on screen as it is a sheet on paper.
• 10.1, Dans le site web, des feuilles de styles sont-elles utilisées pour contrôler la présentation de l'information ?
  The page marks what the paper shows and what the screen shows; the presentation is in the sheet, never inline, and the content order is the same on both.

Tokens it reads

None of its own: the component draws with the base layer alone.

Seen in patterns

• Print
• Report document