flutter_html_css_text_transform #

A flutter_html extension that renders text-transform. flutter_html 3.0.0 parses the property and never applies it: <p style="text-transform: uppercase">hello <b>world</b></p> renders hello world. There is no error and no warning. The transform itself stays flutter_html's, and its capitalize deviates from CSS on some words.

Features #

Every row is measured against flutter_html 3.0.0 and pinned by a test.

The value is read from the element's inline style, in any letter case, with or without !important. A value from Html(style: ...) or from a <style> rule flutter_html applies itself is read from the Style field. A nearer statement wins, an explicit none included.

Getting started #

dependencies:
  flutter_html: ^3.0.0
  flutter_html_css_text_transform: ^0.2.0

Usage #

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

Html(
  data: '''
    <h2 style="text-transform: uppercase">Section <span>title</span></h2>
    <p style="text-transform: capitalize">hello <b>world</b></p>
  ''',
  extensions: const [CssTextTransformHtmlExtension()],
);

The extension matches at the preProcessing step, after flutter_html's styling has run, and writes the value into every descendant that states no transform of its own. flutter_html's own cascade cannot do that: Style defaults the field to none instead of null, so a child's default always wins over the parent's value.

Before you register it #

Order does not matter. Measured in both orders against flutter_html_css_text_metrics, flutter_html_css_font_size and flutter_html_css_line_height, which write other fields at the same step, and against flutter_html_css_stylesheet, flutter_html_bootstrap and flutter_html_vuetify, which write the inline style one step earlier.

Limitations #

• capitalize is flutter_html's own: it lowercases the string and then uppercases an ASCII letter after a space or a period. iPhone renders Iphone, 3rd place renders 3Rd Place, über alles renders üBer Alles, and hel<b>lo</b> renders HelLo.
• uppercase keeps ß. CSS asks for SS.
• full-width and full-size-kana are not rendered and do not count as a statement.
• Text flutter_html generates later, such as list markers, is not transformed.

The measurement table records every case, every capitalize deviation and every order.

Additional information #

Issues and merge requests go to the GitLab repository.

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