CSS text-wrap: balance

균형 잡힌 텍스트 블록을 위해 줄바꿈을 수동으로 작성하는 고전적인 타이포그래피 기술이 CSS에 도입됩니다.

Adam Argyle

balance 값은 text-wrap의 일부입니다. CSS 텍스트 수준 4. 이 게시물의 예를 살펴보고 이 한 줄의 CSS로 텍스트 레이아웃을 크게 개선하는 방법을 알아보세요.

text-wrap: balance가 없으면 디자이너, 콘텐츠 편집자, 게시자는 줄의 균형을 조정하는 방법을 변경할 수 있는 도구가 거의 없습니다. 가장 좋은 방법은 <wbr> 또는 ­를 사용하여 텍스트 레이아웃이 줄과 단어를 나누는 위치에 관해 더 스마트한 결정을 내리도록 안내하는 것입니다.

개발자는 제목이나 단락의 최종 크기, 글꼴 크기, 언어를 알 수 없습니다. 텍스트 줄바꿈을 효과적이고 미적으로 처리하는 데 필요한 모든 변수는 브라우저에 있습니다. 이러한 이유로 다음 이미지와 같이 제목 줄바꿈이 표시됩니다.

.unbalanced {
  max-inline-size: 50ch;
}

text-wrap: balance를 CSS 텍스트 4에서 사용하면 브라우저에 텍스트에 가장 균형 잡힌 줄바꿈 솔루션을 파악하도록 요청할 수 있습니다. 브라우저는 글꼴 크기, 언어, 할당된 영역과 같은 모든 요소를 알고 있습니다. 브라우저 균형 잡힌 텍스트 줄바꿈의 결과는 오늘 다음과 같습니다.

.balanced {
  max-inline-size: 50ch;
  text-wrap: balance;
}

디버그 정보가 오버레이되지 않은 상태로 나란히 표시하는 것이 좋습니다.

균형 잡힌 텍스트 블록이 훨씬 더 보기 좋습니다. 더 잘 주목을 끌고 전반적으로 읽기 쉽습니다.

균형 찾기

제목은 독자가 가장 먼저 보는 것이므로 시각적으로 매력적이고 읽기 쉬워야 합니다. 이렇게 하면 사용자의 관심을 끌고 품질과 보증을 제공합니다. 좋은 타이포그래피는 독자에게 자신감을 주고 계속 읽도록 유도합니다.

전통적으로 이 작업은 디자이너가 텍스트의 균형을 맞추는 것이 수학이 아닌 눈을 즐겁게 하려는 것이므로 수동으로 또는 광학적으로 수행되었습니다. 이 주제는 측정항목과 광학 정렬이라고 부르는 경우가 많습니다. 뉴욕 타임스와 같은 대규모 간행물의 경우 제목 균형 조정은 매우 중요한 사용자 환경 세부정보입니다.

타이포그래피에서 텍스트의 균형을 조정하는 것은 인쇄업자가 손으로 글자를 배치하던 인쇄 초기로 거슬러 올라갑니다. 도구와 기술이 발전함에 따라 결과도 발전했습니다. 요즘 디자이너는 디자인에서 텍스트의 균형을 맞추기 위해 색상, 두께, 크기 등을 사용합니다.

하지만 웹에서는 문서가 사용자에 따라 크기와 색상을 변경하므로 제어 기능이 적습니다. 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% 로 시작합니다.