CSS text-box-trim

Zmniejsz odstępy od góry i dołu tekstu, aby uzyskać równowagę optyczną.

Adam Argyle

Data publikacji: 14 stycznia 2025 r.

Od wersji 133 Chrome text-box pozwala deweloperom i projektantom dostosować przestrzeń nad i pod tekstem.

Browser Support

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

Długopis:

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

Skrót:

text-box: trim-both cap alphabetic;

Ta właściwość umożliwia kontrolowanie przestrzeni nad i pod tekstem, np. <h1>, <button> i <p>. Każda czcionka zajmuje inną ilość miejsca w bloku kierunkowym, co wpływa na rozmiar elementu. Ten chaotyczny sposób tworzenia treści nie jest łatwy do zmierzenia i do tej pory nie dało się go kontrolować.

Czcionka wie, teraz CSS też wie.

https://codepen.io/web-dot-dev/pen/xbKjRxL

Przestrzeń nad i pod czcionką wynika z tego, jak strony internetowe wyświetlają tekst (tzw. „półprzestrzeń”). Ten temat został szczegółowo omówiony w poście Matthiasa Otta pt. The Thing With Leading In CSS (pol. „To z prowadzeniem w CSS”). W przypadku ręcznego sporządzania składu wiersze tekstu oddzielano od siebie kawałkami ołowiu. Wzorując się na czcionkach, sieć dzieli tę przestrzeń na pół i przydziela po połowie na górę i dół treści.

Nagłówek z różowym paskiem nad tekstem i pod nim, który wskazuje półprzesunięcie.
Źródło

Ta historia jest istotna, ponieważ text-box podaje nazwy każdej połowy: powyżej i poniżej. Dodatkowo możesz przyciąć film.

text-box ma też wcześniejsze publikacje. Możesz pamiętać interesujący post Ethana Wanga Leading-Trim: The Future Of Digital Typesetting (Leading-Trim: przyszłość cyfrowego składu tekstu), w którym po raz pierwszy przedstawiono leading-trim (wcześniej text-box).

Nagłówek jest wyświetlany z nadmiarowym obszarem powyżej i poniżej, który wygląda jakby został wycięty nożyczkami i usunięty.

Twoim punktem wyjścia do przycinania tekstu może być Figma i jej opcje „przycinania pionowego” przeznaczone dla projektantów. Ten post na forum X pokazuje, gdzie znajduje się ta opcja przycinania pionowego i jak można jej używać w przypadku przycisków.

Źródło

Niezależnie od tego, jak tu dotarłeś/-aś, ta niewielka kontrola typografii może mieć ogromne znaczenie.

Omówienie funkcji i składni

Oto 2 najczęstsze krótkie instrukcje, których użyjesz 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 obu elementów do cap alphabetic. W tych demonstracjach jest to odpowiednio 10 razy. W poprzednim przykładzie pokazano jednak również ex alphabetic, ponieważ jest ona przydatna do zachowania równowagi optycznej na swój własny sposób.

Środowisko do testowania eksploratora

W tym demonstracyjnym filmie możesz zapoznać się ze składnią i zobaczyć wyniki za pomocą menu. Możesz zmieniać czcionki, wartości przycinania górnego i dolnego oraz korzystać z wizualizacji i etykiet z kolorami.

Zrzut ekranu pokazujący demonstrację eksploratora składni. Pokazuje czcionkę i menu, z którego można wybrać inną czcionkę. Podgląd składni z polem tekstowym: podświetlona i wyświetlona składnia z obustronnym ucięciem. W menu znajdują się jeszcze 3 menu, w których można wybrać wartości przycięcia.

Co możesz zrobić:

  1. Wizualna kontrola działania funkcji text-box-trim w przypadku wariantów tekstu jednowierszowego i wielowierszowego.
  2. Najechanie kursorem na wariant i zobaczenie wartości przycięcia użytych do uzyskania tego efektu.
  3. Zmiana czcionki.
  4. przycinanie tylko jednej strony pola tekstowego;
  5. sprawdzać składnię podczas gry;
https://codepen.io/web-dot-dev/pen/RNbyooE

Co mogę zbudować za pomocą tej usługi lub jakie problemy rozwiązuje?

Dzięki tej funkcji można stosować znacznie prostsze rozwiązania do wyśrodkowywania i wyrównywania. Możesz nawet zbliżyć się do właściwego odstępu, w którym między treściami można użyć znaku gap.

Porównujemy 2 grupy treści. Pierwsza grupa ma połowę wiodących, a druga – przycięty wiodący. W efekcie druga grupa jest bardziej zwarta.
https://codepen.io/web-dot-dev/pen/RNbyoKE

Łatwiejsze wyśrodkowywanie

W przypadku mniejszych elementów wstawianych w tekście i elementów nierozdzielnych od treści odpowiednim stylem jest padding: 10px, który zapewnia równe odstępy po obu stronach. Jednak wynik może wprowadzać w błąd, ponieważ często ma dodatkowe miejsce u góry i na dole.

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

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

W tej chwili pozostaje nam wypróbować różne kombinacje wartości, aż wszystko będzie wyglądać estetycznie. Może ona dobrze wyglądać na jednym ekranie i w danym systemie operacyjnym, ale nie na innym.

text-box pozwala przyciąć pierwszą połowę spacji w tekście, dzięki czemu przydatne są wartości wyrównania takie jak 10px:

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}
Poniżej podano 2 przykłady. Pierwszy pokazuje element z wypełnieniem 10 pikseli i półszerokości. Drugi obraz pokazuje ten sam element z polem tekstowym: „trim-both cap alphabetic”. W efekcie drugi przycisk jest optycznie wyśrodkowany.
https://codepen.io/web-dot-dev/pen/NPKMbgq

Oto kilka elementów <button>, które pokazują, jak przycinanie przestrzeni za pomocą text-box sprawia, że padding: 10px wygląda na równy ze wszystkich stron w praktycznym elemencie interaktywnym. Zwróć uwagę, jak czcionka alternatywna może wygenerować bardzo różne wartości odstępu między wierszami.

Wyświetlają się 3 grupy przycisków. Pierwsza grupa zawiera czcionkę bezszeryfową. Druga grupa zawiera fantazyjne lub zabawne czcionki. Trzecia grupa pokazuje ten sam efekt, ale z czcionką odręczną. Chodzi o to, aby pokazać, że każda czcionka ma inną wartość półprzesunięcia, ale wartości przycięcia są takie same i mogą normalizować odstęp.
https://codepen.io/web-dot-dev/pen/mybLOMg

Oto elementy <span>, które często służą do wyświetlania kategorii lub plakiet. Innym momentem, w którym wyrównanie boków powinno być najlepszym rozwiązaniem, ale do wersji text-box musieliśmy znaleźć inne rozwiązanie.

Tagi są wyświetlane obok siebie. Pierwsza grupa ma połowę wiodących, a druga – przycięty wiodący. W efekcie druga grupa jest bardziej zwarta i optycznie wyśrodkowana.
https://codepen.io/web-dot-dev/pen/mybLOMg

Łatwiejsza współpraca

Dodatkowa, niekontrolowana spacja w polu tekstowym nad (over) i pod (under) tekstem utrudnia też wyrównanie. Poniższe przykłady pokazują, kiedy interlinia o połowie szerokości może utrudniać wyrównanie i jak przycinanie bloków po obu stronach pola tekstowego może poprawić wyrównanie.

Tutaj obraz jest umieszczony obok tekstu. Obraz będzie miał wysokość wymaganą przez tekst, ale bez text-box obraz jest zawsze trochę wyższy. Dzięki text-box obraz może idealnie pasować do tekstu.

https://codepen.io/web-dot-dev/pen/yyBjVpg

Zwróć uwagę, że w sytuacjach z zawijaniem wierszy biała przestrzeń znajduje się nad pierwszym sformatowanym wierszem tekstu i pod ostatnim sformatowanym wierszem tekstu.

W tym przykładzie zwróć uwagę, jak funkcja logicznie dostosowuje się do zmiany w writing-mode. Spróbuj zmienić tekst i obserwuj, jak układ pozostaje wyrównany.

https://codepen.io/web-dot-dev/pen/dPbeOJQ

Kontynuuj naukę

Chcesz wiedzieć więcej? Na liście linków poniżej znajdziesz dodatkowe informacje i przypadki użycia.