MediaWiki:Print.css: Difference between revisions

Jump to navigation Jump to search
no edit summary
No edit summary
No edit summary
Line 1: Line 1:
/* ===========================
/* ===========================
   Softwear — A4 Narrow Print (compact)
   Softwear — A4 Narrow Print (compact, cleaned)
   =========================== */
   =========================== */


/* 1 Font face */
/* 1) Font face */
@font-face {
@font-face {
   font-family: 'HALColant-TextRegular';
   font-family: 'HALColant-TextRegular';
Line 13: Line 13:
}
}


/* 2 Print color fidelity */
/* 2) Print color fidelity */
* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }


/* 3 Base visibility & typography */
/* 3) Base visibility & typography */
.print-only { display: block !important; }
.print-only { display: block !important; }
html, body {
html, body {
   margin: 0;
   margin: 0;
Line 26: Line 27:
}
}


/* 4 Page & narrow column — A4 portrait; 12mm outer margin; 93mm column */
/* 4) Page & narrow column — A4 portrait; 12mm outer margin; 93mm column */
@page { size: A4 portrait; margin: 12mm; }
@page { size: A4 portrait; margin: 12mm; }


Line 36: Line 37:
}
}


/* 5 Titles & people (compact) */
/* 5) Titles & people (compact) */
.article-title {
.article-title {
   font-size: 16px;
   font-size: 16px;
Line 55: Line 56:
.article-people a { text-decoration: underline; color: #292828 !important; }
.article-people a { text-decoration: underline; color: #292828 !important; }


/* Hairline rules via pseudo-element (Blink) — NOT on large body blocks */
/* 6) Entry number row */
.article-entry-number,
.link-pdf,
.article-type,
.article-metadata,
.article-images,
.article-mod-line,
/* labels only */
.article-label-description,
.article-label-reflection,
.article-label-external-reference,
.article-label-quote,
.article-label-modification-date {
  position: relative;
  padding-bottom: 6px;
  border-bottom: none !important;
}
 
.article-entry-number::after,
.link-pdf::after,
.article-type::after,
.article-metadata::after,
.article-images::after,
.article-mod-line::after,
.article-label-description::after,
.article-label-reflection::after,
.article-label-external-reference::after,
.article-label-quote::after,
.article-label-modification-date::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: #292828;
  transform: scaleY(0.5);
  transform-origin: 50% 100%;
}
 
.link-pdf a { text-decoration: none !important; }
 
/* 7 Firefox fallback: use real thin borders instead of ::after hairlines */
@-moz-document url-prefix() {
  /* turn off ::after there too */
  .article-entry-number::after,
  .link-pdf::after,
  .article-type::after,
  .article-metadata::after,
  .article-images::after,
  .article-mod-line::after,
  .article-label-description::after,
  .article-label-reflection::after,
  .article-label-external-reference::after,
  .article-label-quote::after,
  .article-label-modification-date::after { content: none !important; }
 
  .article-entry-number,
  .link-pdf,
  .article-type,
  .article-metadata,
  .article-images,
  .article-mod-line,
  .article-label-description,
  .article-label-reflection,
  .article-label-external-reference,
  .article-label-quote,
  .article-label-modification-date {
    border-bottom: 0.5pt solid #292828 !important;
  }
 
  #article-content > :last-child { border-bottom: 0 !important; }
}
 
/* 8 Entry number row */
.article-entry-number { font-size: 12px; line-height: 16px; margin: 0; }
.article-entry-number { font-size: 12px; line-height: 16px; margin: 0; }


/* 9 Centered link row */
/* 7) Centered link row */
.link-pdf {
.link-pdf {
   text-align: center;
   text-align: center;
Line 146: Line 75:
}
}


/* 10 Type line */
/* 8) Type line */
.article-type {
.article-type {
   font-size: 12px;
   font-size: 12px;
Line 156: Line 85:
.article-type a { text-decoration: none; color: #292828 !important; }
.article-type a { text-decoration: none; color: #292828 !important; }


/* 11 Metadata grid (compact) */
/* 9) Metadata grid (compact) */
.article-metadata,
.article-metadata,
.article-metadata * { margin: 0 !important; border: none; background: none; }
.article-metadata * { margin: 0 !important; border: none; background: none; }
.article-metadata {
.article-metadata {
   display: grid;
   display: grid;
Line 174: Line 104:
.article-metadata-value a { color: #292828 !important; text-decoration: none; }
.article-metadata-value a { color: #292828 !important; text-decoration: none; }


/* 12 Images (shorter to favor text) */
/* 10) Images (shorter to favor text) */
.article-metadata + .article-images { margin-top: 0 !important; padding-top: 0 !important; }
.article-metadata + .article-images { margin-top: 0 !important; padding-top: 0 !important; }
.article-images { margin: 0 !important; padding-top: 0 !important; }
.article-images { margin: 0 !important; padding-top: 0 !important; }
.article-images .image-container {
.article-images .image-container {
   display: inline-flex;
   display: inline-flex;
Line 207: Line 138:
.caption-image1:empty { display: none; }
.caption-image1:empty { display: none; }


/* 13 Labels & bodies (compact) */
/* 11) Labels & bodies (compact) */
.article-label-description,
.article-label-description,
.article-label-reflection,
.article-label-reflection,
Line 221: Line 152:
   letter-spacing: 0.4px;
   letter-spacing: 0.4px;
}
}
.article-metadata + .article-label-description,
.article-metadata + .article-label-description,
.article-images + .article-label-description,
.article-images + .article-label-description,
Line 241: Line 173:
}
}


/* 14 Quote */
/* 12) Quote */
.article-quote { font-size: 13px; line-height: 1.2; font-style: italic; }
.article-quote { font-size: 13px; line-height: 1.2; font-style: italic; }


/* 15 Mod line */
/* 13) Mod line */
.article-mod-line {
.article-mod-line {
   white-space: nowrap;
   white-space: nowrap;
Line 258: Line 190:
.article-modification-date { font-size: 11px; letter-spacing: 0.3px; }
.article-modification-date { font-size: 11px; letter-spacing: 0.3px; }


/* 16 Vector resets */
/* 14) Vector resets */
.vector-body p { margin: 0 !important; padding: 0 !important; }
.vector-body p { margin: 0 !important; padding: 0 !important; }


/* 17 Links */
/* 15) Links */
a[href]:after { content: none !important; }
a[href]:after { content: none !important; }
.article-external-reference a {
.article-external-reference a {
Line 273: Line 205:
}
}


/* 18 Page control */
/* 16) Page control defaults */
#article-content { orphans: 2; widows: 2; }
#article-content { orphans: 2; widows: 2; }


/* 19 Avoid really bad splits for a few blocks */
/* 17) Avoid really bad splits for a few blocks */
#article-title,
#article-title,
.article-title-link,
.article-title-link,
Line 282: Line 214:
.article-images { break-inside: avoid; page-break-inside: avoid; }
.article-images { break-inside: avoid; page-break-inside: avoid; }


/* 20 Print-only column enforcement and border logic */
/* 18) Print-only column enforcement + border toggle */
@media print {
@media print {
   /* Column width + centering */
   /* Column width + centering */
Line 324: Line 256:
     padding: 0 !important;
     padding: 0 !important;
   }
   }
}


   /* Paragraph flow: allow splitting to prevent big gaps */
/* 19) Section rules: ONE consistent line under rows/bodies (no ::after tricks) */
@media print {
   /* Lines under these “rows” */
  .article-entry-number,
  .link-pdf,
  .article-type,
  .article-metadata,
  .article-images,
  .article-description,
  .article-reflection,
  .article-external-reference,
  .article-quote,
  .article-mod-line {
    border-bottom: 0.5pt solid #292828 !important;
    padding-bottom: 6px !important;
  }
 
  /* Labels show no line (prevents double lines) */
  .article-label-description,
  .article-label-reflection,
  .article-label-external-reference,
  .article-label-quote,
  .article-label-modification-date {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
 
  /* Don’t draw a line under the last item */
  #article-content > :last-child { border-bottom: 0 !important; }
}
 
/* 20) Paragraph fragmentation (single, consolidated block) */
@media print {
   .article-description p,
   .article-description p,
   .article-reflection p,
   .article-reflection p,
   .article-external-reference p,
   .article-external-reference p,
   .article-quote p {
   .article-quote p {
    break-inside: auto !important;
     page-break-inside: auto !important;
     page-break-inside: auto !important;
    break-inside: auto !important;
     orphans: 2 !important;
     orphans: 2 !important;
     widows: 2 !important;
     widows: 2 !important;
    margin: 0 0 1.2mm !important;
   }
   }
}
   .article-description p:last-child,
 
   .article-reflection p:last-child,
@media print {
   .article-external-reference p:last-child,
  /* one hairline under long bodies without using transform or borders */
   .article-quote p:last-child {
   .article-description,
     margin-bottom: 0 !important;
   .article-reflection,
   .article-external-reference,
   .article-quote {
     padding-bottom: 6px !important;
    background-image: linear-gradient(#292828, #292828);
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 100% 1px; /* 1 device px hairline in Blink/PDF */
   }
   }
}
}


/* === Entry page: allow normal page breaks === */
/* 21) Entry page: unblock pagination + hide UI */
@media print {
@media print {
  /* common MW/Vector wrappers — make sure they don't block pagination */
   html, body,
   html, body,
   #show-article-wrapper-entry,
   #show-article-wrapper-entry,
Line 359: Line 316:
   #article-content,
   #article-content,
   #content, .mw-body, .vector-body, #mw-content-text {
   #content, .mw-body, .vector-body, #mw-content-text {
     display: block !important;         /* kill flex/grid if present */
     display: block !important;
     overflow: visible !important;     /* no clipping that blocks breaks */
     overflow: visible !important;
     contain: none !important;         /* avoid any print/fragmentation quirks */
     contain: none !important;
     max-height: none !important;       /* just in case */
     max-height: none !important;
   }
   }
 
  /* Ensure children can fragment; prevents “big white gap then push to next page” */
   /* the chooser shouldn’t affect layout at all while printing */
  #article-content > * {
    break-inside: auto !important;
    page-break-inside: auto !important;
  }
   /* Hide print UI chrome */
   #print-chooser, #print-options { display: none !important; }
   #print-chooser, #print-options { display: none !important; }
}
}


/* kill the label hairline when it comes right after a body that already drew one */
/* 22) Firefox: real thin borders (kept simple; still consistent with 0.5pt) */
.article-description + .article-label-reflection::after,
@-moz-document url-prefix() {
.article-reflection + .article-label-external-reference::after,
  @media print {
.article-external-reference + .article-label-quote::after,
    .article-entry-number,
.article-quote + .article-label-modification-date::after {
    .link-pdf,
  content: none !important;
    .article-type,
    .article-metadata,
    .article-images,
    .article-description,
    .article-reflection,
    .article-external-reference,
    .article-quote,
    .article-mod-line {
      border-bottom: 0.5pt solid #292828 !important;
    }
    #article-content > :last-child { border-bottom: 0 !important; }
  }
}
}

Navigation menu