Unicode LB13 규칙과 CSS 줄바꿈에 대하여
시작하기 전에
댓글 input에 한글,영어를 제외한 특수문자에서 줄바꿈이 되지 않고 overflow가 발생하는 문제를 겪었다.
특수문자에서는 왜 줄바꿈이 일어나지 않는지 알아보고, 한글/영어와 특수문자에서의 줄바꿈 차이를 알기 위해 글을 작성해보려고 한다.
한글 및 영어와 특수문자에서의 줄바꿈
댓글 컴포넌트의 CSS는 다음과 같이 폰트 관련 속성만 적용되어 있었다.
<p className="font-designer-15r">
{data.content}
</p>
한글은 자동으로 줄바꿈이 되었고, 특수문자 및 영어에 테스트를 해봤는데, 띄어쓰기가 존재할 땐 정상적으로 줄바꿈이 일어나지만 그렇지 않으면 overflow가 발생하고 있었다.
| 입력 | 줄바꿈 |
|---|---|
| 한글 | ✅ 자동 |
| 영어 (띄어쓰기 있음) | ✅ 단어 단위 |
| 영어 (띄어쓰기 없음) | ❌ overflow |
| 특수문자 | ❌ overflow |
그럼 왜 이런 현상이 일어나는걸까?
브라우저의 텍스트 렌더링 알고리즘
브라우저는 텍스트를 렌더링할 때 마음대로 줄을 바꾸지 않으며, Unicode Standard Anex #14의 Line Breaking Algorithm을 따른다고 한다.
그렇다면 한글, 영어, 특수문자 간의 차이점을 알아보자.
한글
한글은 일본어, 중국어 등과 함께 Unicode에서 ID(Ideographic) 클래스로 동작한다.
Characters with this property do not require other characters to provide break opportunities; lines can ordinarily break before and after and between pairs of ideographic characters.
즉 다른 문자가 없어도 컨테이너 안에서 글자 사이 어디서든지 줄바꿈이 일어난다.
영어
영어는 AL(Alphabetic) 클래스로 동작한다.
Ordinary characters require other characters to provide break opportunities; otherwise, no line breaks are allowed between pairs of them
즉, 공백이나 구두점(쉼표 등) 같은 ‘줄바꿈 기회를 제공하는 문자’가 존재해야만 줄바꿈이 일어나며, 그렇지 않으면 overflow가 발생할 수 있다.
특수문자
특수문자는 종류에 따라 다른 Line Break Class를 가진다.
https://www.unicode.org/reports/tr14/#Table1
| 문자 | Line Break Class | 줄바꿈 금지 규칙 |
|---|---|---|
! |
EX (Exclamation) | LB13: 앞에서 금지 |
? |
EX (Exclamation) | LB13: 앞에서 금지 |
) |
CP (Close) | LB13: 앞에서 금지 |
~ |
AL (Alphabetic) | 금지 규칙 없음 |
# |
AL(Alphabetic) | 금지 규칙 없음 |
특히 EX, CP 같은 클래스에는 LB13이라는 특수한 규칙이 적용된다.
LB13: Do not break before
],),!,;,/,?
!, ? 같은 문자는 바로 앞에서 줄바꿈이 금지된다. 예를 들어 Hello! 에서 o와 ! 사이에는 줄바꿈이 금지된다.
위 화면처럼 !를 연속으로 입력했을 때는 어디서도 줄바꿈이 되지 않기 때문에 overflow가 일어났던 것이다.
overflow-wrap으로 규칙 무시하기
QA 반영을 할 당시에는 ‘#’ 에 대해서만 대응하면서 break-all 로 해결했다고 생각했다.
그러나 break-all은 단어 경계에서만 줄바꿈을 시도하지 LB13 같은 줄바꿈 규칙에는 적용이 안된다.
즉 일부 특수문자에서는 금지 규칙 때문에 break-all 이 적용되지 않고 overflow가 발생한다는 뜻이다. 그렇다면 어떻게 해결해야 할까?
word-break 속성을 다 써봐도 문제는 해결되지 않았다. 결국 클로드에 물어본 결과
overflow-wrap : anywhere 라는 해결책이 나왔다.
CSS Text Module Level 3 스펙에 따르면:
"an otherwise unbreakable sequence of characters may be broken at an arbitrary point... disregarding any prohibition against line breaks"
overflow-wrap: anywhere는 모든 줄바꿈 금지 규칙을 무시하고, overflow가 발생할 것 같으면 어디서든 줄을 바꾼다.
마치며
사용자 입력을 받는 UI에서는 어떤 입력이 들어올지 예측하는 것은 불가능하다. overflow-wrap: anywhere을 적용하면 Unicode 규칙을 무시하기 때문에 예상치 못한 overflow를 방지할 수 있다.
언어학적으로 올바른 줄바꿈인지는 의문이 남지만 사용성을 위해 레이아웃이 깨지는 것보다는 낫다고 생각했다.
input과 관련해서 이러한 이슈를 마주칠거라고 생각을 못했는데, 이번 계기를 통해 또 새로운 걸 배울 수 있었다.
