render-tag 0.1.1 → 0.1.3

package/README.md

@@ -6,7 +6,7 @@ Render HTML rich text onto canvas with the 2D API. No SVG, no `foreignObject`
 
 ## Why
 
-Browsers can render HTML into canvas via SVG `foreignObject`, but it's slow (~100ms) and inconsistent across browsers. `render-tag` parses your HTML, resolves styles via `getComputedStyle`, then lays out and draws everything with canvas 2D calls. It's **10-60x faster** than SVG-based approaches.
+When you need rich text as part of a canvas — design editors, image export, canvas-based apps — the standard SVG `foreignObject` approach is slow (~100ms per render). `render-tag` parses your HTML, resolves styles via `getComputedStyle`, then lays out and draws everything with pure canvas 2D calls. It's **10-60x faster** than SVG-based approaches.
 
 By design, render-tag focuses on **rich text only** — paragraphs, headings, lists, tables, inline formatting. It is not designed for interactive elements (buttons, inputs, iframes) or complex HTML layouts. This focus is what makes it fast.
 
@@ -176,11 +176,16 @@ drawLayout({ layout: result, width: 400, ctx: offscreenCtx });
 - `overflow-wrap: break-word`
 - Soft hyphens (`­`)
 
-## Cross-browser consistency
+## Recommended CSS reset
 
-The library targets Chrome as the primary browser. For consistent rendering across Chrome and Firefox, add these CSS rules to your input:
+For best consistency between DOM and canvas rendering, add these CSS rules to your input HTML:
 
 ```css
+/* Normalize monospace font size.
+   Chrome reduces <code>/<pre> font-size via a UA quirk that canvas can't replicate.
+   This makes DOM and canvas render code at the same size. */
+code, pre, kbd, samp { font-size: inherit; }
+
 /* Suppress Firefox's ::marker extra line height (~1.5px per list item).
    render-tag draws list markers itself, so this loses nothing visually. */
 li::marker { content: none; font-size: 0; line-height: 0; }
@@ -192,16 +197,28 @@ li::marker { content: none; font-size: 0; line-height: 0; }
 .has-emoji { font-kerning: none; }
 ```
 
-With `accuracy: 'balanced'` (the default), the library uses hidden DOM probes to match Firefox's actual line box heights. With `accuracy: 'performance'`, the CSS above becomes especially important for Firefox consistency.
+The default `accuracy: 'performance'` uses pure canvas API measurements with no DOM touches, producing consistent canvas output across browsers. Use `accuracy: 'balanced'` if you need each browser's canvas output to match its own native DOM rendering more closely (at the cost of cross-browser canvas consistency).
+
+## Design decisions
+
+### Chrome-first rendering
+
+Chrome is the primary target browser. When a rendering choice must favor one browser over another, Chrome wins. All development and CI testing defaults to Chromium.
+
+### Cross-browser consistency over per-browser accuracy
+
+The library prioritizes producing **the same canvas output in every browser** over matching each browser's native DOM rendering pixel-for-pixel. If Chrome and Firefox render a `<p>` slightly differently in DOM, our canvas output should match Chrome's version in both browsers — not adapt to each browser's quirks.
+
+In other words: identical canvas output everywhere > perfect DOM fidelity per browser. Users expect the same visual result regardless of which browser their audience uses.
 
 ## How it works
 
 1. **Parse** HTML with `DOMParser`
-2. **Resolve styles** via hidden DOM + `getComputedStyle` (CSS cascade for free)
+2. **Resolve styles** via built-in CSS resolver (selector matching, cascade, inheritance — no DOM insertion)
 3. **Layout** with canvas `measureText` (block flow, inline wrapping, margin collapsing)
 4. **Render** with canvas 2D API (`fillText`, `fillRect`, `strokeText`, etc.)
 
-Style resolution uses a hidden DOM element with `getComputedStyle` to get the full CSS cascade. Layout and rendering are done entirely with the canvas 2D API. Optional DOM probes (`accuracy: 'balanced'`) improve cross-browser accuracy for line heights and mixed-font wrapping.
+Style resolution uses a built-in CSS parser and resolver that handles selectors, specificity, cascade, and inheritance without inserting HTML into the document. Layout and rendering are done entirely with the canvas 2D API.
 
 ## Development
 

package/lib/css-resolver.d.ts

@@ -0,0 +1,10 @@
+import type { StyledNode } from './types.js';
+/**
+ * Resolve styles for a DOM tree without inserting into the document.
+ * Parses CSS rules, matches selectors, resolves cascade + inheritance.
+ */
+export declare function resolveStylesFromCSS(fragment: DocumentFragment, css: string, containerWidth: number): {
+    tree: StyledNode;
+    cleanup: () => void;
+};
+//# sourceMappingURL=css-resolver.d.ts.map

package/lib/css-resolver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-resolver.d.ts","sourceRoot":"","sources":["../src/css-resolver.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,UAAU,EAAE,MAAM,YAAY,CAAC;AAy2B5D;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,gBAAgB,EAC1B,GAAG,EAAE,MAAM,EACX,cAAc,EAAE,MAAM,GACrB;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CAmV3C"}