Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨(courses) Added new CSS stylesheet dedicated to print for course details #1853

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

sveetch
Copy link
Collaborator

@sveetch sveetch commented Dec 9, 2022

Purpose

Courses details should be exportable as PDF.

Proposal

This pull request implement a new CSS stylesheet dedicated to print media type, it means it almost restart from zero a basic layout optimized for printing. This way has been choosen over the "additional print override" (using @media rule) because overriding is very complicated to manage against the tons of layout styles, it would mean to rewrite almost everything to neutralize the "screen" media stylesheet.

Print optimization

Print optimization is essentially about readability and space saving. The layout is almost fully "black on white", because site theme colors are really accurate with the theme background and backgrounds are disabled by default from every browser (to economize printers ink).

Content break management

Also with printing there is an important behavior to manage: content break between pages because browser will split an image or a paragraph on two pages if they do not fit in the same page when it reach its end of space. So we need to add some rules to avoid breaking some content and instead prefers to push it to another page. This is not perfect, because it can lead some time to some empty space on pages because a content can not stand in when it is too long to fit, but in the end it is the safest one for readability.

Conclusion

Finally an user that would want to export a course detail to a PDF will just have to use the print method and choose the "export to file" method.

Here is a sample from a demo course page printed to PDF file using the default browser (Firefox, but Chrome is similar) print options (default margin, no background and with page context header and footer):

Cross-platform_scalable_migration.print-only.without-background.pdf

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant