MediaWiki:Print.css: Difference between revisions

Revision as of 19:09, 19 June 2025

/* MediaWiki:Print.css */

@media print {
    /* --- General Print Cleanup --- */
    /* Remove navigation, sidebars, and other elements not needed for print */
    #mw-navigation, #mw-panel, #p-cactions, #p-personal, #p-views,
    #p-navigation, #p-search, #siteSub, #footer, #catlinks,
    .noprint, .editsection, .mw-indicators, .printfooter,
    #privacy, #about, #disclaimer, #toc {
        display: none !important;
    }

    /* Adjust page margins for better print layout */
    body {
        margin: 1.5cm; /* Roughly 0.6 inches on all sides */
        font-family: sans-serif; /* Use a common sans-serif font for readability if 'Century Schoolbook' isn't available */
        font-size: 9pt !important; /* A good default base font size for print, adjust as needed */
        line-height: 1.3 !important; /* Slightly tighter line height for compactness */
    }

    /* --- Header Sizing --- */
    /* Main page title (h1) */
    h1#firstHeading, #content h1 {
        font-size: 18pt !important;
        margin-top: 1em !important;
        margin-bottom: 0.7em !important;
        line-height: 1.2em !important;
        text-align: center;
        page-break-after: avoid; /* Keep heading with content below */
        page-break-before: auto; /* Allow a break here if it's the very first content on a page */
    }

    /* Section headings from `== Heading ==` (render as h2) */
    h2 {
        font-size: 14pt !important;
        margin-top: 1.2em !important;
        margin-bottom: 0.6em !important;
        line-height: 1.2em !important;
        text-align: center;
        page-break-after: avoid; /* Keep heading with content below */
        /* --- Ensures H2 starts on a new page if it's near the bottom --- */
        page-break-before: auto; /* Allow break, but will prefer to start on a new page if previous content ends close to it */
    }

    /* Subsection headings from `=== Subheading ===` (render as h3) */
    h3 {
        font-size: 12pt !important;
        margin-top: 1em !important;
        margin-bottom: 0.5em !important;
        line-height: 1.2em !important;
        page-break-after: avoid; /* Keep heading with content below */
        /* --- Crucial for NPC sections: forces new page if content below doesn't fit --- */
        page-break-before: always !important; /* Force a new page before this h3 for better grouping */
    }

    /* Smaller headings (h4, h5, h6) */
    h4, h5, h6 {
        font-size: 10pt !important;
        margin-top: 0.8em !important;
        margin-bottom: 0.4em !important;
        line-height: 1.2em !important;
        page-break-after: avoid; /* Keep heading with content below */
        page-break-before: avoid; /* Avoid breaking directly before these smaller headings */
    }

    /* Specific styling for the 'The Setting and Scene' block h2, if needed */
    .mw-parser-output div[style*="text-align: center;"] h2 {
        font-size: 16pt !important; /* Adjust if you want this specific h2 to be different */
    }

    /* --- Body Text & List Item Styling --- */
    /* Ensure all common text blocks and list items use the smaller base font size */
    p, ul, ol, dl, pre, blockquote, table, li, td, th {
        font-size: 9pt !important; /* Match body font size */
        line-height: 1.4 !important; /* Keep readability */
        margin-top: 0.3em !important; /* Tighter spacing between elements */
        margin-bottom: 0.3em !important; /* Tighter spacing between elements */
        /* --- Crucial for preventing individual blocks from splitting --- */
        page-break-inside: avoid !important;
        page-break-before: avoid !important; /* Avoid starting a block right after a break if it leaves too little room */
        page-break-after: auto !important; /* Allow break after the element, but prefer keeping content with the next */
    }
    
    /* Ensure content inside definition lists also gets proper spacing */
    dd {
        margin-left: 1.5em !important; /* Standard indent for definition descriptions */
        font-size: 9pt !important; /* Ensure consistency */
        page-break-inside: avoid !important; /* Prevent description from breaking */
        page-break-before: avoid !important;
    }
    dt {
        font-weight: bold !important;
        font-size: 9pt !important; /* Ensure consistency */
        page-break-inside: avoid !important; /* Prevent term from breaking */
        page-break-after: avoid !important; /* Keep term with its description */
    }

    /* --- Image & Thumbnail Styling (with stronger page-break avoidance) --- */
    img {
        max-width: 95% !important; /* Ensure images don't stretch too wide */
        height: auto !important;
        display: block;
        margin: 0.8em auto !important; /* Center images with some vertical spacing */
        /* --- Crucial: Ensure images themselves do not break --- */
        page-break-inside: avoid !important;
        page-break-before: avoid !important; /* Avoid break before an image */
        page-break-after: avoid !important; /* Avoid break immediately after an image */
    }

    .thumb {
        float: none !important; /* Remove float for simpler print layout */
        margin: 0.8em auto !important; /* Center the thumbnail container */
        max-width: 200px !important; /* Adjust this to control thumbnail width */
        border: 1px solid #ccc;
        padding: 3px !important; /* Slightly less padding */
        background-color: #f9f9f9;
        box-sizing: border-box;
        /* --- Crucial: Prevent the entire thumbnail block from splitting --- */
        page-break-inside: avoid !important;
        page-break-before: avoid !important; /* Avoid break before thumbnail container */
        page-break-after: avoid !important; /* Avoid break immediately after thumbnail container */
    }

    .thumbinner {
        padding: 2px !important; /* Slightly less inner padding */
        border: none !important;
        background-color: transparent !important;
    }

    .thumbimage {
        max-width: 100% !important;
        height: auto !important;
        display: block;
        border: none !important;
        page-break-inside: avoid !important; /* Redundant but safe for image within thumb */
    }

    .thumbcaption {
        font-size: 8pt !important; /* Smaller font for caption */
        line-height: 1.2em !important;
        padding: 2px 0 !important;
        text-align: left !important;
        overflow: hidden !important;
        page-break-inside: avoid !important; /* Prevent caption from splitting */
    }

    /* --- NPC Section specific handling (Focus on preventing splits) --- */
    /* This rule specifically targets the `<h3>` for "Key NPCs" to ensure it starts on a new page.
       This is the most aggressive way to ensure an entire NPC section isn't broken across pages. */
    h3 {
        page-break-before: always !important; /* Force new page before any h3 (like "Key NPCs") */
        /* The other h3 styles are already defined above and will be applied */
    }

    /*
        IDEAL SOLUTION (if you can edit individual NPC pages):
        If you can wrap each NPC's content (image + text) on its own page
        with a custom div, e.g., <div class="npc-profile">...</div>,
        then this rule would ensure each complete NPC profile stays together:
    */
    /*
    .npc-profile {
        page-break-inside: avoid !important;
        page-break-before: auto !important; /* Allow new page only if needed */
        page-break-after: auto !important;
    }
    */

    /* --- Column Layout Adjustments (Reverted to single column, as requested) --- */
    .module, .div-col {
        column-count: 1 !important; /* Force single column for print readability */
        column-width: auto !important;
        column-rule: none !important;
        /* Ensure these elements don't create unwanted column structures or breaks */
        -webkit-column-span: none !important;
        column-span: none !important;
        page-break-inside: avoid !important; /* Keep entire module/div-col from breaking across pages */
    }
    .div-col li, .div-col dd, .div-col p {
        page-break-inside: avoid !important; /* Keep content within div-col from breaking */
    }
}