word-break 속성과 word-wrap 속성 알아보기

Posted by in Research

실무를 하다 보면 가볍게 이해한 스펙을 바탕으로 관습적으로 사용하는 속성들이 있다. 그중 word-break 속성과 word-wrap 속성에 대해 조금 더 명확하게 정리해보았다.

 

※ 본 내용은 W3C 스펙문서에서 제공하는 내용 일부를 실무 경험을 바탕으로 의역 및 편집하여 작성한 것이다.

  • 중국어/일본어/한글의 경우 W3C문서에서 CJK(Chinese, Japanes, Korean 의 약자)로 사용하고 있으며, 본 문서에서도 CJK로 지칭한다.
  • 그 외 언어는 non-CJK(숫자, 영어, 베트남어 등)으로 지칭한다.
  • 중단점은 ‘ · ’로 표기한다.

word-break 속성과 word-wrap 속성

실무에서 두 속성은 주로 줄 바꿈을 위해 사용한다. 먼저 각 속성이 무엇인지 간단히 살펴보자.

word-break : 아래 예제와 같이 단어의 분리를 어떻게 할 것인지 결정한다.

ex) (공백/띄어쓰기) 날씨가·좋아요
ex) (음절) 날·씨·가·좋·아·요·
_

word-wrap : 아래 예제와 같이 박스의 가로 영역을 넘친 단어 내에서 임의의 분리 여부를 결정한다.

ex)

두 속성의 역할은 다르지만 줄 바꿈을 위해 필요한 상황에 따라 선언하며, 또한 조합하여 선언하기도 한다. 지금부터 각 속성의 특징을 이해해보고, 조합하여 선언했을 때는 어떻게 달라지는지 자세히 살펴보도록 하자.

word-break 속성은 단어의 분리를 결정하여 줄 바꿈에 관여

줄 바꿈은 허용된 중단점에서 수행(soft wrap opportunity) 되는 것이며, 모든 속성이 기본값이라는 전제하에 줄 바꿈은 대부분의 non-CJK의 경우 ‘공백(띄어쓰기)’에서, CJK의 경우 ‘음절’에서 수행된다.

그리고 word-break 속성으로 중단점의 수행 기회(soft wrap opportunity)를 바꿀 수 있다. 값에 따라 어떤 차이가 있는지 확인해보자.

W3C에서 모든 어휘 자원(w3의 모든 [UAX14] 유니코드 내용)을 제공하는 것이 아니기 때문에 CSS는 줄 바꿈이 허용되는 곳을 완전히 정의하지 않으며 예외 사항이 존재할 수 있다.
태국어, 라오어 및 크메르어와 같은 언어는 단어를 구분하는데 공백이나 구두점을 사용하지 않는다.(음절 사이사이를 기반으로 한다는 정의도 없다.) 결과적으로 그러한 텍스트의 중단점 수행 기회를 식별하기 위해서는 어휘 자원이 필요하다.

word-break 속성 값

값은 normal(기본값), break-all, keep-all 이 있다. (keep-all 의 경우 IE에서는 계속 지원하였으나 webkit에서는 15년 6월부터 지원하였다.) 그럼 값에 따라 언어별로 중단점이 어떻게 달라지는지 확인해보자.

W3C의 word-break 예제 링크 바로가기

다음 EXAMPLE1, 2는 W3C 예제에 한글을 추가해 재편집한 내용이다.

EXAMPLE 1

단어가 혼합 된 단어 예제

중단점은 ‘·’ 로 표기

word-break: normal
word-break: break-all
word-break: keep-all

EXAMPLE 2

예를 들어, 일부 스타일의 CJK 조판에서 영어 단어는 공백이나 하이픈이 아닌 두 문자 사이에서 분리 할 수 ​​있다. 이것은 ‘ word-break:break-all‘ 로 활성화 할 수 있다 .

A snippet of Japanese text with English in it. The word 'caption' is broken into 'capt' and 'ion' across two lines.

일본어에 포함 된 영어 텍스트는 단어간 임의의 지점에서 깨졌다.

또 다른 예로, 한글에는 두 개의 한글 음절 (‘word-break: normal‘) 사이 또는 영어와 같이 주로 공백 (‘word-break: keep-all‘) 의 두 가지 스타일이 있다.

word-break 속성 값의 중단점

중단점과 중단점이 수행되는 기회가 의미상 다르긴 하지만 간단하게 설명하기 위해 ‘중단점’이라는 용어로 통칭하겠다.
위 w3의 예제에서 살펴본 것처럼 언어별로 기본(normal)으로 갖는 중단점이 다르다.
다음 표는 언어별로 속성 값에 따라 달라지는 중단점을 정리한 내용이다.

 
normal (기본값) break-all keep-all (CJK에만 적용됨)
non-CJK 중단점: 공백(띄어쓰기, 하이픈’-‘) 중단점: 음절 중단점: 공백(띄어쓰기, 하이픈’-‘)
CJK 중단점: 음절 중단점: 음절 중단점: 공백(띄어쓰기, 하이픈’-‘, 그 외 기호)

word-break 속성 값 테스트(word-wrap 속성은 기본값)

속성 값에 따라 줄바꿈이 어떻게 적용되는지 테스트 화면을 살펴보고 각 특징을 하단 표에서 확인해보자.

https://codepen.io/witblog/full/gRrdPR/

#중단점이 ‘공백’인 경우 (예: some·Latin | 한글·좋아요)

[1] 단어가 한 줄의 남은 공간보다 길면 줄 바꿈 된다.
[2] 박스 영역의 가로 값 보다 긴 단어는 중단점이 나타날 때까지 박스를 강제적으로 뚫고 넘치게 된다.
[3] 박스 영역의 가로 값 보다 긴 단어에 기호가 포함되어 있다면, ‘언어+기호’ 조합의 ‘언어’에 따라 기호가 중단점이 되기도 한다.
non-CJK는 ‘기호’가 하이픈 ‘-‘ 일 때 줄 바꿈 된다.(그 외 기호 중단점으로 작용 X)
CJK는 하이픈뿐만 아니라 대부분의 기호가 중단점으로 작용하여 줄 바꿈 된다.(파이어폭스에서는 기호를 중단점으로 작용X)
[4] 박스 영역의 가로 값 보다 긴 기호가 공백 없이 나열된다면, 중단점이 나타날 때까지 박스를 강제적으로 뚫고 넘치게 된다.

#중단점이 ‘음절’인 경우( 예: s·o·m·e·L·a·t·i·n | 한·글·좋·아·요)

한 줄의 가장 끝부분에 위치한 단어가 글자로 나뉘어 줄 바꿈 된다.
그래서 [1], [2], [3] 모두 음절에서 줄 바꿈 되기 때문에 박스 영역을 넘치지 않는다.
하지만 예외도 있다.
[5] 박스 영역의 가로 값 보다 긴 단어에 기호(마침표’.’ 와 느낌표’!’등) 으로만 연속적으로 나열 된다면, 중단점이 음절이라 할지라도 박스 가로 영역을 강제적으로 뚫고 넘치게 된다.
모든 기호에서 발생하는 건 아니며 일부 기호에서 예외적으로 발생한다.

word-wrap 속성은 박스의 가로 영역을 넘친 단어 내에서 임의의 분리 여부를 결정하여 줄바꿈에 관여

넘친 단어를 줄 바꿈 하고 싶다면, word-wrap 속성의 값을 바꾸면 된다.
이때, 넘친 단어의 임의의 분리는 음절에서 발생하며 white-space 속성이 기본 값(normal) 일 때만 적용된다.

word-wrap 속성의 값

word-wrap 속성의 값은 normal(기본값), break-word 가 있다.
다음 표는 속성 값에 따라 박스 가로 영역을 단어가 넘치는지 유무를 정리한 내용이다.

normal (기본값) break-word
non-CJK 단어넘침 O 단어넘침 X
CJK 단어넘침 X 단어넘침 X

word-wrap 속성 값 테스트(word-break 속성은 기본값)

속성 값에 따라 줄바꿈이 어떻게 적용되는지 테스트 화면을 살펴보자.

https://codepen.io/witblog/full/VWaGbm/

두 속성 조합 테스트

다음은 word-break 속성의 각 값에 word-wrap: break-word를 공통적으로 선언하여, 박스의 가로 영역을 넘치는 문자열이 없도록 테스트하였다.

첫 번째 테스트 화면은 word-break: normal; word-wrap: break-word;이기 때문에 word-wrap: break-word;만 선언했을 때의 화면과 동일하다.

두 번째 테스트 화면은 중단점은 모두 음절로 적용하고 넘치는 문자열이 없도록 적용한 것이다.
([5]word-wrap: break-word; 적용해도 크롬에서 단어가 넘치는 버그가 있다. 이때, 표준은 아니지만 word-break:break-word라는 웹킷에 적용되는 속성을 선언하면 해결 가능하다.)

세 번째 테스트 화면은 중단점은 모두 공백(띄어쓰기)로 적용하고 넘치는 문자열이 없도록 적용한 것이다.

https://codepen.io/witblog/full/yXOxmB/

웹에서 줄바꿈은 자연스러운 현상처럼 보이지만 다양한 원리에 입각하고 있다는 것을 알았다. 위의 모든 테스트 결과를 외울 필요는 없지만, 언어별 특징이 다르다는 것을 기억하고 각 속성과 값에 따라 원리가 어떻게 달라지는지 이해하는 것이 중요하다고 생각한다. 앞으로 위 속성들을 선언할 때 조금이나마 도움이 되기를 바라며 글을 마친다.

참고자료