What is WebParagraph?

It's a new implementation of Flutter's text layout system on the web (ParagraphBuilder, Paragraph, etc). This new implementation takes advantage of new browser APIs, namely Enhanced TextMetrics.

Why?

The browser already contains a full text layout system, but because it's not exposed to web apps, we had to bundle a lot of the same bits in each Flutter web app. By utilizing Enhanced TextMetrics, we can achieve the following:

1. Reduce code size: Delete some parts of the text layout system that we don't need anymore: HarfBuzz, Font management, Freetype, Brotli decoder (was needed for Woff2), etc.
2. Eliminate fallback fonts: Fallback fonts cost extra network bandwidth and add complexity. They were needed because we didn't have access to system/browser fonts.
3. Eliminate the tofu box issue!
4. Apple Emoji !

Here's a few examples of issues that we aim to close with WebParagraph:

• flutter web: use the device's default font instead of loading the large font filet from fonts.gstatic.com #163823
• Flutter 3.24 doesnt support Apple emojis #157918
• [Web] Don't show tofu boxes temporarily until suitable fonts are found and downloaded. #169455
• [web] Some Unicode fallbacks look bad #129329
• [web] Standardized way to preload emoji font using CanvasKit #78422
• [Web] [CanvasKit][Feature Request]: Load fonts as soon as detecting browser locale #77023

How can I try it out?

Thanks for your interest in this project! Please subscribe to this issue to be notified when WebParagraph is ready for testing by our users.