render-tag 0.1.0

package/lib/style-resolver.js

@@ -0,0 +1,257 @@
+let containerId = 0;
+function parsePixels(value) {
+    if (!value || value === 'normal' || value === 'auto' || value === 'none')
+        return 0;
+    const num = parseFloat(value);
+    return isNaN(num) ? 0 : num;
+}
+function parseFontWeight(value) {
+    const num = parseInt(value, 10);
+    if (!isNaN(num))
+        return num;
+    if (value === 'bold')
+        return 700;
+    if (value === 'normal')
+        return 400;
+    return 400;
+}
+/**
+ * Resolve line-height to a pixel value.
+ * "normal" is resolved using font metrics via a canvas context.
+ */
+function resolveLineHeight(cs, fontSize) {
+    const raw = cs.lineHeight;
+    if (raw && raw !== 'normal') {
+        const px = parseFloat(raw);
+        if (!isNaN(px))
+            return px;
+    }
+    // "normal" — approximate as fontSize * 1.2 (will be refined in layout with actual font metrics)
+    return 0; // 0 signals "normal" — layout will compute from font metrics
+}
+function extractStyle(cs, el = null) {
+    const fontSize = parsePixels(cs.fontSize);
+    return {
+        fontFamily: cs.fontFamily,
+        fontSize,
+        fontWeight: parseFontWeight(cs.fontWeight),
+        fontStyle: cs.fontStyle || 'normal',
+        color: cs.color,
+        textAlign: cs.textAlign || 'left',
+        textTransform: cs.textTransform || 'none',
+        textDecorationLine: cs.textDecorationLine || 'none',
+        textDecorationStyle: cs.textDecorationStyle || 'solid',
+        textDecorationColor: cs.textDecorationColor || cs.color,
+        textShadow: cs.textShadow || 'none',
+        webkitTextStrokeWidth: parsePixels(cs.webkitTextStrokeWidth),
+        webkitTextStrokeColor: cs.webkitTextStrokeColor || '',
+        webkitTextFillColor: cs.webkitTextFillColor || '',
+        webkitBackgroundClip: cs.webkitBackgroundClip || cs.backgroundClip || '',
+        backgroundImage: cs.backgroundImage || 'none',
+        letterSpacing: cs.letterSpacing === 'normal' ? 0 : parsePixels(cs.letterSpacing),
+        fontKerning: cs.fontKerning || 'auto',
+        lineHeight: resolveLineHeight(cs, fontSize),
+        verticalAlign: cs.verticalAlign || 'baseline',
+        whiteSpace: cs.whiteSpace || 'normal',
+        wordBreak: cs.wordBreak || 'normal',
+        overflowWrap: cs.overflowWrap || 'normal',
+        direction: cs.direction || 'ltr',
+        display: cs.display || 'block',
+        // Only use width if explicitly set (inline style or stylesheet).
+        // getComputedStyle resolves 'auto' to a pixel value for block elements,
+        // which we must NOT treat as an explicit width constraint.
+        width: el && el instanceof HTMLElement && el.style.width ? parsePixels(cs.width) : 0,
+        minHeight: parsePixels(cs.minHeight),
+        paddingTop: parsePixels(cs.paddingTop),
+        paddingRight: parsePixels(cs.paddingRight),
+        paddingBottom: parsePixels(cs.paddingBottom),
+        paddingLeft: parsePixels(cs.paddingLeft),
+        marginTop: parsePixels(cs.marginTop),
+        marginRight: parsePixels(cs.marginRight),
+        marginBottom: parsePixels(cs.marginBottom),
+        marginLeft: parsePixels(cs.marginLeft),
+        backgroundColor: cs.backgroundColor,
+        borderTopWidth: parsePixels(cs.borderTopWidth),
+        borderTopColor: cs.borderTopColor,
+        borderTopStyle: cs.borderTopStyle || 'none',
+        borderRightWidth: parsePixels(cs.borderRightWidth),
+        borderRightColor: cs.borderRightColor,
+        borderRightStyle: cs.borderRightStyle || 'none',
+        borderBottomWidth: parsePixels(cs.borderBottomWidth),
+        borderBottomColor: cs.borderBottomColor,
+        borderBottomStyle: cs.borderBottomStyle || 'none',
+        borderLeftWidth: parsePixels(cs.borderLeftWidth),
+        borderLeftColor: cs.borderLeftColor,
+        borderLeftStyle: cs.borderLeftStyle || 'none',
+        flexDirection: cs.flexDirection || 'row',
+        gap: parsePixels(cs.gap),
+        flexGrow: parseFloat(cs.flexGrow) || 0,
+        flexShrink: parseFloat(cs.flexShrink) || 1,
+        listStyleType: cs.listStyleType || 'disc',
+        listStylePosition: cs.listStylePosition || 'outside',
+    };
+}
+/**
+ * Detect list marker text for a <li> element.
+ */
+function getListMarker(el, cs) {
+    const tag = el.tagName.toLowerCase();
+    if (tag !== 'li')
+        return undefined;
+    const beforeStyle = window.getComputedStyle(el, '::before');
+    const content = beforeStyle.content;
+    if (content && content !== 'none' && content !== 'normal') {
+        if (!content.includes('counter(')) {
+            const cleaned = content.replace(/^["']|["']$/g, '');
+            if (cleaned)
+                return cleaned;
+        }
+    }
+    const parent = el.parentElement;
+    if (!parent)
+        return '•';
+    const parentTag = parent.tagName.toLowerCase();
+    if (parentTag === 'ol') {
+        let index = 0;
+        for (const child of parent.children) {
+            if (child.tagName.toLowerCase() === 'li') {
+                index++;
+                if (child === el)
+                    break;
+            }
+        }
+        return `${index}.`;
+    }
+    if (parentTag === 'ul') {
+        // Use computed list-style-type for correct nesting level markers
+        const listStyle = cs.listStyleType;
+        if (listStyle === 'circle')
+            return '○';
+        if (listStyle === 'square')
+            return '■';
+        if (listStyle === 'none')
+            return undefined;
+        return '•';
+    }
+    return undefined;
+}
+/**
+ * Rewrite CSS so that `body` and `html` selectors target our container instead.
+ */
+function scopeCSS(css, containerId) {
+    const selector = `#${containerId}`;
+    return css.replace(/(^|[},;\s])(\s*)(html|body)\b/gm, (match, before, space, _tag) => `${before}${space}${selector}`);
+}
+/**
+ * Insert HTML into a hidden offscreen container, walk the DOM tree,
+ * and extract computed styles for every element. No measurements — only CSS values.
+ */
+export function resolveStyles(fragment, css, width, height) {
+    const id = `__html_canvas_${containerId++}__`;
+    const container = document.createElement('div');
+    container.id = id;
+    container.style.position = 'absolute';
+    container.style.left = '-99999px';
+    container.style.top = '-99999px';
+    container.style.visibility = 'hidden';
+    container.style.width = `${width}px`;
+    container.style.margin = '0';
+    container.style.padding = '0';
+    if (css) {
+        const styleEl = document.createElement('style');
+        styleEl.textContent = scopeCSS(css, id);
+        container.appendChild(styleEl);
+    }
+    container.appendChild(fragment);
+    document.body.appendChild(container);
+    // Force reflow so getComputedStyle returns resolved values
+    container.getBoundingClientRect();
+    function walkNode(node) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            const text = node.textContent;
+            if (!text)
+                return null;
+            if (text.trim() === '' && !text.includes('\u00A0')) {
+                // Whitespace-only text node. Decide whether to keep or drop.
+                const parentEl = node.parentElement;
+                const ws = parentEl ? window.getComputedStyle(parentEl).whiteSpace : '';
+                const prev = node.previousSibling;
+                const next = node.nextSibling;
+                const isInlineSibling = (n) => {
+                    if (!n || n.nodeType !== Node.ELEMENT_NODE)
+                        return n?.nodeType === Node.TEXT_NODE;
+                    const d = window.getComputedStyle(n).display;
+                    return d === 'inline' || d === 'inline-block';
+                };
+                // Between block elements: drop in normal mode (HTML formatting).
+                // But in pre-wrap, the \n IS content — creates a visible line break.
+                if (prev && next && !isInlineSibling(prev) && !isInlineSibling(next)) {
+                    if (ws === 'pre' || ws === 'pre-wrap' || ws === 'pre-line') {
+                        // Keep — pre-wrap makes this whitespace visible
+                    }
+                    else {
+                        return null;
+                    }
+                }
+                if (ws !== 'pre' && ws !== 'pre-wrap' && ws !== 'pre-line') {
+                    // Skip whitespace that contains newlines (HTML source indentation)
+                    if (text.includes('\n'))
+                        return null;
+                }
+            }
+            const parent = node.parentElement;
+            if (!parent)
+                return null;
+            const parentCS = window.getComputedStyle(parent);
+            return {
+                element: null,
+                tagName: '#text',
+                style: extractStyle(parentCS),
+                children: [],
+                textContent: text,
+            };
+        }
+        if (node.nodeType !== Node.ELEMENT_NODE)
+            return null;
+        const el = node;
+        const tag = el.tagName.toLowerCase();
+        if (tag === 'style' || tag === 'script')
+            return null;
+        // <br> → emit as a text node with newline content
+        if (tag === 'br') {
+            const parent = el.parentElement;
+            const cs = parent ? window.getComputedStyle(parent) : window.getComputedStyle(el);
+            return {
+                element: null,
+                tagName: '#text',
+                style: extractStyle(cs),
+                children: [],
+                textContent: '\n',
+            };
+        }
+        const cs = window.getComputedStyle(el);
+        const style = extractStyle(cs, el);
+        const marker = getListMarker(el, cs);
+        const children = [];
+        for (const child of el.childNodes) {
+            const childNode = walkNode(child);
+            if (childNode) {
+                children.push(childNode);
+            }
+        }
+        return {
+            element: el,
+            tagName: tag,
+            style,
+            children,
+            textContent: null,
+            listMarker: marker,
+        };
+    }
+    const tree = walkNode(container);
+    const cleanup = () => {
+        container.remove();
+    };
+    return { tree, cleanup };
+}
+//# sourceMappingURL=style-resolver.js.map

package/lib/style-resolver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-resolver.js","sourceRoot":"","sources":["../src/style-resolver.ts"],"names":[],"mappings":"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"}

package/lib/types.d.ts

@@ -0,0 +1,143 @@
+export interface RenderOptions {
+    /** Target canvas element (created if not provided) */
+    canvas?: HTMLCanvasElement;
+    /** Width of the rendering area in CSS pixels */
+    width: number;
+    /** Height of the rendering area in CSS pixels (auto-sized if not set) */
+    height?: number;
+    /** Additional CSS to apply */
+    css?: string;
+    /** Device pixel ratio (default: 1) */
+    pixelRatio?: number;
+    /**
+     * Use DOM measurements for improved cross-browser consistency (default: true).
+     * When enabled, uses hidden DOM elements to measure line heights and verify
+     * text wrapping at font boundaries. When disabled, uses pure canvas API
+     * measurements only — faster and DOM-free, but may have slight differences
+     * across browsers (e.g. Firefox list item heights).
+     */
+    useDomMeasurements?: boolean;
+    /**
+     * Debug callback for layout diagnostics. Receives structured log entries
+     * during text measurement, wrapping decisions, and positioning.
+     */
+    debug?: (entry: DebugEntry) => void;
+}
+export interface DebugEntry {
+    type: 'measure-word' | 'line-wrap' | 'line-commit' | 'position-text';
+    /** Human-readable description */
+    message: string;
+    /** Relevant data */
+    data: Record<string, unknown>;
+}
+/** A text line extracted from the layout tree */
+export interface LayoutLine {
+    /** Y coordinate of the text baseline */
+    y: number;
+    /** Concatenated text content on this line */
+    text: string;
+}
+export interface RenderResult {
+    canvas: HTMLCanvasElement;
+    /** Actual content height after layout */
+    height: number;
+    /** The layout tree root (for debugging/comparison) */
+    layoutRoot: LayoutBox;
+    /** Text lines extracted from the layout tree, grouped by Y coordinate */
+    lines: LayoutLine[];
+}
+/** Resolved style for a single element — all values in px / concrete strings */
+export interface ResolvedStyle {
+    fontFamily: string;
+    fontSize: number;
+    fontWeight: number;
+    fontStyle: string;
+    color: string;
+    textAlign: string;
+    textTransform: string;
+    textDecorationLine: string;
+    textDecorationStyle: string;
+    textDecorationColor: string;
+    textShadow: string;
+    webkitTextStrokeWidth: number;
+    webkitTextStrokeColor: string;
+    webkitTextFillColor: string;
+    webkitBackgroundClip: string;
+    backgroundImage: string;
+    letterSpacing: number;
+    fontKerning: string;
+    lineHeight: number;
+    verticalAlign: string;
+    whiteSpace: string;
+    wordBreak: string;
+    overflowWrap: string;
+    direction: string;
+    display: string;
+    width: number;
+    minHeight: number;
+    paddingTop: number;
+    paddingRight: number;
+    paddingBottom: number;
+    paddingLeft: number;
+    marginTop: number;
+    marginRight: number;
+    marginBottom: number;
+    marginLeft: number;
+    backgroundColor: string;
+    borderTopWidth: number;
+    borderTopColor: string;
+    borderTopStyle: string;
+    borderRightWidth: number;
+    borderRightColor: string;
+    borderRightStyle: string;
+    borderBottomWidth: number;
+    borderBottomColor: string;
+    borderBottomStyle: string;
+    borderLeftWidth: number;
+    borderLeftColor: string;
+    borderLeftStyle: string;
+    flexDirection: string;
+    gap: number;
+    flexGrow: number;
+    flexShrink: number;
+    listStyleType: string;
+    listStylePosition: string;
+}
+/** A node in our styled tree (no positions — layout computes those) */
+export interface StyledNode {
+    /** Original DOM element (null for text nodes) */
+    element: Element | null;
+    /** Tag name in lowercase, '#text' for text nodes */
+    tagName: string;
+    /** Resolved CSS style */
+    style: ResolvedStyle;
+    /** Child nodes */
+    children: StyledNode[];
+    /** Text content (only for text nodes) */
+    textContent: string | null;
+    /** For list items: the marker text (e.g. "•", "1.") */
+    listMarker?: string;
+}
+/** A positioned text run ready for canvas rendering */
+export interface LayoutText {
+    type: 'text';
+    text: string;
+    x: number;
+    y: number;
+    width: number;
+    style: ResolvedStyle;
+}
+/** A positioned box (element) */
+export interface LayoutBox {
+    type: 'box';
+    style: ResolvedStyle;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    tagName: string;
+    children: LayoutNode[];
+    listMarker?: string;
+}
+export type LayoutNode = LayoutText | LayoutBox;
+//# sourceMappingURL=types.d.ts.map

package/lib/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/lib/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/lib/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "render-tag",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Render HTML rich text onto canvas using pure 2D API",
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "types": "./lib/index.d.ts"
+    }
+  },
+  "homepage": "https://polotno.com/render-tag/",
+  "author": "Anton Lavrenov",
+  "files": [
+    "lib",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "test": "vitest run tests/render.test.ts",
+    "test:stress": "vitest run tests/stress.test.ts",
+    "test:firefox": "vitest run tests/render.test.ts -c vitest.firefox.config.ts",
+    "build": "tsc",
+    "docs": "vite --config docs/vite.config.ts",
+    "docs:build": "vite build --config docs/vite.config.ts"
+  },
+  "devDependencies": {
+    "@vitest/browser": "^4",
+    "@vitest/browser-playwright": "^4.1.2",
+    "pixelmatch": "^7",
+    "playwright": "^1",
+    "rasterizehtml": "^1.4.1",
+    "typescript": "^6",
+    "vite": "^8",
+    "vitest": "^4"
+  }
+}