CSS text-box-trim

텍스트 콘텐츠 위와 아래의 여백을 줄여 시각적 균형을 맞춥니다.

Adam Argyle

게시일: 2025년 1월 14일

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

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: 18.2.

장문:

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

문구:

text-box: trim-both cap alphabetic;

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

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

https://codepen.io/web-dot-dev/pen/xbKjRxL

글꼴 위와 아래의 공간은 웹에서 텍스트를 배치하는 방식인 'half-leading'(반행간) 때문입니다. 이 내용은 Matthias Ott의 CSS의 Leading 관련 문제라는 게시물에서 전문적으로 다룹니다. 기본적으로, 활판 인쇄가 수작업으로 이루어졌을 때는 금속 납 조각을 사용하여 텍스트 줄을 구분했습니다. 웹은 여백에서 영감을 받아 여백을 반으로 나누고 콘텐츠 위와 아래에 여백을 배치합니다.

텍스트 위아래에 핫핑크 막대가 표시되어 반leading을 나타내는 헤드라인이 표시됩니다.
소스

이 기록은 의미가 있습니다. text-box는 각 절반의 이름(over 및 under)을 제공하기 때문입니다. 자르기 기능도 있습니다.

text-box에 대한 선행 기술도 있습니다. Ethan Wang의 흥미로운 게시물인 Leading-Trim: The Future Of Digital Typesetting(Leading-Trim: 디지털 서체의 미래)을 기억하시나요? 이 게시물에서 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도 보여줍니다. ex alphabetic는 고유한 방식으로 광학적 균형에 유용하기 때문입니다.

탐색기 놀이터

다음 데모에서는 구문을 살펴보고 드롭다운 메뉴를 사용하여 결과를 확인할 수 있습니다. 글꼴을 변경하고, 오버 및 언더 트림 값을 변경하고, 색상 코딩된 시각적 요소와 라벨을 따라갈 수 있습니다.

문법 탐색기 데모의 스크린샷 글꼴과 다른 글꼴을 선택할 수 있는 드롭다운을 표시합니다. 텍스트 상자가 있는 문법 미리보기: trim-both cap alphabetic 문법이 강조 표시되어 표시됨 마지막으로 자르기 값을 선택할 수 있는 드롭다운이 3개 더 있습니다.

시도해 볼 만한 작업:

  1. 단일 줄 및 여러 줄 텍스트 변형에서 text-box-trim가 작동하는 방식을 시각적으로 검사합니다.
  2. 대안 위로 마우스를 가져가면 해당 효과를 얻는 데 사용된 자르기 값이 표시됩니다.
  3. 글꼴 변경
  4. 텍스트 상자의 한 쪽만 자릅니다.
  5. 플레이하면서 문법을 검토합니다.
https://codepen.io/web-dot-dev/pen/RNbyooE

이를 사용하여 무엇을 빌드할 수 있나요? 또는 어떤 문제를 해결하나요?

이 자르기 기능에서 비롯된 훨씬 더 간단한 중앙 정렬 및 정렬 솔루션이 있습니다. 콘텐츠 사이에 gap와 같은 기호를 사용할 수 있는 적절한 여백을 적용할 수도 있습니다.

두 그룹의 콘텐츠를 비교한 내용이 표시됩니다. 첫 번째 그룹에는 앞부분이 반으로 잘린 글꼴이 사용되고 두 번째 그룹에는 앞부분이 잘린 글꼴이 사용되었습니다. 그 결과 두 번째 그룹이 더 밀집됩니다.
https://codepen.io/web-dot-dev/pen/RNbyoKE

간편한 가운데 정렬

더 작고 인라인이며 콘텐츠 고유 구성요소의 경우 padding: 10px는 모든 측면에 동일한 간격을 지정하기 위해 요소에 지정할 수 있는 적절한 스타일입니다. 하지만 상단과 하단에 여백이 많이 생겨 혼란을 줄 수 있습니다.

이 문제를 해결하기 위해 개발자는 절반의 들여쓰기 효과를 상쇄하기 위해 윗부분과 아랫부분 (블록)에 패딩을 더 적게 명시적으로 적용하는 경우가 많습니다.

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

이제 물체가 시각적으로 가운데에 위치할 때까지 값 조합을 시도해 보겠습니다. 한 화면과 운영체제에서는 잘 보이지만 다른 화면과 운영체제에서는 잘 보이지 않을 수 있습니다.

text-box를 사용하면 텍스트에서 선행 공백의 절반을 자르므로 10px과 같은 동일한 패딩 값을 유용하게 사용할 수 있습니다.

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}
두 가지 예가 표시됩니다. 첫 번째는 패딩 10px 및 절반의 leading이 있는 요소를 보여줍니다. 두 번째는 text-box: trim-both cap alphabetic을 사용한 동일한 요소를 보여줍니다. 결과적으로 두 번째 버튼이 광학적으로 가운데에 배치됩니다.
https://codepen.io/web-dot-dev/pen/NPKMbgq

다음은 text-box로 공간을 자르면 실용적인 양방향 요소에서 padding: 10px가 모든 측면에서 동일하게 표시되는 방식을 보여주는 몇 가지 <button> 요소입니다. 대체 글꼴을 사용하면 반행간격이 크게 달라질 수 있습니다.

버튼 그룹 3개가 표시됩니다. 첫 번째 그룹에는 일반 산세리프 글꼴이 표시됩니다. 두 번째 그룹은 멋지거나 재미있는 글꼴을 보여줍니다. 세 번째 그룹은 필기체 글꼴을 사용해 동일한 효과를 보여줍니다. 여기서 중요한 점은 각 글꼴에 다른 하프 레딩 공백이 있지만 자르기 값은 동일하여 공백을 정규화할 수 있다는 것입니다.
https://codepen.io/web-dot-dev/pen/mybLOMg

다음은 카테고리 또는 배지를 표시하는 데 자주 사용되는 <span> 요소입니다. 균등한 측면 패딩이 가장 좋은 해결책이어야 하는 또 다른 경우이지만 text-box까지는 이를 해결해야 했습니다.

태그가 나란히 비교되어 표시됩니다. 첫 번째 그룹에는 앞부분이 반으로 잘린 글꼴이 사용되고 두 번째 그룹에는 앞부분이 잘린 글꼴이 사용되었습니다. 그 결과 두 번째 그룹이 더 단단히 모이고 광학적으로 중앙에 배치됩니다.
https://codepen.io/web-dot-dev/pen/mybLOMg

더 쉬운 정렬

텍스트 상자 위 (over)와 아래 (under)에 추가로 발생하는 제어할 수 없는 절반의 여백도 정렬을 어렵게 만듭니다. 다음 예에서는 반 간격으로 인해 정렬이 어려워질 수 있는 경우와 텍스트 상자의 블록 측면을 자르면 더 나은 정렬을 만들 수 있는 방법을 보여줍니다.

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

https://codepen.io/web-dot-dev/pen/yyBjVpg

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

다음 예에서는 기능이 writing-mode의 변경사항에 논리적으로 적응하는 방식을 확인할 수 있습니다. 텍스트를 변경해 보고 레이아웃이 계속 정렬되는 방식을 확인합니다.

https://codepen.io/web-dot-dev/pen/dPbeOJQ

학습 계속하기

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