MediaWiki:Print.css: Difference between revisions

Revision as of 19:02, 19 June 2025

/* MediaWiki:Print.css */

@media print {
    /* --- General Print Cleanup --- */
    #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;
        font-family: sans-serif;
        font-size: 9pt !important;
        line-height: 1.3 !important;
    }

    /* --- Header Sizing --- */
    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;
        /* Ensure main title spans all columns */
        -webkit-column-span: all !important;
        column-span: all !important;
        /* Force a page break before the main title for consistency */
        page-break-before: always;
    }

    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;
        /* Ensure H2 headings span all columns */
        -webkit-column-span: all !important;
        column-span: all !important;
        /* Try to start a new column or page if appropriate */
        break-before: column; /* Or 'page' if you want each section on a new page */
        -webkit-break-before: column;
    }

    h3 {
        font-size: 12pt !important;
        margin-top: 1em !important;
        margin-bottom: 0.5em !important;
        line-height: 1.2em !important;
        page-break-after: avoid;
        /* Hint to break before h3 for better section flow in columns */
        break-before: column; /* Try to start h3 at the top of a column */
        -webkit-break-before: column;
        /* Ensure h3 itself doesn't break across columns */
        -webkit-column-break-inside: avoid;
        break-inside: avoid;
    }

    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;
        /* Ensure these don't break across columns */
        -webkit-column-break-inside: avoid;
        break-inside: avoid;
    }

    .mw-parser-output div[style*="text-align: center;"] h2 {
        font-size: 16pt !important;
    }

    /* --- Body Text & List Item Styling --- */
    p, ul, ol, dl, pre, blockquote, table, li, td, th {
        font-size: 9pt !important;
        line-height: 1.4 !important;
        margin-top: 0.3em !important;
        margin-bottom: 0.3em !important;
        page-break-inside: avoid;
        /* Ensure these don't break across columns */
        -webkit-column-break-inside: avoid;
        break-inside: avoid;
    }
    
    dd {
        margin-left: 1.5em !important;
        font-size: 9pt !important;
    }
    dt {
        font-weight: bold !important;
        font-size: 9pt !important;
    }

    /* --- Image & Thumbnail Styling --- */
    img {
        max-width: 95% !important;
        height: auto !important;
        display: block;
        margin: 0.8em auto !important;
        page-break-inside: avoid;
        /* Ensure images don't break across columns */
        -webkit-column-break-inside: avoid;
        break-inside: avoid;
    }

    .thumb {
        float: none !important; /* Keep floating off for simpler print columns */
        margin: 0.8em auto !important;
        max-width: 200px !important;
        border: 1px solid #ccc;
        padding: 3px !important;
        background-color: #f9f9f9;
        box-sizing: border-box;
        page-break-inside: avoid;
        /* Crucial: Ensure thumbnails don't break across columns */
        -webkit-column-break-inside: avoid;
        break-inside: avoid;
    }

    .thumbinner {
        padding: 2px !important;
        border: none !important;
        background-color: transparent !important;
    }

    .thumbimage {
        max-width: 100% !important;
        height: auto !important;
        display: block;
        border: none !important;
        page-break-inside: avoid;
    }

    .thumbcaption {
        font-size: 8pt !important;
        line-height: 1.2em !important;
        padding: 2px 0 !important;
        text-align: left !important;
        overflow: hidden !important;
    }

    /* --- NPC Section specific handling --- */
    h3 + * {
        page-break-before: avoid;
    }

    /* --- TWO-COLUMN LAYOUT FOR MAIN CONTENT --- */
    /* This targets the main content area generated by MediaWiki */
    #content .mw-parser-output {
        -webkit-column-count: 2 !important; /* For WebKit browsers (Chrome, Safari, Edge) */
        column-count: 2 !important; /* Standard property */
        -webkit-column-gap: 2em !important;
        column-gap: 2em !important;
        -webkit-column-rule: 1px solid #eee !important;
        column-rule: 1px solid #eee !important;
        /* Ensure this content area itself doesn't break poorly */
        page-break-inside: auto; /* Allow breaks within the content */
    }

    /* --- Explicitly disable any other multi-column settings --- */
    /* These override any column settings that might be coming from your template's
       online display, forcing them back to single column within the overall print columns. */
    .module, .div-col {
        -webkit-column-count: 1 !important;
        column-count: 1 !important;
        -webkit-column-width: auto !important;
        column-width: auto !important;
        -webkit-column-rule: none !important;
        column-rule: none !important;
        /* Ensure internal column elements don't interfere with main columns */
        -webkit-column-span: none !important;
        column-span: none !important;
        /* Break-inside applies to page breaks, not column breaks directly */
        page-break-inside: avoid; /* Still good for page breaks */
    }

    /* Use break-inside for column breaks too */
    .div-col li, .div-col dd, .div-col p {
        -webkit-column-break-inside: avoid;
        break-inside: avoid;
    }
}