Skip to content

component

Line Balance

By KHZ ART

Details

Summary

Line Balance fixes all of that in one component.

Description

A headline is the first thing people read and the first thing that breaks. The browser drops the last word onto its own line, leaves one line long and the next one short, and in Japanese it starts a line with 、 or ). Line Balance fixes all of that in one component. Type your text, pick a tag, and the line breaks are handled. No Widow: the last two words are joined so a single word never falls alone. Measured over 90 headlines in Chromium: 24.4% had a widow, 1.1% after. Balanced measure: text-wrap balance evens out the line lengths. Standard deviation of line width fell from 109px to 25px in the same test - the words are untouched, only the folding changes. Kinsoku: closing brackets, punctuation, small kana and long vowel marks never start a line; opening brackets never end one; ... and -- are never split. CSS line-break alone still lets these through. Auto Phrase folds Japanese at phrase boundaries where the browser supports it. Plus hanging punctuation, a measure limit in ch, and h1/h2/h3/p. Zero dependencies, nothing loaded from outside your site, no animation - the canvas and the static export show exactly what the page shows. Built by KHZ ART, a Tokyo studio that sets type on the web.

Introduction

Kinsoku line breaks. No widows.

Rank history

Daily rank per list, from the first snapshot — lower is better.

12001400152579/109/119/129/139/15
  • All · #3237