2026-08-16 위키 디자인 개편

내 위키의 디자인을 개편했다. 레이아웃을 좀 바꾸고, 제목 광학 정렬 및 양끝 맞춤을 적용했다.

제목 광학 정렬

h1, h2, h3 요소의 첫 글자를 보이지 않는 캔버스에 그린 뒤 픽셀을 추출하여 광학 보정을 수행한다. 눈으로 보기에 정렬이 맞아보이게 만든다.

이미지와 gutter를 제외한 글줄 폭이 이미지 폭 이상이면 텍스트가 이미지 주변으로 흐르게(float) 조판한다.

이때 캔버스의 actualBoundingBoxAscent, text-under edge를 기준으로 이미지와 텍스트의 수직 리듬을 맞추기 위해 이미지 크기를 최소한으로 수정한다. 이미지는 종횡비를 유지한 상태에서 최소한으로 축소하며 절대 확대하지는 않는다.

이 상태에서 텍스트 양끝 맞춤을 수행한다. 아래 설명 참고.

Pretext를 이용하여 다음 알고리즘에 의한 본문 양끝 맞춤을 구현했다.

실제 서체 측정: 폰트가 로드된 뒤 글자, 어간, 인라인 요소의 실제 렌더링 폭을 측정한다.
줄바꿈 후보 생성: 우선 어절 사이만 후보로 삼는다. 여는 괄호 뒤나 닫는 문장부호 앞처럼 부적절한 지점은 제외.
문단 전체 조판: 문단 전체의 줄 조합을 비교한다. 어간 및 자간의 왜곡, 너무 짧은 줄, 외톨이 어절, 연속된 공백의 강(river)을 회피하도록 한다.
간격 조정: 정해진 범위 내에서 자간은 미세하게, 어간은 상대적으로 크게 조절한다.
단계적 타협: 정상 범위 내에서의 조정으로 해결이 불가능하면 제한적으로 어간 허용치를 넓힌다. 그래도 안되면 음절 사이를 끊도록 한다. 영문은 하이픈을 넣는다.
최종 렌더링 보정: 선택한 줄을 브라우저에 그린 뒤 실제 폭을 다시 읽고, 반올림과 서체 렌더링에서 생긴 오차를 어간 및 자간에 분산한다.
안전한 예외 처리: 끝 줄은 자연스럽게 짧아도 허용한다. 제한 안에서 안전한 해를 찾지 못한 부분만 “ragged”로 남긴다.