CSS 'ic' 단위 살펴보기

CSS에는 숫자(<number> 자료형)에 단위를 붙인 '치수' 자료형(<dimension>)이 있다. 여기에는 <length>(거리), <angle>(각도), <time>(시간), <frequency>(주파수), <resolution>(해상도) 등이 있다. 본 글에서는 <length> 자료형의 단위 중 하나인 ic에 대해 알아본다.

ic 단위란?

ic는 'ideograph count'(표의문자 수)의 뜻을 가진, CJK 문자의 일반적인 진행 단위다. 조금더 정확히는, 水(U+6C34) 글리프를 렌더링 할 때 사용되는 폰트에서 해당 글리프의 진행 단위를 나타낸다. 여기서 글리프의 '진행 단위'란, 요소의 인라인 축에 따른 너비나 높이다. 일반적으로는 글리프의 너비라고 생각하면 된다.

caniuse.com에 따르면, IE와 Samsung Internet을 제외한 모던 브라우저에서 대부분 지원된다. Opera도 최신 버전(92)부터 지원한다.

참고

• ic가 전각 문자를 위한 단위이듯, 반각 문자를 위한 단위인 ch도 있다. ch는 0(U+0030) 문자를 기준으로 한다.
• ch, ic 단위 사용시 필요에 따라 폰트 다운로드를 트리거 할 수 있다.

ic는 언제 사용될까?

작성자가 지정된 수의 CJK 폰트의 전각 문자 글리프에 맞게 요소 크기를 조정할 수 있게 된다.

다음은 정확히 4ic의 너비를 갖는 input 예시다.

4ic의 너비를 갖는 input

4글자를 입력한 모습

왜 '水'가 기준일까?

水는 아주 일상적이고 기본적인 글자로, 모든 CJK 폰트에 포함될 것으로 여겨지기 때문이다.

그러나 많은 사람들이 ic 단위의 기준을 水가 아닌 永으로 변경해야 한다고 주장해왔으며 2022년 현재까지 갑론을박이 이어지고 있다.

'永'로의 변경을 지지하는 의견

• 永는 한자의 여덟가지 획을 모두 포함하고 있어 서예 등 한자 필기에서 가장 기본으로 연습하는 글자이고, 따라서 가장 표준적인 글자이다. (영자팔법 참고)
• 水가 채택된 이유라면, 더 쉽고 기본적인 글자인 口나 一 또한 채택되지 않을 이유가 없다.
• x-height의 정의와 이를 사용한 ex 단위처럼, ic 또한 의미있는 기준을 선택해야 한다.
• CJK 문화권 및 한자에 대한 잘못된 인식이나 오해가 퍼질 수 있다.

'水'의 유지를 지지하는 의견

• 永의 지지 의견은 캘리그래피가 아닌 치수를 위한 선택과는 별개의 문제다.
• 水와 永의 크기는 사실상의 모든 CJK 폰트에서 동일하므로 이를 변경하는 것은 작업량에 비해 별 의미가 없다.
• 이 변경은 쓰기 모드의 변경도 동반하는데, 단순히 의미만을 위해 쓰기 모드를 변경하는 것은 너무 크고 고통스러운 작업으로 여겨진다.

참고

https://www.w3.org/TR/css-values-4/#font-relative-lengths

CSS Values and Units Module Level 4

https://developer.mozilla.org/en-US/docs/Web/CSS/length

<length> - CSS: Cascading Style Sheets | MDN

https://github.com/w3c/csswg-drafts/issues/7577

[css-values-4][css-writing-modes-4] Revisit decision to use 永 instead of 水 as the ic unit · Issue #7577 · w3c/csswg-drafts