Measure
A paragraph whose measure you set by dragging its right edge, with the number of characters a line and a verdict on it.
Report an issue with MeasureExample
A line is a breath. Set it too short and the reader is thrown back to the margin before the thought has landed; set it too long and the eye finishes one line without knowing where the next begins. Somewhere between the two, a sentence sits down and is read without anyone noticing that it was set.
A line is a breath. Set it too short and the reader is thrown back to the margin before the thought has landed; set it too long and the eye finishes one line without knowing where the next begins. Somewhere between the two, a sentence sits down and is read without anyone noticing that it was set.
A line is a breath. Set it too short and the reader is thrown back to the margin before the thought has landed; set it too long and the eye finishes one line without knowing where the next begins. Somewhere between the two, a sentence sits down and is read without anyone noticing that it was set.
A line is a breath. Set it too short and the reader is thrown back to the margin before the thought has landed; set it too long and the eye finishes one line without knowing where the next begins. Somewhere between the two, a sentence sits down and is read without anyone noticing that it was set.
A line is a breath. Set it too short and the reader is thrown back to the margin before the thought has landed; set it too long and the eye finishes one line without knowing where the next begins. Somewhere between the two, a sentence sits down and is read without anyone noticing that it was set.
A line is a breath. Set it too short and the reader is thrown back to the margin before the thought has landed; set it too long and the eye finishes one line without knowing where the next begins. Somewhere between the two, a sentence sits down and is read without anyone noticing that it was set.
A line is a breath. Set it too short and the reader is thrown back to the margin before the thought has landed; set it too long and the eye finishes one line without knowing where the next begins. Somewhere between the two, a sentence sits down and is read without anyone noticing that it was set.
A line is a breath. Set it too short and the reader is thrown back to the margin before the thought has landed; set it too long and the eye finishes one line without knowing where the next begins. Somewhere between the two, a sentence sits down and is read without anyone noticing that it was set.
A line is a breath. Set it too short and the reader is thrown back to the margin before the thought has landed; set it too long and the eye finishes one line without knowing where the next begins. Somewhere between the two, a sentence sits down and is read without anyone noticing that it was set.
A line is a breath. Set it too short and the reader is thrown back to the margin before the thought has landed; set it too long and the eye finishes one line without knowing where the next begins. Somewhere between the two, a sentence sits down and is read without anyone noticing that it was set.
السطر نَفَس. إن جعلته قصيراً جداً رُدّ القارئ إلى الهامش قبل أن تستقر الفكرة، وإن جعلته طويلاً جداً أنهت العين سطراً دون أن تعرف أين يبدأ التالي. وبين الاثنين تجلس الجملة وتُقرأ دون أن يلاحظ أحد أنها صُفّت.
Install
Run it in a project that has the shadcn CLI set up. It brings the 0nlyType base along.
npx shadcn@latest add https://Usage
import { Measure } from "@/components/ui/measure"const text ="A line is a breath. Set it too short and the reader is thrown back to the margin before the thought has landed; set it too long and the eye finishes one line without knowing where the next begins. Somewhere between the two, a sentence sits down and is read without anyone noticing that it was set."/** The track; a ruler of alphabets; and columns, which narrowing the line multiplies. */export default function Example() {return (<div className="grid grid-cols-[minmax(0,1fr)] gap-y-(--ot-space-8)"><Measure>{text}</Measure><Measure variant="alphabets" defaultMeasure={56}>{text}</Measure><Measure variant="columns" defaultMeasure={34}>{text}</Measure></div>)}Contract
- Underneath: native, plus a hook that lays the lines out with pretext; the handle is a
role="slider". - Anatomy:
<div class="ot-measure">holding.ot-measure-read(the count and the verdict, aria-hidden),.ot-measure-stagewith.ot-measure-track(a hairline, the comfortable range in the accent),.ot-measure-handle(the slider: a hairline down the paragraph's right edge,.ot-measure-ringon the track) and.ot-measure-body(the text once for readers in.ot-sr, the lines aria-hidden). - A paragraph whose measure you set by dragging its right edge; pressing the track moves the handle there. Pretext lays the lines again whenever the width changes, so they follow the hand. The count is in the expression italic ("62 characters a line", the average character of this text, so it is what the lines really hold); under it, in pencil, the verdict: under 45 "too short to read in", 45 to 75 "comfortable" (that range is the accent on the track), over 75 "the eye loses the next line". The handle stops at the edge of its container; on a narrow screen the paragraph sets a size down so the comfortable range is still there.
- Keyboard: the handle is focusable; left and right (or down and up) step one character, Page steps ten, Home and End go to the ends.
aria-valuenowis characters a line andaria-valuetextsays the verdict. Focus draws the accent ring around the handle's ring. - The count's number stands at
mfand its words a dynamic down beside it, on one baseline. The comfortable range's ends are marked over the track in small pencil figures (.ot-measure-at, 45 and 75), where the page is wide enough to hold them. Right to left, the edge is the line's end on the left, and the drag and the arrows follow it. The readout is the library's English, each part its own left-to-right run, so a right-to-left page still reads "30 characters a line". variant(data-variant):track(the default),alphabetsorcolumns.- alphabets: after a type specimen's lowercase alphabet length. The track is a ruler of lowercase alphabets (
.ot-measure-abc, a span a letter) in the paragraph's own face and size, measured letter by letter with its kerning, so it is a true rule for this face. The letters inside the measure are graphite, those beyond a rule's grey, and the letter the edge cuts is the accent, with the handle's hairline running down through it; there is no ring. The count reads in alphabets to the quarter ("2½ alphabets a line"); the verdict still counts characters, andaria-valuetextsays both. The comfortable range is a hairline under the ruler. Focus draws the handle's line in the accent at stroke weight. The ruler is Latin; a right-to-left page should use the track. - columns: after the narrow ragged columns of "Healthy habits →". The paragraph takes as many columns of the measure as its space holds (
--cols), two ems apart (--gap), balanced, never more than it has lines. The handle is the first column's edge, so narrowing the line brings another column in and widening takes one away; the verdict says how many ("too short to read in, in three columns"). - Forced colours: the hairlines in CanvasText, the comfortable range and the cut letter in Highlight.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
children | string | The paragraph, as plain text: pretext lays its lines again on every move. | |
defaultMeasure | number | 62 | Characters a line, to begin with. |
min | number | 20 | The shortest measure the handle allows, in characters. |
max | number | 110 | The longest measure the handle allows, in characters. The page's own width may stop it sooner. |
variant | "track" | "alphabets" | "columns" | "track" | track: the handle rides a hairline with the comfortable range in the accent, its ends marked 45 and 75. alphabets, after a type specimen's alphabet length: the track is a ruler of lowercase alphabets in the paragraph's own face, graphite inside the measure and a rule's grey beyond, the letter the edge cuts in the accent, and the measure is read in alphabets (2½ alphabets a line). columns, after the narrow ragged columns of the posters: the paragraph takes as many columns of the measure as its space holds, two ems apart, so narrowing the line brings another column in, and the verdict says how many. |
Craft
Where its move comes from
| Component | Reference | Move |
|---|---|---|
| Measure | Paul Rand dimension lines; SPECTRA's small figures | The paragraph's edge on a track, the comfortable range marked 45 to 75 |
| Alphabets measure | A type specimen's lowercase alphabet length | The track is a ruler of alphabets; the edge cuts a letter in the accent |
| Columns measure | "Healthy habits →" narrow columns | Narrowing the line brings another column in |
How it moves
| Component | Articulation | What moves |
|---|---|---|
| Measure | Drag | The right edge follows the hand and the lines are laid again on every move |
| Alphabets measure | Drag | The edge cuts a new letter of the ruler, and that letter takes the accent |
| Columns measure | Drag | Columns come in and go as the line narrows and widens |