Default Print Stylesheet

printstyles.css

/**
 * Default Print Stylesheet
 * Custom Classnames:
 *   noprint - Place on any element that should be excluded from print
 *   noprintlink - Place on A tag if you don't want the URL link displayed.
 *                 Or on ABBR tag if you don't want the Title attribute displayed.
 *
 * Resources:
 *    https://www.smashingmagazine.com/2018/05/print-stylesheets-in-2018/
 *    https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/
 *    https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/
 *
 * @author          Peter Klein <pmk@io.dk>
 * @version         0.1
 * @lastmodified    15.06.2018
 */

@media screen {
    .printonly {
        display: none;
    }

}
@media print {

    /* Defining CSS variables */
    :root {
        --print-text-color: #000; /* Default text color for print */
        --print-page-url: "www.example.com";
    }

    /* Adding messages before and after page output */
    :root:before {
        position: relative;
        display: inline-block;
        left: 50%;
        transform: translateX(-50%);
        content: "All Rights Reserved. (c) 2018 Example.com";
    }
    :root:after {
        position: relative;
        display: inline-block;
        left: 50%;
        transform: translateX(-50%);
        content: "Thank you for printing our article. We hope that some of our other articles can catch your eye as well";
    }

    /* Page Setup */
    @page {
        size: A4 portrait; /* Have no effect in Firefox */
        margin: 1cm 1cm 1cm 2cm;
        orphans: 4;
        widows: 3;

        @top-right {
            content: "Test @Page Content"; /* Not supported in any browsers yet. Only supported in PrinceXML */
        }
    }
    /* The pseudo selectors: first, left and right doesn't have any effect in Firefox */
    @page :first {
        xmargin-top: 10cm;    /* Top margin on first page 10cm */
    }
    @page :left { }
    @page :right { }

    /*
      Approximate Conversion from Points to Pixels
      https://reeddesign.co.uk/test/points-pixels.html
    */

    /* Set defaults for body */
    body {
        font: 12pt Georgia, "Times New Roman", Times, serif;
        line-height: 1.3;
        background: #fff !important;
        color: var(--print-text-color);
        margin: 0;
        padding: 0;
    }

    /* Clone border, margin and padding if element spans multiple pages */
    /* Currently only works correctly in Firefox */
    * {
        box-decoration-break: clone;
    }

    /* Prevent displaying single lines of text on page */

    /* Moved to @page def */
/*    p {
        orphans: 6;
        widows: 6;
    }*/


    /* Make articles and sections start on new page */
    article, section {
        break-before: always;
        page-break-before: always; /* CSS2 */
    }

    /* Dont break up these tags onto multiple pages */
    a {
        break-inside: avoid;
        page-break-inside: avoid; /* CSS2 */
    }
    blockquote, abbr {
        break-inside: avoid;
        page-break-inside: avoid; /* CSS2 */
    }
    table, figure, pre {
        break-inside: avoid;
        page-break-inside: avoid; /* CSS2 */
    }
    h1, h2, h3, h4, h5, h6 {
        break-inside: avoid;
        page-break-inside: avoid; /* CSS2 */
        break-after: avoid;
        page-break-after: avoid; /* CSS2 */
    }
    img {
        break-inside: avoid;
        page-break-inside: avoid; /* CSS2 */
        break-after: avoid;
        page-break-after: avoid;  /* CSS2 */
    }
    ul, ol, dl  {
        break-after: avoid;
        page-break-after: avoid;  /* CSS2 */
    }

    /* Prevent images from bleeding off the page */
    img {
        max-width: 100% !important;
    }

    /* Set whitespace for pre and code tags */
    pre>code,pre[class]>code {
        white-space: normal !important;
    }

    /* Remove A tag underlining */
    a[href^="http"]:not([href*="example.com"]) {
        color: var(--text-color);
        font-weight: bolder;
        text-decoration: none !important;
        word-wrap: break-word;
        white-space: wrap;
    }

    /* Display source/cite for BLOCKQUOTE and Q tags */
    q[cite]:not(.noprintcontent):after,
    blockquote[cite]:not(.noprintcontent):after {
        content: " (Source: " attr(cite) ")";
        word-wrap: break-word;
        font-style: italic;
        white-space: wrap;
    }

    /* Display title for ABBR tag */
    abbr[title]:not(.noprintcontent):after {
        content: " (" attr(title) ")";
        word-wrap: break-word;
        font-style: italic;
        white-space: wrap;
    }

    /* Display URL link for A tag */
    a[href^="http"]:not([href*="example.com"]):not(.noprintcontent):after {
        content:" (➔ " attr(href) ")";
        word-wrap: break-word;
        font-style: italic;
        font-size: 90%;
        font-weight: normal;
        white-space: wrap;
    }

    /* NOT WORKING - CSS4 Selectors */
    /* Don't display URl if the A tag is wrapped around an IMG tag - CSS4 */
    !a[href^="http"]:not([href*="example.com"]):after > img {
        content: "NOT WORKING";
    }
    $a[href^="http"]:not([href*="example.com"]):after > img {
        content: "NOT WORKING2";
    }
    a[href^="http"]:has(> img):not([href*="example.com"]):after {
        content: "NOT WORKING3";
    }


    /* Elements that should always be hidden on print */
    header nav, footer nav,
    /* Class for elements that should not be printed */
    .noprint {
        display: none;
    }

    /* Class for elements that should not be visible on print */
    .printonly {
        display: block;
    }

}