574 update to printing tools

[nguyen-katie]

TODO:

• Remove bug where there are empty last pages due to the text being longer than one line at some places or page break rules (already tried changing height of html).
• Query data for contributors does not exist on my personal database. Someone needs to check whether the contributors string in the footer correctly loads.
• @page CSS does not work on desktop of Firefox and Safari, meaning their prints won't have headers or footers.
• Location of paragraph translations in 'Syllabary Only' & 'Syllabary + WP' unclear in the mockup, so it is left out entirely. BUT the paragraph translation is still mentioned in the print legend according to the mockups.
• Image source query links do not redirect to a proper image source titles in the original document prints, so the url of the image was placed there instead. Not all urls are directed towards a proper website origin (see Story of Sequoyah).

CHANGES:

• Updated printing & document architecture to include an invisible print component in document.page.tsx that includes all the styles for printing the annotation, original document, and metadata across all syllabary settings.
• Segmentation dividers become messy and overlap when the paragraph ends at the first column, so page breaks were added after every word part, which creates a lot of white space in the print.

TASK DESCRIPTION:
For admin(s) and editor(s), the intended use is to be able to use printing tools that improve printing documents and create more accessible formats for users.

Link to design: https://design.penpot.app/#/workspace?team-id=458ded29-7ef8-80f7-8006-fbe6a1e610a7&file-id=20e128ff-6495-80ff-8007-1482f4bb12ef&page-id=59bdd06c-c4de-80fe-8007-41ba0f9fb169

[netlify]

✅ Deploy Preview for dailp ready!

Name	Link
🔨 Latest commit	75ea71a
🔍 Latest deploy log	https://app.netlify.com/projects/dailp/deploys/6a02caea888d1a000859076d
😎 Deploy Preview	https://deploy-preview-695--dailp.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[SonAndrea]

Printing from browsers such as Firefox works; however, when tested on Chromium based brewers (in my case Vivaldi), printing formatting is slightly off (see attached files). The most significant issue is that words are printing as one row instead of a grid layout. Additionally, I'm unsure if this is intended but the first page is completely blank when printing as a reader on Chromium vs an editor.

From research it seems to be a result of Chromium having its own special cases with printing features. Might have force a grid layout to ensure that printing format translates over chrome based browsers.

695-Printing_As_READER_On_Chromium_Based_Broswer_Vivaldi.pdf
695-Printing_As_Editor_On_Chromium_Based_Broswer_Vivaldi.pdf