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

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

Metadata

A flutter_html extension that renders a relative CSS font-size. flutter_html 3.0.0 drops rem and compounds em and percentages.

More...

0.2.0 #

  • Renamed from flutter_html_css_font_size_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 a relative font-size from an element's inline style: rem, em, percentages, smaller and larger. flutter_html 3.0.0 has the rem branch of expressionToFontSize commented out, so the declaration goes in and nothing comes out; the element just keeps the size it inherited. smaller and larger fall through the same function's keyword list, so they are in here too.
  • em and percentages are in here for a different reason. flutter_html parses them fine and then applies them once per level of the tree below the element that declares it, so font-size: 2em on a div renders its text at 56 instead of 28, and 112 with one more level of nesting. styleTree() merges the inline declaration after it cascades the parent in, so every descendant inherits the raw 2em and RelativeSizesProcessing multiplies it again at each level. We now write the resolved pixel size down the subtree, which leaves that pass nothing to multiply. 2em under 14 is 28 at any depth; 2em then 1.5em is 42, because the factor still compounds once per declaring element, which is what CSS asks for.
  • The size goes onto the element and down its subtree. Writing it onto the element alone looks right in a debugger and changes nothing on screen: flutter_html draws text from the Style of the text node, and the cascade that would have copied the new size into that node ran a step earlier. Cost me an afternoon, hence this bullet.
  • Ships resolvedFontSizeOf, for siblings that need a font size before flutter_html has resolved one, and it is also where every pixel number above comes from. StyledElement has no parent pointer in 3.0.0 and the styled tree's root is private, so it walks the DOM chain instead: inline styles plus flutter_html's own per-tag defaults. Same answer at every step, which is the whole point.
  • Reading the DOM has a price, and em is where you feel it. An ancestor whose size came from Html(style: ...) or a <style> block is invisible, so a 2em under a 20px div resolves against the root 14 and renders 28 rather than 40. flutter_html alone renders 80 there. Neither is right; put the size in the inline style if you care.
  • Headings and the other tags flutter_html sizes itself are fixed too. An <h1> inside <div style="font-size: 2em"> renders at 4 without us: FontSize.inherit multiplied the heading's own 2em default by the parent's raw 2em instead of by the parent's computed 28. Same story for h2, h3, h5, h6, big, small, sub and sup, and a rem parent is no escape either (2rem around an h1 gave 28, not 56). A percentage parent is the funny one: 200% around an h1 renders at 400, because inherit multiplies by the number 200. The subtree walk used to stop at any of these, since they hold a size that is not the one they inherited. It now recognises a per-tag default, recomputes it with resolvedFontSizeOf and keeps walking, so the heading and everything under it get the CSS number. All of it pinned in tests, both columns.
  • <font size="+2"> now renders step 5 (15.75) instead of 14. Upstream bug, and a fun one: numberToFontSize recurses with (3 + 2).toString(), which is the string "5.0" and not "5", so it matches no case, then on the second pass it no longer starts with +, and it falls out the bottom into FontSize.medium. Every +n and -n form lands on 14. No error, no warning. We claim such a <font> element even though it has no inline style, and write the step it actually asked for.
  • px, a unitless 0 and the seven xx-small to xx-large keywords are left alone on purpose. They already render and they do not compound.

← Metadata

0
likes
160
points
51
downloads

Documentation

API reference

Publisher

verified publisherchaosworld.cc

Weekly Downloads

Metadata

A flutter_html extension that renders a relative CSS font-size. flutter_html 3.0.0 drops rem and compounds em and percentages.

Repository (GitLab)
View/report issues
Contributing

Topics

#flutter-html #css #html #extension #font-size

License

MPL-2.0 (license)

Dependencies

flutter, flutter_html, html

More

Packages that depend on flutter_html_css_font_size

Back