/* * The sale receipt. * * ROLL WIDTH IS A SETTING, NOT A CONSTANT * * Receipt settings offer 58mm and 80mm. printDocument() reads that answer, but * the sale receipt does not go through printDocument() -- renderReceipt() fills * the #receipt element in this document and calls window.print(), so the rules * below are what actually reach the paper. They were hardcoded to 80mm in five * places, so a cafe on a 58mm printer got 80mm output cropped down the right * edge on every sale, which is the one receipt they print all day. * * The width now comes from --receipt-w, set on by renderReceipt() just * before printing. The fallback is 80mm so a receipt still prints if the * setting cannot be read. * * WHY EVERYTHING IS SIZED IN mm AND ch * * px sizing meant the qty and price columns kept their 35px/75px whatever the * paper was. On 58mm that is over half the usable width, and item names wrapped * to three lines. Columns are now ch-based off the receipt's own font, so they * take the width the digits actually need and the name keeps the rest. */ /* * WHY THIS RULE IS NOT display:none, AND WHY THIS FILE IS NOT media="print" * * _applyReceiptPageBox() measures this card and writes its height into @page. * That measurement happens on screen, before the print dialog opens, so both * the card and the rules that size it have to exist on screen. When this file * was media="print" and main.css hid the container, the measurement was * always 0 and every sale printed the 297mm fallback page. * * Parked off-screen rather than hidden: an element with no box is never laid * out, and a layout that never happened measures nothing. Same reason * printDocument() parks its iframe at left:-9999px instead of hiding it. */ #receiptContainer { position: fixed; left: -9999px; top: 0; width: var(--receipt-w, 80mm); } /* ── Receipt card ─────────────────────────────────────────────────────────── */ #receipt { /* Spacing scale. One step (--r-gap) separates sections; half a step pads rows. Every block below picks from these two instead of inventing its own 4/5/6/8/10px, which is what made the old receipt look unevenly ruled. */ --r-gap: 2.5mm; --r-row: 1.25mm; /* Hairlines. A thermal head renders 3px double and 2px solid as the same heavy smear, so the receipt only uses two weights: a rule and a strong rule. */ --r-rule: 1px solid #000; --r-rule-strong: 2px solid #000; width: var(--receipt-w, 80mm); box-sizing: border-box; background: #fff; color: #000; font-family: 'Courier New', Courier, monospace; font-size: 13px; font-weight: bold; border: 2px solid #000; padding: var(--r-gap); } /* ── Header ───────────────────────────────────────────────────────────────── */ .receipt-header { border-bottom: var(--r-rule-strong); padding: 0 0 var(--r-gap); margin-bottom: var(--r-gap); text-align: center; } .receipt-logo-wrap { display: flex; justify-content: center; margin-bottom: var(--r-row); } /* Sized as a share of the roll, not 72px: on 58mm a fixed 72px logo ate a third of the width before the shop name had been printed. */ .receipt-logo-wrap img { width: 18mm; height: 18mm; object-fit: contain; display: block; } .receipt-store-name { font-size: 19px; font-weight: 900; /* 0.12em tracking pushed a longer shop name onto a second line on 58mm. */ letter-spacing: 0.06em; color: #000; margin-bottom: var(--r-row); font-family: Arial Black, Arial, Helvetica, sans-serif; text-transform: uppercase; overflow-wrap: anywhere; } .receipt-store-tagline { font-size: 11px; font-weight: bold; letter-spacing: 0.08em; color: #000; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; margin-bottom: 4px; } .receipt-store-address, .receipt-store-contact { font-size: 12px; font-weight: bold; color: #000; line-height: 1.4; font-family: Arial, Helvetica, sans-serif; } /* ── Meta grid (2×2) ─────────────────────────────────────────────────────── */ .receipt-meta-grid { display: grid; grid-template-columns: 1fr 1fr; border-bottom: var(--r-rule-strong); } /* The cell had 8px of side padding AND sat inside the receipt's own padding, so the two columns were pushed into the middle third of the paper with a ragged gutter down each edge. The padding is now vertical only; the grid line does the separating. */ .receipt-meta-cell { padding: var(--r-row) 0; border-right: var(--r-rule); padding-inline-end: var(--r-gap); min-width: 0; } .receipt-meta-cell:nth-child(even) { border-right: none; padding-inline-end: 0; padding-inline-start: var(--r-gap); } .receipt-meta-cell:nth-child(n+3) { border-top: var(--r-rule); } /* Five cells in a two-column grid leaves the last one alone on its row; it should span rather than sit in a half-width box next to nothing. */ .receipt-meta-cell:nth-child(5):last-child { grid-column: 1 / -1; border-right: none; padding-inline-end: 0; } .receipt-meta-label { font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.07em; color: #000; margin-bottom: 2px; font-family: Arial, Helvetica, sans-serif; } .receipt-meta-value { font-size: 14px; font-weight: 900; color: #000; font-family: Arial, Helvetica, sans-serif; } /* ── Receipt ID / Session bar ─────────────────────────────────────────────── */ .receipt-id-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--r-gap); padding: var(--r-gap) 0; border-bottom: var(--r-rule-strong); } .receipt-id-value { font-size: 13px; font-weight: bold; color: #000; font-family: 'Courier New', Courier, monospace; } .receipt-session-value { font-size: 14px; font-weight: 900; color: #000; font-family: 'Courier New', Courier, monospace; letter-spacing: 0.05em; } /* ── Client row ───────────────────────────────────────────────────────────── */ .receipt-client-row { display: flex; align-items: center; gap: var(--r-gap); padding: var(--r-gap) 0; border-top: var(--r-rule-strong); border-bottom: var(--r-rule-strong); font-family: Arial Black, Arial, Helvetica, sans-serif; } .receipt-client-row .receipt-meta-label { color: #000; font-size: 12px; font-weight: 900; margin: 0; } .receipt-client-name { font-size: 19px; font-weight: 900; color: #000; flex: 1; letter-spacing: 0.04em; text-transform: uppercase; font-family: Arial Black, Arial, Helvetica, sans-serif; } .receipt-held-badge { font-size: 15px; font-weight: 900; letter-spacing: 0.08em; color: #000; padding: 0; background: transparent; border: none; font-family: Arial Black, Arial, Helvetica, sans-serif; } /* ── Items section ────────────────────────────────────────────────────────── */ .receipt-items-section { padding: var(--r-gap) 0; border-bottom: var(--r-rule-strong); } .receipt-items-header { display: flex; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; color: #000; padding-bottom: var(--r-row); margin-bottom: var(--r-row); border-bottom: var(--r-rule); font-family: Arial, Helvetica, sans-serif; } /* Columns are ch-based so they scale with the receipt's own type instead of holding 35px/75px on 58mm paper, where that was over half the usable width and every item name wrapped to three lines. 9ch fits "1,500,000" -- the widest IQD figure a cafe line will realistically carry. */ .receipt-col-item { flex: 1; min-width: 0; } .receipt-col-qty { width: 4ch; text-align: center; flex: none; } .receipt-col-price { width: 9ch; text-align: right; flex: none; } .receipt-item { display: flex; /* flex-start, not center: a name that wraps to two lines used to drag its qty and price down to the vertical middle, so the price column stopped lining up with the row it belonged to. */ align-items: flex-start; gap: var(--r-row); padding: var(--r-row) 0; border-bottom: 1px dashed #000; font-weight: bold; } .receipt-item:last-child { border-bottom: none; } /* An add-on belongs to the drink above it, so the pair is ruled as one line: the parent drops its rule and the add-on keeps the one that closes the group. Otherwise a latte and its extra shot read as two unrelated items that happen to sit next to each other. */ .receipt-item:has(+ .receipt-item-addon) { border-bottom: none; } .receipt-item-addon { padding-top: 0; } .receipt-item-name { flex: 1; min-width: 0; /* A long product name breaks inside the word rather than pushing the price column off the paper. */ overflow-wrap: anywhere; font-size: 13px; font-weight: bold; color: #000; font-family: Arial, Helvetica, sans-serif; line-height: 1.3; } .receipt-item-qty { width: 4ch; flex: none; text-align: center; font-size: 13px; font-weight: 900; color: #000; font-family: Arial, Helvetica, sans-serif; } .receipt-item-price { width: 9ch; flex: none; text-align: right; font-size: 13px; font-weight: bold; color: #000; font-family: Arial, Helvetica, sans-serif; /* Digits line up down the column even in a proportional face. */ font-variant-numeric: tabular-nums; } /* ── Totals section ───────────────────────────────────────────────────────── */ .receipt-totals-section { padding: var(--r-gap) 0; } .receipt-total-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--r-gap); padding: var(--r-row) 0; font-size: 14px; font-weight: bold; color: #000; font-family: Arial, Helvetica, sans-serif; } /* The money column runs down the right edge of the receipt; tabular digits keep Subtotal, Discount and TOTAL aligned under one another. */ .receipt-total-row > span:last-child { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .receipt-discount { color: #000; } .receipt-grand-total { border-top: var(--r-rule-strong); margin-top: var(--r-row); padding-top: var(--r-gap); font-size: 18px; font-weight: 900; color: #000; } .receipt-payment-row { border-top: var(--r-rule-strong); margin-top: var(--r-row); padding-top: var(--r-gap); } .receipt-payment-badge { font-size: 12px; font-weight: 900; background: #000; color: #fff; padding: 3px 10px; border-radius: 3px; font-family: Arial, Helvetica, sans-serif; } .receipt-payment-banner { display: flex; justify-content: space-between; align-items: baseline; /* A split bill on 58mm cannot fit "PAYMENT" and three tenders on one line. Wrapping puts the tenders on their own full-width line instead of squeezing them into a 3-line ragged column beside the label. */ flex-wrap: wrap; gap: var(--r-gap); margin: var(--r-gap) 0 0; padding: var(--r-row) 0; background: transparent; color: #000; border: none; border-top: var(--r-rule-strong); border-bottom: var(--r-rule-strong); font-family: Arial Black, Arial, Helvetica, sans-serif; } .receipt-payment-banner .receipt-payment-label { font-size: 14px; font-weight: 900; letter-spacing: 0.06em; color: #000; flex: none; } /* A split bill renders every tender into this one cell ("Cash: 5,000 | Card: 3,000"), which overflowed the roll as a single 19px non-wrapping line. It wraps now, and right-aligns so it still reads as the money column. */ .receipt-payment-banner .receipt-payment-method { font-size: 15px; font-weight: 900; letter-spacing: 0.04em; color: #000; text-align: right; overflow-wrap: anywhere; min-width: 0; /* Takes the rest of the line when it fits beside PAYMENT, and the whole next line when it does not. */ flex: 1 1 auto; } .receipt-debt-due { display: flex; justify-content: space-between; align-items: baseline; gap: var(--r-gap); margin-top: var(--r-row); padding: var(--r-gap) 0 var(--r-row); background: transparent; color: #000; border-top: none; font-size: 16px; font-weight: 900; letter-spacing: 0.04em; font-family: Arial Black, Arial, Helvetica, sans-serif; } .receipt-debt-due span { color: #000; } /* ── Footer ───────────────────────────────────────────────────────────────── */ /* * The footer carried four separate decorations -- a dot row, a message, a * sub-message and a "* * * * *" divider -- stacked above the shop name. On an * 80mm roll that is 25mm of ornament under a bill that might be two lines, and * it is what made the tail of the receipt look padded out. The dots and the * asterisk divider are gone; the rule at the top already ends the receipt. */ .receipt-footer { padding: var(--r-gap) 0 0; text-align: center; border-top: var(--r-rule-strong); font-family: Arial, Helvetica, sans-serif; } .receipt-footer-divider, .receipt-footer-dots { display: none; } .receipt-footer-message { font-size: 13px; font-weight: 900; color: #000; margin: 0; letter-spacing: 0.04em; text-transform: uppercase; overflow-wrap: anywhere; } .receipt-footer-sub { font-size: 11px; font-weight: bold; color: #000; margin-top: var(--r-row); } .receipt-footer-brand { font-size: 11px; font-weight: bold; color: #000; margin-top: var(--r-gap); letter-spacing: 0.08em; text-transform: uppercase; font-family: 'Courier New', Courier, monospace; } /* ── Multi-receipt (client statement) ────────────────────────────────────── */ .mr-title { text-align: center; font-size: 12px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 0; border-bottom: 2px solid #000; font-family: Arial, Helvetica, sans-serif; } .mr-client { display: flex; align-items: baseline; gap: 6px; padding: 5px 0; border-bottom: 3px double #000; } .mr-client-label { font-size: 10px; font-weight: bold; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; white-space: nowrap; flex-shrink: 0; } .mr-client-name { font-size: 15px; font-weight: 900; text-transform: uppercase; font-family: Arial Black, Arial, Helvetica, sans-serif; flex: 1; letter-spacing: 0.04em; } .mr-print-date { font-size: 10px; font-weight: bold; color: #000; padding: 3px 0 5px; font-family: Arial, Helvetica, sans-serif; border-bottom: 1px solid #000; margin-bottom: 2px; } .mr-order { border-bottom: 2px dashed #000; padding: 3px 0 5px; margin-bottom: 2px; } .mr-order-header { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: bold; padding: 3px 0 4px; border-bottom: 1px solid #000; margin-bottom: 2px; font-family: Arial, Helvetica, sans-serif; } .mr-order-date { color: #000; } .mr-order-id { color: #000; font-family: 'Courier New', Courier, monospace; font-weight: 900; } .mr-order-total { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 900; padding: 4px 0 0; border-top: 1px solid #000; margin-top: 3px; font-family: Arial, Helvetica, sans-serif; } .mr-grand-total { display: flex; justify-content: space-between; align-items: center; font-size: 17px; font-weight: 900; padding: 8px 0; border-top: 3px double #000; border-bottom: 3px double #000; margin: 4px 0; font-family: Arial Black, Arial, Helvetica, sans-serif; color: #000; } /* ── Print styles ─────────────────────────────────────────────────────────── */ @media print { html, body { height: auto !important; min-height: 0 !important; overflow: visible !important; } body > *:not(#receiptContainer) { display: none !important; } #receiptContainer { position: static !important; left: auto !important; width: var(--receipt-w, 80mm) !important; display: block !important; } #receipt { border: none; box-shadow: none; width: var(--receipt-w, 80mm); padding: 2mm; } /* * WHY THERE IS NO `size` HERE ANY MORE * * This used to say `size: 80mm auto`. With an auto height Chrome resolves * the page box from the content, and a short receipt -- one coffee, no * client, no notes -- comes out shorter than it is wide. A page box wider * than it is tall is landscape, so Chrome rotated it and the receipt * printed sideways across the roll. It only looked correct for long bills, * which is why it survived. * * renderReceipt() now injects `size: mm px` with the height measured * off the laid-out receipt, so the page is always taller than it is wide * and the orientation is never inferred. That is the same thing * printDocument() has always done, which is why the debt receipt and the * table bill never printed sideways. * * The margin stays here so it applies even if the injected rule is missing. */ @page { margin: 0; } }