Skip to content

LibTxt: Implement Strut and provide an API to it. Fix text clipping in textboxes. #26085

@GaryQian

Description

@GaryQian

This issue will track the work required and progress on the implementation of strut, which will provide a paragraph-level minimum line height and leading to ensure that lines will take up a more predictable amount of space.

Strut is a feature that defines a line height scale, font size, and leading scale. Each line will then be laid out, and if any part of the the height is less than the mins defined by (leading * fontSize / 2) + (heightScale * fontSize) + (leading * fontSize / 2), then the min strut values will be used. If it is greater, then the actual values will be used.

The effect strut has is as if a zero width invisible space glyph was laid out at the beginning of each line. The line becomes unable to be shorter than this invisible space.

  • Expose API for user-supplied paragraph styles
  • Implement strut in LibTxt
  • Expose strut API in framework
  • Move textbox decoration padding into strut instead.
  • Use forceStrutHeight for textfields because future lines can be in fonts that are taller or lower.

Features up for discussion:

  • 'Force strut' option that forces line heights to be exactly that defined by the strut, which will provide rigid and unchanging line positions. Such an option would ignore the properties of the text and will possibly cause text overlap.

This issue will be updated as the work is completed/evolves

Some use cases are:

  • Force all lines to be the same height or to match the heights of a different
  • Ensure very small fonts in a paragraph have as much line spacing as larger fonts.
  • Create buffer zones to absorb extra line height from tall fonts.

For reference, strut can be defined by css in https://www.w3.org/TR/CSS2/visudet.html#strut. This blog post is also useful in visualizing and understanding what strut is doing here: https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

Metadata

Metadata

Assignees

Labels

a: text inputEntering text in a text field or keyboard related problemsa: typographyText rendering, possibly libtxtengineflutter/engine related. See also e: labels.

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions