CSS expression calculator

Resolve viewport units, root-relative units, safe-area insets, and virtual-keyboard insets for an editable mobile browser scenario. Everything runs locally in a QIP WebAssembly component.

The presets are illustrative starting points, not device specifications. Browser version, orientation, display mode, page viewport metadata, browser chrome, zoom, and keyboard state can all change the measurements.

Example scenario CSS expression

Computed value Loading…

Root metrics

Root font size (px) Root line height (px)

Viewport sizes in CSS pixels

Large/default width Large/default height Small width Small height Dynamic width Dynamic height Visual width Visual height Visual offset X Visual offset Y

Safe-area environment values

Top Right Bottom Left Maximum top Maximum right Maximum bottom Maximum left

Virtual-keyboard environment values

Top Right Bottom Left Width Height

Supported expressions #

The evaluator supports px, rem, rlh, physical v*/sv*/lv*/dv* units, arithmetic, calc(), min(), max(), clamp(), safe-area environment values, and keyboard environment values.

It resolves one numeric expression. It does not calculate layout, determine whether an element scrolls, or emulate a particular browser version. The visual viewport comparison is contextual information rather than a CSS unit.

CLI #

go install github.com/royalicing/qip@latest
curl -O https://qip.dev/components/text/css/css-expression-to-value.wasm

echo -n 'calc(100dvh - max(1rlh, env(safe-area-inset-bottom)))' | \
  qip run css-expression-to-value.wasm \
  '?root_line_height=24&dynamic_viewport_height=745&safe_area_inset_bottom=34'

The viewport model follows CSS Values and Units. Safe-area names come from CSS Environment Variables, and keyboard geometry follows the Virtual Keyboard API.