픽셀 폰트에 아랍어가 없다는 걸 15개 언어를 그려보고 알았다

사이트 이름이 shiranai 다. 일본어로 모른다는 뜻이다.

그래서 가운데 글자를 건드리면 같은 뜻의 다른 나라 말로 바뀌게 만들었다. 15개 언어를 넣었다. 知らない, 모르겠어, I don’t know, 我不知道, No lo sé, Je ne sais pas 같은 것들.

본문 폰트는 픽셀 폰트다. 15개 전부 픽셀로 나오면 좋겠다고 생각했다.

API 는 된다고 했다

라틴 문자만 있는 폰트라 한글이나 한자는 다른 폰트가 필요했다. 픽셀 계열로 한글과 가나와 한자를 덮는 걸 하나 더 얹었다.

확인은 document.fonts.check() 로 했다.

document.fonts.check('16px "Galmuri11"', '모르겠어')  // true
document.fonts.check('16px "Galmuri11"', 'لا أعرف')   // true

15개 전부 true 였다. 됐다고 생각했다.

화면은 아니었다

몇 개가 매끈했다. 픽셀이 아니라 시스템 기본 폰트였다.

fonts.check() 는 그 폰트 패밀리를 쓸 수 있는지만 판정한다. 그 폰트에 그 글자가 들어 있는지는 안 본다. 글자가 없으면 브라우저가 조용히 다음 폰트로 넘어가고, API 는 여전히 true 를 준다.

생각해보면 당연하다. 폰트 로딩 상태를 묻는 API 지 글리프 조회 API 가 아니다. 그런데 두 번째 인자로 문자열을 받으니 글자까지 봐주는 줄 알았다.

결국 눈으로 봤다

15개를 한 화면에 세로로 나란히 그려놓고 스크린샷을 찍었다.

知らない          픽셀
모르겠어          픽셀
I don't know     픽셀
我不知道          픽셀
No lo sé         픽셀
Je ne sais pas   픽셀
Ich weiß nicht   픽셀
Non lo so        픽셀
Não sei          픽셀
Я не знаю        픽셀
لا أعرف           매끈
मुझे नहीं पता      매끈
ไม่รู้              매끈
Không biết       픽셀
Bilmiyorum       픽셀

12대 3. 아랍어, 힌디어, 태국어가 빠졌다.

대체 폰트를 찾다가 접었다

아랍 문자, 데바나가리, 태국 문자용 무료 픽셀 폰트를 찾아봤다. 사실상 없었다.

없는 게 이상한 일은 아니다. 라틴은 대문자 소문자 합쳐 52자, 한글은 조합으로 만들 수 있지만 아랍 문자는 앞뒤 글자에 따라 모양이 바뀐다. 한 글자에 네 가지 형태가 있다. 픽셀 단위로 그걸 다 그리려면 품이 다르다.

고른 것

세 언어를 그리스어, 인도네시아어, 스웨덴어로 바꿨다. 전부 픽셀로 나온다.

Δεν ξέρω / Tidak tahu / Jag vet inte

언어 다양성과 시각 통일 중에 통일을 골랐다. 다르게 고를 수도 있는 선택이었다. 세 언어만 매끈하게 두는 것도 방법이고, 그게 오히려 “여러 문자 체계가 섞여 있다” 는 인상을 줬을 수도 있다.

지금은 통일 쪽이 맞다고 보는데, 확신은 없다.

남은 것

fonts.check() 로 글리프 커버리지를 못 잰다면 뭘로 재나. 캔버스에 그려서 폭을 비교하는 방법이 있다고는 하는데, 대체 폰트가 우연히 같은 폭이면 못 잡는다.

결국 눈으로 보는 게 제일 확실했다. 15개짜리라 가능했던 방법이다.