flutter_html_css_line_height 0.2.0 copy "flutter_html_css_line_height: ^0.2.0" to clipboard
flutter_html_css_line_height: ^0.2.0 copied to clipboard

Published 2 days ago • verified publisherchaosworld.cc
SDKFlutter
PlatformAndroidiOSLinuxmacOSwebWindows
→

Metadata

A flutter_html extension that renders line-height as a number, %, em, rem or px at the size CSS asks for, and inherits it the way CSS does.

More...

0.2.0 #

  • Renamed from flutter_html_css_line_height_extension on pub.flutter-io.cn. The old package stays published and is marked discontinued with this one as its replacement. Class names are unchanged.

0.1.0 #

  • Initial release. Renders the CSS line-height at the size CSS asks for. flutter_html 3.0.0 bakes a 1.2 into every LineHeight factory and then hands the stored value to TextStyle.height, which is already a ratio of the font size, so every line box comes out 20 per cent too tall: line-height: 1.5 renders a 25 px line where CSS gives 21, and line-height: 2 renders 34 px where CSS gives 28. A percentage, an em, a rem and a <style> block are all hit the same way.
  • An absolute length is the loud one, except that it is silent too. expressionToLineHeight stores the pixel count with no 1.2, and generateTextStyle hands that pixel count over as a ratio, so line-height: 24px renders one line 336 px tall on a 14 px paragraph, and 672 px next to font-size: 28px. Style.copyOnlyInherited does own a length-to-ratio conversion, but _styleTreeRecursive cascades into a child before the child's own inline style is merged, so an inline declaration never reaches it. That branch is dead for anything written in a style="" attribute.
  • The fix is arithmetic on Style.lineHeight at the preProcessing step, plus a walk down the subtree. A number, a percentage and an em divide by 1.2; a rem and a length need the computed font size, and Style.fontSize is already in pixels at that step for everything except an inline em or % size, which a DOM walk covers. The subtree walk is what makes any of it visible, because flutter_html renders text from the Style of the text node and the text node holds a copy of the element's value.
  • Inheritance follows CSS now: a <number> inherits as a factor and everything else inherits as the computed length, so <p style="line-height: 24px"><span style="font-size: 28px"> renders a 24 px line instead of a 672 px one.
  • line-height: normal is left alone, and so are inherit, initial, unset, revert, calc() and every other value the parser cannot read. All of them land on LineHeight(1.2) with an empty units, which is exactly what a tag default lands on, and nothing at this step can tell them apart. Correcting them would mean correcting every <p> in the document.
  • Register it anywhere in the extensions list. There's no order rule: I measured both orders against flutter_html_css_font_size, flutter_html_css_text_metrics, a TagExtension and the two utility-class packages, and nothing moved. You still want the font-size extension registered when an em or rem font size is in play, because a ratio is a ratio of the size that renders: font-size: 2em; line-height: 1.5rem is 101 px bare, 42 px with this package alone and 21 px with both.
  • flutter_html_bootstrap 0.1.2 and flutter_html_vuetify 0.1.1 need no release and no companion table entry. Both already count line-height as supported, so neither suppresses it, and their lh-* and text-* classes have been rendering 20 per cent too tall all along. Registering this extension corrects them: lh-base and text-body-1 go from 25 px to 21 px.
  • The tests pin those two versions as dev constraints. Vuetify 0.1.1 leaves a rem font size out of the inlined style unless the font-size extension is registered, and names each text-* class through FlutterError.reportError for that and for its letter-spacing; the tests capture the report and assert that line-height is never in it.

← Metadata

0
likes
160
points
38
downloads

Documentation

API reference

Publisher

verified publisherchaosworld.cc

Weekly Downloads

Metadata

A flutter_html extension that renders line-height as a number, %, em, rem or px at the size CSS asks for, and inherits it the way CSS does.

Repository (GitLab)
View/report issues
Contributing

Topics

#flutter-html #css #html #extension #line-height

License

MPL-2.0 (license)

Dependencies

flutter, flutter_html, html

More

Packages that depend on flutter_html_css_line_height

Back