Proposal: Add `preparePrint()` to land all the resources needed by print
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 9.4k
- Forks
- 3.2k
- PR merge metrics
- PR metrics pending
Description
What is the issue with the HTML Standard?
There are cases that page starts to load resources while printing.
For instance,
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: Avenir-Regular;
src: url("./resource/Avenir-Regular.woff2") format("woff2");
}
@media print {
body {
font-family: Avenir-Regular;
}
}
</style>
<script>
function triggerPrint() {
window.print();
}
</script>
</head>
<body onClick="triggerPrint()">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum urna ac nibh pellentesque
vestibulum.
</p>
</body>
</html>
The CSS body{ font-family: Avenir-Regular; } is specific to the print mode. When printing the page, if the font Avenir-Regular has not loaded yet, the user agent would try to fetch it while printing.
However, according to the definition of printing steps:
the user agent must pause while the method is waiting
So the font resource won't load until the user agent is recovered. This could cause unexpected printing results, like blank text or text in a fallback font, etc.
To resolve this problem, we propose to provide an interface, Promise<undefined> preparePrint(), which loads all the needed resources in print mode, and returns a promise. Solve the promise when all the resources are loaded. So the web authors are easy to know when the page is ready to print:
window.preparePrint().then(() => {
window.print();
});
For more details, please see the explainer.
cc @schenney-chromium
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the HTML Standard's printing steps and compare them with the proposed window.preparePrint() and window.print() flow. Read the linked prepare-print-interface explainer for the proposed behavior and unresolved details. Done means the interface and its interaction with printing and resource loading are resolved in the standard.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html
- Domain
- api, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100