Wzorzec 23

Nagłówek bez sieroty

Płynna typografia oznacza, że tekst łamie się inaczej na każdej szerokości, więc ręczne <br> i twarde spacje przestają działać chwilę po wstawieniu. text-wrap: balance każe przeglądarce wyrównać długości linii nagłówka, a text-wrap: pretty zapobiega sierocie w ostatniej linii akapitu. Łamaniem zarządza silnik tekstu, nie treść.

Jedno łamanie, każda szerokość

Złap prawy dolny róg ramki i zmieniaj jej szerokość. Górny nagłówek łamie się domyślnie i zostawia krótkie ogony, dolny z text-wrap: balance trzyma linie o zbliżonej długości. Akapit z pretty nie kończy się samotnym słowem.

✕ Domyślne łamanie

Interfejsy, które nie skaczą, buduje się z rezerwacji miejsca

✓ text-wrap: balance

Interfejsy, które nie skaczą, buduje się z rezerwacji miejsca

✓ text-wrap: pretty

Płynna typografia oznacza, że ten sam nagłówek łamie się inaczej na każdej szerokości ekranu. Ręczna korekta łamania działa dokładnie na jednej z nich, a silnik tekstu przeglądarki działa na wszystkich naraz.

Uchwyt zmiany szerokości wymaga myszy. Na dotyku porównaj oba nagłówki obracając ekran: balance wyrównuje linie na każdej szerokości bez pojedynczej poprawki w treści.

Reguły

Nagłówki i krótkie frazy łamie text-wrap: balance, linie mają zbliżoną długość na każdej szerokości.
Akapity dostają text-wrap: pretty, więc ostatnia linia nie zostaje z samotnym słowem.
balance działa do kilku linii i kosztuje dodatkowe przejście layoutu, na długich blokach zostaje pretty.
Ręczne <br> i   znikają z treści, bo opisują jedną szerokość ekranu, a tekst płynie przez wszystkie.

Wzorzec w kodzie

Dwie deklaracje na cały serwis

h1, h2, h3, blockquote {
  text-wrap: balance;
}

p, li, figcaption {
  text-wrap: pretty;
}

Antywzorzec: łamanie zaszyte w treści działa na jednej szerokości

<h2>
  Interfejsy, które<br />
  nie skaczą
</h2>

<p>...bez pojedynczego&nbsp;słowa</p>

Prompt dla Claude

Wklej do Claude Code w swoim projekcie. Prompt niesie komplet reguł tej lekcji i ogólne zasady Liquid Design, więc implementacja trafia w metodologię bez tłumaczenia jej od zera.

Prompt do wklejenia

Zaimplementuj w moim projekcie wzorzec „Nagłówek bez sieroty" z metodologii Liquid Design.

text-wrap: balance wyrównuje linie nagłówka, a pretty pilnuje akapitów, więc żadna szerokość ekranu nie zostawia samotnego słowa.

Wymagania:
- Nagłówki i krótkie frazy łamie text-wrap: balance, linie mają zbliżoną długość na każdej szerokości.
- Akapity dostają text-wrap: pretty, więc ostatnia linia nie zostaje z samotnym słowem.
- balance działa do kilku linii i kosztuje dodatkowe przejście layoutu, na długich blokach zostaje pretty.
- Ręczne <br> i &nbsp; znikają z treści, bo opisują jedną szerokość ekranu, a tekst płynie przez wszystkie.

Ogólne reguły Liquid Design, których implementacja nie może złamać:
- HTML jest semantyczny: button, a, nav, form, label, dialog, details, ul, dl i nagłówki h1-h6 zamiast div z onClick i ARIA dopisywanym ręcznie. div i span służą wyłącznie do layoutu, nigdy do interakcji ani struktury treści.
- Layout jest umową: treść, która dociera później, ma miejsce zarezerwowane od pierwszego renderu. Nic nie skacze.
- Stany ładowania, pustki, błędu i treści dzielą jeden layout.
- Typografia pochodzi z nazwanej, płynnej skali opartej o clamp(), nie z gołych rozmiarów.
- Animacje dotyczą wyłącznie transform i opacity, a prefers-reduced-motion redukuje je do natychmiastowej zmiany stanu.
- Breakpoint jest ostatecznością: najpierw container queries i repeat(auto-fit, minmax(...)).

Sposób pracy — zanim napiszesz pierwszą linię kodu:
- Sprawdź w plikach projektu, jak stylowane są komponenty (Tailwind, CSS Modules, vanilla-extract, styled-components, Sass, czysty CSS...) i pisz wyłącznie w tej konwencji. Niczego nie zakładaj z góry i nie dodawaj nowych zależności.
- Wymagania powyżej opisują właściwości CSS i atrybuty HTML, nie klasy narzędziowe. Przełóż je na system stylowania zastany w projekcie.
- Sprawdź framework komponentów, wersję i konwencje nazewnictwa, zamiast zakładać konkretny stack.
- Używaj istniejących tokenów projektu (kolory, typografia, odstępy). Jeśli czegoś brakuje, zaproponuj minimalne uzupełnienie w duchu istniejącego kodu, nie osobny system.
- Nie używaj klas, tokenów ani API, których nie znalazłeś w tym projekcie.

Pełny opis z żywym demo i kodem: https://liquid-design.website/wzorce/zawijanie-tekstu