Precyzyjne wyrównanie tekstu

Problem

Przeglądarki automatycznie dodają dodatkowe odstępy nad i pod znakami tekstu, aby uwzględnić wysokość wiersza i parametry czcionki, takie jak wydłużenia górne i dolne. Ta „pusta przestrzeń” uniemożliwia uzyskanie idealnego wyrównania w pionie za pomocą standardowego kodu CSS.

Przykłady częstych problemów:

• Nieprawidłowo wyrównane ikony: tekst jest wyświetlany niżej lub wyżej niż sąsiadująca ikona, nawet jeśli używasz align-items: center.
• Nieprawidłowe dopełnienie: przycisk z tekstem padding: 12px wydaje się mieć więcej miejsca u góry lub u dołu ze względu na wewnętrzne odstępy między wierszami czcionki.
• Wyrównanie do krawędzi: nie można wyrównać górnej krawędzi wielkiej litery dokładnie z górną krawędzią kontenera lub sąsiedniego obrazu bez użycia ujemnych marginesów „magicznej liczby”.

Rozwiązanie

Właściwości text-box-trim i text-box-edge (skrót text-box) umożliwiają przycinanie tego wewnętrznego odstępu na podstawie określonych danych czcionki. Przycinając pole tekstowe do wysokości wielkich liter (góra wielkich liter) i linii bazowej alfabetu (dół większości liter), możesz mieć pewność, że ramka ograniczająca elementu będzie pasować do jego zawartości wizualnej.

Strategia wdrażania

1. OBOWIĄZKOWO: zastosuj text-box-trim: trim-both (lub skrót text-box) do elementu zawierającego tekst.
2. OBOWIĄZKOWE: określ, które dane mają być używane do przycinania za pomocą text-box-edge. W przypadku większości wyrównań interfejsu używaj cap alphabetic.
3. UŻYWAJ tej właściwości, aby uzyskać wizualne wyśrodkowanie w pionie w kontenerach flex lub grid.
4. UŻYWAJ tej właściwości, aby wartości padding w kodzie CSS odpowiadały wizualnej odległości między tekstem a krawędzią kontenera.
5. NIE używaj go w długich tekstach, w których tradycyjne odstępy między wierszami są niezbędne do zapewnienia czytelności. Najlepiej sprawdza się w nagłówkach, przyciskach i etykietach interfejsu.

Przewodnik po implementacji

Przypadek użycia 1. Przycinanie wewnętrznych odstępów na początku w przypadku plakietek

Różne czcionki mają różne odstępy nad i pod tekstem. Może to utrudniać dopasowanie projektu lub wizualne wyśrodkowanie tekstu w plakietce. Jeśli chcesz, aby dopełnienie kontenera dokładnie przylegało do tekstu, użyj text-box: trim-both cap alphabetic. Jest to szczególnie przydatne w przypadku gęstych elementów interfejsu, takich jak plakietki czy tagi. Dzięki temu dopełnienie zaczyna się bezpośrednio przy krawędzi tekstu ze wszystkich stron.

.badge {
  padding: 10px;
  background: hotpink;
  border-radius: 10px;
  /* 
    Trims the top to the cap-height and 
    the bottom to the alphabetic baseline.
  */
  text-box: trim-both cap alphabetic;
}

Przypadek użycia 2. Wyśrodkowany tekst z ikonami

Gdy używasz Flexboxa do wyrównywania tekstu i ikon, „pusta przestrzeń” często sprawia, że tekst wydaje się nieco przesunięty względem środka. Przycięcie pola sprawia, że silnik układu używa do wyrównania rzeczywistej widocznej wysokości litery.

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px; 
}
/* 
  text-box does NOT inherit, and must be applied directly to the text element.
*/
.button-text{
  /* 
    The flex container now centers against the 
    visible letters, not the invisible font box.
  */
  text-box: trim-both cap alphabetic;
}

Przypadek użycia 3. Wyrównywanie tekstu do górnych krawędzi

Aby idealnie wyrównać nagłówek z górną krawędzią sąsiedniego obrazu lub elementu dekoracyjnego, użyj trim-start cap alphabetic. Nawet jeśli koniec nie zostanie przycięty, należy określić krawędź końcową.

.hero {
  display: flex;
  align-items: flex-start;
}

h1 {
  /* MANDATORY: The bottom edge must also be defined, even though only the top is trimmed. */
  text-box: trim-start cap alphabetic;
}

Sprawdzone metody

• TAK – używaj skrótu text-box, aby zachować zwięzłość: text-box: <trim-direction> <edges>.
• Zawsze określaj obie krawędzie, nawet jeśli przycinana jest tylko jedna (chyba że używasz domyślnej krawędzi text).
• DO combine with line-height for controlled spacing. Przycinanie usuwa odstęp przed pierwszym i ostatnim wierszem tekstu, ale line-height nadal wpływa na odległość między wierszami w tekście wielowierszowym.
• NIE stosuj ich do każdego elementu. Używaj go tylko wtedy, gdy wymagane jest precyzyjne wyrównanie.

Strategie zastępcze

text-box to progresywne ulepszanie. W przeglądarkach, które nie obsługują tej właściwości, tekst będzie renderowany z domyślną interlinią. Układ będzie nadal działać, ale będzie nieco mniej precyzyjny. Nie jest wymagany żaden specjalny kod zastępczy, ponieważ starsze przeglądarki bezpiecznie ignorują te właściwości.

Inne rzeczy, które warto wziąć pod uwagę

1. Dane czcionki: różne czcionki mają różne dane wewnętrzne. cap alphabetic to niezawodna wartość domyślna, ale niektóre czcionki lub przypadki użycia mogą wymagać wartości ex (wysokość x), aby lepiej wyrównać małe litery.
2. Tekst wielowierszowy: przycinanie dotyczy pierwszego i ostatniego wiersza bloku. Nie ma to wpływu na linie wewnętrzne.