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