flutter_html_css_units 0.3.0
flutter_html_css_units: ^0.3.0 copied to clipboard

Published 2 days ago •

PlatformAndroid iOS Linux macOS web Windows

0

→

Metadata

A flutter_html extension that renders the CSS absolute and viewport length units flutter_html 3.0.0 reads as pixels or as zero: pt, pc, in, cm, mm, Q, vw, vh, vmin and vmax.

0.3.0 #

Renamed from flutter_html_css_units_extension on pub.flutter-io.cn. The old package stays published and is marked discontinued with this one as its replacement. Class names are unchanged.

0.2.0 #

Five more properties are rewritten, every one of them a length a sibling renders and flutter_html drops: text-decoration-thickness, transform, transform-origin, flex and grid-template-columns. Each was measured against the package that reads it, with this extension registered and without.
text-decoration-thickness is the one that started this. flutter_html_css_text_metrics 0.2.0 resolves that property in px, em, rem and % and in nothing else, so 30pt stayed unusable while 10px worked. It now arrives as 40px. Measured on a red underline at font-size: 40px: 30pt painted 79 red pixels, one row tall, in 0.1.0, and paints 720 red pixels, nine rows tall, now, which is pixel for pixel what 40px paints on its own. 1cm lands on 639 pixels and eight rows, and 5vw on the same 720 and nine as 40px, because 5vw of an 800 pixel viewport is 40. text-metrics 0.2.0 is not on pub.flutter-io.cn yet, so that half is measured against its working tree and there is no dev dependency on it here.
transform and transform-origin. flutter_html_css_transform 0.1.0 reads px, em, rem and pt, and returns null for every other unit, which drops the whole declaration. Measured on transform: translate(1in, 0): a translation of 0 before, 96 now. translate(10vw, 5vh) goes from (0, 0) to (80, 30). 72pt already gave 96 and still does.
flex and grid-template-columns. flutter_html_css_flex 0.2.0 reads px, em, rem and a bare 0. Measured on flex: 0 0 2in in a display: flex container: the item is 14.25 wide before and 192 now, which is what 192px gives. grid-template-columns: 2in 1fr goes from 584 and 584 to 192 and 392. flex-basis, gap, row-gap and column-gap were in the list already; 0.1.0 filed them under "nothing renders these yet", and flex 0.2.0 renders all four, so the dartdoc moves them up a group.
No new ordering rule, and the existing ones are unchanged. All three siblings read the inline style after the preStyling step, so this extension always writes first. Both orders are measured for transform and flex.
Rejected, because nothing reads the length: background-position and background-size (flutter_html_css_background keeps the colour of a background shorthand and drops the image), object-position (flutter_html_css_object_fit takes keywords and percentages), vertical-align (flutter_html maps keywords to a VerticalAlign enum), text-underline-offset, perspective, filter, border-spacing, scroll-margin and scroll-padding. doc/units.md has the list and the reason for each.

0.1.0 #

Initial release. flutter_html 3.0.0 has a _unitMap with exactly one arm, default: return Unit.px, so every absolute unit keeps its number and loses its meaning: 12pt renders 12 pixels, 1in renders 1, 2cm renders 2, 3pc renders 3. The viewport units are worse, because csslib hands them over as a ViewportTerm that nothing in flutter_html has a case for, so 50vw is 0 and font-size: 5vw is dropped outright. dvh and friends are not even lexed as a unit; 10dvh comes through as the number 10 and a stray identifier. All of it is silent. doc/units.md has the table, and every row is pinned by a test.
The fix is one rewrite of the inline style attribute at the preStyling step: each pt, pc, in, cm, mm or Q token becomes px by the CSS ratios, and each vw, vh, vmin or vmax token (plus the s, l and d variants) becomes px against the viewport. That lands before flutter_html's parser and reaches width, height, font-size, line-height, margin, padding, border and text-shadow through its own cascade. The tokenizer walks the value by hand rather than with a regex, so a quoted string, a url() argument, a hex colour and an identifier such as translate3d are never touched.
The viewport comes from MediaQuery.maybeSizeOf on ExtensionContext.buildContext. Its dartdoc says that field is only guaranteed at the building step, but the parser passes its own context at all four steps and the parse runs from didChangeDependencies, so the lookup works. I measured that rather than trusting either the comment or my reading. There is a viewportSize argument for when the basis should be something other than the window. One honest limitation: the rewrite replaces 50vw in the DOM, so a resize does not re-resolve it; give the widget a new key.
Order rules, all measured against the real siblings: list this after CssStylesheetHtmlExtension and after Bootstrap or Vuetify, because they write into the same attribute at the same step and a declaration written after this ran keeps its unit. List it before CssBorderHtmlExtension, which reads 3pt as 3 and writes 3px back. Colour, size-constraints, font-size and percent-size are order-free, and the tests run each in both orders.
ex, ch and fr are left alone. They need font metrics no step exposes, and guessing at an em fallback would have made the render wrong in a different way.

← Metadata

Documentation

Publisher

Weekly Downloads

Metadata

A flutter_html extension that renders the CSS absolute and viewport length units flutter_html 3.0.0 reads as pixels or as zero: pt, pc, in, cm, mm, Q, vw, vh, vmin and vmax.

Repository (GitLab)
View/report issues
Contributing

Topics

#flutter-html #css #html #extension #units

License

MPL-2.0 (license)

Dependencies

flutter, flutter_html, html

More

Packages that depend on flutter_html_css_units