CSS 텍스트 줄바꿈: 균형

균형 잡힌 텍스트 블록을 위해 줄바꿈을 직접 작성하는 기존의 타이포그래피 기법이 CSS에 도입되었습니다.

Adam Argyle

text-wrap의 balance 값은 CSS 텍스트 수준 4의 일부입니다. 이 게시물의 예를 살펴보고 이 CSS 한 줄은 텍스트 레이아웃을 크게 개선할 수 있습니다.

브라우저 지원

• <ph type="x-smartling-placeholder"></ph> 114명
• <ph type="x-smartling-placeholder"></ph> 114명
• 121
• <ph type="x-smartling-placeholder"></ph> 17.5

소스

데모 사용해 보기

text-wrap: balance가 없는 경우, 디자이너, 콘텐츠 편집자 및 게시자는 몇 가지 도구 라인의 균형점을 바꾸려고 합니다. 가장 좋은 방법은 <wbr> 또는 ­를 사용하여 텍스트 레이아웃을 안내하여 줄과 단어를 나눌 위치를 더 현명하게 결정하는 것입니다.

개발자는 언어의 최종 크기나 글꼴 크기, 심지어 언어까지도 모릅니다. 제목 또는 단락이 있습니다. 텍스트 줄바꿈을 효과적이고 미적으로 처리하는 데 필요한 모든 변수가 브라우저에 있습니다. 광고 제목으로 다음과 같이 래핑합니다.

데모 사용해 보기

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

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

<ph type="x-smartling-placeholder"></ph> 데모 사용해 보기

.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줄 이하에서만 작동하는 규칙에 의해 비용이 완화됩니다.

데모 사용해 보기

성능에 대한 고려사항

전체 디자인에 텍스트 줄바꿈 균형을 적용하는 것은 좋지 않습니다. 이것은 요청이 낭비되고 페이지 렌더링 속도에 영향을 미칠 수 있습니다.

금지사항

* {
  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 픽셀 1개에서 중지합니다. 바이너리 검색의 단계를 더 최소화하기 위해 브라우저는 평균 선 너비의 80%로 시작합니다.