問題タブ [kerning]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
688 参照

php - TCPDF はカーニングをサポートしていますか?

ここで説明されている AV のようなペア間の奇妙なスペースを防ぐペアごとの間隔を意味します。ウィキペディアのページではそうであると主張していますが、私のテストではカーニングはまったく表示されません。

バージョン 5.9.156 を実行しています。

0 投票する
3 に答える
5804 参照

objective-c - NSStringのパディング/文字間のスペース

文字列の各文字の間にスペースを追加する簡単な方法をObj.Cで探しています。したがって、「1234」は「1 234」のようになります。

私はここで完璧なJavaScriptの例を見つけました:https ://stackoverflow.com/a/7437422/949538

Obj.Cに似たものを知っている人はいますか?カーニングはiOSのPITAであり、これが最終的に私が必要とするすべてです...

考え/コメント?

ありがとう!-描いた

0 投票する
1 に答える
493 参照

ios - iOS の .ttf カーニング: カーニング情報を読み取る方法は?

iOS アプリケーション (cocos2d、OpenGL) でカスタム フォントを使用していますが、カーニングはありません。フォントには既にカーニング情報があります (私の Mac では、TextEdit と Pages のカーニング ペアは問題ないように見えます) が、アプリケーションでこのフォントを使用すると、カーニングが適用されません。iOS アプリケーションでカスタム .ttf フォントでカーニング ペアを使用する方法はありますか?

0 投票する
1 に答える
749 参照

css - firefox と ie10 の自動フォントカーニングを無効にしますか?

firefox と ie10 の自動フォントカーニングを無効にするにはどうすればよいですか? 解決策を探すのにしばらく時間を費やしましたが、時代遅れのページと実験的な方法しか得られません。

0 投票する
1 に答える
1535 参照

css - Safariは、optimizeLegibilityを備えたTypekitを使用して単語間隔を削除します

Typekitフォントとテキストレンダリングを使用して単語間のスペースを削除するSafariに問題があります:cssのoptimizeLegibility。

Chromeでうまく機能するので、Webkitの問題ではありません。Firefoxでもうまく機能します。私がoptimizeLegibilityを使用したい理由は、Webkitブラウザーでカーニングがひどいためです。

何をすべきかについての提案はありますか?

編集: ここでサンプルを作成しました (FirefoxとChromeではうまく機能しますが、Safari 5.1.7では機能しません(少なくともWindowsでは機能しません))

別の方法として、ChromeのようにFirefoxで開始点を取得するのを誰かが手伝ってくれる場合は、lettering.jsなどを使用して手動でカーニングすることができます。テキストレンダリングで動作させることができませんでした:optimizeSpeed;

編集:Typekitからこの回答を得ました:

この問題が発生してすみません。残念ながら、SafariとChromeのoptimizeLegibilityでこれらの問題のいくつかが発生しました。これは非常にランダムで、特定のフォントに影響を与えるようです。

申し訳ありませんが、Safari / Webkitにバグを報告する以外に、私たちの側でこれについてできることはあまりありません。

問題が発生しているフォントを教えてください。私に知らせてください、そして、私たちはそこからそれを取ります。

うまくいけば、彼らは何かを理解するでしょう:)

編集:Typekitからより多くの回答が得られました。

大きな見出しの場合は、CSSで設定を変更するだけです。そうすれば、Firefoxでも同じようにpoingを開始できます。

テキストレンダリング:optimizeSpeed;

これにより、Firefoxなどのテキストレンダリングが変更されます。次に、lettering.jsでカーニングできます。

これがお役に立てば幸いです。ご不明な点がございましたら、お気軽にお問い合わせください。

しかし、私はすでにそれを試したので、彼らに知らせました、そして残念ながら彼らはその問題で私をこれ以上助けることができませんでした。

さまざまなブラウザでどのように表示されるかを示す画像を添付しました。すべてWindows7を使用しています。

Abril Displayを使用した、さまざまなブラウザでのtypekitによるテキストレンダリング

0 投票する
3 に答える
2704 参照

css - chrome と firefox の間のフォントのカーニング

カスタムフォントのメニューに取り組んでおり、クロム(およびサファリ)では、希望どおりに正確に配置されています。

http://american-motorsports.net/2012/

Firefox で表示すると、フォントのカーニングが少し異なり、右端のメニュー項目に小さな黒い隙間ができます。FABRICATIONのFAの違いがわかる

現在、HTML は非常に単純です。

これまでのところ、CSSはこれで構成されています

問題は、クロムとサファリのように見えるようにギャップを削除する方法、またはカーニングの問題を修正する方法です..私はFirefoxでそのギャップを望んでいません

0 投票する
1 に答える
774 参照

php - テキストがSVGに並んでいない

質問

PHP(5.2.17)のGDライブラリからのカーニングをSVG(1.1)と適切に一致させるにはどうすればよいですか?

問題

PNGとSVGファイルのテキストは同一ではありません。カーニングはオフのようです。

状況

いくつかのテキストと位置データからSVGファイルと画像ファイル(PNG)を作成するWebアプリケーションがあります。

現在、すべてが作成されている限り、両方の実装が「機能」します。SVGファイルは適切に機能し、PNGは適切に機能します。私が抱えている問題は、テキストが整列していないことです。カーニングがオフになっているようです。

PNGがベースライン(複製しようとしているもの)になります。

私が欲しいもの

「行」の「l」を2行目の最後の「L」に合わせたい。 何が悪いのかを視覚化する

私が試したこと

  • SVGファイルとPNGファイルの両方に同じフォントを使用していることを確認しました。
  • 同じフォントであることを確認するために、base64でSVGを使用してフォントをエンコードしました
  • 私は山羊を犠牲にしました。

追加

  • PHPは5.3にブーストされます。私が試したすべてのPHP5.3サーバーで、同じ出力が得られます。
  • SVGバージョンも変更できます。
  • SVGはグループ化とviewBoxを使用できます。私はまだそれらをしっかりと把握していません。

デモ

http://resurrectionwebdesign.com/demo/demo_text.php

ソース
さて、ここにはかなりの量のソースがあります。私はそれを可能な限り単純化しようとしました。ただし、残っているものは必要です(少なくとも、誰もが実際にアクセスできるようにするため)。

更新/進捗状況

アップデート1

サーバーで生成されている画像やクライアントでレンダリングされているテキストと関係があるかどうかはわかりません。現在Windowsビルドを実行していますが、必要に応じてCentOS VMを起動し、VM上のイメージと、VM内のブラウザーからのイメージをテストします。

アップデート2

私は自分が知っているあらゆる方法でフォントを埋め込んでみました。これまでのところ、結果はすべて同じです。変換を試して、それが機能するかどうかを確認します。

アップデート3

わかった!いくつかの進歩!SVG WG委員会のメンバーが、SVGドキュメントからDoctypeを削除することを提案していることがわかりました。私はそうしました、そして今私はいくつかの異なる結果を得ています。それらがどれほど優れているかはわかりませんが、今は間違いなくさまざまなものを見ています。だからそれはプラスです。

アップデート4
(文だけでなく)各文字の間隔を明示的に設定しようとしましたが、それでもサイコロはありません。これはすべてをさらに相殺するようでした。そして醜く見えた。この機能はうまく機能し、画像には役立ちますが(CAPTCHAを分析する可能性がありますか?)

誰かが興味を持っているなら、ここにコードがあります:

アップデート5

「textLength」と呼ばれる強力な属性は、私にとっていくつかの助けになりました。まだ完全には機能していませんが、間違いなく大幅な改善です。私が抱えているスケーリングの問題はまだいくつかあります。それがまだ受け入れられるかどうかはわかりませんが、かなり近いです。

アップデート6

textLength要素が実行していることがわかりました。

ここに画像の説明を入力してください

したがって、ご覧のとおり、2行目の「最後のLを並べる」は、textLengthを使用せずに、並べる限り、ほぼ完璧に見えます。ただし、最初の行「1行に複数の単語」はひどいように見えます。すべてが途方に暮れています。ただし、textLengthを使用すると、はるかに適合しているように見えます。

アップデート7

私はそれを解決したと思います。「textLength」を実行して指定された長さに設定する代わりに、2px調整すると、かなりうまく整列します。わずかな違いは、サーバー上のピクセル幅とSVG配置の粒度が原因である可能性があります。それを変えるために私にできることが本当に他にあるかどうかはわかりません。確かにありますが、私は自分の質問に答えて、それを解決済みとしてマークします。

0 投票する
2 に答える
100 参照

javascript - 弧を描いたテキストの文字列の文字間の間隔が正しくありません。(HTML キャンバス)

ここを参照 - http://schnell.dreamhosters.com/nysbc/test6.php
JSFiddle - http://jsfiddle.net/VauFH/

文字を描く作品…

おそらくおわかりのように、色付きの円盤の上のテキストの間隔が少しずれています。文字ごとに一定量のラジアン/度を設定しようとしましたが、半径が遠くなるほど間隔が広くなるため、最も外側のテキストが急速に分離し始めます。また、各文字の間隔に半径を組み込む何らかの式を作成しようとしましたが、それもまったく正しくないようです。誰にもアイデアはありますか?

また、効率の微調整も同様に高く評価されます。私は可能な限り最適化されることを好みます。

0 投票する
1 に答える
861 参照

c# - 書体の文字のカーニングとスペーシングを調整するためのソフトウェアの構築

タイトルが示すように、.ttf ファイルと .otf ファイルを読み取って、ユーザーがカーニング、文字幅、文字間隔を調整できるソフトウェアを構築したいと考えています。freetype プロジェクトについては知っていますが、C で書かれており、C# と Python でしかコーディングできません。.otf および .ttf ロジックをコーディングするのはどのくらい難しいですか?

ありがとうモーフ

0 投票する
2 に答える
8545 参照

java - java.awt.font 文字間隔

java.awt.font を使用する場合、文字間隔を広げることはできますか? このようなもの: