example/example.md

Example #

flutter_html 3.0.0 renders line-height: 1.5 as a 25 px line where CSS gives 21, and line-height: 24px as one line 336 px tall. This extension writes the size CSS asks for, as a ratio of each element's own font size.

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

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

  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          body: Html(
            data: '''
              <p style="line-height: 1.5">
                Set at 21 px. Without this extension, 25 px.
              </p>

              <p style="line-height: 24px">
                A 24 px line. Without this extension, 336 px.
              </p>

              <p style="line-height: 1.5rem">
                One and a half root sizes, which is 21 px.
              </p>

              <p style="line-height: 24px">
                The line height is a length, so it
                <span style="font-size: 28px">inherits as 24 px</span>
                rather than as a ratio.
              </p>
            ''',
            extensions: const [CssLineHeightHtmlExtension()],
          ),
        ),
      );
}

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

A declaration from a <style> block #

The README shows inline styles only. A <style> block reaches Style.lineHeight through the same parser, so it is corrected the same way. Measured: p { line-height: 2 } renders 34 px bare and 28 px with the extension.

Html(
  data: '''
    <style>p { line-height: 2 }</style>
    <p>Set at 28 px, not at 34.</p>
  ''',
  extensions: const [CssLineHeightHtmlExtension()],
);