テキスト (Text)

Kanzi にはこれらのテキストノードがあります。

  • アプリケーションにテキストを表示するには、Text Block ノードを使用します。

    Text Block ノードを使用する を参照してください。

    ../../_images/text-blcok-2d-icon.png
  • アプリケーションに一行テキスト入力を追加するには、Text Box ノードを使用します。

    Text Box ノードを使用する を参照してください。

    ../../_images/text-box-2d-icon.png

フォントタイプ

Kanzi でのデフォルトのフォントファミリーは Fira Sans Regular です。フォントファイルは <KanziInstallation>/Studio/Asset Library/Fonts に保存されています。独自のフォントを使用したい場合は、それを Kanzi Studio プロジェクトにインポートしてください。

フォントのインポート を参照してください。

Kanzi アプリケーションでこれらのフォントタイプを使用できます。

Kanzi アプリケーションに含めたいテキストのすべてのグリフが含まれているフォントを使用していることを確認してください。

フォントサイズ (Font Size)

Kanzi はフォントのサイズをピクセル単位で設定します。Font Size プロパティを設定すると、Kanzi はその値をFreetypeライブラリに渡し、Kanzi はフォントをレンダリングするために使用します。FT_Set_Char_Size 関数を使用し、デフォルトで72のdpi値を使用します。

例えば、どちらも同じサイズの文字Hを表示します。

  • Text Block または Text Box ノードにこれらのプロパティが設定されています:

    • Text を H に

    • Font Family を Arial に

    • Font Size から 36 まで

  • HTML マークアップ

    <p style="font-family:arial; font-size:36px;">H</p>
    

DPIスケーリングを制御したり、ピクセル以外の単位でフォントサイズを設定したい場合は、その機能を Kanzi アプリケーションに実装する必要があります。例えば、プロジェクト内の画像やレイアウトがDPI設定に基づいて使用するコンテンツを自動的に選択したい場合は、その機能を Kanzi アプリケーションに実装してください。

プレビューのフォントエンジンを設定する

アプリケーション内のテキストをレンダリングするために、Kanzi Studio Preview が使用するフォントエンジンを設定できます。

Preview のフォントエンジンを設定するには、

  1. メインメニューで Project > Properties を選択します。

    ../../_images/project-properties.png
  2. Properties で Font Engine プロパティを設定します。

    • FreeType は、FreeType ラスタライザー、HarfBuzz シェイパー、ICU 双方向ライブラリ、および行分割のための libunibreak を使用します。これはデフォルトのフォントエンジンです。

    • iType は、Monotype iTypeラスタライザーとWorldType® Shaper™を使用してシェーピングを行います。iTypeフォントエンジンのインストール を参照してください。

    • None がフォントエンジンをロードしないようにします。フォントエンジンをロードしない場合、Preview はアプリケーション内でテキストをレンダリングしません。

    ../../_images/font-engine.png

アプリケーションの起動時にどのフォントエンジンをロードするかを設定する方法については、フォントエンジン を参照してください。

フォントヒンティングの設定

フォントヒンティングは、フォントのアウトラインを画面のピクセルにマッピングするためのラスタライズ指示を提供します。フォントヒンティングの目的は、フォントのデザイン美を維持しつつ、異なるサイズでのフォントの可読性を最適化することです。

Kanzi のテキストノードは、デフォルトでフォントに含まれるフォントヒンティングデータを使用します。

例えば、フォントヒンティングは、文字の高さと幅、行の幅、エッジのコントラスト、文字間のスペースに影響を与えることがあります。

Text Block または Text Box ノードのフォントヒンティングを設定するには、Node Tree でそのノードを選択し、Properties で Font Hinting Preference プロパティを追加し、次のように設定します:

  • No hinting をフォントヒンティングなしでテキストをレンダリングします。

  • Native hinting はフォントに含まれるヒンティングデータを使用してテキストをレンダリングします。フォントがヒンティングデータを含まない場合、Kanzi はフォントエンジンラスタライザーのヒンターを使用します。これはデフォルトの値です。

  • Auto hinting はフォントエンジンラスタライザーのヒンターを使用してテキストをレンダリングします。プレビューのフォントエンジンを設定する を参照してください。

../../_images/font-hinting-preference.png

フォントフォールバック

Kanzi では、Font Family に Fallback Font Chain を定義できます。現在のフォントで文字が使用不可の場合、Kanzi はフォールバックフォントチェーンを順に検索し、不足している文字を含む最初のフォントファミリーを選択します。

どのフォールバックフォントファミリーにも文字が見つからない場合は、現在のフォントの グリフ ID 0 のグリフが欠落グリフ文字として使用されます。

フォールバックフォントは次の目的で使用します。

  • 1 つのテキストノードで複数の言語を表示する。

  • 通常のテキストと一緒に絵文字や記号などの特殊文字を表示する。

フォールバックフォントでレンダリングする場合、Kanzi は、現在のフォントのスタイルとウェイトに近いフォントファイルをフォールバックファミリーから選択しようとします。

パフォーマンスとメモリ使用量を最適化するため、フォールバックフォントは、現在のフォントまたはチェーン内のそれより前のフォールバックフォントに文字が見つからない場合にのみ読み込まれます。

Fallback Font Chain を設定するには、ドロップダウンメニューから既存のフォントファミリーを選択するか、kzb URL を使用してフォントファミリーを追加します。

../../_images/font-fallbacks.png

カラーフォント

絵文字やその他のカラーグリフをレンダリングするには、カラーグリフを含むフォントファイルをインポートします。カラーフォントファイルは、Font Family のプライマリフォントとフォールバックフォントのどちらでもかまいません。

Kanzi の各フォントエンジンでサポートされるカラーフォントフォーマットは次のとおりです。

フォントファイルタイプ

FreeType

iType

glyf テーブル (通常の非カラーのスケーラブルなテキストとアイコン)

✅

✅

CBDT テーブル (スケーラブルでない PNG 画像)

✅

✅

SBIX テーブル (スケーラブルでない PNG 画像)

✅

❌

COLRv0 テーブル (単色のスケーラブルな図形)

✅

✅

SVG テーブル (カラーグラデーションを含む SVG 画像)

❌

❌

COLRv1 テーブル (カラーグラデーションを含むスケーラブルな図形)

❌

❌

サポートされていないフォントフォーマットのグリフを含むフォントファイルを使用する場合:

  • フォントファイルに複数のフォーマットのグリフが含まれている場合、Kanzi はグリフの非カラーバージョンを使用します。

  • Kanzi はグリフをレンダリングしません。

注釈

Kanzi は、カラーグリフを通常のテキストとは異なるブラシとマテリアルを使用してレンダリングします。このマテリアルは、Foreground Brush プロパティのカラー (3D テキストの場合は Font Color プロパティ) のアルファチャンネルのみを使用します。そのため、絵文字の色に影響を与えずにテキストの色を変更できます。

../../_images/color-fonts.png

iTypeフォントエンジンを使用したタイ語テキストのワードラッピングのカスタマイズ

Kanzi iTypeフォントエンジンがタイ語テキストで単語を折り返す方法をカスタマイズするには、iTypeフォントエンジンに組み込まれているものの代わりに使用したいタイ語辞書を設定することができます。

WorldType® SDKには、次のものが含まれています。

  • タイ語辞書

  • Pythonユーティリティは、アプリケーションで使用できるタイ語辞書を作成します。

これらのリソースは、wtle/product/tools/language_dictionaries/thai ディレクトリ内の WorldType® SDK にあります。

タイ語テキストで単語を自動的に折り返すには:

  1. iTypeフォントエンジン用のタイ語辞書を作成するには、GenerateThaiDictionary.py に渡します。

    • プレーンテキスト形式のタイ語辞書

    • 生成された辞書を保存したいファイル

    py -2 GenerateThaiDictionary.py thai-dictionary.txt thai-dictionary.wtd
    

    GenerateThaiDictionary.py は、Kanzi アプリケーションのアプリケーション構成で設定する wtd ファイルを作成します。

    Reading lines from file "thai-dictionary.txt"... done.
    Extracting, filtering, and normalizing words... done.
    Adding words to trie... done.
       number of words: 8
       number of characters: 31
       longest word length: 7
       number of trie nodes: 32
       number of trie edges: 31
    Compressing trie into a DAWG (Directed Acyclic Word Graph)... done.
       number of edges in root node: 9
       number of DAWG nodes: 24
       number of DAWG edges: 30
       edges / characters = 96.8 %
       dawgEdges / trieEdges = 96.0 %
       dawgNodes / trieNodes = 75.0 %
       DAWG array elements: 31
    Writing DAWG to file "thai-dictionary.wtd"... done.
       file size: 0 k
    
  2. あなたが作成したタイ語辞書をアプリケーションで使用するように設定するには、テキストエディタで <ProjectName>/Application/bin/application.cfg ファイル内のiTypeフォントエンジン辞書を設定します。

    # Set additional backend dictionaries.
    ITypeDictionaryUrls = file:///usr/share/itype/thai-dictionary.wtd
    

    フォントエンジン辞書 を参照してください。

  3. (オプション) Kanzi Studio Preview を設定して、iTypeフォントエンジンを使用する際にタイ語のテキストを正しくレンダリングするには、Kanzi Studio でプロジェクトを開き、メインメニューで Project > Properties を選択します。Properties で、Preview Working Directory プロパティを、前のステップで作成した application.cfg ファイルを含むディレクトリに設定します。

    ../../_images/project-properties.png ../../_images/properties-preview-working-directory.png

関連項目

Text Block ノードを使用する

Text Box ノードを使用する

フォントのインポート

グリフキャッシュテクスチャのサイズ