From 84d83bb94759b3845f0539b86cf5d099f354d70e Mon Sep 17 00:00:00 2001 From: Dobromir Popov Date: Fri, 8 Aug 2025 15:16:28 +0300 Subject: [PATCH] fix print --- HTML/STICKERS/index.html | 55 ++++++++++++++++++++++------------------ 1 file changed, 31 insertions(+), 24 deletions(-) diff --git a/HTML/STICKERS/index.html b/HTML/STICKERS/index.html index e389f40..2643cb7 100644 --- a/HTML/STICKERS/index.html +++ b/HTML/STICKERS/index.html @@ -3,7 +3,7 @@ -4 cm Sticker Sheet – Hex vs Grid +4 cm Sticker Sheet – Hex vs Grid (Print-Fixed) + + @@ -206,7 +213,7 @@ –
- Print at 100% scale with “Print backgrounds/graphics” enabled. If edges clip, increase Printer margin slightly (e.g., 0.3–0.5 cm). + Print to PDF at 100% scale (or “Actual size”) with backgrounds enabled. If edges clip, increase Printer margin slightly (0.3–0.5 cm).
@@ -232,7 +239,8 @@ pages: document.getElementById('pages'), generate: document.getElementById('generate'), print: document.getElementById('print'), - stats: document.getElementById('stats') + stats: document.getElementById('stats'), + pageSizeStyle: document.getElementById('page-size-style') }; let imageDataURL = null; @@ -273,7 +281,7 @@ const isLandscape = el.orientation.value === 'landscape'; if (isLandscape) [w, h] = [h, w]; - // Push CSS variables for preview + // Push CSS variables document.documentElement.style.setProperty('--sticker-diameter-cm', d); document.documentElement.style.setProperty('--gutter-cm', g); document.documentElement.style.setProperty('--margin-cm', m); @@ -282,7 +290,10 @@ document.documentElement.style.setProperty('--outline-on', outlineOn); document.documentElement.style.setProperty('--fit-mode', fit); - // Build one page (duplicate in print dialog for more) + // Force the printer page to use exactly this size (prevents the "quarter page" issue). + el.pageSizeStyle.textContent = `@page { size: ${w}cm ${h}cm; margin: 0; }`; + + // Build page el.pages.innerHTML = ''; const page = document.createElement('div'); page.className = 'page'; @@ -291,7 +302,7 @@ page.appendChild(canvas); el.pages.appendChild(page); - // Dimensions inside margins + // Dimensions inside margins (cm) const W = w - 2*m; const H = h - 2*m; @@ -299,30 +310,30 @@ const outlineWidthCm = outlineOn ? (getCssNumber('--outline-mm') / 10) : 0; // mm -> cm const outerD = d + 2*outlineWidthCm; - // Generate placements for selected layout - const placements = layout === 'grid' + // Generate placements + const placements = (layout === 'grid') ? packGrid(W, H, outerD, g) : packHex(W, H, outerD, g); // Render stickers placements.forEach(p => { const s = createSticker(imageDataURL); - // Offset by outline so the content circle sits at p.x..p.x+outerD + // Align content circle; outline is border around it s.style.left = cm(p.x + outlineWidthCm); s.style.top = cm(p.y + outlineWidthCm); canvas.appendChild(s); }); - // Compute comparison stats for both layouts - const hexCount = packHex(W, H, outerD, g).length; + // Compare both layouts + const hexCount = packHex(W, H, outerD, g).length; const gridCount = packGrid(W, H, outerD, g).length; const used = placements.length; const areaCanvas = W * H; - const areaCircle = Math.PI * Math.pow(outerD/2, 2); // using outer diameter for sheet usage + const areaCircle = Math.PI * Math.pow(outerD/2, 2); const coverage = areaCanvas > 0 ? (used * areaCircle / areaCanvas) : 0; - const gain = hexCount - gridCount; - const gainText = gain === 0 ? 'same' : (gain > 0 ? `+${gain} with Hex` : `+${-gain} with Grid`); + const gainText = gain === 0 ? 'same' + : (gain > 0 ? `+${gain} with Hex` : `+${-gain} with Grid`); el.stats.innerHTML = `${layout.toUpperCase()} layout: ${used} stickers • ` + @@ -331,7 +342,6 @@ ` • Coverage ${(coverage*100).toFixed(1)}%` + ` — Compare ⇒ Hex: ${hexCount}, Grid: ${gridCount} (${gainText})`; - // If none fit, show a helpful message if (placements.length === 0) { const msg = document.createElement('div'); msg.style.position = 'absolute'; @@ -345,18 +355,16 @@ } } - // Hexagonal packing (odd rows offset by half pitch) + // Hexagonal packing function packHex(W, H, outerD, gutter) { const res = []; const pitchX = outerD + gutter; const pitchY = (Math.sqrt(3) / 2) * outerD + gutter; const halfStep = 0.5 * (outerD + gutter); - let y = 0; - let row = 0; + let y = 0, row = 0; while (y + outerD <= H + 1e-6) { - const startX = (row % 2 === 1) ? halfStep : 0; - let x = startX; + let x = (row % 2 === 1) ? halfStep : 0; while (x + outerD <= W + 1e-6) { res.push({ x, y }); x += pitchX; @@ -366,10 +374,9 @@ if (row > 5000) break; } return res; - // Note: This is edge-to-edge packing using the outer diameter (includes outline if enabled). } - // Simple rows & columns grid + // Rows & columns grid function packGrid(W, H, outerD, gutter) { const res = []; const pitchX = outerD + gutter;