Improve UX for Printing Pages From A Starlight Website

[ChildishhAlbino]

What version of starlight are you using?

0.21.5

What is your idea?

I want to be able to print pages - either physical paper or as PDFs to share with people of notes I use in a Starlight website. It is a better rendering tool than Obsidian which is the basis of my sites.

I believe two key changes need to be made to address this:

1. Remove the Navigation header from the print media view - I believe this is possible with a media query.
   • Ensure the content takes up the entirety of the page with the navigation removed as well.
2. Force light mode colours OR black-text on white background for print view only. This is so the output has high enough contrast without the user having to manually switch to light mode if that is not their preference.

What currently happens when I attempt to print a Starlight website

Why is this feature necessary?

1. Starlight is a powerful tool for sharing documentation - but it is useful to be able to print these out for non-technical uses of Starlight i.e. a DND campaign management website

Do you have examples of this feature in other projects?

No response

Participation

• I am willing to submit a pull request for this feature.

[HiDeoo]

Sharing some references here:

• This discussion contains a print stylesheet that anyone can use with custom CSS and a media query to target print.
• Some work on including such stylesheet in Starlight was done but blocked as failing to figure out a way to include them in a way that they're never downloaded until needed in all browsers.

[ChildishhAlbino]

Cheers for that, I'll explore that option.

It would be cool to have this built in but understand that might be blocked.

What's the issue with downloading a little extra css if it's only use when the print view executes? I might be being naive with that POV but I can't imagine thst css is a massive addition to the css bundle being downloaded the rest of a starlight site?

[HiDeoo]

I may need to do a bit research and find the original issue but if I remember correctly they were at least 2 specific issues:

• Browser download even if unneeded (altho now they may automatically get a priority set to lowest, but would need to double check that by actually testing it)
• The fact that the stylesheet was under Vite’s inline assets limit and even when using ?url, the CSS was inlined in all HTML files

[delucis]

Thanks for the suggestion @ChildishhAlbino and for the helpful information @HiDeoo! I think we can close this as a duplicate of #1160 to keep upvotes etc. focused there.