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;