Demo

Rich Text

Rich text rendered as text runs, links, code spans, and atomic chips. Adjust the text width to watch the chips stay whole while the surrounding text and code keep wrapping naturally when space gets tight.

516px

Ship @maya's rich-note card once pre-wrap lands. Status blocked by vertical text research, but 北京 copy and Arabic QA are both green ✅. Keep جاهز for Cmd+K docs; the review bundle now includes 中文 labels, عربي fallback, and one more launch pass 🚀 for Fri 2:30 PM. Keep layoutNextLine() public, tag this P1, keep 3 reviewers, and route feedback to design sync.

Accessibility in this demo

The note above renders each text run, code span, link, and chip as an individually positioned fragment using Pretext's line-breaking engine. This produces pixel-perfect wrapping where atomic chips never break mid-word.

A screen-reader-accessible version of the full note text is provided alongside the visual fragments. The positioned layout is marked aria-hidden so assistive technologies read the semantic text instead of hundreds of individual fragments. The width slider has a proper <label> element.

The full note text is pre-populated in the HTML source in two forms: a screen-reader-accessible paragraph and a <noscript> block with semantic formatting (bold for chips, italic for links, code for code spans). Text browsers like Lynx, search engine crawlers, and browser reader modes see the complete note content without executing any script.