Pretext Text Measurement

import { prepare, layout } from '@chenglou/pretext'
// One-time per unique (text, font) combinationconst prepared = prepare('AGI 春天到了. بدأت الرحلة 🚀', '16px Inter')
// Cheap — call on every resizeconst { height, lineCount } = layout(prepared, containerWidth, 20)// height: total pixel height; lineCount: number of wrapped lines

const prepared = prepare(textareaValue, '16px Inter', { whiteSpace: 'pre-wrap' })const { height } = layout(prepared, textareaWidth, 24)

const prepared = prepare(cjkText, '16px NotoSansCJK', { wordBreak: 'keep-all' })const { height, lineCount } = layout(prepared, 300, 22)

import { prepareWithSegments, layoutWithLines } from '@chenglou/pretext'
const prepared = prepareWithSegments('Hello world, this is Pretext!', '18px "Helvetica Neue"')const { lines, height, lineCount } = layoutWithLines(prepared, 320, 26)
// Render to canvaslines.forEach((line, i) => {  ctx.fillText(line.text, 0, i * 26)})// line shape: { text: string, width: number, start: LayoutCursor, end: LayoutCursor }

import { prepareWithSegments, measureLineStats, walkLineRanges } from '@chenglou/pretext'
const prepared = prepareWithSegments(article, '16px Inter')
// Just counts and widths — no string allocationsconst { lineCount, maxLineWidth } = measureLineStats(prepared, 320)
// Walk line ranges for custom logiclet widest = 0walkLineRanges(prepared, 320, line => {  if (line.width > widest) widest = line.width})// widest is now the tightest container that still fits the text (shrinkwrap!)

import { prepareWithSegments, measureNaturalWidth } from '@chenglou/pretext'
const prepared = prepareWithSegments('Short label', '14px Inter')const naturalWidth = measureNaturalWidth(prepared)// Width if text never wraps — useful for button sizing

import {  prepareWithSegments,  layoutNextLineRange,  materializeLineRange,  type LayoutCursor} from '@chenglou/pretext'
const prepared = prepareWithSegments(article, '16px Inter')let cursor: LayoutCursor = { segmentIndex: 0, graphemeIndex: 0 }let y = 0const lineHeight = 24const image = { bottom: 200, width: 120 }const columnWidth = 600
while (true) {  // Lines beside the image are narrower  const width = y < image.bottom ? columnWidth - image.width : columnWidth  const range = layoutNextLineRange(prepared, cursor, width)  if (range === null) break
  const line = materializeLineRange(prepared, range)  ctx.fillText(line.text, 0, y)  cursor = range.end  y += lineHeight}

import { prepareWithSegments, layoutNextLine, type LayoutCursor } from '@chenglou/pretext'
const prepared = prepareWithSegments(text, '16px Inter')let cursor: LayoutCursor = { segmentIndex: 0, graphemeIndex: 0 }
let line = layoutNextLine(prepared, cursor, 400)while (line !== null) {  console.log(line.text, line.width)  cursor = line.end  line = layoutNextLine(prepared, cursor, 400)}

import {  prepareRichInline,  walkRichInlineLineRanges,  materializeRichInlineLineRange} from '@chenglou/pretext/rich-inline'
const prepared = prepareRichInline([  { text: 'Ship ', font: '500 17px Inter' },  { text: '@maya', font: '700 12px Inter', break: 'never', extraWidth: 22 },  { text: "'s feature", font: '500 17px Inter' },  { text: 'urgent', font: '600 12px Inter', break: 'never', extraWidth: 16 },])
walkRichInlineLineRanges(prepared, 320, range => {  const line = materializeRichInlineLineRange(prepared, range)  line.fragments.forEach(frag => {    // frag: { itemIndex, text, gapBefore, occupiedWidth, start, end }    const item = items[frag.itemIndex]    ctx.font = item.font    ctx.fillText(frag.text, x + frag.gapBefore, y)  })})

import { prepareRichInline, measureRichInlineStats } from '@chenglou/pretext/rich-inline'
const prepared = prepareRichInline(items)const { lineCount, maxLineWidth } = measureRichInlineStats(prepared, containerWidth)

import { prepare, layout } from '@chenglou/pretext'
// Pre-measure all items before virtualizationconst rowHeights = items.map(item => {  const prepared = prepare(item.text, '14px Inter')  const { height } = layout(prepared, LIST_WIDTH, 20)  return height})

import { prepareWithSegments, measureLineStats } from '@chenglou/pretext'
function findBalancedWidth(text: string, font: string, maxWidth: number): number {  const prepared = prepareWithSegments(text, font)  const { lineCount: targetLines } = measureLineStats(prepared, maxWidth)
  let lo = 1, hi = maxWidth  while (hi - lo > 1) {    const mid = (lo + hi) / 2    const { lineCount } = measureLineStats(prepared, mid)    if (lineCount <= targetLines) hi = mid    else lo = mid  }  return hi}

import { prepareWithSegments, layoutWithLines } from '@chenglou/pretext'
// Prepare ONCE per text/font changelet prepared = prepareWithSegments(text, '16px Inter')
function onResize(containerWidth: number) {  // layout() is cheap — safe to call on every resize event  const { lines } = layoutWithLines(prepared, containerWidth, 24)  renderLines(lines)}
// Only re-prepare when text or font changesfunction onTextChange(newText: string) {  prepared = prepareWithSegments(newText, '16px Inter')  onResize(currentWidth)}

import { prepare, layout } from '@chenglou/pretext'
async function loadAndRender(containerId: string, width: number) {  const container = document.getElementById(containerId)!  const text = await fetchText()
  // Measure BEFORE inserting into DOM — no reflow needed  const prepared = prepare(text, '16px Inter')  const { height } = layout(prepared, width, 24)
  // Reserve space first to prevent layout shift  container.style.height = `${height}px`  container.textContent = text}

{  whiteSpace?: 'normal' | 'pre-wrap'  // default: 'normal'  wordBreak?: 'normal' | 'keep-all'   // default: 'normal'}