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

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

[내 위키](https://wiki.g15e.com/pages/My%20wiki.txt)의 디자인을 개편했다. 레이아웃을 좀 바꾸고, 제목 광학 정렬 및 양끝 맞춤을 적용했다.

## 제목 광학 정렬

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

## 이미지와 텍스트 조화

![VR experiment 2018.webp](VR%20experiment%202018.webp)

이미지와 gutter를 제외한 글줄 폭이 이미지 폭 이상이면, 즉 이미지가 본문 너비에 비해 충분히 작으면, 텍스트가 이미지 주변으로 흐르게(float) 조판한다.

이때 HTML Canvas API 등을 활용하여 이미지와 텍스트의 수직 리듬을 맞추기 위해 이미지 크기를 최소한으로 수정한다. 이미지는 종횡비는 유지한 상태에서 최소한으로 축소한다. 절대 이미지를 확대하거나 종횡비를 깨지 않는다. 모바일 기기에서 가로모드/세로모드를 전환하는 등의 이벤트가 발생해서 본문의 너비가 바뀌면 계산을 다시 수행한다. 여기까지 됐으면 이어서 텍스트 양끝 맞춤을 수행한다. 텍스트 양끝 맞춤에 대해서는 아래 설명을 참고.

## 본문 양끝 맞춤

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

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