This sounds like a pretty good fit for the current API that we have exposed. E.g. you could imaging something like:

[marvinrr15]

This sounds like a pretty good fit for the current API that we have exposed. E.g. you could imaging something like:

const node = new LayoutChild('lots of text');
const f1 = node.generateNextFragment({availableInlineSize: 10});
const f2 = node.generateNextFragment({availableInlineSize: 30}, f1.breakToken);

canvasCtx.fill(f1);
canvasCtx.fill(f2);

There is a few open questions about some requirements:

• When should be exposed in terms of position of glyphs? E.g. presumably some web pages would want to show a caret or similar to "editing" text in a canvas.
• (Any other information needed?)
• How to style runs inside the next, e.g. if a something needed a bold style or similar (canvas obviously provides a way for color, and paint related styles, but would need something for other text features.

E.g. you could imagine an API like:

const node = new LayoutChild('lots of text', [
  {startIndex: 5, endIndex: 10, fontWeight: 900},
  {startIndex: 8, endIndex: 12, fontStyle: 'italic'},
]);

cc/ @kojiishi @fserb

Originally posted by @bfgeek in https://github.com/w3c/css-houdini-drafts/issues/990#issuecomment-655268084

[marvinrr15]

#1021