CSS text-box-trim and text-box-edge for cap and both-side trim, leading control, icon plus text alignment on static marketing HTML, Safari WebKit QA, accessibility, and cloud Mac mini rehearsal

마케팅 랜딩은 큰 디스플레이 타이포와 촘촘한 아이브로(eyebrow)를 함께 쓰는 경우가 많고, 디자이너는 cap 위·베이스라인 아래의 "보이지 않는" 여백과 계속 싸웁니다. 그 원인은 Figma가 아니라 폰트 메트릭입니다. 2026년, text-box-trim과 text-box-edge는 정적 HTML 작성자에게, 줄 상자를 타이포그래피 가장자리에 맞춰 제목, 알약 라벨, 아이콘 행을 취약한 음수 마진 없이 쌓을 수 있는 표준을 제공합니다. 본문은 cap과 양쪽 잘라내기, flex·그리드로 아이콘+텍스트, @supports로 단계적 도입, Safari/WebKit과 Chromium의 엣지 차이, 잘린 줄 상자에 대한 접근성 검수를 다룹니다. 제목용 text-wrap: balance·pretty와 정적 마케 HTML의 CSS subgrid를 병행하면, 여분 행간이 잘렸을 때에도 줄바꿈과 트랙 정렬이 흐트러지지 않습니다.

서브픽셀 기선은 Linux CI 캡처로 추측하는 것보다, 실제 Apple GPU에서 고치는 것이 사실에 가깝습니다. MacHTML 클라우드 Mac mini 약 일 16.9 US$는, 아래 주간 Safari 사인오프에 쓰는 예산 기준가로 삼습니다.

줄상자·메트릭: 트리밍의 배경

고전 CSS 줄은 글리프를 직사각형에 넣는데, 블록 치수에 작가가 큰 대문·깊은 콤마를 위한 아센더/디센더 여유가 담깁니다. H 대문의 윗선이 히어로 영상에 맞닿기를 바라도, cap보다 큰 박스 때문에 브라우저는 cap 위에 공간을 더 씁니다. 그래서 line-height: 0.9, margin-top 음수, 변형 훅이 늘고 포커스 점선이 꼬입니다. 트리밍은 계약이 분명해집니다. 레이아웃 상호작용에 어떤 곡선/기준선을 쓰는지를 선언하고, 다른 글리프를 위해 남겨둔 여백을 걷어갑니다.

정적 퍼블리싱(일레븐티, 휴고, 수기 템플릿)엔 런타임 토큰이 거의 없고, 긴 캐시 URL 뒤의 평이한 CSS만이 전부입니다. 따라서 미지원 엔진에서의 퇴화를 먼저 정하고, JS feature flag에 의지하지 않습니다. 트리밍이 문자를 바꾸는 일이 아니라 박지 기하를 바꾸는 점이면, 스크린리더, PDF, 미래 엔진과도 덜 싸웁니다.

다국어 스택: 라틴 페이지에 일본/가격 콜아웃. 한 글 line-height로 한자+라틴 cap을 둘 다 풀기는 어렵고, text-box-edge: ideographic + 트리밍이 기준을 고정해도, 본문 1.6 느낌은 그대로 둘 수 있습니다.

text-box-trim: cap, trim-both, 한쪽만

text-box-trim은 줄 박스의 어느 쪽을, 선택한 타이포 박스 쪽으로 깎을지를 고릅니다. 히어로는 위만 이미지와 맞으면 cap, 알약 안 쌓인 라벨은 trim-both로 수직 여백 산을 대칭으로. 이전 요소가 위만 처리했다면, 시작/끝 한쪽만 깎는 변형이 유효(구분선이 cap에 닿는데, 아랫쪽을 이중으로 깎는 일 방지). 아래는 예시이며 값은 엔진 호환에 맞게 맞춥니다.

.hero-kicker {
  text-box-trim: cap;
  text-box-edge: cap alphabetic;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

인터랙션 요소에 쓰면, 포커스 링은 border 박스 밖으로 퍼집니다. 텍스트만 깎는다고 포커스 패딩 요구가 사라지지는 않으니, 잘린 글리프 박스 외곽과 링의 바깥선에 최소 3px 거리, WCAG2.2 포커스 시각(맥OS 기본)에 맞게 유지합니다. 부모 카드에 overflow:clip이 있을 때, 혼합 스크립트·디센더가 둥근 모서리 클리핑에 걸릴 수 있으니, 베트남/폴란드 겸용 문자열도 반드시 케이스에 넣고, 과한 트리밍-클리핑 조합은 QA 체크리스트에 박제합니다.

text-box-edge: cap alphabetic, text, ideographic

text-box-edge는 기준을 이름 붙인 것입니다. 라틴 H1·키커엔 cap alphabetic — 대문 cap과 알파벳 베이스, 아이콘 글꼴과도 맞는 경우가 많고, text em 박스는 all caps + 문장 혼용 시 덜 촘촘. 아래 @supports 예.

@supports (text-box-trim: both) {
  .price-row {
    text-box-trim: both;
    text-box-edge: cap alphabetic;
  }
}

일어 부제, 브랜드가 캡에 맞닿는 "사각" 정렬이면 ideographic 축이 후보, 가변 폰트는 웨이트에 따라 ideographic edge가 흐를 수 있어, 전/후 캡처. 한글 번들(웹폰트 subset)에도, 레귤러/볼드의 글꼴 높이 갭에 동일한 규율이 이득.

아이콘+라벨: 마법 숫자 NO

시스템이 내보내는 24px 정사각 뷰박스, 광학 중심은 라틴 cap이 아닙니다. translateY(-2px) 상시보다, 라벨에 트림·inline-flex; align-items:center로, 줄 높이는 잘린 줄 박스를 쫓고, 풀 아센더를 쫓지 않습니다. 아래 nav 예.

.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.nav-pill .label {
  text-box-trim: cap;
  text-box-edge: cap alphabetic;
}

여러 줄 본문 옆 아이콘: 한 줄 제목만 트림(줄마다 자르면 위쪽 들쭉날쭉), 첫 줄에만 span 본문 1.6.

정적·번들

한 파일 components/typography.css에 .type-display 등, 외부 협력사 문서: 어떤 쌍이 트림이 필수. 지문 파일명+변경로그(메트릭 변=시각 회귀). PR 서식에 "Safari 100%/125% OS 스케일 재캡처" 한 줄.

@supports

없는 경우: line-height+상하 padding-block. Firefox ESR+구 사파리. 아래.

.hero-kicker {
  line-height: 1.05;
  padding-top: 2px;
}
@supports (text-box-trim: cap) {
  .hero-kicker {
    line-height: 1;
    padding-top: 0;
    text-box-trim: cap;
    text-box-edge: cap alphabetic;
  }
}

같은 요소·부모 flex 사이 모순 트림 금지(비익명 인라인), 이상한 행고는 ::first-line.

Safari / WebKit

macOS 갱신 창·STP 스냅샷, 가변축: 프레임마다 재산출 400→700 가중이면, 인접 마스크 밀릴 수 있으니, 전환 끄거나 font-variation-settings 냉동. Apple 실리콘+외장 모니터 비정수율, 비트맵-타이트 타이밍, 진단엔(본 배포X) --disable-font-subpixel-positioning 스냅.

a11y

도형만 바꿈(문자열=동일) 확대 사용자: 여밉 예보. 본문 통째 트림·인터랙션 최소 14px. prefers-reduced-motion: reduce, 220ms 이내 마이크로, 서서한 지연 최소.

요소

요소	권장	이유
대문 키커	cap + cap alphabetic	히어로-미디어, 상부 여밉 제한
가격(숫자+통화)	trim-both 신중	자릿, 알약 내부
본문 다줄	없음(일반이득)	불편하지 않는 행간
아이콘행 라벨	cap	translateY없이 cap

체크(번호)

1. 3단제목·트림 클래스, 금지 margin 목록.
2. 최다 번역+100/125% 스케일 Safari.
3. 잘려도 포커스 전체 가시.
4. Firefox, @sup on/off.
5. 1열 믹스(라틴+한글/일) 베이스.
6. Lighthouse·CLS(폰트스왑) 재측.
7. 픽셀딥·커밋SHA.
8. 주간 팀 공용 Mac 세션(원격)

질의

line-height는?

승계 아님. 켜면 배수, 키커 1·본문 1.6+ 가장 흔.

PDF?

엔진에 따라, Safari 인쇄→PDF로 법·면책 확인.

그라드 버튼

가능, 세로 광학 가운데·대비 재확인.

핵심 키워드보다, 실기 Safari+실서비스 폰트+스케일 반복. MacHTML Mac mini (약 일 16.9 US$) — 픽셀, 아이콘, 주간리그, 일상 노트북 뺏지 않는 공용대.