즉시 커닝

사용자가 텍스트를 입력 할 때 글리프 모양을 기반으로 문자의 자동 커닝을 계산하는 알고리즘을 아는 사람이 있습니까?

나는 사전 너비 또는 이와 유사한 것을 사소하게 계산하는 것이 아니라 문자 사이의 시각적으로 최적의 거리를 추정하기 위해 글리프 모양을 분석하는 것을 의미합니다. 예를 들어 한 줄에 3 개의 문자를 순차적으로 배치하는 경우 중간 문자는 문자의 모양에도 불구하고 줄의 중앙에 있어야합니다. 다음은 커닝 온더 기능을 보여주는 예입니다.

즉시 커닝의 예 :

위의 이미지에서 a너무 옳은 것 같습니다. 와 중간에있는 것처럼 보이 도록 일정량 이동해야합니다 . 이 알고리즘의 모양 조사해야 하고 (또한 가능성이 다른 문자)를 훨씬 방법을 결정 왼쪽으로 이동해야합니다. 이 특정 양은 글꼴의 가능한 커닝 쌍을 검사하지 않고 알고리즘이 계산해야하는 것입니다.TTgTaa

손으로 그린 ​​글꼴을 사용하는 Javascript (+ svg + html) 프로그램을 코딩하려고 생각하고 있으며 커닝 쌍이 부족합니다. 텍스트 필드는 편집 가능하며 여러 글꼴의 텍스트를 포함 할 수 있습니다. 이 경우에 커닝은 즉석 텍스트 흐름을 보장하는 한 가지 방법이 될 수 있다고 생각합니다.

편집 : 이것의 시작점은 svg 글꼴을 사용하는 것일 수 있으므로 경로 값을 쉽게 얻을 수 있습니다. svg 글꼴에서 경로는 다음과 같이 정의됩니다.

<glyph glyph-name="T" unicode="T" horiz-adv-x="1251" d="M531 0v1293h
-483v173h1162v-173h-485v-1293h-194z"/>

<glyph glyph-name="a" unicode="a" horiz-adv-x="1139" d="M828 131q-100 -85
-192.5 -120t-198.5 -35q-175 0 -269 85.5t-94 218.5q0 78 35.5 142.5t93
103.5t129.5 59q53 14 160 27q218 26 321 62q1 37 1 47q0 110 -51 155q-69 61
-205 61q-127 0 -187.5 -44.5t-89.5 -157.5l-176 24q24 113 79 182.5t159
107t241 37.5 q136 0 221 -32t125 -80.5t56 -122.5q9 -46 9 -166v-240q0
-251 11.5 -317.5t45.5 -127.5h-188q-28 56 -36 131zM813 533q-98 -40 -294
-68q-111 -16 -157 -36t-71 -58.5t-25 -85.5q0 -72 54.5 -120t159.5 -48q104
0 185 45.5t119 124.5q29 61 29 180v66z"/>

알고리즘 (또는 자바 스크립트 코드)은 이러한 경로를 어떤 방식으로 검사하여 경로 간의 최적 거리를 결정해야합니다.

나는 이것이 오래되었다는 것을 안다. 나는 지금 wobbly text (무엇이든)의 WebGL 구현 에서이 작업을 수행하고 있습니다. 내가 작업중 인 솔루션은 다음과 같습니다.

1. 글리프 쌍의 비트 맵 버전을 가져 오십시오 (또는 원하는 경우 벡터로 수행).
2. 각 픽셀 행 (또는 벡터와 함께 사용하는 경우 임의의 수직 단위)에 대해 두 글리프에 하나 이상의 픽셀이 있는지 확인하십시오.
3. 2 단계를 통과하는 각 행에 대해 첫 번째 글리프의 가장 오른쪽 픽셀과 두 번째 글리프의 가장 왼쪽 픽셀 사이의 거리를 계산하십시오.
4. 다음 기준을 충족하면서 두 번째 글리프를 최대한 왼쪽으로 이동하십시오.
   • 해당 픽셀 행의 간격이 지정한 최소 간격보다 큽니다.
   • 총 면적 (글리프 중 하나에 픽셀이없는 행 무시)이 지정한 최소 면적보다 큽니다.

이렇게하면 글자 사이의 빈 '영역'이 꽤 일반적인 평균값으로 압축됩니다. 시행 착오와 자신의 취향을 사용하여 최소 간격과 최소 면적을 지정하고 수동 커닝 값과 같은 다른 에이전트에서도 이러한 매개 변수를 조정할 수 있습니다.

예이 :)

편집 : 나는 이것을 성공적으로 암시했으며 실제로 잘 작동합니다 :)

이것은 한 번 시도한 상당히 간단한 알고리즘이며 충분할 수 있습니다.

문자를 가로 또는 세로로 거의 같은 높이 (일반 자본의 높이)가 6 ~ 7 픽셀 인 낮은 해상도로 렌더링합니다. 간단한 저해상도 그리드에서 문자의 일부와 빈 공간이있는 간단한 이진 맵을 원합니다.

이 문자표를 "완료"하십시오. 즉, 채워진 셀에 인접한 각 빈 셀을 채 웁니다. 이것은 글자 가장자리에 가장 가까운 빈 영역을 요구하므로 인접한 글자가 너무 가까워지지 않습니다.

결과 문자지도와 함께 "수평 테트리스"를 재생합니다. 중력이 왼쪽으로 작용하게하십시오. "a"의 팽팽한 왼쪽 "배"는 "T"의 오버 바 아래의 구멍으로 "떨어집니다". "a"는 몇 개의 세포를 움직였습니까? 글자의 실제 크기에 비례하여 크기를 늘리면 실제 고해상도 "a"를 왼쪽으로 얼마나 멀리 갈 수 있는지입니다.

자동 커닝 알고리즘이 이미 존재합니다. 아무도 바보가 아니며, 특히 추적이 비교적 타이트한 경우에는 특정 측면을 약간 손으로 잡고 수동으로 수정해야하는 경향이 있습니다.

그러나 이러한 알고리즘은 글꼴 파일 에서 생성 된 문자가 아닌 글꼴 파일에 커닝을 적용하기위한 것 입니다.

글꼴 파일에 자동 커닝을 적용하는 것을 고려 했습니까?

Fontforge (오픈 소스) 및 Fontlab (상업용)에는 자동 커닝 알고리즘이 포함되어 있습니다. 그것들은 상대적으로 가파른 학습 곡선을 가질 것입니다-글꼴 작동 방식의 기술적 측면에 익숙해야합니다.

또한이 iKern 사람입니다 이벤트 상용 글꼴 커닝 서비스 그가 당신을 위해 글꼴을 컨스하고 오히려 훌륭한 일을있다. 비용이 얼마나되는지 모르겠습니다.

나는 이것을 완전히 생각하거나 그림을 그릴 시간이 없었지만, 각 글리프를 수직으로 이등분하는 것에 대한 반 아이디어가있었습니다.

그런 다음 각 반에 대해 두 개의 수직 축을 결정하십시오.-이등분선-정확히 왼쪽과 오른쪽 극단의 절반- "무게"축-각면의 잉크의 절반

그런 다음 인접한 두 개의 글리프를 두 축의 상대 위치를 기준으로 테스트 반 글리프쪽으로 또는 멀어지게 이동합니다.

예를 들어, "AV"쌍에서 A의 오른쪽 절반은 왼쪽으로 무겁고 V를 "유치"합니다. V의 왼쪽 절반은 A가 "무거운"것으로 무겁기 때문에 서로 크게 커닝됩니다.

그러나 "AA"는 "AV"만큼 커질 것이라는 결점이 있다고 확신합니다.

대문자와 소문자를 고려할 때 고려해야 할 56X55=2652글꼴 쌍 상황이 있습니다. 글꼴 스타일을 변경하면 모든 솔루션이 사라지기 때문에 모든 솔루션이 쉽게 손상 될 수 있습니다.

가장 좋은 방법은 기계 학습 기술을 사용하고 신경망 연구 모델을 설정하고 여러 개의 커닝 된 텍스트 이미지 나 벡터 또는 이와 유사한 것을 가져 와서 해당 모델을 훈련시키고 훈련 된 모델을 사용하여 모든 종류의 글꼴을 지능적으로 조정하는 것입니다.

루트에서 글꼴을 완벽하게 조정하는 정적 알고리즘이 없기 때문에 기계 학습은 이러한 종류의 문제에 대한 좋은 해결책입니다!