CSS text-box-trim

Adam Argyle

Data publikacji: 14 stycznia 2025 r.

Od Chrome 133 funkcja text-box umożliwia deweloperom i projektantom dostosowywanie odstępów nad i pod tekstem.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: 18.2.

Source

Longhand:

text-box-trim: trim-start | trim-end | trim-both | none;
text-box-edge: cap | ex | text | leading + alphabetic | text;

Shorthand:

text-box: trim-both cap alphabetic;

Ta właściwość umożliwia kontrolowanie odstępów nad i pod tekstem, np. <h1>, <button> i <p>. Każda czcionka generuje inną ilość tego miejsca w kierunku bloku, co wpływa na rozmiar elementu. Ten chaotyczny wkład przestrzeni jest trudny do zmierzenia i do tej pory nie można było go kontrolować.

Czcionka wie, a teraz wie też CSS.

Wypróbuj w CodePen

Przestrzeń nad i pod czcionką wynika ze sposobu, w jaki przeglądarka internetowa wyświetla tekst, czyli z tzw. „półinterlinii”. Więcej informacji na ten temat znajdziesz w artykule Matthiasa Otta pod tytułem The Thing With Leading In CSS. W czasach, gdy składanie tekstu odbywało się ręcznie, do oddzielania wierszy tekstu używano metalowych elementów ołowianych. Sieć, inspirowana wiodącymi rozwiązaniami, dzieli lead na 2 części i umieszcza jedną nad treścią, a drugą pod nią.

Nagłówek jest wyświetlany z różowymi paskami nad i pod tekstem, aby zademonstrować półinterlinię. Źródło

Ta historia jest ważna, ponieważ text-box podaje nazwy dla każdej połowy: powyżej i poniżej. Możesz też je przyciąć.

Istnieje też wcześniejsza praca na temat text-box. Być może pamiętasz ciekawy post Ethana Wanga o nazwie Leading-Trim: The Future Of Digital Typesetting, w którym po raz pierwszy pojawiła się nazwa leading-trim (wcześniejsza nazwa text-box).

Nagłówek z nadmierną ilością miejsca nad i pod nim wygląda, jakby został wycięty nożyczkami i usunięty.

Punktem wyjścia do przycinania tekstu mogą być Figma i jej elementy sterujące „przycinaniem pionowym” dla projektantów. Ten post na platformie X pokazuje, gdzie znajduje się ta opcja przycinania w pionie i jak jest przydatna w przypadku przycisków.

Źródło

Niezależnie od tego, jak tu trafiłeś(-aś), ta niewielka funkcja typograficzna może mieć duże znaczenie.

Funkcja i składnia

Oto 2 najczęstsze jednolinijkowe polecenia, których będziesz potrzebować podczas pracy z text-box:

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

Najczęstszym zastosowaniem tej funkcji będzie przycinanie do cap alphabetic. W tych prezentacjach jest on używany wielokrotnie. Jednak w poprzednim przykładzie widać też ex alphabetic, ponieważ jest on przydatny do optycznego wyważenia na swój własny, niepowtarzalny sposób.

Środowisko testowe Eksploratora

Poznaj składnię w naszym środowisku testowym i wyświetl wyniki za pomocą menu. Możesz zmieniać czcionki, wartości przycinania i śledzić kolorowe wizualizacje oraz etykiety.

Podgląd składni z polem tekstowym: składnia trim-both cap alphabetic jest wyróżniona i wyświetlona. Dostępne są jeszcze 3 menu, w których możesz wybrać wartości przycięcia.

Do wypróbowania:

  1. Wizualne sprawdzanie działania text-box-trim w przypadku wariantów tekstu jedno- i wielowierszowego.
  2. Najedź kursorem na wariant, aby zobaczyć wartości przycinania użyte do uzyskania tego efektu.
  3. zmiana czcionki,
  4. Przycinanie tylko jednej strony pola tekstowego.
  5. Sprawdzaj składnię podczas odtwarzania.
Wypróbuj w CodePen

Co mogę stworzyć i jakie problemy to rozwiązuje?

Dzięki tej funkcji przycinania można uzyskać znacznie prostsze rozwiązania dotyczące wyśrodkowywania i wyrównywania. Możesz nawet zbliżyć się do prawidłowego interlinowania, w którym między treściami można użyć np. gap.

Porównanie 2 grup treści.
Pierwsza grupa ma półinterlinię, a druga – przyciętą interlinię. W rezultacie druga grupa jest bardziej zwarta. Wypróbuj w CodePen

Łatwiejsze wyśrodkowywanie

W przypadku mniejszych komponentów, które są bardziej wbudowane i związane z treścią, padding: 10px to odpowiedni styl do określenia dla elementu, aby zapewnić równomierne odstępy ze wszystkich stron. Może to jednak wprowadzać użytkowników w błąd, ponieważ często pojawia się dodatkowa przestrzeń u góry i u dołu.

Aby temu zapobiec, deweloperzy często zmniejszają odstępy u góry i u dołu (blok), aby zrównoważyć efekt półinterlinii.

button {
  padding-block: 5px;
  padding-inline: 10px;
}

W tym momencie pozostaje nam tylko wypróbować kombinacje wartości, aż elementy zostaną optycznie wyśrodkowane. Może to wyglądać dobrze na jednym ekranie i w jednym systemie operacyjnym, ale nie na innym.

text-box umożliwia usunięcie spacji przed tekstem, dzięki czemu przydatne są równe wartości dopełnienia, np. 10px:

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}
Podano 2 przykłady.
Pierwszy przykład pokazuje element z dopełnieniem 10 pikseli i półinterlinią. Drugi pokazuje ten sam element z właściwością text-box: trim-both cap alphabetic. W efekcie drugi przycisk jest wyśrodkowany optycznie. Wypróbuj w CodePen

Oto kilka <button>elementów, które pokazują, jak przycięcie spacji za pomocą text-box sprawia, że padding: 10px wygląda na równe ze wszystkich stron w praktycznym elemencie interaktywnym. Zwróć uwagę, jak alternatywna czcionka może generować zupełnie inne odstępy między wierszami.

Trzy grupy przycisków. Pierwszy używa zwykłej czcionki bezszeryfowej, drugi – ozdobnej lub zabawnej, a trzeci – tego samego efektu z czcionką imitującą pismo odręczne.
Każda czcionka ma inną wartość odstępu między wierszami, ale wartości przycięcia są takie same i mogą normalizować odstęp. Wypróbuj w CodePen

Oto elementy <span>, które są często używane do wyświetlania kategorii lub plakietek. Kolejny moment, w którym najlepszym rozwiązaniem powinny być równe odstępy, ale do czasu text-box musieliśmy sobie z tym radzić inaczej.

Tagi są wyświetlane obok siebie. Pierwsza grupa ma półinterlinię, a druga – przyciętą interlinię.
Druga grupa tagów jest bardziej zwarta i wyśrodkowana optycznie dzięki przyciętym odstępom przed wiodącym wierszem.

Łatwiejsze wyrównywanie

Dodatkowa, niekontrolowana półinterlinia nad (over) i pod (under) polem tekstowym również utrudnia wyrównanie. Poniższe przykłady pokazują, kiedy półinterlinia może utrudniać wyrównanie, oraz jak przycięcie boków bloku tekstowego może poprawić wyrównanie.

Obraz jest umieszczony obok tekstu. Obraz powiększa się do wysokości, jakiej wymaga tekst. Bez text-box obraz jest zawsze nieco wyższy. Dzięki text-box obraz może być idealnie dopasowany do treści tekstowej.

Wypróbuj w CodePen

Zwróć uwagę, że w przypadku zawijania wierszy białe znaki znajdują się nad pierwszym sformatowanym wierszem tekstu i pod ostatnim sformatowanym wierszem tekstu.

W poniższym przykładzie zobacz, jak funkcja logicznie dostosowuje się do zmiany w writing-mode. Spróbuj zmienić tekst i zobacz, jak układ pozostaje wyrównany.

Wypróbuj w CodePen

Kontynuuj naukę

Chcesz wiedzieć więcej? Na liście linków poniżej znajdziesz różne ilości dodatkowych informacji i przykłady zastosowań.