CSS-tekstvak-trim

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

  • Chrome: 133.
  • Rand: 133.
  • Firefox: achter een vlag.
  • Safari: 18.2.

Source

Uitgeschreven:

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

Afkorting:

text-box: trim-both cap alphabetic;

Met deze eigenschap kunt u de ruimte boven en onder tekst regelen, bijvoorbeeld voor <h1> , <button> en <p> . Elk lettertype produceert een andere hoeveelheid van deze blokgerichte ruimte, die 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 wist het al, en nu weet CSS het ook.

Probeer het op CodePen.

De ruimte boven en onder een lettertype ontstaat door de manier waarop webtekst wordt opgemaakt, ook wel "half-leading" genoemd. Dit wordt uitstekend uitgelegd in een artikel van Matthias Ott getiteld "The Thing With Leading In CSS" . Kort gezegd, toen er nog met de hand werd gezet, werden stukjes lood gebruikt om tekstregels van elkaar te scheiden. Het web, geïnspireerd door leading, splitst het lood in twee stukken en plaatst een stuk boven en een stuk onder de tekst.

Een koptekst wordt weergegeven met een felroze balk boven en onder de tekst om half-leading aan te geven. Bron

Deze geschiedenis is zinvol omdat text-box ons ​​namen geeft voor elk deel: boven en onder. Bovendien kunnen we het inkorten.

Er bestaat ook al eerder zoiets als text-box . Je herinnert je misschien nog het interessante artikel van Ethan Wang, getiteld 'Leading-Trim: The Future Of Digital Typesetting' , waarin leading-trim (de naam die text-box voorheen had) voor het eerst werd geïntroduceerd.

Een koptekst met overtollige ruimte erboven en eronder lijkt met een schaar te zijn afgeknipt en verwijderd.

Je eerste kennismaking met het inkorten van tekst kan via Figma zijn, met name via de "verticale trim"-functie voor ontwerpers. In dit artikel wordt uitgelegd waar deze verticale trim-optie te vinden is en hoe deze handig kan zijn voor knoppen.

Bron

Hoe je hier ook terecht bent gekomen, deze ogenschijnlijk kleine typografische instelling kan een groot verschil maken.

Functie en syntaxis

Dit zijn naar mijn mening de twee meest voorkomende one-liners die je nodig hebt bij het werken met 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;
}

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

Ontdekkingsspeeltuin

Verken de syntaxis in onze oefenomgeving en bekijk de resultaten met behulp van de下拉菜单 (dropdownmenu's). Je kunt lettertypen wijzigen, de trimwaarden aanpassen en de kleurgecodeerde visualisaties en labels volgen.

De syntaxpreview met tekstvak: trim-both, alfabetische syntax met hoofdletters wordt gemarkeerd en weergegeven. Er zijn nog 3 vervolgkeuzemenu's om trimwaarden te kiezen.

Dingen om te proberen:

  1. Visueel inspecteren hoe text-box-trim werkt voor zowel tekst met één regel als tekst met meerdere regels.
  2. Als je met de muis over een variant beweegt, zie je de trimwaarden die gebruikt zijn om dat effect te bereiken.
  3. Het lettertype wijzigen.
  4. Het bijsnijden van slechts één zijde van een tekstvak.
  5. Neem de syntaxis door terwijl je speelt.
Probeer het op CodePen.

Wat kan ik bouwen en welke problemen lost het op?

Er zijn een aantal veel eenvoudigere oplossingen voor centreren en uitlijnen die voortkomen uit deze trimmogelijkheid. Je kunt zelfs een betere regelafstand bereiken, waarbij bijvoorbeeld een gap tussen de inhoud kan worden gebruikt.

Een vergelijking tussen 2 groepen inhoud.
De eerste groep heeft een halve regelafstand, de tweede een afgesneden regelafstand. Het resultaat is dat de tweede groep dichter bij elkaar staat. Probeer het eens op CodePen.

Gemakkelijker centreren

Voor kleinere, meer inline en inhoudelijke componenten is padding: 10px een redelijke stijl om te gebruiken voor een element dat aan alle kanten gelijke afstand heeft. Het resultaat kan echter verwarrend zijn, omdat er vaak extra ruimte aan de boven- en onderkant overblijft.

Om dit probleem te omzeilen, voegen ontwikkelaars vaak expliciet minder opvulling (padding) toe aan de boven- en onderkant (blok) om het effect van een halve regelafstand te compenseren.

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

Nu rest ons niets anders dan verschillende waardecombinaties uit te proberen totdat alles optisch gecentreerd is. Dit kan er op het ene scherm en besturingssysteem goed uitzien, maar niet op het andere.

text-box kunnen we de halve regelafstand van de tekst verwijderen, waardoor gelijke opvulwaarden zoals 10px nuttig kunnen zijn:

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}
Er worden twee voorbeelden getoond.
Het eerste voorbeeld toont een element met padding: 10px en half-leading. Het tweede voorbeeld toont hetzelfde element met text-box: trim-both cap alphabetic. Het resultaat is dat de tweede knop optisch gecentreerd is. Probeer het eens op CodePen.

Hier zijn een paar <button> -elementen die laten zien hoe het bijsnijden van de ruimte met text-box ervoor zorgt dat padding: 10px er aan alle kanten gelijk uitziet in een praktisch interactief element. Let op hoe het alternatieve lettertype een enorm verschil in de regelafstand kan opleveren.

Drie groepen knoppen. De eerste gebruikt een standaard schreefloos lettertype, de tweede een sierlijk of speels lettertype en de derde gebruikt hetzelfde effect met een handgeschreven lettertype.
Elk lettertype heeft een andere halve regelafstand, maar de trimwaarden zijn hetzelfde en kunnen de afstand normaliseren. Probeer het eens op CodePen.

Hier zijn <span> -elementen, die vaak worden gebruikt om categorieën of badges weer te geven. Ook hier zou gelijke opvulling aan beide zijden de beste oplossing zijn, maar tot text-box moesten we het hier omheen werken.

De labels worden naast elkaar weergegeven. De eerste groep heeft half-leading, de tweede heeft trimmed leading.
De tweede groep tags zit strakker en is optisch gecentreerd, dankzij het bijsnijden van de voorlooprand.

Eenvoudigere uitlijning

De extra, oncontroleerbare regelafstand van een halve letter boven ( over ) en onder ( under ) een tekstvak maakt uitlijnen lastig. De volgende voorbeelden laten zien wanneer een regelafstand van een halve letterafstand uitlijnen kan bemoeilijken en hoe het bijsnijden van de zijkanten van een tekstvak een betere uitlijning kan opleveren.

Hier wordt een afbeelding naast tekst geplaatst. De afbeelding groeit mee met de hoogte die de tekst nodig heeft. Zonder text-box is de afbeelding altijd iets hoger. Met text-box kan de afbeelding perfect uitgelijnd worden met de tekst.

Probeer het op CodePen.

Let op: in gevallen met regelterugloop bevindt de witruimte zich boven de eerste opgemaakte tekstregel en onder de laatste opgemaakte tekstregel.

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

Probeer het op CodePen.

Ga verder met studeren

Wil je meer weten? De volgende lijst met links biedt diverse aanvullende informatie en toepassingsvoorbeelden.