flutter_html_css_text_transform

pub version pipeline license GitLab

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

Markup flutter_html alone With this extension
<p style="text-transform: uppercase">hello</p> hello HELLO
<p style="text-transform: uppercase">hello <b>world</b></p> hello world HELLO WORLD
<p style="text-transform: lowercase">Hello <b>World</b></p> Hello World hello world
<p style="text-transform: capitalize">hello <b>world</b></p> hello world Hello World
<p style="text-transform: uppercase">hello <b style="text-transform: none">world</b></p> hello world HELLO world
<p class="text-uppercase">hello</p> with Bootstrap or Vuetify hello HELLO

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.

Libraries

flutter_html_css_text_transform