HTML and CSS into dmvsi documents

[JohnAmadis]

dmvs_html: HTML and CSS into dmvsi documents

The first dmvsi converter: a static UI page (HTML, CSS, Tailwind CSS from its Play CDN, icon fonts like Font Awesome) is laid out as a browser lays it out and described as a dmvsi document. todmvs writes the dmview view of that document.

It has its own HTML parser, CSS cascade and layout in C, with no browser and no other dependencies, so it runs both at build time and on a device.

• HTML
  • elements and attributes;
  • character references;
  • void and raw-text elements;
  • implied end tags.
  • <style>, <link rel=stylesheet> and style="" are read; <script> is not run. A <script> loading cdn.tailwindcss.com turns Tailwind on.
• CSS
  • the full cascade (origins, !important, specificity, order) and inheritance;
  • var(), and calc() / min() / max() / clamp();
  • selectors: all combinators, attributes, structural pseudo-classes, :not() / :is() / :where(), and ::before / ::after with content;
  • at-rules: @media (evaluated against the viewport), @supports, @layer, @import and @font-face.
  • Rules are indexed by id, class and tag, so Font Awesome's thousands of rules cost nothing.
• Tailwind v3, matching its Play CDN:
  • preflight;
  • utilities with their CDN order, the palette and arbitrary values;
  • the /opacity modifier, sm: … 2xl: variants, negative values and !.
  • Gradients, shadows, filters and transforms go through its --tw-* custom properties.
• Layout
  • block flow and inline text (line breaking, baselines, inline blocks, letter-spacing, text-transform);
  • flexbox (single line) and grid (tracks, fr, spans);
  • relative, absolute and fixed positioning;
  • z-index and stacking contexts, including flex items with a z-index;
  • overflow: clipping and scrolling;
  • translate().
• Painting in CSS order:
  • backgrounds, gradients (premultiplied stops as in CSS) and borders;
  • box-shadow (outer and inset), filter: blur() / drop-shadow(), opacity.
  • Text is measured with the fonts the view draws with (@font-face, matched as CSS matches fonts).
• Resources are files, or URLs mapped through the options (todmvs -m URL=FILE). A mapped style sheet resolves relative URLs through the maps first, then next to its local file.

Not in scope yet: JavaScript, floats and tables, flex-wrap, rounded clipping (it clips to the rectangle), transforms other than translate, and backdrop-filter.

Debugging: DMVS_HTML_DUMP=<file> writes every element's box as JSON, for comparing with a browser.

Tests:

• The dmodOS design (the page dmview/examples/dmodos/dmodos.dmvs was hand-written from) with its CDN resources mapped to fixtures. Boxes and text positions are compared with Chrome's layout (2 px tolerance).
• Small pages for styles (calc, var fallback, rgba, media queries), flex and stacking.
• Errors.

Measured on that page against Chrome:

• Layout: 99 of 100 elements within 2 px.
• Rendering: the seven screens rendered with libdmview have about the same mean error vs Chrome as the hand-written view.
• Speed: a full redraw is as fast as the hand-written view's.

Depends on dmvsi (and todmvs to make views).

🤖 Generated with Claude Code