Mastering the Print Page
Print page is important for many websites . This read through will show you an example of how to solve certain print page situations.
Summary
Every print page has a few characteristics in common:
- Remove excess experiences so that things print on one page or important info is preserved.
- Handle page breaks so that sections are printed cleanly.
- Print as landscape, portrait, or auto (auto allows users to customize).
- Turn off margins or set margins on the page so that the website prints as intended without user configuration. Aside from these elements items may need to grow as content is removed to fit to scale.
This page is organized in a way you might solve a print page situation. Instead of having large css classes, classes are reused and comments are added. Each section has a comment and solves a particular problem. Because the properties do not conflict with one another this method has become a good way to keep items like positioning and layout organized by grouping like classes together.
Contents
- Mastering Page Breaks
- Start sections that cannot fit on a new page when printing
- Control elements within a section
- Change default print layout settings:
- Set margins so that user does not need to change settings
- Hide elements from the print page
- Hide print elements for non-print view
- Fix layout:
- Reposition-items:
- inline items so they fit on one line:
- fix font size and line-height:
- Hide overflow on things that grow
- Change Height for elements after removing content
- Fix text
- Fix text table border lines
- Use mm instead of px for print page
- Prefer relative positioning over absolute positioning
- Further Reading
Mastering Page Breaks:
Start sections that cannot fit on a new page when printing
Specify to the browser:
Specific sections are grouped and not allow those sections to page break.
The result is that if a section cannot fit on the page it will start on the next page when printing.
/* Both page-break-inside and break-inside are used for backwards compatibility. /*
@media print {
.section {
page-break-inside: avoid;
break-inside: avoid;
}
}Control elements within a section
Control where child elements will group together
1) like a span we can put all elements on a single line using white-space:nowrap2) give child elements the ability to break using white-space: normal or white-space: break-spaces
.outer-element-group {
white-space: break-spaces;
}
.section-of-grouped-elements {
white-space: nowrap;
}
.items-inside-section-to-break {
white-space: normal;
}Mastering default print layout settings:
When a print page needs to be created it is usually a custom effort that is aimed at offering a tailored user experience. Therefore, you may have many print.css pages that need to work independant of one another.
Q: Is there a simple and good example of a specific section of css where this may occur?
There is a simple example of where this may occur: @page { size: landscape }; @page { size: portrait }; and @page { size: auto } are needed for different pages. If all of these print situations where added to multiple css files the last item would win. Likewise if you use bootstrap it sets print @page { size: portrait }; by default which eliminates the users ability to switch the screen to landscape in the settings. Unfortunately css variables are not supported in chrome for @page { size: var(--my-orientation) }; , the css variable will work the first time but if the root setting is changed with javascript it will not be updated when you navigate to the print page.
Q: How can we be sure that one print experience does not conflict with another print experience?
To only have print changes affect a single web view we can add and remove a css stylesheet in the html using javascript. This is done by adding an external css file with an id. When we want to remove the print page for the view query by id and remove the element.
const toggleView1PrintCalendar = (view, body) => {
if (view === 'situation') {
const div = document.createElement('div');
div.innerHTML = `<link id="toggle-print-view1" rel="stylesheet" href="${window.STATIC_URL}/css/print-view1.css"/>`;
const printLayout = div.children[0];
body.append(printLayout);
} else {
const printOrientation = document.getElementById('toggle-print-view1');
if (printOrientation) { printOrientation.remove(); }
}
};Change default print layout settings:
@media print {
@page {
size: landscape; /* auto, portrait */
}
}Set margins so that user does not need to change settings:
@media print {
@page {
margin: 0; /* set margins to none */
}
}Hide elements from the print page
One of the most common requests is to hide elements from the print page.
@media print {
/* begin "display none" items that do not belong on the print page */
.normal-elements {
display: none;
}
.outer-wrapper .close-tab {
display: none !important;
}
.card-class-session-count {
display: none;
}
.fc-title {
display: none;
}
/* end display none for normal elements */
}Hide print elements for non-print view
Sometimes it becomes necessary to add print specific items to the print page.
/* print elements should never show by default */
.print-elements {
display: none;
}
.print-element-top-right {
display: none;
}
.print-element-bottom-left {
display: none;
}
.qrCode1 {
display: none;
}
@media print {
.print-elements {
display: block;
}
/* begin position print elements that only show on print page. */
.print-element-top-right {
display: block;
position: fixed;
top: 5mm;
right: 5mm;
letter-spacing: 2px;
}
.print-element-bottom-left {
position: absolute;
line-height: 12px;
font-size: 10px;
bottom: 6mm;
left: 6mm;
}
.qrCode1 { /* position items of other elements to ensure printers respect the positioning */
position: relative;
bottom: -10px;
width: 54px;
height: 54px;
right: 40px;
}
}Fix layout:
@media print {
/* begin fix layout */
.fc-day-grid-event .fc-content {
margin: 0;
padding: 0;
}
.fc-day-grid-event.fc-event.class-session {
margin: 0;
padding: 0;
}
.card-class-session-title {
margin: 0;
padding: 0;
}
.card-class-session-trainer {
margin: 0;
padding: 0;
}
/* end fix layout */
}Reposition items:
@media print {
/* begin repositioning items */
.card-class-session-trainer {
display: inline;
/* position: absolute;
top: 0px;
right: 0px; */
}
.print-dash {
display: inline;
font-size: 8px;
/* position: absolute;
left: 65px;
top: 0px; */
}
.fc-day-grid-event .fc-time {
font-size: 8px;
font-weight: normal;
/* position: absolute;
right: 44px; */
}
.fc-day-grid-event.fc-event.class-session {
border: none;
min-height: 0px !important;
height: auto;
}
/* end positioning items */
}inline items so they fit on one line:
@media print {
/* begin move to one line with no border */
.card-class-session-section {
display: inline;
}
.print-inline {
display: inline;
}
.card-class-session-title {
display: inline;
}
.card-class-session-trainer {
display: inline;
}
/* end move to one line with no border */
}Fix font size and line-height:
@media print {
/* begin fix font size line-height and height */
.card-class-session-title {
font-size: 8px;
line-height: 8px;
height: 8px;
}
.fc-day-grid-event .fc-time {
font-size: 8px;
line-height: 10px;
height: 8px;
}
.card-class-session-count {
font-size: 8px;
line-height: 8px;
height: 8px;
}
.fc-event {
font-size: 8px;
/* line-height: 8px;
height: 8px; */
}
.card-class-session-trainer {
font-size: 8px;
/* line-height: 8px;
height: 8px; */
}
/* fix font size line-height and height */
}Hide overflow on things that grow
@media print {
/* begin overflow hidden logic */
.card-class-session-trainer {
text-overflow: clip;
overflow: hidden;
width: 44px;
}
.card-class-session-title {
text-overflow: clip;
width: 63px;
overflow: hidden;
}
/* end overflow hidden logic */
}Change height for elements after removing content
@media print {
/* begin change height for elements */
.fc table {
height: 60px !important
}
/* begin change height for elements */
}Fix text
@media print {
/* begin fix text */
a:not(.btn) {
text-decoration: none;
}
/* end fix text */
}Fix text table border lines
@media print {
/* end fix table border lines */
.fc th, .fc td {
border-width: 2px;
}
/* end fix table border lines */
}Use mm instead of px for print page.
Often printers respect millimeters (mm) but have their own device specific understanding of pixels (px)
Working on a print page can be a fun endeavor!
Hopefully this post can serve as a good reference manual for you.
Bonus Section
Print from your terminal on a mac or linux using the following command:
echo "hello world" | lp
Further Reading
The JBS Quick Launch Lab
Free Qualified Assessment
Quantify what it will take to implement your next big idea!
Our assessment session will deliver tangible timelines, costs, high-level requirements, and recommend architectures that will work best. Let JBS prove to you and your team why over 24 years of experience matters.
