Mastering the Print Page

• 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

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(); }
  }
};

@media print {
    @page {
        margin: 0; /* set margins to none */
    }
}

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;
  }
}

@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 */
}

@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 */
}

@media print {
    /* begin change height for elements */
    .fc table {
        height: 60px !important
    }
    /* begin change height for elements */
}

@media print {
    /* end fix table border lines */
    .fc th, .fc td {
        border-width: 2px;
    }
    /* end fix table border lines */
 }

Print from your terminal on a mac or linux using the following command:

echo "hello world" | lp