問題タブ [text-rendering]

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 に答える
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 投票する
1 に答える
1426 参照

c# - 3Dでテキストを描く

私は3Dでテキストを描く方法を理解しようとしています。

現在、画面に表示する方法は2つあります。通常の3D空間を使用して世界をレンダリングし、追加のレンダリングを使用して、事前に変換された方法でそれを行うHUDをレンダリングします。

したがって、理想的には、テキストに対して同じことを行い、文字列を3D(「ビルボード」のような方法)と事前変換された方法(2Dモードを使用しているかのように)の両方でレンダリングする方法が必要です。

私が見つけたのは「Mesh.FromText」を使用することだけでしたが、それは私が必要としているものではないようです。ああ、また、スプライトバッチを使用してテキストをテクスチャに描画し、次にこのテクスチャをアルファブレンディングを使用して3Dで使用しますが、これもまた、それを行うにはくだらない方法のようです...

何か案は?

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

performance - 各文字に個別の配置と書式設定が必要な場合、テキストをすばやくレンダリングするにはどうすればよいですか?

フォーマットされたテキストを画面に表示しようとしています。最初に非常に単純なHTMLテキストが解析され(b、u、iのようなタグがあります)、次に各文字がCanvas.TextOut関数を使用して適切な位置とフォントでレンダリングされます。

私が最初に気付いたのは、キャンバス上のすべての個別の文字のレンダリングがかなり遅いということです。文全体のレンダリングははるかに高速です。キャンバスが強制的に再描画されたとき、フォームが画面上で移動したときは明らかです。

1つの解決策は、文字を均等なフォントでクラスター化し、一度にレンダリングすることです。しかし、フォーマットが豊富な場合は、あまり役に立ちません。さらに、文字は個別のエンティティである必要があります。これは、任意の方法でレンダリングできます。たとえば、テキストの配置をサポートするWinAPIはありません。taJustifyまたはブロック書き込み...

もう1つのアプローチは、ビットマップでレンダリングするかClipRect、TCanvasのプロパティを賢く使用することです(まだ試していません)。

とにかく、同じフォーマットのテキストがTRichEditに表示される場合、再描画操作による時間のペナルティはありません。もう1つの簡単な例は、すべての主要なブラウザです。これは、大量のフォーマットされたテキストを表示するのに問題はありません...私と同じように各文字をレンダリングしますが、より効率的に表示しますか?私は知らない。

それで、アプリケーションを高速化するためのレシピを知っていますか(フォーマットされたテキストレンダリング?)。

あなたのアイデアに感謝します...

サンプルコード:(TFormをできるだけ大きくし、マウスでつかんで画面の下にドラッグします。上に移動すると、「ジャンピー」な動きが表示されます)

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

c++ - テキストが正しくレンダリングされず、各文字が白い長方形になる

OpenGL アプリケーションでテキストを表示したかったのですが、既にウィンドウとコンテキストの作成に SFML を使用していました。別のライブラリを追加したくなかったので、SFML (2.0) が提供するテキスト レンダリングを使用してみました。

レンダリングされるテキストは、白い四角形で構成されています (四角形は、大まかに表示する文字の高さに一致します)。

OpenGL の状態を SFML テキストを使用する前と同じ状態に保つためにいくつかのメソッドを追加した後、他のすべては正しくレンダリングされます。これらのメソッドがなければ、何もレンダリングされませんが、色をクリアする適切なカラー バッファが使用されます。

テクスチャリングとライティングに GLSL を使用しています (必要に応じてソースとスクリーンショットを提供できます)。

私が使用するコード:

テキスト インスタンスは次のように作成されます。

3.3 Compatibilty Profile Context、3.3 GLSL、および 2.0 SFML (ソースからコンパイル) を使用しています。

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

html - 日本語の文字は、テキスト レンダリングが原因でクロムのボックスとして表示されます。

私のウェブサイトでは、Font-Awesomeライブラリを使用しています。text-rendering: optimizelegibility;ヘッダー タグにcss 属性を適用します。言語が日本語の場合、これにより私のウェブサイトが壊れます。

DEMOでわかるように、このプロパティを使用するとボックスが表示されます。このプロパティが何をするのかよくわからないので、auto にオーバーライドしても安全ですか?

注: このプロパティは、firefox では問題なく動作しますが、google chrome では問題が発生します。

手伝ってくれてありがとう :)

編集: この問題は window-XP に固有のものです

また、Chrome サイトで問題を開きました: http://code.google.com/p/chromium/issues/detail?id=159391

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

java - Graphics2Dのテキスト品質を向上させる方法は?

バーコードへの追加情報の印刷について質問があります。http://barbecue.sourceforge.net/を使用してバーコードを作成しています。

バーコードを作成した後、いくつかの追加情報を追加したいと思います。現時点では、次の方法でこれを行います!例えば:

出力はPDFで次のとおりです。 ここに画像の説明を入力してください

ご覧のとおり、私のテキスト(バーコードの上と下)の品質は本当に悪いです...テキストの品質を上げて、テキストをより滑らかにし、ピクセル化しないようにするにはどうすればよいですか?!

(バーコードを印刷すると、バーコードは非常にピクセル化されたように見えます...)

任意のヒント?

アップデート:

それで、ここに私の最新の結果の写真を追加しました...これらのバーコードを印刷すると、それらはひどいように見えます!だからここに私がしたコードがあります:

そのコードで私は最高の結果を得る!もちろん、「メトリクス、AA_GASP、LCS_HRGB、さまざまなフォント(Verdanaが私の意見では最高です)...」などを試してみましたが、バーコードがぼやけたために使用できなかったものもありました。だから実際に私はテキストの品質を改善できないという問題を強制しています-graphics2dからの巾着の品質!

そこで、「SSYYS」(フォントサイズ11)と「FLORETT」(フォントサイズ7)の見栄えを良くする可能性はないかと思います!JAVAで、フォントサイズが「12」未満の画像に「滑らかな」テキストを描画する可能性はありますか?それに対する回避策はありますか?写真でわかるように、「SとY」の文字は非常にひどいように見えます...

2回目の更新:

これまでのいくつかのサンプルコード...次のフォルダが存在することを確認してください:C:\ TestBarcodes \

私の問題が何であるかを想像できるように、コードを最小限に抑えたことを願っています...

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

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

qt - Latex を QML に埋め込む可能性

this oneに似た QML (C++ バックエンドを使用) でプレゼンテーション システムを実行しています。

いくつかの数学を表示するために、いくつかの Latex コードを含めることができるようにしたいと考えています (合計、分数、スーパーおよびサブストリップ、数学フォントなど、最小限の Latex 機能のみが必要です)。

そうするために、次の可能性があると思います。

  • latex2e の使用:
    1. Latex コードを DVI ドキュメントにコンパイルします ( を使用latex) 。
    2. DVI を SVG に変換します (を使用dvisvgm)
    3. ImageQML (SVG もサポート) を使用してこれを表示します。
  • MathJax の使用:
    1. 小さな HTML ファイルに Latex コードをラップし、MathJax JS ライブラリを含めます。
    2. WebKitこれをQMLを使用して表示する
  • カスタム ソリューション (C++):
    1. 既存の最小限の Latex 数学パーサーを作成または含める
    2. QDeclarativeItemカスタムペイントで書く

私が見ていない別の解決策はありますか?2 番目のソリューションは重すぎて、3 番目のソリューションは難しすぎるため、最初のソリューションを好みます。

数式のベースラインに次の問題が見られます: インライン数式を (段落内に) 含めることができるようにしたいです。現在、テキスト パラグラフは QML Text 要素を使用してレンダリングされます。指定されたベースラインを使用して (おそらく HTML img 要素を使用して) Text 要素に画像を含める可能性はありますか? また、レンダリングされた Latex ドキュメントのベースラインを決定するにはどうすればよいですか?

注: Latex コードを事前にレンダリングする時間は問題ではありません。既にレンダリングされた数式をキャッシュするので、プレゼンテーション ドキュメントに含まれるすべての数式に対してlatex+を呼び出しても問題ありません。dvisvgm

また、プリプロセッサを使用していることにも注意してください (QML コードを手で書くのではなく、生成します)。したがって、Latex コードに QML 要素は必要ありませんが、Image 要素を使用して QML コード スニペットを生成できます (最初のソリューション用)。これにより、レンダリングされた画像の埋め込みが簡単になります。

また、インライン Latex を使用する場合、式のラップをサポートする必要もありません。(Latex はインライン数式を記述するときにそうしますが、とにかくラップされたくない小さな数式のみを使用します。)

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

java - テキストをビットマップにレンダリングして描画する方法

私はアンドロイドが初めてで、私のグループは現在、opengl es 2.0 を使用して GlSurfaceView を使用してグラフ作成アプリケーションを作成しています。

最近、プロットにグリッドと目盛りを表示し、数値スケールを実装し、x 軸と y 軸に「X」と「Y」のラベルを付けるタスクを割り当てられました。

ここに画像の説明を入力

多くの調査を行った後、文字列をビットマップにレンダリングすることでこれを達成することにしました。これを達成するために多くの問題に遭遇しました。基本的な考え方は理解できました。英数字 "0123456789" と "XY" と "-" (-x と -y スケール用) が必要になることはわかっています。私は多くの異なる例を見て、ここでJVitellaの例を広範囲にフォローしようとしまし

私は概念を理解し始めていますが、文字列に関する限り、13文字あることがわかっているので、ビットマップはどれくらいの大きさにする必要がありますか?

また、Jvitelas の例では、次のコードに唖然としました。

何が起こっているのか正確にはわかりません。これをコーディングすると、コンテキストで構文エラーが発生します。

私のアプリケーションでは、このように文字列をビットマップに保存する必要があることを理解しています。ビットマップを作成しますが、どのくらいの大きさにする必要がありますか? 次に、ビットマップからキャンバスを作成し、canvas.drawText をビットマップに作成します。

基本的に私は尋ねています:

  • 上記の次のビットマップを実現するにはどうすればよいですか?
  • ビット マップから 1 桁の数字を描画するにはどうすればよいですか?
  • 2 桁以上の数字を描くにはどうすればよいですか?
0 投票する
1 に答える
591 参照

css - 回転すると文字がおかしくなる

私のサイトにはテキストが 45 度回転している領域があり、残念ながらそのテキストのレンダリングがめちゃくちゃになることがあります。たとえば、FF と chrome を使用する Linux では比較的問題ないように見えますが、Windows の同じブラウザーでは見栄えが悪くなります。ただし、IE 9-10 では、テキストを完全に回転させてレンダリングします。このめちゃくちゃなテキストを克服する方法はありますか?

例を次に示します

PS 画像を使用してテキストを置き換えることはできません。代わりに回転した動的テキストが必要です。

ありがとう

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

python - PILは文字の上部を切り取ります

私はPythonを使用して最初のWebアプリケーションを作成するのに多くの時間を費やし、画像の生成にを使用しています。たくさん読んだ後、私は適切なテキストの整列、折り返し、多くの拡張子を持つファイルの生成などを実装することができました。

ただし、PILによって生成されたすべてのテキストは上部で切り取られます。これがサンプルです。

上部でテキストが切り取られたPIL生成画像の例

さまざまなフォントで言う必要がŻÓĆjygpqあります(フォント名は左側にあります)。

ここでいくつかの投稿を見つけました。PILでフォントがクリッピングされていますが、別のモジュール(aggdraw)の使用は避けたいと思います。私はすでにPILで非常に多くのことを理解しているので、それに固執したいと思います。

さまざまなサイズのフォントをたくさん試しましたが、テキストが途切れています。PILフォントを使用しようとしましたが、それでも機能しません。[また、OTFをBDFおよびPILに変換します]。

これはUbuntuにあります。次に何を試してみるべきですか?