GT America
Button
Loading fonts
Introduction
text-box: trim-both cap alphabetic makes padding the distance you see, from the box edge to the cap and the baseline. It has corner cases, and most of them are in interactive components. There the rule has to be turned off, and normalize-metrics makes turning it off safe.
style.css
1* {
2 text-box: trim-both cap alphabetic;
3}
4
5:where(input, select) {
6 text-box: none;
7}
Where trim is on
Buttons, text, cards, and textareas take the trim. The padding becomes the distance from the box edge to the cap and the baseline. The numbers are measured in your browser, in GT America.
GT America
Badge
Loading fonts
GT America
Tab
Loading fonts
GT America
Chip
Loading fonts
GT America
Button with icon
Loading fonts
GT America
Card
Loading fonts
GT America
Tile
Loading fonts
GT America
Paragraph
Loading fonts
GT America
Truncated text
Loading fonts
GT America
Clamped text
Loading fonts
GT America
Stat
Loading fonts
GT America
Tag
Loading fonts
GT America
Textarea
Loading fonts
When there is no capital
A label with no capital has nothing at the cap line, so trim on the cap leaves the letters below the token. The skill trims those labels to the x-height with text-box: trim-both ex alphabetic. CSS cannot see whether a string has a capital, so this goes on the component that is lowercase by design, not on every element.
GT America
Lowercase label
Loading fonts
Where trim is off
Text inputs of every type, selects, and date and time pickers draw their own text, and trim does not reach it. Chrome still clips an input to the trimmed line. Here the rule is off and the font’s own metrics come back: GT America sits low in the box. With the skill applied, the copy fixed by normalize-metrics centers the word.
GT America
Input
Loading fonts
GT America
Placeholder
Loading fonts
GT America
Search
Loading fonts
GT America
Number
Loading fonts
What an agent writes
The same tasks, given to an agent with and without the skill. The CSS is what it wrote, unedited.
Padding tokens
A new button, badge, card, and tile in Arial 16px. Padding 12, 4, and 24px; 16px under the card heading; 8px between the tile lines.
Tokens went straight into padding. The button measures 14.5px above the cap and 16px below the baseline.
style.css
1body {
2 font-family: Arial, sans-serif;
3 font-size: 16px;
4 line-height: normal;
5}
6
7.button {
8 padding: 12px;
9}
10
11.badge {
12 padding: 4px;
13}
14
15.card {
16 padding: 24px;
17}
18
19.card h2 {
20 margin: 0 0 16px;
21}
22
23.card p {
24 margin: 0;
25}
26
27.tile {
28 display: flex;
29 flex-direction: column;
30 gap: 8px;
31}
32
33.tile .title,
34.tile .subtitle,
35.tile .meta {
36 margin: 0;
37}
An input that sits low
A new input in a brand font. The word sits low in the box; center it. Padding 12px.
Guessed ascent-override 75% and descent-override 25%, then said it may need a nudge after a visual check.
style.css
1@font-face {
2 font-family: Brand;
3 src: url("fonts/Brand.woff2") format("woff2");
4 font-display: swap;
5 /* Text sat low: shrink ascent so the baseline rises; keep descent for g/y/p. */
6 ascent-override: 75%;
7 descent-override: 25%;
8 line-gap-override: 0%;
9}
10
11body {
12 font-family: Brand, sans-serif;
13}
14
15input {
16 font-family: inherit;
17 padding: 12px;
18 line-height: normal;
19 box-sizing: border-box;
20}
Button with an icon
A Save button with a 1em icon centered on the cap-height. Padding 12px.
inline-flex and align-items: center. The icon centers on the line box, not on the cap, and the padding counts the leading.
style.css
1button {
2 font-family: Arial, sans-serif;
3 font-size: 16px;
4 padding: 12px;
5 display: inline-flex;
6 align-items: center;
7 gap: 8px;
8}
9
10button .icon {
11 display: inline-block;
12 width: 1em;
13 height: 1em;
14 background: currentColor;
15 flex-shrink: 0;
16}
Install
For any agent that reads skills:
npx skills add gerguno/skill-text-box-trim
Or clone it into Claude Code:
git clone https://github.com/gerguno/skill-text-box-trim ~/.claude/skills/text-box-trim
Or into Cursor:
git clone https://github.com/gerguno/skill-text-box-trim ~/.cursor/skills/text-box-trim