AngularLynx

    LynxTextMeasure

    Measure how wide a string renders, and where it breaks into lines, before you lay it out. import { LynxTextMeasure } from '@blotch/angular-lynx';

    Usage

    src/app/label.ts
    import { Component, computed, inject, input } from '@angular/core';
import { LYNX_ELEMENTS, LynxTextMeasure } from '@blotch/angular-lynx';

@Component({
  selector: 'app-label',
  imports: [LYNX_ELEMENTS],
  template: `
    <view [style.width.px]="width()">
      <text style="font-size: 16px">{{ label() }}</text>
    </view>
  `,
})
export class Label {
  readonly label = input.required<string>();
  readonly #measure = inject(LynxTextMeasure);
  readonly width = computed(() => {
    try {
      return this.#measure.measure(this.label(), { fontSize: '16px' }).width;
    } catch {
      // The web preview can't measure text, so leave the width unset there.
      return null;
    }
  });
}

    API

    LynxTextMeasure

    @Injectable({ providedIn: 'root' })
class LynxTextMeasure {}

    Measures text with the platform's text engine. On a device, it works on both threads, including in event handlers.

    LynxTextMeasure.measure()

    measure(text: string, options: TextInfo): TextMetrics;

    Returns the text's width in pixels. With maxWidth and a maxLine above 1, it also returns the text of each line.

    • Empty text returns { width: 0 }.
    • Built-in fonts only. A custom font, from @font-face or LynxFont, is measured with the system font instead.
    • Invalid options, such as a fontSize of 0, return { width: 0 }.
    • Throws in the web preview and outside Lynx, such as in unit tests, where Lynx's text measuring isn't available.

    Types

    TextInfo and TextMetrics come from @lynx-js/types.

    TextInfo

    interface TextInfo {
  fontSize: string;
  fontFamily?: string;
  maxWidth?: string;
  maxLine?: number;
}
    FieldDescription
    fontSizeRequired. In px only, such as '14px'.
    fontFamilyA built-in font. Defaults to the system font.
    maxWidthThe line width for line breaking, in px only.
    maxLineThe most lines to lay out. With 1, the result has no content.

    Other text styles, such as fontWeight and letterSpacing, aren't supported.

    TextMetrics

    interface TextMetrics {
  width: number;
  content?: Array<string>;
}
    FieldDescription
    widthThe rendered width, in pixels.
    contentThe text of each line, when the text wraps.