You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This document lists CSS property support in HyperRender.
Legend
Full Support: Property is fully implemented and tested
Partial Support: Some values or edge cases not supported
Not Supported: Property is not implemented
Planned: Scheduled for future release
Known Limitations
Feature
Status
Notes
!important
✅ Full Support
Declarations marked !important override inline styles per CSS cascade spec. Important rules are collected separately and applied after all other declarations.
Box Model Properties
Property
Status
Supported Values
Notes
width
✅
px, %, auto
Constrains a block's content width (text wraps inside it), on replaced elements too. % resolves against the containing block
height
✅
px, auto
Absolute px on replaced elements. % height not supported (needs a deferred-height model)
min-width
✅
px, %
Applied to block content width and to wrapping-flex item sizing; wins over max-width per CSS
max-width
✅
px, %
Constrains a block's content width (text wraps inside it)
min-height
❌
—
Parsed into ComputedStyle.minHeight, then read by nothing in the render path. Found by test/flagship_execution_audit_test.dart
max-height
❌
—
Parsed into ComputedStyle.maxHeight, then read by nothing in the render path. Found by test/flagship_execution_audit_test.dart
wrap/wrap-reverse on a row container run on RenderFlexWrap: real line packing plus free-space distribution by flex-grow. flex-direction: column + wrap falls back to Flutter Wrap (items keep their base size, no growth) — the main axis there is height, which is unbounded
flex
✅
<grow> <shrink> <basis>
Shorthand
flex-grow
✅
number
flex-shrink
✅
number
flex-basis
⚠️
px, %, auto
Applied on flex-wrap: wrap (row) containers only — the nowrap Row/Column path still sizes from content. The flex: 1 / flex: 1 1 shorthands correctly imply a 0% basis
justify-content
✅
flex-start, center, flex-end, space-between, space-around
align-items
✅
flex-start, center, flex-end, stretch, baseline
align-content
❌
—
Parsed but not applied: lines always stack from the cross-axis start. Verified by execution — align-content:center on a fixed-height wrapping container leaves the first line at offset 0
align-self
✅
auto, flex-start, center, flex-end, stretch
gap
✅
px
Row and column gap
row-gap
✅
px
column-gap
✅
px
order
⚠️
integer
Basic support
Grid Layout
Property
Status
Supported Values
Notes
display: grid
✅
grid
Supported in v1.2.0
grid-template-columns
✅
px, fr, auto, repeat(N, size)
Fractional units resolved via LayoutBuilder
grid-template-rows
✅
px, fr, auto
Supported in v1.2.0
grid-column
✅
span N, start / end
Auto-placement with span support
grid-row
✅
span N, start / end
gap / row-gap / column-gap
✅
px
Full support
grid-auto-flow
❌
—
Parsed into ComputedStyle.gridAutoFlow and read by nothing; placement is always row-wise because that is the default, not because the property is honoured
justify-items
✅
flex-start, center, flex-end, stretch
align-content
❌
—
Parsed into ComputedStyle.alignContent and read by nothing in the render path (grid included) — rows always stack from the cross-axis start
Typography
Property
Status
Supported Values
Notes
color
✅
All CSS colors
hex, rgb, rgba, named colors. html { color } / body { color } set the document root color (the only body property honoured; html < :root < body). Default: dark gray in a light theme, onSurface in a dark Theme; HyperViewer(textColor:) overrides all of these
font-size
✅
px, em, rem, %
font-family
✅
Any font name
Falls back to system fonts
font-weight
✅
100-900, normal, bold
font-style
✅
normal, italic, oblique
font-variant
⚠️
small-caps
Limited support
font-variant-numeric
✅
tabular-nums, etc.
line-height
✅
px, number, %
letter-spacing
✅
px
word-spacing
✅
px
text-align
✅
left, right, center, justify
LTR and box-level RTL block/paragraph text. justify distributes inter-word space (last line left-aligned per CSS). An explicit text-align overrides the RTL default right edge; an unset RTL paragraph right-packs (start)
text-decoration
✅
none, underline, overline, line-through
text-decoration-color
✅
All CSS colors
text-decoration-style
✅
solid, dashed, dotted, double
text-transform
❌
—
Parsed into ComputedStyle.textTransform and read by nothing in the render path — text is painted verbatim
text-indent
✅
px, em, rem, pt, %
First line of a block (LTR); inherits. % resolves against the containing block width
text-overflow
✅
clip, ellipsis
white-space
✅
normal, nowrap, pre, pre-wrap
word-break
✅
normal, break-all, keep-all
vertical-align
⚠️
baseline, sub, super
Limited support
text-shadow
✅
x y blur color
Multiple shadows supported in v1.2.0
Float & Clear
Property
Status
Supported Values
Notes
float
⚠️
left, right, none
Text wraps around a floated replaced element (<img>) or an empty explicitly sized box. An element sized by its own text is NOT floated — the float reserves a box but the element's content stays in normal flow (a floated <div> with text can end up taller; a floated <span> drop cap has no effect). See LIMITATIONS.md
clear
✅
left, right, both, none
Proper float clearing
Background & Effects
Property
Status
Supported Values
Notes
background-color
✅
All CSS colors
background-image
⚠️
linear-gradient()
Gradients execute (ComputedStyle.backgroundGradient). url() is parsed into backgroundImage and read by nothing — no background image is painted
cubic-bezier/steps added in v1.5.0 (HyperStepsCurve)
animation-play-state
✅
running, paused
Paused animations hold their frame and resume from it. Longhand + animation shorthand
CSS Variables & calc()
Feature
Status
Supported Values
Notes
--custom-property
✅
Any value
Custom properties are inherited along parent chain.
var(--name)
✅
—
In stylesheets (<style>, customCss) and inline. Before 1.10.0 only inline style="" resolved. Custom properties are cascaded before substitution; expansion is capped at 16 KB
var(--name, fallback)
✅
—
Fallback used when variable not defined
calc()
✅
px, em, rem, unitless
Correct operator precedence (*// before +/-). Stylesheet calc() resolves as of 1.10.0 (inline only before). min()/max()/clamp() are not evaluated
calc() with var()
✅
—
var() resolved first, then arithmetic
Text Direction & BiDi
Feature
Status
Notes
direction: ltr
✅
Default
direction: rtl
✅
Applied per-fragment in TextPainter.
dir= HTML attribute
✅
Parsed on any element, including <html dir="rtl">
Measurement Units
Unit
Status
Notes
px
✅
Pixels
%
✅
Percentage of parent
em
✅
Relative to font-size
rem
✅
Relative to root font-size
vh / vw
❌
Not supported
calc()
✅
Arithmetic expressions
var()
✅
CSS custom properties
Notes
Unique Features
CSS Float Layout: text wraps around floated images and empty sized boxes; clear cancels the wrap. Elements sized by their own text (a <div> with content, a <span> drop cap) are not floated — see the float row above and LIMITATIONS.md
Kinsoku Line-Breaking: Professional CJK typography rules
Ruby Annotations: Furigana rendering for Japanese
CSS Grid: fr-unit layout with repeat() support
CSS Variables: --custom-property / var() with full inheritance chain
CSS calc(): arithmetic expressions with correct operator precedence
RTL/BiDi: per-fragment text direction support
Screenshot export: GlobalKey.toPngBytes() support
DevTools extension: UDT tree inspector
Plugin API (v1.2.0): Extend tags via custom Flutter widgets
Roadmap
v3.x: Better pseudo-element support (::before/::after)
v4.0: Full Transform support, vh/vw units, transition-delay
Last updated: September 6, 2026 — HyperRender v1.8.0