CSS text-box-trim

Adam Argyle

게시일: 2025년 1월 14일

Chrome 133부터 개발자와 디자이너는 text-box를 사용하여 텍스트 위아래의 공간을 맞춤설정할 수 있습니다.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: behind a flag.
  • Safari: 18.2.

Source

Longhand:

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

Shorthand:

text-box: trim-both cap alphabetic;

이 속성을 사용하면 텍스트 위아래의 공간(예: <h1>, <button>, <p>)을 제어할 수 있습니다. 모든 글꼴은 요소의 크기에 영향을 미치는 이 블록 방향 공간을 서로 다른 양으로 생성합니다. 이 혼란스러운 공간 기여는 쉽게 측정할 수 없으며 지금까지 제어할 수 없었습니다.

글꼴이 알고 있으므로 이제 CSS도 알 수 있습니다.

CodePen에서 사용해 보기

글꼴 위아래의 공간은 웹에서 'half-leading'이라는 텍스트를 배치하는 방식 때문에 존재합니다. 이는 Matthias Ott의 CSS의 Leading에 관한 게시물에서 전문적으로 다루고 있습니다. 기본적으로 수동으로 조판할 때 금속 납 조각을 사용하여 텍스트 줄을 구분했습니다. 웹은 leading에서 영감을 받아 납을 두 조각으로 나누고 한 조각은 콘텐츠 위에, 다른 조각은 콘텐츠 아래에 배포합니다.

제목은 텍스트 위아래에 핫핑크색 막대가 표시되어 half-leading을 보여줍니다. 소스

이 기록은 text-box가 각 절반에 over 및 under라는 이름을 지정하기 때문에 의미가 있습니다. 또한 잘라낼 수 있습니다.

text-box의 선행 기술도 있습니다. Ethan Wang의 Leading-Trim: The Future Of Digital Typesetting이라는 흥미로운 게시물에서 leading-trim (이전에는 text-box라는 이름이었습니다)이 처음 도입되었습니다.

위아래에 과도한 공백이 있는 광고 제목은 가위로 잘라낸 후 삭제한 것처럼 보입니다.

텍스트 트리밍의 진입점은 Figma와 디자이너를 위한 "세로 트리밍" 컨트롤일 수 있습니다. 이 X 게시물은 이 세로 트리밍 옵션이 어디에 있는지 버튼에 어떻게 도움이 되는지 보여줍니다.

소스

여기까지 어떻게 왔든 이 작은 소리 유형 컨트롤은 큰 차이를 만들 수 있습니다.

기능 및 구문

다음은 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;
}

둘 다 cap alphabetic으로 트리밍하는 것이 이 기능의 가장 일반적인 용도입니다. 다음 데모에서는 이 기능을 여러 번 사용합니다. 하지만 이전 예에서는 ex alphabetic도 보여줍니다. 이는 고유한 방식으로 광학 균형에 유용하기 때문입니다.

탐색기 놀이터

놀이터에서 구문을 살펴보고 드롭다운 메뉴를 사용하여 결과를 확인하세요. 글꼴을 변경하고, over 및 under 트리밍 값을 변경하고, 색상 코딩된 시각적 요소와 라벨을 따라갈 수 있습니다.

text-box: trim-both cap alphabetic 구문이 강조표시되고 표시된 구문 미리보기입니다. 트리밍 값을 선택할 수 있는 드롭다운이 3개 더 있습니다.

시도해 볼 사항:

  1. 단일 줄 및 여러 줄 텍스트 변형에서 text-box-trim이 작동하는 방식을 시각적으로 검사합니다.
  2. 변형 위로 마우스를 가져가면 해당 효과를 얻는 데 사용된 트리밍 값이 표시됩니다.
  3. 글꼴을 변경합니다.
  4. 텍스트 상자의 한쪽만 트리밍합니다.
  5. 재생하면서 구문을 검토합니다.
CodePen에서 사용해 보기

무엇을 빌드할 수 있으며 어떤 문제를 해결할 수 있나요?

이 트리밍 기능에서 훨씬 더 간단한 가운데 맞춤 및 정렬 솔루션이 제공됩니다. 콘텐츠 사이에 gap과 같은 항목을 사용할 수 있는 적절한 leading에 더 가까워질 수도 있습니다.

두 콘텐츠 그룹 간의 비교입니다.
첫 번째 그룹에는 half-leading이 있고 두 번째 그룹에는 트리밍된 leading이 있습니다. 결과 는 두 번째 그룹이 더 촘촘하게 배치된다는 것입니다. CodePen에서 사용해 보기

더 쉬운 가운데 맞춤

더 작고 인라인이며 콘텐츠 고유 구성요소의 경우 padding: 10px은 모든 면에서 간격을 동일하게 지정하는 요소에 지정할 수 있는 합리적인 스타일입니다. 하지만 결과는 위아래에 추가 공간이 있는 경우가 많으므로 혼동을 줄 수 있습니다.

이 문제를 해결하기 위해 개발자는 half-leading의 효과를 상쇄하기 위해 위아래 (블록)에 패딩을 더 적게 명시적으로 배치하는 경우가 많습니다.

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

이 시점에서 광학적으로 가운데 맞춤될 때까지 값 조합을 시도해야 합니다. 이것은 한 화면과 운영체제에서는 보기 좋지만 다른 화면과 운영체제에서는 보기 좋지 않을 수 있습니다.

text-box 를 사용하면 텍스트에서 half-leading 공간을 트리밍하여 10px과 같은 동일한 패딩 값을 유용하게 사용할 수 있습니다.

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}
두 가지 예가 표시됩니다.
첫 번째는 padding: 10px 및 half-leading이 있는 요소를 보여줍니다. 두 번째 는 text-box: trim-both cap alphabetic이 있는 동일한 요소를 보여줍니다. 결과는 두 번째 버튼이 광학적으로 가운데 맞춤된다는 것입니다. CodePen에서 사용해 보기

다음은 <button> 요소입니다. 이 요소는 text-box로 공간을 트리밍하면 실용적인 상호작용 요소에서 padding: 10px이 모든 면에서 동일하게 보이는 방법을 보여줍니다. 대체 글꼴이 매우 다른 half-leading 공간을 생성할 수 있는 방법을 확인하세요.

버튼 그룹 3개 첫 번째는 일반 산세리프 글꼴을 사용하고, 두 번째는 화려하거나 재미있는 글꼴을 사용하고, 세 번째는 손글씨 글꼴로 동일한 효과를 사용합니다.
각 글꼴에는 서로 다른 half-leading 공간이 있지만 트리밍 값은 동일하며 공간을 정규화할 수 있습니다. CodePen에서 사용해 보기

다음은 카테고리 또는 배지를 표시하는 데 자주 사용되는 <span> 요소입니다. 동일한 양면 패딩이 최상의 솔루션이어야 하지만 text-box가 나올 때까지는 해결해야 했습니다.

태그가 나란히 비교되어 표시됩니다. 첫 번째 그룹에는 절반 리딩이 있고 두 번째 그룹에는 잘린 리딩이 있습니다.
두 번째 태그 그룹은 트리밍된 leading 덕분에 더 촘촘하고 광학적으로 가운데 맞춤됩니다.

더 쉬운 정렬

텍스트 상자 위 (over)와 아래 (under)의 추가적이고 제어할 수 없는 half-leading 공간으로 인해 정렬도 어려워집니다. 다음 예에서는 half-leading으로 인해 정렬이 어려워질 수 있는 경우와 텍스트 상자의 블록 측면을 트리밍하여 더 나은 정렬을 만드는 방법을 보여줍니다.

여기서는 이미지가 텍스트 옆에 배치됩니다. 이미지는 텍스트에 필요한 높이로 커집니다. text-box가 없으면 이미지가 항상 약간 더 높습니다. text-box를 사용하면 이미지를 텍스트 콘텐츠와 완벽하게 정렬할 수 있습니다.

CodePen에서 사용해 보기

줄바꿈이 있는 시나리오에서는 공백이 텍스트의 첫 번째 서식 지정 줄 위에 있고 텍스트의 마지막 서식 지정 줄 아래에 있습니다.

다음 예에서는 이 기능이 논리적으로 어떻게 적응하는지 보여줍니다. writing-mode 텍스트를 변경해 보고 레이아웃이 계속 정렬되는지 확인해 보세요.

CodePen에서 사용해 보기

계속 학습하기

자세한 내용이 궁금하신가요? 다음 링크 목록은 다양한 양의 추가 정보와 사용 사례를 제공합니다.