Good PDF Printing CSS Style

good-pdf-printing-css

@media print {

    /* ---------- wrap long code lines ---------- */
    pre,
    /* standalone code blocks            */
    code,
    /* inline snippets <code>like this</code> */
    pre code {
        /* <pre><code> … </code></pre> combos   */
        white-space: pre-wrap !important;
        /* keep indentation but allow wrapping */
        /* 1 */
        overflow-wrap: anywhere !important;
        /* force-break very long tokens        */
        /* 2 */
        word-break: break-word;
        /* legacy fallback for older browsers  */
        /* 3 */
    }

    /* 1. Keep the heading itself from splitting across pages */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        page-break-inside: avoid;
        /* legacy fallback */
        /* 1 */
        break-inside: avoid;
        /* modern spec */
        /* 2 */
    }

    /* 2. Pseudo-element reserve: force header + content to move together */
    h1::after,
    h2::after,
    h3::after,
    h4::after,
    h5::after,
    h6::after {
        content: "";
        /* create an extra block */
        display: block;
        /* occupy full width */
        height: 2em;
        /* reserve ~2 lines of vertical space */
        margin-bottom: -2em;
        /* pull the flow back up */
    }

    /* 3. (Optional) Avoid breaking other key blocks mid-content */
    img,
    p:has(> img),
    figure:has(> img) {
        break-inside: avoid;
        /* modern spec */
        /* 4 */
        page-break-inside: avoid;
        /* Firefox fallback */
        /* 5 */
    }

    h1::before {
        content: "→ ";
        /* single-stroke arrow */
        display: inline;
        font-size: 1.5em;
    }
    h2::before {
        /* double-stroke arrow */
        content: "⇒ ";
        display: inline;
        font-size: 1.5em;
    }
    h3::before {
        /* triple-stroke arrow */
        content: "⇛ ";
        display: inline;
        font-size: 1.5em;
    }
    p {
        text-align: justify;
    }
}

Can be set globally with extension: "Stylus"

Complements extension: "Print Edit WE"