/* The invoice document itself, media-agnostic on purpose: the on-screen preview and the wkhtmltopdf output render the SAME partial from the SAME rules, so fidelity cannot drift. Pagination is the only difference and it lives in invoice_print.css. THE RENDERER IS A BROWSER FROM 2011 AND THAT GOVERNS EVERY LAYOUT RULE BELOW. wkhtmltopdf is QtWebKit out of Qt 4.8.7 -- WebKit 534. Measured 2026-08-27 against 0.12.6 (patched qt): display: flex / inline-flex IGNORED. Children lay out inline and CONCATENATED, so "Total services (A)" and its amount printed as running text. display: grid IGNORED. Children stack one per line, so the three addressee blocks printed one above the other. letter-spacing WORSE than ignored: the run's advance width is measured at 96px/in and the tracking is PAINTED scaled by dpi/96. At the dpi: 300 this app uses, a right-aligned header painted 8.2pt past the page's content edge and its last glyph was clipped; at dpi 96 it is dropped entirely, so the preview has tracking and the paper does not. Banned outright. calc(), clamp/min/max Declaration DROPPED, property falls to its initial value. font-variant: small-caps Silently ignored -- not a substitute for the tracking. clip-path Ignored (see .u-vh below, where this matters). display: table / table-cell WORK. This is how "side by side" is said here. float, margin-left: auto, all work. :last-child, + sibling, background on th, thead repeat, page-break-inside None of the ignored ones falls back -- they fall THROUGH, and the on-screen preview is a modern browser rendering the same partial, so every one of them looks right on the office's screen and is wrong only on the paper the family receives. spec/guards/pdf_css_support_spec.rb is what keeps them out; read it before adding a layout rule here. Fonts are named with real fallbacks. The container image ships fonts-liberation, which is metric-compatible with Times and Arial -- and NOT with Georgia, so Georgia is not named. */ /* Browsers default "Background graphics" OFF when printing, and Serge prints from the browser as well as sending the PDF. Without this the tinted deceased band and any filled panel come out white-on-white on his printer while looking right on screen. */ .invoice { print-color-adjust: exact; -webkit-print-color-adjust: exact; } /* Duplicated from base.css for the same reason as .num, .u-vh and the box-sizing rule below: Pdf::Renderer inlines THIS file and not base.css. QtWebKit's UA stylesheet gives an 8px margin, so measured 2026-08-27 the document sat 6pt inside each page margin on paper and flush on screen -- 12pt of line length lost, from the same partial. */ body { margin: 0; } .invoice { background: #fff; color: #111; font-family: "Liberation Serif", "Times New Roman", Times, serif; font-size: 10.5pt; line-height: 1.45; /* LITERALS, not var(). Pdf::Renderer inlines this file and invoice_print.css and nothing else, so a custom property here resolves in the browser preview and falls back on paper -- and all three fallbacks disagreed with their token (20px vs 24px, #ddd vs #d8d2c6, 10px vs 6px). They were inert only because invoice_print.css zeroes these same three properties in @media print, which print_media_type: true makes apply. Values pinned to tokens.css: --s-5, --c-line, --r-2. A guard spec asserts no var( survives in either inlined file. */ padding: 24px; border: 1px solid #ddd6c8; border-radius: 6px; } .invoice h1, .invoice h2, .invoice h3, .invoice h4, .invoice th, .invoice .inv-bar { font-family: "Liberation Sans", Arial, Helvetica, sans-serif; } /* A plain block, deliberately. It was flex + space-between with a single child -- no visible symptom, and the same defect as the three below. The supplier block is the only thing here and there is no logo asset (app/assets/images holds only .keep), so there is no second column to arrange. If a logo is ever added this becomes a two-cell display: table like .inv-bar. */ .inv-top { margin-bottom: 4px; } .inv-top .biz strong { display: block; font-size: 13pt; } .inv-top .biz span { display: block; font-size: 9pt; line-height: 1.4; } /* A FILLED BAND, as on the paper invoice, replacing the two 1.5px rules this used to carry. Was flex + justify-content: space-between, which QtWebKit ignores -- measured, the date printed inline against the title instead of at the right edge, and letter-spacing: .02em went with the rest of them. display: table is doing three jobs no float could: it gives the fill its intrinsic height (a float parent has none, so the band would collapse to nothing), it keeps the two ends vertically centred whatever heading level the caller passed (h1 in the PDF, h2 on the invoice screen, h3 in the billing preview), and it needs no clearing. Verified reaching the PDF by decompressing the content stream -- a full-content-width `re f` in this colour. #0a4f4e is pinned to tokens.css --c-accent-dk and #ffffff to --c-on-accent, 9.4:1 by that file's own note. Literals, because the no-var( guard forbids anything else here. */ .inv-bar { display: table; width: 100%; table-layout: fixed; border-spacing: 0; margin: 14px 0; background: #0a4f4e; color: #ffffff; font-weight: 700; } /* The title inside the bar. It was a , so the PDF had no heading above h4 at all -- layouts/pdf.html.erb yields only this partial. Inherits the bar's own size and weight. */ .inv-title { display: table-cell; vertical-align: middle; padding: 6px 10px; font: inherit; margin: 0; } /* WIDTH IS LOAD-BEARING. With table-layout: fixed and only one sized cell the title takes the remainder; without it `fixed` splits 50/50 and a long title -- "FACTURE 2026-014 · contrat 2026-031 · remplace la facture 2026-011" -- wraps early while the date sits in dead space. */ .inv-bar > span { display: table-cell; vertical-align: middle; padding: 6px 10px; width: 34%; text-align: right; white-space: nowrap; } /* Was grid-template-columns: repeat(3, 1fr), which QtWebKit ignores -- measured, the three blocks stacked vertically on paper while the preview showed three columns. `gap` has no CSS-table equivalent, so the gutter is the cells' own padding-right; it is uniform rather than :last-child-exempt so the third column carries the same 14px as a right-edge reserve. vertical-align: top is MANDATORY, not tidiness: the CSS initial value for a table-cell is `baseline`, which aligns the three headings' first baselines and goes wrong the moment one column's heading wraps. */ .inv-meta { display: table; width: 100%; table-layout: fixed; border-spacing: 0; margin-bottom: 14px; } /* padding matches table.inv's cells (5px 10px) on the horizontal axis, so FACTURER À, EXPÉDIER À and INSTRUCTIONS start on the same x as DESCRIPTION, the band title and the Décès line -- 10px inside their own cell edge. It was padding-right only, which left this row flush at the content edge while every other column in the document was inset. Symmetric rather than a 14px right-only gutter: the gutter between columns is now 20px, and the third cell keeps a right-edge reserve. */ .inv-meta > div { display: table-cell; vertical-align: top; width: 33.33%; padding: 0 10px; } /* The family is pinned here, not inherited: base.css gives h1-h4 the serif token, which resolves to Georgia -- and fonts-liberation is metric-compatible with Times and Arial, NOT with Georgia. Inheriting it would set these three headings in one face on screen and another in the PDF. font-weight carries what letter-spacing: .06em used to: the tracking is banned (see the header of this file) and font-variant: small-caps is measured as silently ignored, so uppercase plus weight is what is left. */ .inv-meta h2, .inv-meta h3, .inv-meta h4 { margin: 0 0 3px; font-size: 8.5pt; text-transform: uppercase; font-weight: 700; font-family: "Liberation Sans", Arial, Helvetica, sans-serif; } .inv-meta p { margin: 0; font-size: 9.5pt; } /* table-layout: fixed removes QtWebKit's auto-measure pass entirely -- the column edges become arithmetic, so a mis-measured string can no longer move a column. The trade: a header string wider than its column now overflows silently instead of widening the column. Both current strings have more than 13pt of headroom (measured); re-measure if the header font-size moves. padding is 5px 8px and not 5px 0: the 8px is the right-hand column's reserve inside the page's content edge. Measured with 5px 0 and letter-spacing gone, the amount still ended within 0.3pt of the boundary. Nothing in this table starts at the left margin, so the inset costs nothing. */ table.inv { width: 100%; border-collapse: collapse; table-layout: fixed; } table.inv th, table.inv td { padding: 5px 10px; border-bottom: 1px solid #bbb; vertical-align: top; } table.inv th { font-size: 8.5pt; text-transform: uppercase; font-weight: 700; text-align: left; } /* The second filled band. ON th, NOT tr: with border-collapse: collapse the three cell fills tile with no seam, where border-collapse: separate would leave white gutters between them. Measured on a 43-line invoice, the band repeats on every sheet via thead { display: table-header-group } in invoice_print.css. Same two literals as .inv-bar. */ table.inv thead th { background: #0a4f4e; color: #ffffff; } table.inv .c-qty { width: 14%; } /* 73pt; "Qté" / "Quantité" at 8.5pt measures 43pt */ table.inv .c-amt { width: 20%; } /* 104pt; "1 234 567,89 $" at 10.5pt measures 70pt */ table.inv .r { text-align: right; white-space: nowrap; } table.inv small { display: block; font-weight: 400; font-size: 9pt; color: #444; } table.inv .inv-empty td { text-align: center; color: #666; padding: 14px 0; } /* margin-left matches table.inv's cell padding, so this line starts under the description column rather than at the document's edge -- and both match .inv-title's 10px inside the band above. */ .inv-deceased { margin: 10px 0 0 10px; font-size: 9.5pt; } /* One CSS table PER ROW rather than one table for the block: the rows have no shared column, and the amount cell's own width is what puts every figure on the same right edge. Was flex + space-between + align-items: center + flex-wrap: wrap, all four ignored -- measured, the row printed as "Total services (A) 1 500,00 $" inline. align-items is not carried over because there was nothing to centre (both cells are one line), and flex-wrap is not either: a wrapped amount is worse than a label that ends short of it, and .num is nowrap regardless. */ /* WIDTH IS ARITHMETIC, not taste. The block is right-aligned by margin-left: auto, so its width decides where the label column starts, and the label column has to hold the longest label the document can ever produce: "Total déboursés supplémentaires (C)" -- section C's name is "déboursés supplémentaires" -- which measures 173.7pt at 10.5pt in the real renderer. At the previous 62% the label cell was 24% of the content column = 125pt, so that row WRAPPED, silently: no dossier in dev carries a section-C line, so nobody had seen it. 51% of the content column is 266pt; the amount cell takes 78pt (sized to the figures, see below), leaving 188pt for the label -- 14pt of slack on the 173.7pt worst case. Aligning the label column with the QUANTITÉ column was the request and is not reachable: that column is 14% = 73pt, and no rewording of section C gets a label under it. */ .inv-sum { margin-top: 12px; margin-left: auto; width: 51%; } .inv-sum .row { display: table; width: 100%; border-spacing: 0; } /* Labels LEFT-aligned, which is also what stops .row--total's rule from sitting above nothing: that border is on the display: table box, so it spans the whole block, and with the labels right-aligned its left half ran over empty space. Left-aligned they begin at the block's left edge -- the same x the rule begins at. NO padding-right on the label, and the cell is sized off the label's INTRINSIC width: "Total déboursés supplémentaires (C)" measures 173.7pt, and a 12px gutter left only 171pt, so it wrapped with "(C)" alone on the next line the moment the labels went left-aligned -- right-alignment had been hiding it, because the text was laid out from the right edge inward. A gutter is not needed anyway: the amounts are right-aligned inside a 104pt cell, so ~70pt of it is already empty. .num's own padding-right: 2px is more specific and still wins on the amount cell. (Right-aligned for one revision on 2026-08-27, to sit closer to the figures; reverted.) */ .inv-sum .row > span { display: table-cell; padding: 3px 0; } /* WIDTH IS LOAD-BEARING here too: it is what makes six independent one-row tables share a right edge. Drop it and each row's auto layout picks its own split and the figures stop lining up. 38% of 62% of the content column is 122.8pt, which holds "1 234 567,89 $" at 12pt bold. padding-right is a 2px reserve -- measured without it, the bold 12pt total's "$" glyph box reached 0.3pt past the page's content edge. */ /* SIZED TO THE FIGURES, not to the column above. 29.3% of the block is 78pt; the figures measure 35-47pt (the total is 12pt bold, hence the widest), so this holds a six-digit total with room and leaves 23-35pt between the label column's edge and each figure -- it was 56-68pt when this cell matched table.inv's .c-amt at 104pt, and that emptiness was most of the gap between a label and its own amount. The cost, accepted deliberately: the label/amount boundary here no longer lines up with the QUANTITÉ/TOTAL boundary in the table above. Closing the gap was asked for twice; that alignment was a bonus on top of an earlier request, so it is the one that gives way. Still load-bearing for the right edge: it is what makes seven independent one-row tables share one, and padding-right is a 2px reserve -- measured without it, the bold 12pt total's "$" glyph box reached 0.3pt past the page's content edge. */ .inv-sum .row > .num { width: 29.3%; text-align: right; white-space: nowrap; padding-right: 2px; } /* The border and the padding are on the display: table box, not a cell. Measured: QtWebKit paints a border across a table box's full width correctly, and honours padding-top on it. */ .inv-sum .row--total { border-top: 1.5px solid #111; margin-top: 4px; padding-top: 6px; font-weight: 700; font-size: 12pt; } /* Duplicated from base.css deliberately: Pdf::Renderer inlines THIS file and not base.css, so a rule the shared partial relies on has to live where both renderings can see it. Without it the totals column is tabular on screen and proportional on paper. */ .invoice .num { white-space: nowrap; font-variant-numeric: tabular-nums; } /* Also duplicated from base.css and layout.css, and for the same reason. box-sizing is what makes every percentage width in this file sum to 100% instead of 100% + its padding; delete it and .inv-meta, .inv-bar, .inv-sum and table.inv all overflow at once. */ .invoice, .invoice *, .invoice *::before, .invoice *::after { box-sizing: border-box; } .invoice h1, .invoice h2, .invoice h3, .invoice h4 { margin: 0; } /* Duplicated from base.css for the same reason as .num above: Pdf::Renderer inlines THIS file and not base.css, so a rule the shared partial relies on has to live where BOTH renderings can see it. Without it the table's visually-hidden is plain visible text at the top of the document the family receives. `clip` IS THE ONE DOING THE WORK AND IT MUST NOT BE "MODERNISED". Measured 2026-08-27: clip-path: inset(50%) is IGNORED by this renderer, and position: absolute + 1px + overflow: hidden does not clip the text either -- it stays painted. Deleting the deprecated clip, which every linter recommends, prints « Détail de la facture » across the top of the family's invoice. spec/guards/pdf_css_support_spec.rb asserts it is still here. */ .invoice .u-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Amber and semibold, matching the prototype (.inv-sum .na and .exempt-ref there): "N/A" has to read as "no tax was collected", not as ordinary text a reader skims past, and the reason has to read as attached to the lines it explains. Literal colours, not tokens.css variables: this file is the one Pdf::Renderer inlines, so it cannot depend on a stylesheet the PDF never sees. */ .invoice .num.na { color: #a8571f; font-weight: 600; } .inv-exempt { margin: 10px 0 0; font-size: 9pt; line-height: 1.5; color: #a8571f; text-align: right; } .inv-thanks { margin: 12px 0 0; font-size: 9.5pt; } /* Was flex + space-between; measured, both spans printed inline. `+` sibling selectors work in this renderer, so the right cell needs no class of its own. padding-right is the same 2px right-edge reserve as .inv-sum .row > .num. */ .inv-foot { display: table; width: 100%; border-spacing: 0; margin-top: 16px; padding-top: 8px; border-top: 1px solid #bbb; font-size: 8.5pt; color: #444; } /* THREE cells: the conditions, what this invoice replaces, the registration numbers. Equal thirds so "the middle" means the middle of the sheet rather than wherever the auto table algorithm puts a content-sized cell. The conditions line measures 154pt and the registrations 87pt against a 173pt third, so neither wraps. :last-child, NOT `span + span`, which matched the second AND third cells and would right-align the middle one too. :last-child is measured working in this renderer; :nth-child is not, so it is not used. The middle cell renders empty on an invoice that replaces nothing -- an empty table-cell still occupies its third, which is what keeps the other two where they are. */ .inv-foot > span { display: table-cell; vertical-align: top; width: 33.33%; } .inv-foot > .inv-supersedes { text-align: center; } .inv-foot > span:last-child { text-align: right; padding-right: 2px; }