균형 있는 텍스트 블록의 줄바꿈을 직접 작성하는 고전적인 서체 기술이 CSS에 도입됩니다.
text-wrap의 balance 값은 CSS 텍스트 수준 4의 일부입니다. 이 게시물의 예를 살펴보고 이 CSS 한 줄로 텍스트 레이아웃을 크게 개선하는 방법을 알아보세요.
text-wrap: balance가 없으면 디자이너, 콘텐츠 편집자, 게시자는 라인의 균형 방식을 변경할 수 있는 도구가 거의 없습니다. 가장 좋은 옵션은 <wbr> 또는 ­을 사용하여 텍스트 레이아웃을 사용하여 줄과 단어를 나눌 위치에 관한 더 스마트한 결정을 내리는 것입니다.
개발자는 헤드라인이나 단락의 최종 크기, 글꼴 크기는 물론 언어조차 모릅니다. 텍스트 줄바꿈을 효과적이고 미적으로 처리하는 데 필요한 모든 변수는 브라우저에 있습니다. 따라서 다음 이미지와 같이 광고 제목 줄바꿈이 표시됩니다.
.unbalanced {
max-inline-size: 50ch;
}
CSS Text 4의 text-wrap: balance를 사용하면 텍스트에 가장 균형 잡힌 줄바꿈 솔루션을 찾도록 브라우저에 요청할 수 있습니다. 브라우저는 글꼴 크기, 언어, 할당된 영역과 같은 모든 요소를 알 수 있습니다.
현재 브라우저의 균형 잡힌 텍스트 줄바꿈 결과는 다음과 같습니다.
.balanced {
max-inline-size: 50ch;
text-wrap: balance;
}
디버그 정보를 오버레이하지 않고 그대로 나란히 두고 볼 수 있으면 도움이 됩니다.
텍스트 블록의 균형이 잘 맞는 텍스트 블록이 눈이 훨씬 더 즐거워집니다. 관심을 더 잘 사로잡고 전반적으로 읽기도 더 쉽습니다.
균형 찾기
제목은 독자가 가장 먼저 보게 되는 요소이며 시각적으로 매력적이고 쉽게 읽을 수 있어야 합니다. 이렇게 하면 사용자의 관심을 끌고 품질과 확신을 줄 수 있습니다. 좋은 서체는 독자에게 확신을 주고 계속 읽도록 유도합니다.
전통적으로 이 작업은 디자이너가 수학이 아닌 눈을 즐겁게 할 수 있도록 텍스트의 균형을 맞추는 것을 원하기 때문에 수작업으로 또는 광학적으로 수행되었습니다. 이 주제를 종종 메트릭 정렬과 광학 정렬이라고 합니다. New York Times와 같은 대규모 간행물의 경우 광고 제목 분산은 매우 중요한 사용자 환경 세부정보입니다.
서체의 텍스트의 균형을 이루는 것은 인쇄 초기의 시절로 거슬러 올라가며, 당시 프린터가 글자를 손으로 입력하는 것입니다. 도구와 기술이 발전함에 따라 결과도 함께 발전했습니다. 오늘날 디자이너는 색상, 두께, 크기 등을 사용하여 디자인에서 텍스트의 균형을 유지합니다.
하지만 웹에서는 사용자에 따라 문서의 크기와 색상이 변경되기 때문에 사용 가능한 제어 기능이 제한적입니다. text-wrap: balance는 인쇄 업계 디자이너의 작업과 전통을 바탕으로 자동화된 방식으로 웹에 텍스트의 균형을 맞추는 기술을 제공합니다.
광고 제목의 균형 유지
이는 text-wrap: balance의 기본 사용 사례이며 그렇게 되어야 합니다. 눈을 크기에 맞게 그리고 눈이 읽을 수 있도록 대칭을 이룹니다. 다음 CSS를 사용하여 모든 헤드라인을 균형 잡힌 텍스트 줄바꿈으로 설정하세요.
h1,h2,h3,h4,h5,h6 {
text-wrap: balance;
}
이 스타일을 적용하기만 해도 원하는 결과가 나오지 않을 수 있습니다. 텍스트를 줄바꿈해야 하므로 아무 곳에서나 최대 줄 길이가 적용되기 때문입니다. 이 게시물의 예에서 설정된 max-inline-size를 확인할 수 있습니다. 이 스타일은 max-width와 같지만 모든 언어에 한 번 설정할 수 있습니다.
제한사항
텍스트의 균형을 맞추는 작업은 무료가 아닙니다. 브라우저는 가장 균형 잡힌 래핑 솔루션을 찾기 위해 반복 작업을 반복해야 합니다. 이 성능 비용은 규칙으로 완화할 수 있으며, 6개 이하의 래핑된 줄에서만 작동합니다.
성능에 대한 고려사항
전체 디자인에 텍스트 줄바꿈 균형을 적용하는 것은 바람직하지 않습니다. 6개 줄 제한으로 인해 낭비된 요청이며 페이지 렌더링 속도에 영향을 줄 수 있습니다.
* {
text-wrap: balance;
}
h1, h2, h3, h4, h5, h6, blockquote {
text-wrap: balance;
}
이 기능의 큰 장점은 현재 JavaScript에서처럼 글꼴 로드에 맞춰 텍스트 줄바꿈이 균형을 이루도록 기다릴 필요가 없다는 것입니다. 브라우저에서 알아서 처리합니다.
white-space 속성과의 상호작용
텍스트 균형은 white-space 속성과 경쟁합니다. 하나는 줄바꿈을 요구하고 다른 하나는 균형 잡힌 줄바꿈을 요구하기 때문입니다. 공백 속성을 설정 해제하면 이 문제를 극복할 수 있습니다. 그러면 균형 잡힌 래핑을 다시 적용할 수 있습니다.
.balanced {
white-space: unset;
text-wrap: balance;
}
균형을 맞추면 요소의 인라인 크기가 변경되지 않습니다.
균형 잡힌 텍스트 래핑을 위한 일부 JavaScript 솔루션은 포함하는 요소 자체의 max-width를 변경하므로 이점이 있습니다. 이렇게 하면 균형 있는 블록에 '축소 래핑'되는 추가 혜택이 있습니다. text-wrap:
balance는 이러한 효과를 나타내지 않으며 다음 예에서 볼 수 있습니다.
DevTools에서 표시된 너비의 끝부분에 추가 공간이 얼마나 있는지 확인해 보세요.
이는 크기를 변경하는 스타일이 아니라 래핑 스타일일 뿐이기 때문입니다. 이 때문에 적어도 제 생각에는 text-wrap: balance가 그렇게 우수하지 않은 몇 가지 시나리오가 있습니다. 카드 내부의 제목 (또는 테두리나 그림자가 있는 컨테이너)을 예로 들 수 있습니다.
균형 잡힌 텍스트 줄바꿈은 포함된 요소의 불균형을 야기합니다.
브라우저가 사용하는 테크닉에 대한 간략한 설명
브라우저는 추가 선이 발생하지 않는 최소 너비에 관해 바이너리 검색을 효과적으로 실행하여 한 CSS 픽셀 (디스플레이 픽셀이 아님)에서 중지합니다. 바이너리 검색의 단계를 더 최소화하기 위해 브라우저는 평균 선 너비의 80% 로 시작합니다.