CSS-tekstvak-trim

Neem ruimte terug van boven en onder uw tekstinhoud; optische balans te bereiken.

Adam Argyle

Gepubliceerd: 14 januari 2025

Vanaf Chrome 133 kunnen ontwikkelaars en ontwerpers text-box de ruimte boven en onder de tekst aanpassen.

Browser Support

  • Chroom: 133.
  • Rand: 133.
  • Firefox: niet ondersteund.
  • Safari: 18.2.

Met de hand:

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

Afkorting:

text-box: trim-both cap alphabetic;

Met deze eigenschap kunt u de ruimte boven en onder tekst bepalen, bijvoorbeeld <h1> , <button> en <p> . Elk lettertype produceert een andere hoeveelheid van deze blokrichtingsruimte, wat bijdraagt ​​aan de grootte van het element. Deze chaotische bijdrage aan de ruimte is niet gemakkelijk te meten en was tot nu toe onmogelijk te controleren.

Het lettertype weet het, nu weet CSS het!

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

De ruimte boven en onder een lettertype wordt bepaald door de manier waarop tekst op internet wordt opgemaakt, ook wel 'half-leading' genoemd. Dit wordt vakkundig behandeld in een bericht van Matthias Ott genaamd The Thing With Leading In CSS . Als het zetten met de hand werd gedaan, werden in wezen stukjes metaallood gebruikt om tekstregels van elkaar te scheiden. Het web, geïnspireerd door leading, verdeelt dat stuk lood in tweeën en verdeelt een stuk boven en een stuk onder de inhoud.

Er wordt een kop weergegeven met een felroze balk boven en onder de tekst om de halve regelafstand weer te geven.
Bron

Deze geschiedenis is betekenisvol omdat text-box ons ​​namen geeft voor elke helft: boven en onder. Plus de mogelijkheid om het af te knippen.

Er is ook een stand van de techniek op het gebied van text-box , misschien herinnert u zich het opwindende bericht van Ethan Wang genaamd Leading-Trim: The Future Of Digital Typesetting , waarin leading-trim (de naam die voorheen text-box had) voor het eerst werd geïntroduceerd.

Er wordt een kop weergegeven waarbij overtollige ruimte boven en onder lijkt te zijn afgeknipt met een schaar en verwijderd.

Uw startpunt voor het bijsnijden van tekst kan afkomstig zijn van Figma en de "verticale bijsnijding" -regelaars voor ontwerpers. Dit X-bericht laat zien waar deze verticale trimoptie is en hoe deze nuttig is voor knoppen.

Bron

Ongeacht hoe je hier terecht bent gekomen, deze klein klinkende typografische controle kan een groot verschil maken.

Functie- en syntaxisoverzicht

Hier zijn naar mijn mening de twee meest voorkomende oneliners die je nodig hebt als je met text-box werkt:

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;
}

Het meest voorkomende gebruik van deze functie is het inkorten van beide tot cap alphabetic . De volgende demo's gebruiken dit vaak. Het vorige voorbeeld toont echter ook ex alphabetic omdat het op zijn eigen unieke manier nuttig is voor optische balans.

Ontdekkingsspeeltuin

Met de volgende demo kunt u de syntaxis verkennen en de resultaten bekijken met behulp van vervolgkeuzemenu's. U kunt lettertypen wijzigen, over- en onder-trimwaarden wijzigen en de kleurgecodeerde beelden en labels volgen.

Een screenshot van de demo van de syntaxisverkenner. Toont het lettertype en een vervolgkeuzelijst waarin u een ander lettertype kunt kiezen. Een syntaxisvoorbeeld met tekstvak: trim-beide hoofdletters alfabetische syntaxis gemarkeerd en weergegeven. Ten slotte zijn er nog 3 vervolgkeuzelijsten waarin u trimwaarden kunt kiezen.

Dingen om te proberen:

  1. Visueel inspecteren hoe text-box-trim werkt bij tekstvarianten met één of meerdere regels.
  2. Door over een variant te bewegen en de trimwaarden te zien die zijn gebruikt om dat effect te bereiken.
  3. Het lettertype wijzigen.
  4. Slechts één zijde van een tekstvak bijsnijden.
  5. Bekijk de syntaxis terwijl je speelt.
https://codepen.io/web-dot-dev/pen/RNbyooE

Wat kan ik ermee bouwen of welke problemen lost het op?

Er zijn enkele veel eenvoudigere centreer- en uitlijningsoplossingen die voortkomen uit deze trimmogelijkheid. Je kunt zelfs dichter bij de juiste leiding komen, waarbij zoiets als gap tussen de inhoud kan worden gebruikt.

Er wordt een vergelijking getoond tussen twee groepen inhoud. De eerste groep heeft een halve voorsprong, de tweede heeft een kleine voorsprong. Het resultaat is dat de tweede groep dichter bij elkaar zit.
https://codepen.io/web-dot-dev/pen/RNbyoKE

Gemakkelijker centreren

Voor kleinere, meer inline en inhoudsintrinsieke componenten is padding: 10px een redelijke stijl om voor een element te specificeren voor gelijke afstanden aan alle zijden. Het resultaat kan mensen echter verwarren, omdat er vaak extra ruimte aan de boven- en onderkant is.

Om dit te omzeilen, plaatsen ontwikkelaars vaak expliciet minder opvulling aan de boven- en onderkant (blok) om de effecten van halve voorloop te compenseren.

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

Op dit punt kunnen we waardecombinaties proberen totdat de zaken optisch gecentreerd zijn. Dit ziet er misschien goed uit op het ene scherm en besturingssysteem, maar niet op het andere.

text-box kunnen we de halve voorloopruimte van de tekst inkorten, waardoor gelijke opvulwaarden zoals 10px nuttig worden:

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}
Er worden twee voorbeelden getoond. De eerste toont een element met opvulling: 10px en half-leading. De tweede toont hetzelfde element met tekstvak: trim-beide hoofdletters alfabetisch. Het resultaat is dat de tweede knop optisch gecentreerd is.
https://codepen.io/web-dot-dev/pen/NPKMbgq

Hier zijn een paar <button> -elementen die laten zien hoe het bijsnijden van de ruimte met text-box padding: 10px ziet er aan alle kanten gelijk uit in een praktisch interactief element. Merk op hoe het alternatieve lettertype een heel andere halve voorloopspatie kan produceren.

Er worden drie groepen knoppen weergegeven. De eerste groep toont een normaal schreefloos lettertype. De tweede groep toont een mooi of leuk lettertype. De derde groep laat hetzelfde effect zien, maar dan met een handschriftlettertype. Het punt is om te laten zien dat elk lettertype een andere halve voorloopspatie heeft, maar dat de trimwaarden hetzelfde zijn en de spatie kunnen normaliseren.
https://codepen.io/web-dot-dev/pen/mybLOMg

Hier zijn <span> -elementen, die vaak worden gebruikt om categorieën of badges weer te geven. Nog een moment waarop opvulling met gelijke zijden de beste oplossing zou moeten zijn, maar tot text-box moesten we er omheen werken.

Tags worden naast elkaar weergegeven. De eerste groep heeft een halve voorsprong, de tweede heeft een kleine voorsprong. Het resultaat is dat de tweede groep dichter bij elkaar zit en optisch gecentreerd is.
https://codepen.io/web-dot-dev/pen/mybLOMg

Gemakkelijkere uitlijning

De extra, oncontroleerbare, half leidende ruimte boven ( over ) en onder ( under ) een tekstvak maakt het uitlijnen ook lastig. De volgende voorbeelden laten zien wanneer halve regelafstand de uitlijning moeilijk kan maken en hoe het bijsnijden van de blokzijden van een tekstvak voor een betere uitlijning kan zorgen.

Hier wordt een afbeelding naast de tekst geplaatst. De afbeelding groeit uit tot de hoogte die de tekst nodig heeft, maar zonder text-box is de afbeelding altijd iets groter. Met text-box kan de afbeelding perfect worden uitgelijnd met de tekstinhoud.

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

Merk op dat de witruimte zich boven de eerste opgemaakte tekstregel en onder de laatste opgemaakte tekstregel bevindt in scenario's met regelterugloop.

In het volgende voorbeeld ziet u hoe de functie zich logisch aanpast aan een verandering in writing-mode . Probeer de tekst te veranderen en kijk hoe de lay-out uitgelijnd blijft.

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

Ga door met studeren

Meer weten? De volgende lijst met links biedt verschillende hoeveelheden aanvullende informatie en gebruiksscenario's.