mwg API
    Preparing search index...

    Function layoutMarkupLines

    • Wraps already-parsed spans into lines, word by word, each word measured under its own span's style - which is the acceptance this item was missing: wrapping computed after styling, not before it, so a bold or larger run wraps where its own wider glyphs actually land rather than where the plain text would have. An explicit line break (<br/>, which parseMarkup turns into a literal \n) always starts a new line; otherwise a word moves to the next line only once it would overflow maxWidth, so a single word wider than maxWidth still renders (not clipped) as ever a caller's original design.

      Backend-neutral by construction: the same spans, the same measure function and the same maxWidth given to layoutMarkupLines decide the exact same line breaks whether the caller then draws each line through markupToHtml/HTMLText or through a canvas Text2D per run - which is what makes the two backends render "equivalent runs" rather than each doing its own wrapping.

      Parameters

      Returns MarkupLine[]

      import { layoutMarkupLines, parseMarkup } from '@datamoc/mw_games/two-d/ui';

      const spans = parseMarkup('Take <b>two small</b> coins');
      const lines = layoutMarkupLines(spans, (piece) => piece.text.length * 8, 100);
      console.log(lines.map((line) => line.spans.map((span) => span.text).join('')));