その場でカーニング

ユーザーがテキストを入力したときにグリフの形状に基づいて文字のカーニングを自動的に計算するアルゴリズムを知っている人はいますか？

有効幅などの簡単な計算を意味するのではなく、文字間の視覚的に最適な距離を推定するためにグリフの形状を分析することを意味します。たとえば、3つの文字を連続して1行に配置する場合、中央の文字は、文字の形状に関係なく、線の中心に位置するように見える必要があります。例は、カーニングオンザフライ機能を啓発します。

オンザフライでのカーニングの例：

上の画像aは正しすぎるようです。これは、移行すべき一定量を向けてT、の真ん中にあるように思われるようにTとg。アルゴリズムは、Tおよびa（およびおそらく他の文字も）の形状を調べ、どれだけa左にシフトする必要があるかを決定する必要があります。この特定の量は、アルゴリズムが計算する必要があるものです-フォントの可能なカーニングペアを調べることなく。

手書きフォントを使用するjavascript（+ svg + html）プログラムをコーディングすることを考えていますが、それらの多くにはカーニングペアがありません。テキストフィールドは編集可能で、複数のフォントのテキストを含めることができます。この場合、オンザフライでカーニングすることで、平均的なテキストフローを確保できると思います。

編集：これの開始点の1つは、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"/>

アルゴリズム（またはJavaScriptコード）は、これらのパスを何らかの方法で調べ、それらの間の最適な距離を決定する必要があります。

私はこれが古いことを知っています。私は今、（何でも）ぐらついたテキストのWebGL実装でこれに取り組んでいます。私が取り組んでいるソリューションは次のようになります：

1. グリフペアのビットマップバージョンを取得します（または、必要に応じてベクトルを使用します）。
2. ピクセルの各行（またはベクトルを使用する場合は任意の垂直単位）について、両方のグリフに少なくとも1つのピクセルが存在することを確認します
3. 手順2を通過する各行について、最初のグリフの右端のピクセルと2番目のグリフの左端のピクセルの間の距離を計算します
4. 次の基準を満たしながら、2番目のグリフを可能な限り左に移動します。
   • そのピクセル行のギャップが、指定した最小ギャップよりも大きい
   • 総面積（グリフの1つにピクセルがない行を無視）が、指定した最小面積よりも大きい

このようにして、文字間の空の「領域」はかなり一般的な平均に絞られます。試行錯誤と独自の好みを使用して、最小ギャップと最小面積を指定します。また、手動のカーニング値のように、これらのパラメーターを他のエージェントによって調整できるようにすることもできます。

わーい ：）

編集：私は今これをうまく成功させました、そしてそれは本当にうまくいきます:)

これは、私が一度試したかなり単純なアルゴリズムであり、十分に良いかもしれません。

キャラクターを低解像度でレンダリングします-ほぼ同じ高さ（通常の首都の高さ）で6ピクセルまたは7ピクセルを水平方向に言います。シンプルな低解像度グリッド上で、空のスペースと文字の一部がある場所のシンプルなバイナリマップが必要です。

これらのレターマップを「ファッテン化」します。つまり、塗りつぶされたセルに隣接する空のセルをそれぞれ塗りつぶします。これは、文字のエッジに最も近い空の領域を要求するため、隣接する文字が近づきすぎないようにします。

作成されたレターマップで「水平テトリス」をプレイします。重力を左側に作用させます。「a」の膨らんだ左側の「腹」は、「T」のオーバーバーの下の空洞に「落下」します。「a」が移動したセルの数は？文字の実際のサイズに比例して拡大し、実際の高解像度 "a"を左にカーニングする距離です。

自動カーニングのアルゴリズムはすでに存在しています。特に誰もが追跡が比較的きつい場合は、特定の側面を少し手で握って手動で修正する必要がある傾向があります。

ただし、これらのアルゴリズムは、カーニングをフォントファイルに適用するためのものであり、フォントファイルから生成される文字には適用されません。

フォントファイルに自動カーニングを適用することを検討しましたか？

Fontforge（オープンソース）およびFontlab（商用）には、自動カーニングアルゴリズムが含まれています。彼らは比較的急な学習曲線を持っているでしょう-あなたはフォントがどのように機能するかの技術的側面に精通している必要があります。

ありiKern男であるという申し出商用フォントカーニングサービス、彼はあなたのためにフォントをカーニングとかなり優れた仕事をしていませんとなります。どれくらいかかるかわかりません。

私はこれを十分に検討したり、イラストを描いたりする時間はありませんが、最初に各グリフを垂直に二等分することに基づいた半分のアイデアを持っていました。

次に、各半分について、2つの垂直軸を決定します。-二等分線-左端と右端のちょうど半分-「重量」軸-両側のインクのちょうど半分

次に、2つの軸の相対位置に基づいて、隣接する隣接するグリフをテストハーフグリフに近づけたり遠ざけたりします。

したがって、たとえば、「AV」のペアでは、Aの右半分は左が重く、Vを「引き付け」ます。Vの左半分はAを「引き付ける」右が重いため、これらは大幅にカーニングされます。

ただし、「AV」と同じくらい「AA」が一緒にカーニングされるという欠点があると私は確信しています。

大文字と小文字を考慮すると、56X55=2652フォントペアの状況に注意する必要があります。フォントスタイルを変更すると、すべての解決策が簡単に壊れてしまい、すべてのルールが失われます。

最良の方法は、機械学習手法を使用し、ニューラルネットワークスタディモデルを確立して、複数のカーニングされたテキスト画像またはベクトルなどをインポートし、そのモデルをトレーニングし、そのトレーニング済みモデルを使用してあらゆる種類のフォントをインテリジェントに調整することです。

ルートでフォントを完全に調整する静的アルゴリズムがないため、機械学習はこの種の問題の良い解決策になります！