example/example.md

Example #

flutter_html 3.0.0 parses text-transform and never applies it. <p style="text-transform: uppercase">hello <b>world</b></p> renders hello world. This extension walks the element's subtree after flutter_html's styling and writes the value into every text node that states no transform of its own.

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

class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          body: Html(
            data: '''
              <h2 style="text-transform: uppercase">
                Section <span>title</span>
              </h2>

              <p style="text-transform: capitalize">
                every word of this <b>paragraph</b> starts with a capital
              </p>

              <p style="text-transform: uppercase">
                shouted, except <em style="text-transform: none">this part</em>
              </p>

              <p style="text-transform: lowercase">
                QUIET <a href="#">LINK</a>
              </p>
            ''',
            extensions: const [CssTextTransformHtmlExtension()],
          ),
        ),
      );
}

void main() => runApp(const ExampleApp());

What it corrects #

• uppercase, lowercase and capitalize on any element, reaching the element's own text and every nested inline element.
• An explicit none on a descendant, which stops the ancestor's value there.
• The keyword in any letter case, and with !important.
• A value from Html(style: ...), from a <style> rule flutter_html applies itself, or from a utility class such as Bootstrap's or Vuetify's text-uppercase.

Behaviour #

The extension matches at the preProcessing step for an element whose inline style states a transform, or whose Style.textTransform is already something other than none. It writes that value into the element and every descendant that states none of its own, text nodes included. A descendant with its own statement is skipped with its subtree; flutter_html visits it on its own turn and it writes its own value down.

The transform itself is flutter_html's. capitalize lowercases the string first and uppercases an ASCII letter after a space or a period, so iPhone renders Iphone and 3rd place renders 3Rd Place. uppercase keeps ß. The measurement table lists every deviation.

Pairing with other extensions #

Order does not matter. Register it anywhere in the list:

Html(
  data: '<p class="text-uppercase" style="letter-spacing: 2px">hello <b>world</b></p>',
  extensions: const [
    BootstrapUtilitiesHtmlExtension(),
    CssTextMetricsHtmlExtension(),
    CssTextTransformHtmlExtension(),
  ],
);

Bootstrap writes text-transform: uppercase into the inline style one step before this extension reads it, and the text-metrics extension writes letterSpacing at the same step without reading textTransform. Both are measured in both orders against the released packages.