▲

text-wrap: pretty로 더 나은 타이포그래피 표현하기

 (webkit.org)
4P by GN⁺ 10일전 | ★ favorite | 댓글 1개
  • 웹 타이포그래피를 더 아름답게 만드는 text-wrap: pretty 소
  • Safari Technology Preview 216에 새롭게 도입된 기능으로, 웹 타이포그래피를 더 정교하고 읽기 쉽게 개선함
  • 기존 웹 텍스트 배치는 한 줄씩 처리하는 방식이었으나, pretty는 전체 문단을 고려하여 줄바꿈 위치를 조정함
  • 이 기능은 가독성과 접근성을 향상시키며, 전통적인 활자 조판 방식에서 영감을 받아 구현됨

전통적인 타이포그래피에서 배우는 좋은 줄바꿈 방식

  • 짧은 마지막 줄 피하기: 마지막 줄에 단어 하나만 남는 것은 미적으로 좋지 않음
  • 거친 문단 끝 모양 개선: 줄 끝이 들쭉날쭉한 경우 가독성이 낮아지므로 가능한 균형 있게 조정해야 함
  • 좋지 않은 하이픈 사용 피하기: 하이픈이 두 줄 연속으로 사용되거나 지나치게 단어를 쪼개면 읽기 어려움
  • 타이포그래피 리버 방지: 줄간 공백이 수직으로 이어져서 시선을 분산시키는 현상은 피해야 함

웹 줄바꿈 방식의 역사

  • 웹은 1991년부터 "첫 줄부터 한 줄씩 처리하는" 방식을 사용해 옴
  • 이 방식은 각 줄의 텍스트 길이를 따로따로 계산하고, 줄 간 조화를 고려하지 않음
  • InDesign이나 LaTeX 같은 도구는 문단 전체를 보고 줄을 정렬하지만, 웹은 최근까지 그렇지 못했음
  • Safari Technology Preview 216에서는 처음으로 전체 문단을 고려한 줄바꿈 방식이 도입됨

text-wrap: pretty가 해결하는 문제

  • 문단 전체를 평가하여 최적의 줄바꿈 위치를 정함
  • 짧은 마지막 줄을 방지하고, 줄 끝 모양(rag)을 개선하며, 불필요한 하이픈을 줄임
  • Chromium 계열 브라우저는 문단의 마지막 4줄만 개선하지만, WebKit은 전체 문단을 적용
  • 리버 현상까지는 아직 개선하지 않지만, 향후 도입 계획 있음

각 브라우저의 구현 차이

  • pretty는 CSS Working Group이 정의한 대로 브라우저마다 다르게 동작할 수 있음
  • WebKit은 문단 전체에 적용, Chromium은 마지막 4줄만 적용
  • 따라서 개발자는 단지 마지막 줄 개선에만 쓰지 말고 전체 타이포그래피 향상을 위해 사용할 수 있음

데모 확인하기

  • CodePen 데모에서 pretty, balance, 하이픈, 정렬 등의 조합을 실험 가능
  • "show guides"와 "show ghosts"를 켜서 변경 전후 비교 가능
  • 다양한 언어(영어, 아랍어, 독일어, 중국어, 일본어)에서 효과 확인 가능

성능에 대한 우려 해소

  • 많은 줄을 가진 콘텐츠에서는 성능에 영향을 줄 수 있지만, 일반적인 문단에서는 성능 문제 없음
  • 수백~수천 줄의 문단이 아닌 이상 자유롭게 사용 가능
  • 필요시 WebKit은 긴 문단을 나눠서 처리하여 성능을 보장할 예정

pretty와 balance의 차이점

  • pretty는 텍스트가 컨테이너 너비를 가득 채우도록 유지하면서, 줄바꿈을 더 자연스럽게 만듦
  • balance는 모든 줄의 길이를 같게 만드는 데 중점, 컨테이너를 덜 채우게 됨
  • 일반적으로 pretty는 본문 텍스트에 적합하고, balance는 제목, 캡션, 티저 텍스트에 적합
  • 둘 다 짧은 텍스트에 쓸 수 있지만, 긴 본문에는 balance를 피하는 것이 좋음

다른 text-wrap 속성 값 설명

text-wrap: avoid-short-last-lines

  • 새로 추가된 값으로, 오직 짧은 마지막 줄을 피하는 데 집중함
  • 아직 어느 브라우저에도 구현되지 않음

text-wrap: auto

  • 기본값으로, 1991년부터 사용된 줄 단위의 "탐욕적 줄바꿈" 알고리즘을 사용함
  • 향후 브라우저에서 기본값 자체가 개선될 수도 있음

text-wrap: stable

  • 현재는 auto와 동일하게 동작하지만, 편집 가능한 텍스트에 적합한 안정적인 줄바꿈 제공
  • 애니메이션이나 텍스트 입력 중에도 줄바꿈이 변하지 않도록 보장

text-wrap의 세부 속성

  • text-wrap은 실제로 text-wrap-mode와 text-wrap-style 두 속성의 단축형임

  • text-wrap-mode: 줄바꿈 허용 여부 설정 (wrap / nowrap)

  • text-wrap-style: 줄바꿈 알고리즘 선택 (auto, stable, balance, pretty, avoid-short-last-lines)

    text-wrap-style: pretty;  
text-wrap-mode: wrap;

  • white-space 속성과 함께 사용할 경우에는 공백 처리 방식도 확인 필요

요약 정리

  • text-wrap: pretty는 기존보다 훨씬 정교한 웹 텍스트 줄바꿈을 가능하게 함
  • Safari Technology Preview 216에서 전체 문단 평가 방식으로 구현됨
  • 긴 본문에 적용해도 성능 문제가 거의 없으며, 가독성과 미적 측면에서 큰 향상 제공
  • balance와의 차이를 이해하고, 콘텐츠 유형에 따라 적절히 선택할 필요 있음
▲
GN⁺ 10일전  [-]
Hacker News 의견
  • "text-wrap: pretty"의 성능에 대해 많은 개발자가 우려한다는 말에 웃음이 나옴. 텍스트 래핑의 성능을 고려한 개발자가 그렇게 많다고 믿기 어려움
  • 데모의 콘텐츠가 영어로 되어 있음. 이상한 영어임. 주제와 관련이 없으며, 단어를 재배치하여 줄 바꿈을 개선하려는 경우가 아니라면 관련이 없음
  • 이 기능이 ereader에 추가되는 것이 기대됨. ereader는 레이아웃 엔진이 좋지 않음
  • 온라인 텍스트를 아름답게 만드는 데 너무 적은 노력과 주의가 기울여졌음. 웹은 텍스트를 수세기 전으로 되돌렸음. 이 기능은 환영받을 만함
  • Safari Technology Preview에 "text-wrap: pretty" 지원이 추가되어 웹 타이포그래피에 전례 없는 수준의 세련미를 가져옴. caniuse.com에 따르면 Chrome은 2023년 9월부터 이 기능을 지원함. "전례 없는" 것이 무엇인지 이해하기 어려움
  • "text-align: justify"와 "text-wrap: pretty"의 차이를 아는 사람 있음? Chrome에서는 "text-wrap: pretty"가 훨씬 부드러운 효과를 줌. 평균적인 블로그의 본문에 둘 다 사용하는 것이 좋을지 확인했으며, 개별적인 변화를 가져오는 것으로 보임
  • 이 기능은 훌륭함. 짧은 마지막 줄과 들쭉날쭉한 부분에 집중하는 것이 놀랍지 않음. 그러나 강을 방지하기 위한 조정을 아직 하지 않고 있음. 강을 정의하는 지표를 어떻게 정의할지 상상하기 어려움. 누군가가 실제로 작동하는 기발한 지표를 발명했는지 궁금함
  • 고아 단어를 피하려는 단락이 "large"라는 단어를 혼자 남김. "text-wrap: pretty"를 적용하면 해결됨
  • CSS Working Group이 설계한 "pretty"의 목적은 각 브라우저가 텍스트 래핑을 개선하기 위해 할 수 있는 것을 하는 것임. 모든 브라우저가 동일한 선택을 하도록 강제하지 않음. Chrome의 구현 방식 때문에 많은 웹 개발자가 이 값이 짧은 마지막 줄을 방지하기 위한 것이라고 기대함. 그러나 그것이 의도는 아님
  • "text-wrap: balance"를 헤드라인에 이미 사용 중임. 특정 단어를 연결하여 나쁜 래핑을 피하려고 했음. "text-wrap: pretty"는 본문 텍스트의 유사한 문제를 해결할 것임
답변달기