Description

Today, we do text measurement using the DOM. That's too slow and we are stuck with whatever CSS supports. For example, we can't do multi-line text overflow correctly because CSS doesn't support it.

Early results are very promising in terms of correctness and performance.

This new implementation will also open the door to more improvements like rendering multi-line text in canvas (instead of using a <p> element).

How to enable

To enable the new experimental implementation, you could add the --dart-define=FLUTTER_WEB_USE_EXPERIMENTAL_CANVAS_TEXT=true flag to your flutter run command (it only works in release mode). Example:

flutter run -d web-server --release --dart-define=FLUTTER_WEB_USE_EXPERIMENTAL_CANVAS_TEXT=true

Tasks

• Handle basic measurements.
• Full support of text overflow and clipping (maxLines, textOverflow).
• Render multi-line text on canvas.
• Support letterSpacing and backgroundColor.
• Correct algorithm for line break opportunities ([web] Implement the algorithm for finding line-break opportunities #45932).
• Correct measurement of emojis ([web] Text with emojis or Chinese characters is clipped #40221).