flutter_html_css_line_height

A flutter_html extension that renders the CSS line-height at the size CSS asks for. flutter_html 3.0.0 multiplies a <number>, a percentage, an em and a rem by 1.2, and renders an absolute length as a ratio. There is no error and no warning. normal, inherit, initial and calc() arrive as a tag default arrives, so none can be corrected.

Features

Rendered sizes are measured and pinned by tests. The CSS column is computed by hand. Sizes are logical pixels on a 14 px font unless the row states one.

• A <number> inherits as a factor and every other form inherits as a computed length, which is the CSS rule. flutter_html inherits all five forms as one ratio.
• A <style> block is corrected as an inline style is.

Getting started

dependencies:
  flutter_html: ^3.0.0
  flutter_html_css_line_height: ^0.2.0

Usage

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

Html(
  data: '''
    <p style="line-height: 1.5">Set at 21, not at 25.</p>
    <p style="font-size: 28px; line-height: 24px">A 24 px line on 28 px text.</p>
  ''',
  extensions: const [CssLineHeightHtmlExtension()],
);

const CssLineHeightHtmlExtension(rootFontSize: 16) resolves a rem line height against the browser's root size. Pass rootFontSize when the app sets its own.

Before you register it

Register flutter_html_css_font_size as well when an em or a rem font size is in play. A line height is a ratio of the font size that renders, and flutter_html drops an inline rem font size and applies an em one once per level of the tree. Measured on <div style="font-size: 2em; line-height: 1.5rem">: 101 bare, 42 with this extension alone, 21 with both, which is the CSS answer.

Html(
  data: '<div style="font-size: 2em; line-height: 1.5rem">Two ems of text</div>',
  extensions: const [
    CssFontSizeHtmlExtension(),
    CssLineHeightHtmlExtension(),
  ],
);

Registration order does not matter, measured against that package, flutter_html_css_text_metrics, a TagExtension, and the two utility-class packages below.

flutter_html_bootstrap 0.1.2 emits a line-height for each of its four lh-* classes. flutter_html_vuetify 0.1.1 emits a unitless line-height on each of its 13 text-* classes. flutter_html parses line-height, so neither package suppresses it, and those classes render 1.2 times too tall today. This extension corrects them in either order: lh-base and text-body-1 each render 25, then 21.

Limitations

• line-height: normal, inherit, initial, calc() and every other value the parser cannot read arrive as LineHeight(1.2) with an empty units, exactly as a tag default does. Each renders a 17 px line on a 14 px font.
• line-height: 0 renders the font size, because TextStyle.height does not collapse a line box. A negative value is left alone.
• A TagExtension builds a widget that reads no Style, so a corrected line height never reaches the tag it claims.
• An inline em or % font size leaves Style.fontSize relative, so the size comes from the DOM. That walk reads inline styles and tag defaults only, so a font size set through Html(style:), a <style> block or <font size=""> is invisible to it.

The measurement table records every case.

Additional information

Issues and merge requests go to the GitLab repository. Relative font sizes are flutter_html_css_font_size's job, and tracking and word spacing are flutter_html_css_text_metrics's.

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