CSS text-box-trim 속성 개요
Chrome 133 버전부터 개발자와 디자이너는 'text-box' 기능을 통해 텍스트 위아래 공간을 세밀하게 조정할 수 있게 되었습니다.
브라우저 지원
- Chrome 133 버전부터 지원
세부 속성
-
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> 같은 HTML 요소에서 글자 위아래의 공간을 조정할 수 있습니다. 폰트는 각기 다른 양의 블록 방향 공간을 생성하여 요소의 크기에 영향을 줍니다. 이 공간은 기존에 제어할 수 없었으나 이제는 가능합니다.
'half-leading'과의 관계
폰트 위아래의 공간은 웹에서 텍스트를 배치하는 방식인 'half-leading'로 인해 생성됩니다. 과거에는 금속 판을 사용해 줄간격을 조정하였고, 웹에서는 이 공간을 반으로 나누어 텍스트 위아래에 배분합니다. 이 역사는 'text-box' 속성을 통해 컨트롤할 수 있게 된 공간의 이름을 부여하게 했습니다.
관련 예술과 이전 사례
'Ethan Wang'의 "Leading-Trim: The Future Of Digital Typesetting" 포스트에서도 처음으로 소개된 'leading-trim'을 상기할 수 있습니다. 'Figma'의 'vertical trim' 기능도 유사한 컨트롤을 제공합니다. 이 작은 변화가 큰 차이를 만들어낼 수 있습니다.
주요 기능 및 문법 개요
text-box를 사용한 일반적인 예는 다음과 같습니다:
h1 {
/* 대문자에 trim 적용 */
text-box: trim-both cap alphabetic;
/* 소문자 'x'에 trim 적용 */
text-box: trim-both ex alphabetic;
}
대문자 알파벳에 양쪽 트림을 적용하는 것이 가장 흔한 사용 방식입니다. 'ex alphabetic'은 독특한 방식으로 시각적인 균형에 유용합니다.
실험 플레이그라운드
다음 데모를 통해 문법을 탐색하고 드롭다운 메뉴로 결과를 확인해 볼 수 있습니다. 폰트 변경, trim 값 조정 등을 통해 결과를 시각적으로 확인할 수 있습니다.
텍스트 박스 위아래의 제어 불가한 여분 공간은 정렬을 어렵게 만듭니다. 다음 예제에서는 'half leading'이 정렬을 어렵게 만들 수 있는 상황과 텍스트 박스의 양쪽을 트림하여 더 나은 정렬 결과를 얻는 방법을 보여줍니다.
맺음말
'text-box' 속성의 사용법과 추가 정보는 다양한 링크를 통해 알아볼 수 있습니다. 이는 디지털 타이포그래피의 미래를 여는 중요한 첫걸음이 될 수 있습니다.
출처 : 원문 보러가기
