flutter_html_css_font_size #

A flutter_html extension that renders a relative CSS font-size. flutter_html 3.0.0 drops a rem font-size at parse time. It applies an em or % one at every level below it, so <div style="font-size: 2em"> renders its text at 56 where CSS says 28. There is no error and no warning. This extension reads the inline style="" attribute only.

Features #

• 2rem renders at twice the root size. That root is flutter_html's 14 and not the browser's 16, and rootFontSize replaces it.
• em and % render the CSS size at every depth. 2em under 14 renders 28, where flutter_html renders 56, and 112 one level deeper.
• An em inside an em compounds once per declaring element. 2em then 1.5em renders 42, where flutter_html renders 63.
• A tag with a size of its own, such as h1, renders the CSS size under a relative parent. flutter_html renders an h1 under 2em at 4 and under 200% at 400, where CSS says 56.
• <font size="+2"> renders step 5, at 15.75. flutter_html renders every relative step at 14.
• smaller and larger render at 83% and 120% of the parent's size. flutter_html drops both.
• resolvedFontSizeOf answers an element's size, from any extension, at any step.

Getting started #

dependencies:
  flutter_html: ^3.0.0
  flutter_html_css_font_size: ^0.2.0

Usage #

import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html_css_font_size/flutter_html_css_font_size.dart';

Html(
  data: '<div style="font-size: 2em;">28 logical pixels, not 56</div>',
  extensions: const [CssFontSizeHtmlExtension()],
);

const CssFontSizeHtmlExtension(rootFontSize: 16) uses the browser's root size.

Before you register it #

This extension claims no tag. It matches at the preProcessing step, on an inline font-size or a relative <font size="+n">.

Order against a utility-class extension does not matter. That extension writes the inline style a step earlier. Bootstrap's fs-3 renders at 24.5 in both orders, which is 1.75 times the root size.

flutter_html_bootstrap 0.1.1 and flutter_html_vuetify 0.1.0 count font-size as supported, so neither suppresses the class and neither reports it. From bootstrap 0.1.2 and vuetify 0.1.1 they suppress a rem size unless this extension is registered, and report the class through FlutterError. Register it either way.

List this extension before any extension that reads Style.fontSize at the same step. flutter_html_css_text_metrics resolves an em letter-spacing against that field. Extensions matching a step run in registration order, so a reader listed first reads the old size: measured 2.1 where CSS says 4.2. There is no error and no warning.

extensions: const [
  CssFontSizeHtmlExtension(), // must come first
  CssTextMetricsHtmlExtension(),
],

A TagExtension discards the font size in either order: it builds a widget that reads no Style. Set the size on that widget.

Limitations #

• Only the inline style is read. A size set through Html(style: ...), in a <style> block or by another extension is invisible, for the element and for every ancestor. An em under a 20px div renders 28 where CSS says 40. There is no error and no warning.
• px, a unitless 0 and xx-small to xx-large are left alone, because flutter_html renders them already. So are calc(), inherit and every unit outside px, em, % and rem. flutter_html reads a length in any other unit as pixels, so 12pt renders at 12 where CSS says 16.
• Every size here is a Flutter logical pixel, the unit Style.fontSize holds.

doc/relative-sizes.md carries the measurements, the step order and the upstream fix.

Additional information #

Issues and merge requests go to the GitLab repository. Tracking and word spacing are flutter_html_css_text_metrics's job. flutter_html_css_size_constraints 0.1.0 resolves a rem in max-width and three other properties.

CI, publishing and Renovate are described in CONTRIBUTING.md.