/* ==========================================================================
print.css — print styles for the ifup.org letters
(family letter + dear Zohra/Arlan letter)
How to use
----------
1. Put this file on the site at /css/print.css
2. In the page , AFTER letter.css, add:
(The media="print" attribute means it only applies when printing,
so the on-screen look is untouched.)
Alternative: paste everything below into letter.css wrapped in
@media print { ... }
Design goals
------------
- All text at 16pt or larger (easy reading for older eyes)
- Black on white regardless of the site's dark mode
- Photos start on a fresh page
- Photo gallery: 2 photos per row, ~4 photos per page
(see the "gallery density" note at the bottom to go denser)
========================================================================== */
/* US Letter page with comfortable margins.
(Change to `size: A4;` if printed outside the US.) */
@page {
size: letter;
margin: 0.75in;
}
/* ---- Base: large type, black on white ----------------------------------- */
html,
body {
background: #fff !important;
color: #000 !important;
font-size: 16pt;
line-height: 1.5;
}
/* Everything that carries text gets at least 16pt.
(letter.css sets figcaption to 0.85em — override that here.) */
p,
li,
dt,
dd,
td,
th,
blockquote,
figcaption,
cite,
small,
.footnotes {
font-size: 16pt;
}
/* Headings: keep them a bit bigger than body text, and don't
let a heading be stranded at the bottom of a page. */
h1 { font-size: 26pt; }
h2 { font-size: 20pt; }
h3 { font-size: 17pt; }
h1, h2, h3 {
page-break-after: avoid;
break-after: avoid-page;
}
/* Use the full page width (bootstrap's .container is 1140px wide). */
.container {
max-width: 100% !important;
width: 100%;
padding: 0;
}
/* Avoid ugly single-line page breaks in paragraphs and lists. */
p, li, blockquote, figure, .footnotes li {
orphans: 3;
widows: 3;
}
/* ---- Blockquotes and figures --------------------------------------------- */
blockquote {
background: #fff !important;
border-left: 3pt solid #000;
page-break-inside: avoid;
break-inside: avoid;
}
figure {
page-break-inside: avoid;
break-inside: avoid;
max-width: 100%;
}
figure img,
p > img {
max-width: 100%;
max-height: 7in; /* big intro photo: no bigger than the page */
height: auto;
border: none;
border-radius: 0;
}
figcaption {
font-size: 16pt;
font-style: italic;
line-height: 1.4;
}
/* ---- Links: plain black in print ------------------------------------------ */
a {
color: #000;
text-decoration: none;
}
/* Hide the "↩ back to text" links in the printed footnotes list. */
a[data-footnote-backref] {
display: none;
}
/* ==========================================================================
PHOTO GALLERY (the big
under the "Photos" heading in the family
letter: each row = one photo + its caption, side by side)
Print layout: re-flow each row into a "card" (photo on top, caption
below) and place 2 cards per row → 4 photos per page with 16pt captions.
========================================================================== */
/* Start the photo section on its own page. */
h2#photos {
page-break-before: always;
break-before: page;
}
h2#photos ~ table {
display: grid;
grid-template-columns: 1fr 1fr; /* 2 photo cards per row */
column-gap: 0.3in;
row-gap: 0.25in;
table-layout: auto;
width: 100%;
}
/* Let the table rows flow directly into the 2-column grid. */
h2#photos ~ table thead,
h2#photos ~ table tbody {
display: contents;
}
/* Each row becomes one card: photo on top, caption below.
Never split a card across two pages. */
h2#photos ~ table tr {
display: flex;
flex-direction: column;
align-items: center;
text-align: left;
background: #fff !important;
page-break-inside: avoid;
break-inside: avoid;
}
h2#photos ~ table th,
h2#photos ~ table td {
display: block;
width: 100% !important;
padding: 0;
background: transparent !important;
}
/* Photo size: portrait photos print at 2.6in tall (~1.95in wide);
landscape photos fill the ~3.3in-wide column (~2.5in tall).
Tweak max-height to make photos bigger or smaller. */
h2#photos ~ table th img,
h2#photos ~ table td img {
max-width: 100%;
max-height: 2.6in;
width: auto;
height: auto;
object-fit: contain;
display: block;
margin: 0 auto 0.1in auto;
border: none;
border-radius: 0;
}
/* Gallery captions: full card width, comfortable leading. */
h2#photos ~ table th,
h2#photos ~ table td {
line-height: 1.4;
}
/* ==========================================================================
GALLERY DENSITY — how many photos per page
--------------------------------------------------------------------------
Default above: 2 cards per row, photos up to 2.6in tall
→ 4 photos per page (occasionally 5-6 where captions are short).
Want MORE photos per page? Uncomment one of these blocks (they make the
photos smaller). With 16pt captions, ~6 per page is about the practical
maximum — 8 per page would make photos smaller than a 3x5 postcard.
~6 photos per page (smaller photos):
h2#photos ~ table th img,
h2#photos ~ table td img {
max-height: 1.8in;
}
Even denser (~6-8 per page, thumbnail-size photos):
h2#photos ~ table th img,
h2#photos ~ table td img {
max-height: 1.3in;
}
h2#photos ~ table tr {
line-height: 1.25;
}
========================================================================== */