Each example is independently scoped. Open print preview to see its numbered markers and destination list.
Default, scoped to a block
The default heading and source label are retained. Only
target is needed to scope this instance to
its containing demo block.
<div id="default-example">
<p>
Read the
<a href="https://alistapart.com/article/improvingprint/">
original article
</a>.
</p>
<blockquote cite="https://www.w3.org/TR/css-page-3/">
Paged media has different presentation needs.
</blockquote>
<print-link-list target="#default-example">
</print-link-list>
</div>Read the original article and explore the CSS Paged Media specification.
Paged media has different presentation needs than a continuous screen canvas.
Localized labels
Translate both the list heading and the label before citation superscripts.
<div id="localized-example" lang="es">
<q cite="https://www.w3.org/WAI/fundamentals/accessibility-intro/">
La Web está diseñada fundamentalmente para todas las personas.
</q>
<print-link-list
target="#localized-example"
heading="Referencias"
label-source="Fuente"
></print-link-list>
</div>
La Web está diseñada fundamentalmente para
todas las personas
.
Consulta la introducción a la accesibilidad web.
Filtering and useful destinations
Repeated destinations share a number. Fragment links and opted-out subtrees are ignored, while useful email, telephone, and download destinations are included.
<div id="filtered-example">
<a href="mailto:hello@example.com?subject=Demo">
Email the team
</a>
<a href="tel:+15551234567">Call support</a>
<a href="./sample.pdf" download>Download the sample</a>
<a href="#local">Jump locally</a>
<nav data-print-link-list-ignore>
<a href="https://example.com/account">Account</a>
</nav>
<print-link-list
target="#filtered-example"
heading="Contact and downloads"
></print-link-list>
</div>Email the team, call support, or download the sample.
visible@example.com already communicates its destination, and this local fragment does not help in print.
Dynamic content and print styling
The target is observed for changes. This instance also customizes marker sizing and shadow parts for print.
<style>
#dynamic-example {
--print-link-list-marker-font-size: 0.85em;
}
.styled-list {
--print-link-list-margin: 1rem;
}
.styled-list::part(heading) {
font-family: ui-serif, Georgia, serif;
}
</style>
<div id="dynamic-example">
<div class="dynamic-content">…</div>
<print-link-list
class="styled-list"
target="#dynamic-example"
heading="Further reading"
></print-link-list>
</div>