Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[web] Improve performance of paragraphs with letter-spacing on canvas #51234

Closed
mdebbar opened this issue Feb 21, 2020 · 1 comment · Fixed by flutter/engine#45651
Closed

[web] Improve performance of paragraphs with letter-spacing on canvas #51234

mdebbar opened this issue Feb 21, 2020 · 1 comment · Fixed by flutter/engine#45651
Labels
a: typography Text rendering, possibly libtxt c: performance Relates to speed or footprint issues (see "perf:" labels) engine flutter/engine repository. See also e: labels. framework flutter/packages/flutter repository. See also f: labels. P2 Important issues not at the top of the work list perf: speed Performance issues related to (mostly rendering) speed platform-web Web applications specifically team-web Owned by Web platform team triaged-web Triaged by Web platform team
Projects
[web] Canvas-based text measurement

Comments

@mdebbar
Copy link
Contributor

mdebbar commented Feb 21, 2020

Problem

When rendering a paragraph that has letter-spacing on canvas, we do it inefficiently. Basically, we render each letter, measure it, render the next letter, measure it, etc. We do this because canvas doesn't support letter-spacing, so we have to figure out the position of each letter ourselves. The relevant code is here.

This is causing a significant performance hit in some apps that heavily use letter-spacing. We need a better way to do this.

Solutions

1. Fallback to DOM rendering

One fix would be to simply fallback to DOM rendering (the whole paragraph in a <p> element) when the paragraph has letter-spacing. But this means we will inherit the other issues that come with DOM rendering, namely the handling of ellipsis isn't 100% correct.

2. Split lines into <span> elements

After the layout and measurements are done by canvas, we could use the LineMetrics information to render each line individually in a <span> or even a <p> element. This way we can still put the ellipsis in the correct line, and fully respect the maxLines property.

cc @ferhatb
@mdebbar mdebbar added a: typography Text rendering, possibly libtxt platform-web Web applications specifically perf: speed Performance issues related to (mostly rendering) speed labels Feb 21, 2020
@mdebbar mdebbar added this to the March 2020 milestone Feb 21, 2020
@mdebbar mdebbar self-assigned this Feb 21, 2020
@mdebbar mdebbar added this to To do in [web] Canvas-based text measurement via automation Feb 21, 2020
@perclasson perclasson mentioned this issue Mar 10, 2020
Closed
@liyuqian liyuqian added the c: performance Relates to speed or footprint issues (see "perf:" labels) label Mar 30, 2020
@mdebbar mdebbar modified the milestones: March 2020, Near-term Goals Apr 1, 2020
@kf6gpe kf6gpe added the P1 High-priority issues at the top of the work list label May 29, 2020
@mdebbar mdebbar removed their assignment Jun 10, 2020
@mdebbar mdebbar removed this from the [DEPRECATED] Near-term Goals milestone Jun 10, 2020
@yjbanov yjbanov added P2 Important issues not at the top of the work list and removed P1 High-priority issues at the top of the work list labels Jun 16, 2020
@iapicca iapicca added engine flutter/engine repository. See also e: labels. framework flutter/packages/flutter repository. See also f: labels. labels Jul 6, 2020
@fredgrott fredgrott mentioned this issue Mar 26, 2022
Open
@flutter-triage-bot flutter-triage-bot bot added multiteam-retriage-candidate team-web Owned by Web platform team triaged-web Triaged by Web platform team labels Jul 8, 2023
@mdebbar mdebbar mentioned this issue Sep 11, 2023
Merged
[web] Canvas-based text measurement automation moved this from To do to Done Sep 13, 2023
auto-submit bot pushed a commit to flutter/engine that referenced this issue Sep 13, 2023
@mdebbar
[web] Use DOM to render paragraphs with letter spacing (#45651)
b94b83b 
<**_Only applies to the HTML renderer_**>

When a paragraph has letter spacing that's greater than 0, we attempt to render each character individually on the canvas, while adding extra gaps between the characters (because the browser's canvas API doesn't support letter spacing).

This works well-ish in English but causes issues with international text. It also makes text rendering very slow.

With this PR, the idea is to force all paragraphs with letter spacing to be rendered to a DOM element.

Fixes flutter/flutter#51234
Fixes flutter/flutter#71220
@github-actions
Copy link

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Sep 27, 2023
harryterkelsen pushed a commit to flutter/engine that referenced this issue Oct 23, 2023
@mdebbar @harryterkelsen
[web] Use DOM to render paragraphs with letter spacing (#45651)
b824af6 
<**_Only applies to the HTML renderer_**>

When a paragraph has letter spacing that's greater than 0, we attempt to render each character individually on the canvas, while adding extra gaps between the characters (because the browser's canvas API doesn't support letter spacing).

This works well-ish in English but causes issues with international text. It also makes text rendering very slow.

With this PR, the idea is to force all paragraphs with letter spacing to be rendered to a DOM element.

Fixes flutter/flutter#51234
Fixes flutter/flutter#71220
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
a: typography Text rendering, possibly libtxt c: performance Relates to speed or footprint issues (see "perf:" labels) engine flutter/engine repository. See also e: labels. framework flutter/packages/flutter repository. See also f: labels. P2 Important issues not at the top of the work list perf: speed Performance issues related to (mostly rendering) speed platform-web Web applications specifically team-web Owned by Web platform team triaged-web Triaged by Web platform team
Projects
[web] Canvas-based text measurement
  
Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[web] Use DOM to render paragraphs with letter spacing mdebbar/engine
7 participants
@yjbanov @Hixie @mdebbar @kf6gpe @liyuqian @iapicca @pedromassangocode