Text Box

The text-box utility uses the CSS text-box-trim property to remove extra vertical space (half-leading) above and below text. This results in more precise vertical centering and tighter alignment when text sits next to icons or other non-text elements.

Browser support

Text-box trim is not yet supported in Firefox. The feature degrades gracefully — text will simply have its normal line-height spacing.

How it works

Every line of text includes half-leading — extra space above and below the glyphs, derived from the difference between the font size and the line height. This space is normally invisible, but it causes subtle misalignment when you try to center text vertically next to an icon, or when you want padding to hug the text tightly.

The .tng-text-box utility applies:

text-box: trim-both cap alphabetic;

• trim-both — removes half-leading from both the top and the bottom of the text block.
• cap — trims to the cap height (top of uppercase letters) on the block-start side.
• alphabetic — trims to the alphabetic baseline on the block-end side.

The result: padding and alignment calculations reference the actual ink bounds of the text, not the line box.

Side by side

<div class="border-sm border-subtle pb-xs pi-sm">
  <div class="tng-group">
    <i class="tng-icon icon-download" aria-hidden="true"></i>
    <span>Default</span>
  </div>
</div>
<div class="border-sm border-subtle p-sm">
  <div class="tng-group">
    <i class="tng-icon icon-download" aria-hidden="true"></i>
    <span class="tng-text-box">With Text Box</span>
  </div>
</div>

Default

With Text Box

Note

When text-box trim is applied, you can use uniform padding (e.g. .p-sm) on the container and get visually equal spacing on all four sides. Without the trim, you’d need smaller block padding to compensate for the half-leading.

Components with built-in text-box trim

Many components apply text-box trim automatically when text is wrapped in a <span>. You get better vertical centering for free just by following the documented markup patterns.

Component	Applied to
.tng-accordion-trigger	<span> children
.tng-badge	<span> children
.tng-button	<span> children
.tng-checkbox-control	<span> children
.tng-control-button	Entire element
.tng-energy-label	Entire element
.tng-link	<span> children
.tng-pill-button	<span> children
.tng-radio-control	<span> children
.tng-tag	<span> children

<button class="tng-button is-primary">
  <i class="tng-icon icon-download" aria-hidden="true"></i>
  <span>Download</span>
</button>

Caution

The <span> wrapper is intentional — it gives the browser a single inline box to apply the trim to. If you put text directly inside the component without a <span>, the trim won’t apply.

When to use .tng-text-box manually

• Custom layouts — when you build a custom component that places text next to icons and need pixel-precise alignment.
• Cards or tiles — when uniform padding should hug the text content tightly.
• Anywhere the built-in trim doesn’t apply — elements that aren’t in the auto-trim list above.

Best practices

• Always wrap text in a <span> inside components that auto-trim. Bare text nodes won’t be trimmed.
• Don’t apply to multi-line blocks — text-box-trim trims only the first and last lines. For single lines of text (buttons, badges, links) this is exactly what you want. For paragraphs, it’s usually not needed.
• Test with and without the trim — since Firefox doesn’t support it yet, verify that your layout still looks acceptable when the trim has no effect.