Xterm.js: フォント合字をサポートする

通常の合字には興味がないと思いますが（実際、 liなどの合字を有効にするのは悪いことです）、 == 、 !==場合は=>など。 これは、firaコードの等幅フォントでサポートされている合字の素晴らしいリストです。
https://github.com/tonsky/FiraCode/blob/master/showcases/all_ligatures.png

結紮の半分が異なる色である場合はどうなりますか？ それをどのように処理しますか？

@LoganDarkは、通常の合字でも機能しますか？ それとも、色が違うと分裂するのでしょうか？

いいえ、いいえ。

手動でテキストを描画していると思いますが、合字をレンダリングする方法を理解しているので、txtjsからレンダリングコードを取得できるかどうか疑問に思います。 http://txtjs.com/examples/Text/ligatures.html

@devsnek実際にテキストのレンダリングを行うことは問題ではないと思います。 問題は、どのキャラクターが結合して一緒に描画できるかを知ることです（現在、「==」は「==」ではなく「=」および「=」として描画されます）。

@Tyriarは、私たちの介入なしにフォントレンダラーが

@devsnekはい。ただし、グリッド内の各セルは、いくつかの例外（絵文字、幅の広いUnicode文字）を除いて個別に描画されます。 合字はどういうわけかそのリストに含まれる必要があります。 詳細については、 https：//github.com/sourcelair/xterm.js/pull/938を

@devsnek IT'S YOU

免責事項：完全にトピックから外れ、ランダムなコメントのみ

@LoganDarkは、通常の合字でも機能しますか？ それとも、色が違うと分裂するのでしょうか？

私たちは、他のエミュレータがそれらを処理する方法によりつもりなら、彼らは別の色である場合に予想されるように、分割のですか。 これにより、たとえばViMの一部の言語蛍光ペンで記号を正しく表現できるため、これはほぼ要件です。

基礎となるすべての文字のレンダリングモードが同じでない場合は、個々のシンボルを表示することはまったく問題ないと思います。

@ Qix-私の提案は、すべてのテキストを一度に描画してから、ポストで色付けを行うことです。 これにより、合字の問題が解消され、合字のペアを検出する必要がなくなります（ただし、可変幅フォント、または整数幅がわずかにずれている/ない等幅フォントとの互換性が失われます）。

@LoganDarkのマルチカラーの合字は奇妙に見え、IMOに色を

ええ、私はマルチカラーの合字がうまくいくとは思いません。 また、複数ではなく単一のグリフが最初に描画される、その下での動作にも反します。

明確にするために、これはどの文字シーケンスが合字を持っているかを検出するための良い解決策を待っています。 これを適切に行うには、フォントファイルをチェックする低レベルのコードが必要になる可能性があります（したがって、ネイティブノードモジュールである必要があり、Webコンシューマーでは機能しません）。この情報はWebプラットフォームに公開されていないと思います。

ハイパーリリースされた2.0.0が安定したので、合字の回避策にはより高い優先順位が必要になる可能性があります。

ref https://github.com/zeit/hyper/issues/914#issuecomment -361034148

グリフマッピングを手動で決定することは、難しい問題です。 私が言えることから、これからまともな経験をするためには、以下が必要です：

1. 選択したフォントファミリを、実際のフォントデータ（otf / ttf / woff / etc）を含むファイル/バッファにマップし直します。
2. フォントのGSUBテーブルからデータを解析し、それをグリフ置換の
3. ある種のマップまたはマッピング関数をxtermに渡して、特定の文字シーケンスに対して何をレンダリングするかを決定します

私は、各ステップがどれほど難しいかを理解するために、 Fira Code （特にそのオタクフォントバリアント）を最初に調べました。 私はこれを引き受けるのに十分な野心を感じている（またはフォントの合字を十分に気にかけている）かどうかはまだ決めていませんが、知識が失われないように私が見つけたものは次のとおりです。

• ブラウザAPIを使用してフォントデータをフェッチする方法がないため、これはxterm.jsの直接の機能としては機能しませんが、xterm.jsによって公開されるフックを備えた個別のパッケージ/拡張機能として機能する可能性があります。

• フォントのCSS font-family名をWindowsのフォントファイルにマッピングするのは面倒ですが、実行可能に見えます。 これまでのところ、私が見つけた唯一の方法は、 %WINDIR%\Fonts内のすべてをフェッチし、見つけたすべてのファイルを解析することです（ネタバレ：本当に遅いです）。 他のプラットフォームはまだ試していません。 （注：レジストリから名前を削除しようとしましたが、オタクフォントなどの一部のフォントでは名前が一致しません。レジストリの名前に含まれていない「優先」ファミリとサブファミリが使用されます。ただし、css font-familyで使用されます。興味がある場合は、レジストリキーはHKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Fonts ）

• OpenTypeフォントテーブルの完全な解析を行うopentype.jsというライブラリがあり、基本的な合字を処理するfont.stringToGlyphs(str)関数もありますが、Fira Codeの合字（および他の一般的な合字フォントのすべてではないにしてもいくつか）があります。 opentype.js（ Plannedの下にリストされて

• Fira Codeの合字（および他の合字）は、実際には、元のグリフを、（モノスペースフォントのプロパティを維持するために）単一の非常に幅の広いグリフではなく、同じ数のグリフに置き換えます。 ==>ような文字列の場合、フォントは2つの「LIG」文字（基本的には空のスペース）に置き換えるように指示し、その後に合字の実際のグリフが続きます。これは技術的には1つのモノスペースのみです。文字幅。 一見単一の幅であるにもかかわらず、最後の文字のパスは、文字の境界ボックスの左側を超えて、その前の2つのLIG文字が占めるスペースをカバーします。 ビジュアルについては、以下を参照してください（0と600はキャラクターのボックスの側面です）。 これがレンダラーのタスクを複雑にするのか、それともxterm.jsに渡す前に変換する必要があるのか​​はわかりませんが、注意が必要です。

• これのもう1つの問題は、結紮糸をいつ再評価するかを決定することです。 たとえば、 = 4回続けて入力した場合、望ましい動作は、単一の等号、次に二重の等号、次に三重の等号、次に4つの別々の等号を表示することです。 結紮をクリアするためのコンテキスト代替ルールには実際にはマッピングがあります（つまり、現在の入力が「=」で、前の3文字が「===」の場合は、まったく再マッピングしないでください）が、それらのルールを適用する方法を理解するために。

• OpenTypeは複雑です。 確かに、私はフォントレンダリングの専門家ではありませんが、さまざまなタイプのレンダリングにつながる可能性のあるバリエーションの数はかなり広範囲です。 マッピングを行う組み込みライブラリがない場合、これを攻撃する最も合理的な方法は段階的に行うことだと思います。 Fira Codeは、特にチェーンコンテキスト置換フォーマット3を使用していますが、別のフォントを使用する人気のあるフォントは他にもあると思います。 それぞれのセマンティクスはわずかに異なるため、1つから始めて、そこから始めるのがおそらく理にかなっています。

@princjef探索を共有してくれてありがとう、本当に本当に役に立ちました！ 私も数日前にこのトピックにいくつかの考えを入れていました、そして私は次の結論に達しました：

• 組み込みAPIを使用してWebフォントの合字を検出することは不可能のようです（あなたが説明しているように）
• フォントがサポートしている場合でも、端末では意味をなさない特定の合字があります（例： li ）
• サポートされる意味のある合字の非常に小さなサブセット、つまりほとんどのFiraCode合字があります。
• 複数のセルにまたがる文字の描画とクリアのサポートを追加することは、現在の単一文字ベースのレンダリングアプローチ（CharAtlas）では実装が非常に困難です。

TBH、現在の状態で合字をサポートするために努力する価値はないと思います😔

@mofux実際には、別の角度からアプローチすることで、xterm.jsで合字をレンダリングする（やや口当たりの良い）方法を見つけたと思います。 最初の調査で、キャンバスが自動的に合字をレンダリングすることをどういうわけか見逃しました。 合字をサポートすることは、関連する文字が一緒にレンダリングされることを確認することの問題になります。

そのために、テキストレンダラーを微調整して、同じ属性（fg、bgなど）を持つ文字を単一のグループとしてレンダリングしました。 これは、すべての合字を正しくレンダリングするわけではありません（また、そうではないものもレンダリングする可能性があります）が、誰かが見たいと思う場所に合字をレンダリングする必要があります。 これは、Firaコードを使用したデモアプリのNeoVIMのスクリーンショットです（Firefoxに表示され、Chromeでも機能しますが、Edgeでは機能しません）。

人々が見てみたいなら、ブランチはここにあります： https ：

これに関するいくつかの注意：

• 私はベンチマークを行っていませんが、これはパフォーマンスに良くないだろうと確信しています。 同じスタイルのキャラクターをすべてグループ化することで、合字がない場所でも、キャラクターアトラスは基本的にウィンドウの外に投げ出されます（どこにあるかわからないため）。 複数の文字を一緒にレンダリングするときは、文字コードをInfinityに設定するだけで、キャッシュを回避できます。
• 文字の幅と重なりの周りに、私が正しく処理していないエッジケースがいくつかある可能性があります。 これは、ほとんどの場合、現時点での概念実証です。

文字アトラスを使用してテキストをレンダリングし、アイドル状態のときにテキストのブロックとしてバックラウンドで再レンダリングするのはどうですか？ 2つの結果が同じ画像になる場合は、結合されたテキストを破棄して、アトラスに戻すことができます。 バックグラウンドでテキストの文字列を分割することにより、どのテキストの文字列が合字であるかを知ることができるかもしれません。

それに関するトリッキーな部分は、リガチャーのレンダリングが、リガチャーによって置き換えられた文字だけでなく、それらのコンテキストにも依存することです。 たとえば、「=== 1」は3つの等号を合字としてレンダリングする必要がありますが、「====」は同じ3つの等号を別々の文字としてレンダリングする必要があります。 このコンテキストの大きさに制限はないため、リガチャーが出力からレンダリングされるタイミングのルールを決定するのは難しく、エラーが発生しやすい可能性があります。

より信頼性の高い（ただし移植性が低い）アプローチは、フォントメタデータを認識している別の関数によって提供される合字範囲に関するヒントを取得することです。 次に、外部関数によって提供される範囲以外のすべてをアトラスを使用してレンダリングできますが、指定されたグループは上記のようなアプローチを使用できます。 テキスト行を指定して置換の場所を決定するのはかなり速いはずですが、前に詳しく説明したいくつかの問題があります（主に、初期化時に適切なフォントを見つける速度/信頼性と、OpenTypeコンテキスト代替の処理の複雑さ）。

合字を有効にする設定があるのは合理的でしょうか？
ターミナルまで一度に全線？ これはそうなるようです
正しいレンダリングを保証し、パフォーマンスへの影響はオプトインになります
スピードよりも合字を気にする人。

日、2018年4月22日には、午前16時21ジェフ・プリンシペの[email protected]は書きました：

それに関するトリッキーな部分は、結紮のレンダリングが依存しているということです
結紮によって置き換えられた文字だけでなく、それらのコンテキストについても。
たとえば、「=== 1」は3つの等号を合字としてレンダリングする必要がありますが、
'===='は、同じ3つの等号を別々の文字としてレンダリングする必要があります。
このコンテキストの大きさに制限はないので、難しいでしょう。
結紮がレンダリングされるタイミングのルールを決定するためにエラーが発生しやすい
その出力からだけ。

より信頼性の高い（ただし移植性が低い）アプローチは、
フォントを知っている別の関数によって提供される合字範囲
メタデータ。 次に、外部関数によって提供される範囲以外のすべて
アトラスを使用してレンダリングできますが、指定されたグループは
上記のようなアプローチ。 置換の場所の決定
与えられたテキスト行はかなり速いはずですが、いくつかの問題があります
前に詳しく説明しました（主に、適切なフォントを見つける速度/信頼性
OpenTypeコンテキスト代替の処理の初期化と複雑さ）。

—
このスレッドにサブスクライブしているため、これを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/xtermjs/xterm.js/issues/958#issuecomment-383420281 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AAKyryMlayIQijY32GpWBmpvCUi13Wfbks5trRBigaJpZM4PRej6
。

@princjefうわー、あなたの編集はとても簡単にフォローでき、xtermはレンダラーで合字をサポートできるようです。 秘訣は、ルールをマップする方法を理解することです。 これは私に希望を与えます。

@princjef素晴らしい調査！

ブラウザAPIを使用してフォントデータをフェッチする方法がないため、これはxterm.jsの直接の機能としては機能しませんが、xterm.jsによって公開されるフックを備えた個別のパッケージ/拡張機能として機能する可能性があります。

@princjef私は最終的な合字サポートが次のように生きていると思います：

• some-magical-package ：ネイティブノードモジュールはネイティブフォント情報を取得し、可能であればWebフォント文字列をファイルにマッピングします。 これは、パフォーマンスへの影響を減らすためにAsyncWorkerで実行できます。 これが怠惰に行われ、最初の起動時にスキャンして更新を行うのに数秒かかる場合は、大したことではありません。

• xtermjs/xterm-ligature-support ：ノードに依存し、 some-magical-packageを使用してフォント情報を取得およびキャッシュするアドオン。 このアドオンは、認識されないフォントがfontsディレクトリで検出されるたびにスキャンを実行し、フォントが削除されると削除する可能性があります。 大まかなAPIとして次のようなものを期待しています。

  /** Returns a list of characters to be drawn together */
  export function getLigatures(fontFamily: string): string[] { ... }
  

フォントがサポートしている場合でも、端末では意味をなさない特定の合字があります（例：li）

@mofuxこれについて心配する必要があるかどうかわかりませんか？ ユーザーが合字を要求した場合、それらすべてをレンダリングするべきではありませんか？

複数のセルにまたがる文字の描画とクリアのサポートを追加することは、現在の単一文字ベースのレンダリングアプローチ（CharAtlas）では実装が非常に困難です。

@mofux隣接する文字のセットを一緒に描画する関数を非常に簡単に追加できるはずです。

@princjef ：ベンチマークは行っていませんが、これはパフォーマンスに良くないだろうと

@wavebeem ：

キャンバスの使用によるパフォーマンスの向上はほぼ完全に打ち消されると思います。 また、オプションの数を最小限に抑えたいので、サポートを追加するためのアドオンが含まれている場合は、合字が機能する場所に到達するようにしてください。

また、パフォーマンスに関しては、ChromiumのGPUサポートで問題が発生する可能性があることが多すぎるため、今後数か月以内にフォールバックDOMレンダリングオプションの追加に取り組む予定です。 https://github.com/xtermjs/xterm.js/issues/1360を参照して

文字アトラスを使用してテキストをレンダリングし、アイドル状態のときにテキストのブロックとしてバックラウンドで再レンダリングするのはどうですか？ 2つの結果が同じ画像になる場合は、結合されたテキストを破棄して、アトラスに戻すことができます。

@ j-f1これは思ったより難しいです。 文字が同じようにレンダリングされても、文字アトラスの間隔が異なるため、2番目の文字は異なります（文字は常に丸い数字で描画されます）。 これを機能させるには、さらに多くのレンダリングを行う必要があり、多くの差分ピクセルが高価になります。

@Tyriarあなたが説明した一般的なデザインはかなっていると思います。 some-magical-packageでフォントを見つけるためにネイティブコードに依存しないものを回避できるかもしれませんが、それは間違いなくプラットフォーム/ファイルシステムに依存します。 コンテキストの代替置換を解析することから始めましたが、それを正しく行うためにどれだけ多くの時間がかかるかを言うのは難しいです。

また、 some-magical-packageとは少し異なるインターフェースが必要になると思います。

export function getSubstitutionRanges(fontFamily: string, text: string): Promise<[number, number][]>;

合字自体を決定するためのルールは複雑であり、フォント自体にかなり深く組み込まれています。 フォントデータ自体を渡してxterm.jsで解釈する負担をかけるのではなく、他のlibに任せて、どの文字を一緒にレンダリングするかをxterm.jsに指示させます。 コンテキストの先読み/後読みの側面も解析を複雑にします。 たとえば、「===」は合字にマップされますが、その後に別の等号が続く場合はマップされません。

置換範囲の概念に関する別の注意：私が言えることから、単一の合字の境界の明確な描写はありません（少なくとも文脈上の代替を使用する場合）。 個々の文字に適用される置換のシーケンスがあります。 合字が連続している場合に境界を把握するための秘訣をいくつか見つけましたが、それはおそらく絶対確実ではありません。 2つの合字を誤って分割するのではなく、誤って2つの合字を1つとして扱うことは、1つのグループとしてまとめてレンダリングした場合でも正しくレンダリングされるはずなので、おそらく間違いです。 そこにある唯一の本当の問題は、それに異種のスタイルを適用することです。

そこにある唯一の本当の問題は、それに異種のスタイルを適用することです。

しないでください。 連続スタイルの各文字列を個別に関数に渡します。 あなたは下線が別々に描かれている場合は、下線付きのテキストのための例外を作ることができるかもしれません。

ネイティブコードに依存しないもので逃げることができるかもしれません

👍

合字自体を決定するためのルールは複雑であり、フォント自体にかなり深く組み込まれています。 フォントデータ自体を渡してxterm.jsで解釈する負担をかけるのではなく、他のlibに任せて、どの文字を一緒にレンダリングするかをxterm.jsに指示させます。

@princjefこれはさらに良く聞こえますが、この領域でxterm.jsが行う必要が少ないほど良いです。

そこにある唯一の本当の問題は、それに異種のスタイルを適用することです。

他にこれを行おうとするものはないと思います。同じスタイルを使用するテキストの合字のみを追加する必要があります。

これはフォント側で実行可能に見えます。 すべてのFiraCode合字を正常に解析し、文字を組み合わせるための適切な範囲を提供するコードがいくつかあります。 サポートを探している他のフォントが1つか2つある場合は、それらも確認してみてください。 これまでのところ、Fira Codeに必要な置換タイプのみを実装しているので、他の置換タイプを実行するためにいくつかの種類を歓迎します。

それでもフォントルックアップ部分を理解する必要があります。 次にそれに焦点を当てるつもりです。 そこにいくつかのパッケージがありますが、それらはすべてバグがあるか、不十分に維持されているようです

@princjef他のフォントをチェックしたい場合は、 Iosevkaを使用してい

了解しました。 font-ligatures （別名some-magical-package ）というパッケージといくつかの関連パッケージを作成しました。これにより、適切なフォントを効率的に見つけて、特定のテキスト入力の合字がどこにあるかを把握できます。

フォントを見つけるプロセスを最適化するのに少し時間を費やしました。 〜150 ttf / otfフォントのSurfacePro 4では、300〜400ミリ秒ですべてのフォントメタデータを取得できます。 これは主にI / Oバウンドであり、ロード中の最初の数回のレンダリングサイクルでバックグラウンドにキックできますが、ptyが起動してテキストを吐き出すまでに、ロードするのに十分な速度である必要があります。 ロードされたら、レンダリングをトリガーして、すでに存在する可能性のあるテキストを更新できます。 これは、フォントが変更されるたびに繰り返すことができます。または、最初に完全なリストをキャッシュすることもできます（とにかく、最初に完全なリストをフェッチします）。

合字マッピング自体に関しては、ライブラリは文字列を受け取り、一緒にレンダリングする必要がある文字のグループを含む、フォント合字に関するメタデータを返します。 CIには、Fira Code、Iosevka、Monoidのすべての合字のテストが含まれているため、実行する置換タイプに対して正しく処理されると合理的に確信しています（ただし、他のタイプを使用するフォントがいくつかあると確信しています）。私は実装していません）。

しかし、私は結紮解析の最適化/調整に時間を費やしていません。 私はいくつかの簡単なテストを行いましたが、合字の解析には中程度の長さの文字列（読み取り：1行）で2〜20ミリ秒かかるようです。 まだまだ最適化の余地があるので、今のところあまり心配していません。 私は主にこれを取り出してインターフェースをデモンストレーションし、必要に応じて人々にタイヤを蹴らせたいと思っていました。

@princjefはかなりクールに見えます！ 0xc0ffee 、 0x1234 、および17x32テストをFiraコードに追加することについてどう思いますか？ （ xはそれらの時間記号に変わります）

@princjef素晴らしい！

いくつかの簡単なテストを行いましたが、合字の解析には中程度の長さの文字列で2〜20ミリ秒かかるようです（読み取り：1行）

これをチェックする重要なコードのいくつかを教えていただけますか？

@ j-f1はい、それらも機能します： https ：

@Tyriar私はあなたが遊ぶことができる基本的なベンチマークを追加しました。 呼び出しパターンはnode bench/lines.js <font-name> <input-text> [iterations]ます。 複数行の文字列を渡すか、テキストの入力ファイルを展開することもできます。これにより、行が循環して、まったく同じ入力が繰り返し実行されることによる非現実的な最適化を回避しようとします。

それを書いているときに、複数の異なる入力行を使用した場合でも、最初の実行後にパフォーマンスが大幅に向上することに気付きました。 約10文字の入力の場合、Iosevkaの平均は1ミリ秒未満、FiraCodeの平均は0.5ミリ秒強です。 私が特別なケースを打つか、ターボファンがそれを魔法のように働いているかのどちらかです。 そのまま使用するにはまだ十分効率的ではありませんが、次にパフォーマンスの最適化に焦点を当て始めます（その時点で、改善の感覚を得るために、おそらくより良いベンチマークも追加します）。

いくつかのメモ：

• 置換の動作方法により、実行時間は入力のサイズに比例してスケーリングすると予想されますが、これは検証していません。
• 結紮の数と置換の仕組みにより、Fira Codeは、IosevkaやMonoidよりもはるかに多くのパフォーマンスを解析に使用します。 Fira Codeを実行するには、Iosevkaの5〜10倍の時間がかかることがよくあります。
• 合字のないフォントははるかに高速に実行され、さらに最適化できます。 フォントにコンテキストの代替がない場合は、空の結果セットを使用して高速終了を実行できます（または、より高いレベルで呼び出しをバイパスすることもできます）。

作成したパッケージ（https://github.com/princjef/font-ligatures/issues/2）で、問題のパフォーマンスの側面の追跡を開始しました。 いくつかの構成でそこからコピーされた初期の数値は次のとおりです（すべての数値はミリ秒単位の時間です）。 最初の5つの数字列は入力行ごとで、最後の2つは文字ごとです。 最後から2番目の列は、私が最も注意を払っている列です。 1文字あたり約0.5マイクロ秒（ミリ秒単位で0.0005）で撮影しています：

名前| AVG | STDEV | 5％| 50％| 95％| AVG（CHAR）| STDEV（CHAR）
----------------------- | ------- | --------- | ------ | -------- | ------- | ------------- | --------------------------------
Firaコード：code.txt | 5.9570 | 12.6951 | 0.5270 | 5.1020 | 12.2330 | 0.1443531 | 0.2091743
フィラコード：noLigatures.txt | 12.1932 | 3.4402 | 8.1420 | 12.1205 | 15.5900 | 0.1321094 | 0.0334362
Iosevka：code.txt | 0.5571 | 1.4722 | 0.0485 | 0.3215 | 1.6155 | 0.0135005 | 0.0333483
Iosevka：noLigatures.txt | 0.7476 | 0.4230 | 0.4365 | 0.6030 | 1.7725 | 0.0080998 | 0.0044501
モノイド：code.txt | 0.8896 | 1.6637 | 0.0910 | 0.6625 | 1.9225 | 0.0215566 | 0.0482166
モノイド：noLigatures.txt | 1.6661 | 0.6935 | 1.0695 | 1.4450 | 2.6910 | 0.0180521 | 0.0071922
Ubuntu Mono：code.txt | 0.0402 | 0.3935 | 0.0080 | 0.0220 | 0.0605 | 0.0009735 | 0.0090228
Ubuntuモノ：noLigatures.txt | 0.0356 | 0.0644 | 0.0120 | 0.0280 | 0.0805 | 0.0003858 | 0.0006891

優れたベースラインデータが得られたので、パフォーマンスを微調整するたびに得られるメリットについてよりよく理解できます。

@Tyriar xterm-ligature-supportパッケージがどこにあり、どのようにそこに到達するかについての好みはありますか？

xtermjs組織（私には合理的に聞こえます）の下に置くべきだとあなたが考えているようですが、私には組織内のリポジトリを作成/プッシュする機能がありません。 組織に移行されるユーザーの下のリポジトリに配置しますか、それともPRを送信できるスタブリポジトリを作成しますか？

レビューの観点からは、最初に＃1460を完成させるのが理にかなっているので、急いでいませんが、準備ができたらコードをどこにダンプするかを考えたいと思います。

@princjef https://github.com/xtermjs/xterm-ligature-supportを作成し、管理者アクセス権を付与しました。 他のアドオンがどのように機能するかを見たことがあると思いますが、これが最初の公式の外部アドオンになります。 したがって、実装のリファレンスとして内部アドオンとhttps://github.com/CoderPad/xterm-webfontを使用して

すぐにPRをチェックします👍

このhttps://github.com/microsoft/vscode/issues/34103のvscodeリポジトリに更新を投稿しました。これは、xterm.jsでクローズと呼ぶ前の残りの作業です。

• xtermjs / xterm-addon-ligaturesをxtermjs / xterm.jsリポジトリに統合します。これにより、自動公開が可能になり、テストが引き続き合格するようになります。
• 合字をデモに接続します
• 結紮が機能していることをすべてのレンダラー（dom、canvas、webgl）で検証するいくつかのパペッティアテストを設定します
• 依存関係を可能な限りスリム化する

みなさん、ここで頑張ってくれてありがとう！ 😄👍

@Tyriarさん、質問があれば、Webブラウザをサポートする予定はありますか？

これはブラウザでも機能することもわかりましたが、非常に遅くなります。 私が尋ねるかもしれませんが、ブラウザで動作したこのバージョンはどれくらい遅かったですか？

ありがとう！

@ torch2424リガチャーのサポートはフォントファイルの解析に依存しているため、レンダラーがどのように機能するかは不可能だと思います（ユーザーが提供するリガチャーのようなハードコードなし）。

@Tyriar迅速な対応をありがとう！

それは残念なことですが、持っていてよかったです。 私たちは電子バージョンを検討しているので、多分それを含まれる機能として持つでしょう😄ありがとう！

うーん、ウェブフォントを使用し、同じフォントファイル（urgh）をJSレルムにロードして、リガチャーデータを抽出することで可能になると思います。 結紮糸の抽出はパフォーマンスにかなり大きな凹みがあるため、これが実行可能であるか、この方法で行う価値があるかどうかはわかりません。 memの使用法についてはよくわかりませんが、フォントファイルはかなり大きくなる可能@ princjefには、実行時の動作に関するいくつかの数値がありますか？

調べてからしばらく経ちましたが、Webフォントでもブラウザで生のフォント情報を抽出するAPIが組み込まれていなかったのを覚えています。

ファイルから独自のWebフォントを手動でロードし、同じファイルのコンテンツを合字を解析するためのコードに個別に挿入する場合、レンダラーでのグリフキャッシュの最適化をあきらめることなく理論的に実行できます。 とは言うものの、既存のアドオンは、ブラウザ以外の場合よりも多くの調整と手動配線を必要とするため、そのユースケースを念頭に置いて設計されていません。

結紮糸の抽出はパフォーマンスにかなり大きな凹みがあるため、これが実行可能であるか、この方法で行う価値があるかどうかはわかりません。 memの使用法がわからない場合、フォントファイルはかなり大きくなる可能性があります

これは、特定のフォントでは間違いなく問題になる可能性があります。 結紮処理パッケージは、ルックアップ/検出の効率のために大幅に最適化されていますが、今のところ、ロード時間とメモリ消費が長くなります。 フォントごとに大幅に異なりますが、覚えておくとよいでしょう。

合字情報の抽出が可能であったとしても、Web APIはテキスト/文字コードポイントを使用しますが、フォント内の合字は、描画のためにWebAPIに直接渡すことができないフォント固有のグリフインデックスを使用します。

@princjef Thxは頭を上げて、これは面倒に聞こえますが、後でそれが与える利益には価値がありません。

@khaledhosnyアイデアは、コードポイントを操作しながらJSのフォントから合字情報を取得し、ブラウザーのフォントレンダラーに低レベルの処理を実行させることに関するものでした（同じフォントを使用している場合）。 グリフの抽出と独自のレンダリングがJSだけで実行できるかどうかはわかりません（笑、JSベースのフォントレンダラーですか？これが実行可能であっても、パフォーマンスが非常に悪いでしょう）。

これを更新し、合字アドオンをコードベース（https://github.com/xtermjs/xterm.js/pull/2847）にマージしました。まだ少し壊れている可能性がありますが、統合テストのセットアップなしではわかりません（ https://github.com/xtermjs/xterm.js/issues/2896）。

現在、アドオンはブラウザー+ノードランタイム（つまり、electron）でのみ実行されますが、ノードの詳細を削除してこれをVS Code（https：/ /github.com/microsoft/vscode/issues/34103）。 https://github.com/xtermjs/xterm.js/issues/2897を試してみたい人がいたら、助けが必要というラベルが付けられてい

合字アドオンにFontAccess API （現在オリジントライアル中）を使用することを検討する必要があります。

私はウェブ上でターミナルを共有し、xterm.jsを使用するttydを使用しています。 下の画像にあるように、アイコンが正しくロードされていません。 それらは元の端末に表示されます。 しかし、ウェブ上ではそれらは欠落しています。

@UziTechああ、すごいですね！ この分野で行われる作業はすべて、フォントアクセスAPIで活用できるように、前向きである必要があると思います。

@UziTech @Tyriar @princjef
フォントアクセスAPIのコードはfont-ligaturesパッケージに入れることができると思います。
プロセスがブラウザまたはノード/電子のどちらにあるかを検出した後、フォントアクセスAPIを呼び出すか、現在のメソッドを使用するかを決定できます。

ハッキーな概念実証を作成し、フォーク（localFontsブランチ）のデモで実行しました。

chrome://flags #font-accessを有効にした後で試してみることができます（フォントへのアクセスを許可した後、一度更新する必要があります）

これがあなたに良さそうなら、私はprを開いてみることができます。

プロセスがブラウザまたはノード/電子のどちらにあるかを検出した後、フォントアクセスAPIを呼び出すか、現在のメソッドを使用するかを決定できます。

Webのみのプロジェクトではノードの詳細をバンドルする際に問題が発生するため、このソリューションで問題が発生することになります。 その答えはありませんが、機能の検出が成功した場合はデフォルトを反転し（最終的には？）、フォントアクセスをデフォルトにする必要があると思います。それ以外の場合はフォールバックします。

それを機能させるのも素晴らしい仕事です！ それは素晴らしいです😍

必要な場合にのみ、機能検出後にrequireできます。
また、依存するWebのみのプロジェクトは、バンドル中にそれらを外部としてマークできます。

ブラウザー間で使用できるようになったら、フォントアクセスAPIをデフォルトとして使用できます。

👍回避策があるとおっしゃっているので、バンドラーの懸念について考えすぎているかもしれません。 とにかくElectronでフォントアクセスがオンになったら、Electronオプションを非推奨/段階的に廃止する予定です。

@Tyriarフォントファインダーのアップデートで合字アドオンのリリースをすぐに入手できますか？

@UziTech [email protected]はずです、4.10のバージョンをバンプするリマインダーを作成しましたhttps://github.com/xtermjs/xterm.js/issues/3220

これを行うための最初のステップとして、pr princjef / font-ligatures＃22を開きました。