균형 잡힌 텍스트 블록을 위해 줄바꿈을 직접 작성하는 전통적인 서체 기법이 CSS에 도입됩니다.
text-wrap의 balance 값은 CSS 텍스트 수준 4의 일부입니다. 이 게시물의 예를 살펴보고 이 CSS 한 줄로 텍스트 레이아웃을 크게 개선하는
방법을 알아보세요.
text-wrap: balance가 없으면 디자이너, 콘텐츠 편집자 및 게시자는 라인 균형 방식을 변경할 수 있는 도구가 거의 없습니다. 가장 좋은 옵션은 <wbr> 또는 ­를 사용하여 텍스트 레이아웃에서 줄과 단어의 구분선에 관한 더 스마트한 결정을 내리는 데 도움이 되는 것입니다.
개발자는 제목이나 단락의 최종 크기나 글꼴 크기, 언어까지도 모릅니다. 텍스트 줄바꿈을 효과적이고 심미적으로 처리하는 데 필요한 모든 변수는 브라우저에 있습니다. 따라서 다음 이미지와 같이 헤드라인 줄바꿈이 표시됩니다.
.unbalanced {
max-inline-size: 50ch;
}
CSS 텍스트 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가 그다지 좋지 않은 몇 가지 시나리오가 있습니다. 카드 안의 제목 (또는 테두리나 그림자가 있는 컨테이너)를 예로 들 수 있습니다.
아이러니하게도 균형 있는 텍스트 줄바꿈은 포함된 요소의 불균형을 일으킵니다.
브라우저가 사용하는 기법에 대한 간단한 설명
브라우저는 추가 줄을 일으키지 않는 최소 너비를 대상으로 바이너리 검색을 효과적으로 실행하며, 이때 디스플레이 픽셀이 아닌 1개의 CSS 픽셀에서 중지합니다. 바이너리 검색의 단계를 더 최소화하기 위해 브라우저는 평균 선 너비의 80% 로 시작합니다.