1.4.12 Odstępy w tekście

/ Jak strony go nie spełniają

• Kontener ma stałą wysokość i overflow: hidden, więc większa wysokość linii wypycha ostatnie wiersze poza widoczny obszar.
• Przyciski, karty lub pozycje nawigacji mają stałą wysokość albo szerokość i white-space: nowrap, a szersze odstępy między literami ucinają ich etykiety.
• Tekst wylewa się z pola o stałej wysokości i nachodzi na treść poniżej.
• Nagłówki lub teksty kafelków są skracane przez text-overflow: ellipsis albo ograniczenie liczby wierszy, a odstępy ukrywają słowa, które wcześniej były widoczne.
• Tekst jest pozycjonowany absolutnie na tle w kształcie, który nie rośnie razem z nim.

/ Jak sprawdzić samodzielnie

1. Zastosuj cztery wartości skryptozakładką lub rozszerzeniem do odstępów w tekście albo wklej regułę w narzędziach deweloperskich: line-height: 1.5, letter-spacing: 0.12em, word-spacing: 0.16em dla wszystkich elementów i margin-bottom: 2em dla akapitów, każdą z flagą important.
2. Przejdź stronę i porównaj ją z oryginałem: szukaj uciętych wierszy, nachodzącego na siebie tekstu, etykiet, które nie mieszczą się już w przyciskach, i treści, która zniknęła.
3. Zwróć uwagę na komponenty o ciasnych polach: nawigację, karty, przyciski, kafelki, plakietki, etykiety formularzy, komórki tabel i banery.
4. Powtórz test w wąskim oknie, bo pola, które na komputerze mają zapas miejsca, na telefonie często go nie mają.

/ Jak to naprawić

• Zamień height na min-height w każdym elemencie zawierającym tekst, a rozmiar przycisków ustalaj przez padding zamiast stałej wysokości.
• Usuń white-space: nowrap tam, gdzie tekst może się zawijać, i pozwól elementom flex i grid rosnąć razem z treścią.
• Nie używaj overflow: hidden do porządkowania pól z tekstem. Tam, gdzie skracanie jest zamierzone, daj czytelnikowi sposób dotarcia do pełnego tekstu.
• Rozmiary zależne od tekstu podawaj w em lub rem, żeby pola skalowały się razem z czcionką.
• Trzymaj tekst w normalnym przepływie, a nie pozycjonowany absolutnie w polu o stałym rozmiarze.

/ Co sprawdza nasz skaner

Skan na wyrenderowanej stronie zapisuje, które z maksymalnie 400 widocznych elementów z tekstem są ucięte, po czym wstrzykuje arkusz stylów z wysokością linii 1.5, odstępem liter 0.12em, odstępem wyrazów 0.16em i dolnym marginesem 2em dla akapitów, pozycji list i nagłówków. Mierzy ponownie, usuwa arkusz i zgłasza tylko te pola, które zostały ucięte dopiero teraz. Tekstu, który wylewa się poza pole i nachodzi na sąsiadów, nie wykrywa.