368 lines
13 KiB
JavaScript
Executable File
368 lines
13 KiB
JavaScript
Executable File
#!/usr/bin/env node
|
||
/**
|
||
* cover_validate.js — Cover page overlap detection via Playwright rendering
|
||
*
|
||
* Detects text-vs-decorative-line overlap on cover HTML pages by:
|
||
* 1. Rendering the HTML in Playwright
|
||
* 2. Waiting for fonts to load
|
||
* 3. Measuring bounding boxes of text elements and decorative line elements
|
||
* 4. Checking for Y-axis overlap (minimum spacing = 1U = 5% of page width ≈ 30pt)
|
||
*
|
||
* Usage:
|
||
* node cover_validate.js cover.html
|
||
* node cover_validate.js cover.html --width 210mm --height 297mm
|
||
* node cover_validate.js cover.html --min-gap 30 # custom min gap in px (default: auto = 5% of width)
|
||
*
|
||
* Exit codes:
|
||
* 0 = no overlap issues found
|
||
* 1 = overlap detected (prints details to stderr)
|
||
* 2 = script error (missing file, browser launch failure, etc.)
|
||
*
|
||
* This script is ONLY for cover pages. Do NOT use it on:
|
||
* - Multi-page documents (use html2pdf-next.js pre-render checks)
|
||
* - Posters (use html2poster.js which handles overflow automatically)
|
||
*/
|
||
|
||
'use strict';
|
||
|
||
const fs = require('fs');
|
||
const path = require('path');
|
||
|
||
// ── Playwright import ──
|
||
|
||
let playwright;
|
||
try {
|
||
playwright = require('playwright');
|
||
} catch {
|
||
try {
|
||
playwright = require('playwright-core');
|
||
} catch {
|
||
console.error('✗ Neither playwright nor playwright-core is installed.');
|
||
process.exit(2);
|
||
}
|
||
}
|
||
|
||
// ── Chromium resolution (shared logic with html2poster.js) ──
|
||
|
||
function resolveChromium(chromiumObj) {
|
||
let exe;
|
||
try { exe = chromiumObj.executablePath(); } catch (_) { exe = null; }
|
||
if (exe && fs.existsSync(exe)) return { status: 'ok', executablePath: exe };
|
||
|
||
const candidates = [
|
||
'/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
|
||
'/Applications/Chromium.app/Contents/MacOS/Chromium',
|
||
'/usr/bin/chromium-browser', '/usr/bin/chromium', '/usr/bin/google-chrome',
|
||
];
|
||
if (process.env.PLAYWRIGHT_CHROMIUM_PATH) candidates.unshift(process.env.PLAYWRIGHT_CHROMIUM_PATH);
|
||
|
||
for (const c of candidates) {
|
||
if (fs.existsSync(c)) return { status: 'fallback', executablePath: c };
|
||
}
|
||
return { status: 'missing', executablePath: exe || '' };
|
||
}
|
||
|
||
// ── CLI parsing ──
|
||
|
||
function parseArgs(argv) {
|
||
const tokens = argv.slice(2);
|
||
let input = null, width = '210mm', height = '297mm', minGap = null;
|
||
|
||
for (let i = 0; i < tokens.length; i++) {
|
||
const t = tokens[i];
|
||
if (t === '--width') width = tokens[++i];
|
||
else if (t === '--height') height = tokens[++i];
|
||
else if (t === '--min-gap') minGap = parseFloat(tokens[++i]);
|
||
else if (t === '--help' || t === '-h') {
|
||
console.log(`Usage: node cover_validate.js <cover.html> [options]
|
||
|
||
Options:
|
||
--width <val> Page width (default: 210mm)
|
||
--height <val> Page height (default: 297mm)
|
||
--min-gap <px> Minimum gap between text and decorative lines (default: 5% of width)
|
||
--help Show this help`);
|
||
process.exit(0);
|
||
} else if (!t.startsWith('-') && !input) {
|
||
input = t;
|
||
}
|
||
}
|
||
return { input, width, height, minGap };
|
||
}
|
||
|
||
// ── Convert CSS dimension string to px for viewport ──
|
||
|
||
function dimToPx(dim) {
|
||
if (!dim) return null;
|
||
const s = String(dim).trim();
|
||
const num = parseFloat(s);
|
||
if (s.endsWith('mm')) return Math.round(num * 3.7795); // 1mm ≈ 3.7795px at 96dpi
|
||
if (s.endsWith('cm')) return Math.round(num * 37.795);
|
||
if (s.endsWith('in')) return Math.round(num * 96);
|
||
if (s.endsWith('px') || !isNaN(num)) return Math.round(num);
|
||
return null;
|
||
}
|
||
|
||
// ── Decorative line detection heuristics ──
|
||
// A decorative line is an element that:
|
||
// - Is very thin in one dimension (height ≤ 5px or width ≤ 5px)
|
||
// - OR is an <hr> element
|
||
// - OR has a large aspect ratio (> 10:1 or < 1:10)
|
||
// - AND is not inside a text element
|
||
|
||
const DECORATIVE_LINE_DETECTION = `
|
||
(function detectOverlaps(minGapPx) {
|
||
// Collect all elements
|
||
const allElements = document.querySelectorAll('*');
|
||
|
||
const textElements = [];
|
||
const lineElements = [];
|
||
|
||
// Classify elements
|
||
for (const el of allElements) {
|
||
const rect = el.getBoundingClientRect();
|
||
if (rect.width === 0 || rect.height === 0) continue;
|
||
|
||
const tag = el.tagName.toLowerCase();
|
||
const style = getComputedStyle(el);
|
||
|
||
// Skip invisible elements
|
||
if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') continue;
|
||
|
||
// Detect decorative lines
|
||
const isHR = tag === 'hr';
|
||
const isThinH = rect.height <= 5 && rect.width > 20; // thin horizontal line
|
||
const isThinV = rect.width <= 5 && rect.height > 20; // thin vertical line
|
||
const aspectH = rect.width / rect.height;
|
||
const aspectV = rect.height / rect.width;
|
||
const isWideRatio = aspectH > 15 && rect.height <= 8; // very wide, very thin
|
||
const isTallRatio = aspectV > 15 && rect.width <= 8; // very tall, very thin
|
||
|
||
// Check if element has only border (no text content, no background image)
|
||
const hasOnlyBorder = (
|
||
el.textContent.trim() === '' &&
|
||
style.backgroundImage === 'none' &&
|
||
(style.borderTopWidth !== '0px' || style.borderBottomWidth !== '0px' ||
|
||
style.borderLeftWidth !== '0px' || style.borderRightWidth !== '0px')
|
||
);
|
||
const isBorderLine = hasOnlyBorder && (rect.height <= 8 || rect.width <= 8);
|
||
|
||
if (isHR || isThinH || isThinV || isWideRatio || isTallRatio || isBorderLine) {
|
||
lineElements.push({
|
||
tag: tag,
|
||
class: el.className || '',
|
||
rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
|
||
type: isThinH || isWideRatio ? 'horizontal' : (isThinV || isTallRatio ? 'vertical' : (rect.width >= rect.height ? 'horizontal' : 'vertical')),
|
||
});
|
||
continue;
|
||
}
|
||
|
||
// Detect text elements (has direct text content or is a heading/paragraph)
|
||
const textTags = ['h1','h2','h3','h4','h5','h6','p','span','a','li','td','th','label','summary'];
|
||
const hasDirectText = Array.from(el.childNodes).some(n => n.nodeType === 3 && n.textContent.trim());
|
||
|
||
if (textTags.includes(tag) || hasDirectText) {
|
||
// Skip if this is inside a decorative element
|
||
if (rect.height < 3) continue;
|
||
|
||
textElements.push({
|
||
tag: tag,
|
||
class: el.className || '',
|
||
text: el.textContent.trim().substring(0, 60),
|
||
rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
|
||
});
|
||
}
|
||
}
|
||
|
||
// De-duplicate: if a parent and child text element both overlap the same line,
|
||
// only keep the more specific (smaller) one to avoid duplicate reports.
|
||
// Sort text elements by area (smallest first) so we can skip parents.
|
||
textElements.sort((a, b) => (a.rect.width * a.rect.height) - (b.rect.width * b.rect.height));
|
||
|
||
// Check overlaps between text elements and line elements
|
||
const overlaps = [];
|
||
const reportedPairs = new Set(); // track "lineIndex:textContent" to deduplicate
|
||
|
||
for (const text of textElements) {
|
||
for (const line of lineElements) {
|
||
const tr = text.rect;
|
||
const lr = line.rect;
|
||
|
||
if (line.type === 'horizontal') {
|
||
// Check vertical overlap/proximity
|
||
const textTop = tr.y;
|
||
const textBottom = tr.y + tr.height;
|
||
const lineTop = lr.y;
|
||
const lineBottom = lr.y + lr.height;
|
||
|
||
// Check horizontal overlap (they must share some X range)
|
||
const xOverlap = !(tr.x + tr.width < lr.x || lr.x + lr.width < tr.x);
|
||
if (!xOverlap) continue;
|
||
|
||
// Calculate vertical gap
|
||
let vGap;
|
||
if (lineTop >= textBottom) {
|
||
vGap = lineTop - textBottom; // line is below text
|
||
} else if (textTop >= lineBottom) {
|
||
vGap = textTop - lineBottom; // line is above text
|
||
} else {
|
||
vGap = 0; // overlapping
|
||
}
|
||
|
||
if (vGap < minGapPx) {
|
||
// De-dup: same line region, only report the smallest (most specific) text element
|
||
const lineKey = 'h:' + Math.round(lr.x) + ',' + Math.round(lr.y);
|
||
if (!reportedPairs.has(lineKey)) {
|
||
reportedPairs.add(lineKey);
|
||
overlaps.push({
|
||
text: text.text,
|
||
textTag: text.tag,
|
||
textClass: text.class,
|
||
textRect: tr,
|
||
lineTag: line.tag,
|
||
lineClass: line.class,
|
||
lineRect: lr,
|
||
lineType: line.type,
|
||
gap: Math.round(vGap * 10) / 10,
|
||
required: minGapPx,
|
||
});
|
||
}
|
||
}
|
||
} else if (line.type === 'vertical') {
|
||
// Check horizontal overlap/proximity
|
||
const textLeft = tr.x;
|
||
const textRight = tr.x + tr.width;
|
||
const lineLeft = lr.x;
|
||
const lineRight = lr.x + lr.width;
|
||
|
||
// Check vertical overlap (they must share some Y range)
|
||
const yOverlap = !(tr.y + tr.height < lr.y || lr.y + lr.height < tr.y);
|
||
if (!yOverlap) continue;
|
||
|
||
// Calculate horizontal gap
|
||
let hGap;
|
||
if (lineLeft >= textRight) {
|
||
hGap = lineLeft - textRight;
|
||
} else if (textLeft >= lineRight) {
|
||
hGap = textLeft - lineRight;
|
||
} else {
|
||
hGap = 0;
|
||
}
|
||
|
||
if (hGap < minGapPx) {
|
||
const lineKey = 'v:' + Math.round(lr.x) + ',' + Math.round(lr.y);
|
||
if (!reportedPairs.has(lineKey)) {
|
||
reportedPairs.add(lineKey);
|
||
overlaps.push({
|
||
text: text.text,
|
||
textTag: text.tag,
|
||
textClass: text.class,
|
||
textRect: tr,
|
||
lineTag: line.tag,
|
||
lineClass: line.class,
|
||
lineRect: lr,
|
||
lineType: line.type,
|
||
gap: Math.round(hGap * 10) / 10,
|
||
required: minGapPx,
|
||
});
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
return {
|
||
textElements: textElements.length,
|
||
lineElements: lineElements.length,
|
||
overlaps: overlaps,
|
||
};
|
||
})
|
||
`;
|
||
|
||
// ── Main ──
|
||
|
||
async function main() {
|
||
const { input, width, height, minGap } = parseArgs(process.argv);
|
||
|
||
if (!input) {
|
||
console.error('✗ No input file specified. Usage: node cover_validate.js cover.html');
|
||
process.exit(2);
|
||
}
|
||
|
||
const absIn = path.resolve(input);
|
||
if (!fs.existsSync(absIn)) {
|
||
console.error(`✗ File not found: ${absIn}`);
|
||
process.exit(2);
|
||
}
|
||
|
||
const widthPx = dimToPx(width) || 794; // A4 width in px
|
||
const heightPx = dimToPx(height) || 1123; // A4 height in px
|
||
const gap = minGap || Math.round(widthPx * 0.05); // 1U = 5% of page width
|
||
|
||
console.log(`🔍 cover_validate — Cover overlap detection`);
|
||
console.log(` Input: ${absIn}`);
|
||
console.log(` Page: ${widthPx}×${heightPx}px`);
|
||
console.log(` Min gap: ${gap}px (1U)`);
|
||
|
||
const { chromium } = playwright;
|
||
const bInfo = resolveChromium(chromium);
|
||
|
||
if (bInfo.status === 'missing') {
|
||
console.error('✗ No Chromium found. Install via: npx playwright install chromium');
|
||
process.exit(2);
|
||
}
|
||
|
||
let browser;
|
||
try {
|
||
const opts = { headless: true };
|
||
if (bInfo.status === 'fallback') opts.executablePath = bInfo.executablePath;
|
||
browser = await chromium.launch(opts);
|
||
} catch (err) {
|
||
console.error(`✗ Browser launch failed: ${err.message}`);
|
||
process.exit(2);
|
||
}
|
||
|
||
try {
|
||
const page = await browser.newPage({ viewport: { width: widthPx, height: heightPx } });
|
||
await page.goto('file://' + absIn, { waitUntil: 'networkidle' });
|
||
console.log(` ✓ HTML loaded`);
|
||
|
||
// Wait for fonts
|
||
const fontsLoaded = await page.evaluate(() =>
|
||
document.fonts.ready.then(() => document.fonts.size)
|
||
).catch(() => 0);
|
||
console.log(` ✓ Fonts: ${fontsLoaded} loaded`);
|
||
|
||
// Run overlap detection
|
||
const result = await page.evaluate(`(${DECORATIVE_LINE_DETECTION})(${gap})`);
|
||
|
||
console.log(` ✓ Found ${result.textElements} text elements, ${result.lineElements} decorative lines`);
|
||
|
||
if (result.overlaps.length === 0) {
|
||
console.log(`\n ✅ No overlap issues found`);
|
||
process.exit(0);
|
||
}
|
||
|
||
// Report overlaps
|
||
console.error(`\n ❌ Found ${result.overlaps.length} text-line overlap(s):\n`);
|
||
|
||
for (const o of result.overlaps) {
|
||
const direction = o.lineType === 'vertical' ? 'horizontal' : 'vertical';
|
||
console.error(` ERROR: ${direction} gap = ${o.gap}px (required ≥ ${o.required}px)`);
|
||
console.error(` Text: <${o.textTag}> "${o.text}" @ y=${Math.round(o.textRect.y)}-${Math.round(o.textRect.y + o.textRect.height)}`);
|
||
console.error(` Line: <${o.lineTag}${o.lineClass ? '.' + o.lineClass.split(' ')[0] : ''}> [${o.lineType}] @ y=${Math.round(o.lineRect.y)}-${Math.round(o.lineRect.y + o.lineRect.height)}`);
|
||
console.error(` Fix: Move the decorative line at least ${Math.ceil(o.required - o.gap)}px away from the text.`);
|
||
console.error('');
|
||
}
|
||
|
||
process.exit(1);
|
||
|
||
} finally {
|
||
await browser.close();
|
||
}
|
||
}
|
||
|
||
main().catch(err => {
|
||
console.error(`✗ Unexpected error: ${err.message}`);
|
||
process.exit(2);
|
||
});
|