テキストと文字組み

テキストスロットと5つのメンバー

レールはグループ化されています。52個のボタンが並ぶのではなく、表示されるのは約19個：コアのナビゲーションボタン4つ、グループスロット12個、単独ツール3つです。テキストはそのグループスロットのひとつに入っています。スロットには小さな三角形が付いていて、クリックするとフライアウトにメンバーが一覧表示されます。選んだツールはそのスロットに残り、ブラウザにスロットごとに保存されるので、最終的なレールはスクリーンショットのものではなく、あなた自身のものになります。

5つのメンバーは次のとおりです Typeツール, エリアテキスト, パス上テキスト, 縦書きテキスト そして タッチテキストです。Typeツールがスロットのデフォルトで、キーボードショートカットを持つのはこれだけです。残りの4つは同じテキストエンジンを構築し、押す前にプリセットを仕込みます：

• エリアテキスト はエリアプリセットを仕込むので、シェイプを押すとそのシェイプの内側に流し込まれた新しいテキストが作られます。
• パス上テキスト はパスプリセットを仕込むので、パスをクリックするとテキストがパスに沿って走ります。
• 縦書きテキスト は縦書きモードを仕込むので、テキストは上から下へ流れます。
• タッチテキスト は1文字をつかむプリセットを仕込み、キャンバス上のノブでその文字を移動・回転・拡大縮小できます。

気づくであろう命名の不一致がひとつ：レールのツールチップは「Text [T]」と表示されますが、フライアウトでは同じツールが「Typeツール」と表示されます。同じツールにふたつのラベル。まだ統一できていません。

文字を打ってみる

1. テキストスロットを選ぶ Tを押すか、レールのスロットをクリックします。スロットにプリセットのいずれかが入っている場合は、フライアウトを開いてTypeツールを選びます。
2. テキストを始めたい位置をクリックする キャレットが表示され、エディタがマウントされます。入力してください。
3. オプションバーでスタイルを整える ツールがアクティブになると、上部のバーがテキストコントロールに切り替わります。最初の3つはフォントファミリー、スタイル、サイズです。
4. テキストから抜ける 文字の編集ではなくオブジェクトの移動や変形をしたいときは、Vで選択ツールに切り替えます。

すべてのテキストオブジェクトは、テキストの画像ではなく、ドキュメント内の本物のSVGテキスト要素です。これがこのエディタ全体の要点です：ドキュメントは そのまま SVGなので、書き出すものは編集していたものそのものです。

オプションバーで実際にできること

テキストバーはテキストエンジンが構築し、クロームにミラーされます。左から右へ、フォントファミリーコンボ、フォントアップロードボタン、フォントスタイルコンボ、フォントサイズ、単位付きの行送り、揃え、上付き・下付き、字間と語間、そして書字方向のコントロールが並びます。

• フォントファミリー は登録済みファミリーの先読み補完付きコンボです。Arialが登録されていればArialが、なければ常に埋め込まれているRobotoがデフォルトになります。
• フォントサイズ はポイント単位で、デフォルトは16、プリセットは4から144まであります。値は適用前にピクセルに変換されます。
• 行送り はデフォルト1.25で、単位コンボはcm、mm、in、pc、px、pt、%、em、exを提供します。デフォルトの単位はemです。
• 字間 そして 語間 は0から10までの数値フィールドです。
• 揃え は左・中央・右で、text-alignとテキストアンカーの両方を設定します。

正直な注意点をふたつ。字間コントロールのラベルはptですが、ハンドラは値をpxで適用するので、ラベルの単位よりキャンバス上の結果を信じてください。また、カーニング、垂直シフト、文字回転は存在しますが、インライン表示ではなくバーのオーバーフロードロップダウンに常駐しています。キャンバス上でそれらを操作するには、タッチテキストが本来の方法です。

揃え、ベースラインシフト、テキスト方向、テキストの向き、段落方向の5つのボタングループは、バーにボタンの列としてそのまま並ぶわけではありません。それぞれ現在のアイコンとキャレットを表示する単一のコントロールに折りたたまれ、選択肢はドロップダウンに入ります。これでラップトップでもバーが読みやすく保たれます。

フォント — 自分のフォントも含めて

ファミリーコンボの隣に「Upload font from your computer…」というボタンがあります。.ttf、.otf、.woff、.woff2、.ttcを受け付け、一度に複数ファイルをアップロードできます。アップロードしたフォントはライブフォントリストに登録され、リロード後も残るようデバイスに保存され、Proではクラウドにもミラーされて他のマシンにも届きます。

すでに読み込み済みではなく、これから取得が必要なファミリーは、バイトが届くまでリスト内で取り消し線付きで表示されます。選べば取得が始まります。これは見かけ以上に重要です：.rzvで保存すると使用中のフォントが埋め込まれ、ファイルはポータブルなままですが、素のSVG書き出しにはフォントが同梱されません。

タイ文字などの複雑な文字体系

ルールはこうです。タイ語を1文字でも打つ前に知っておく価値があります。入力時、Rayziaは各文字を現在アクティブなフォントに対して照合します。フォントにその文字のグリフがなければ、その文字は疑問符として描画されます。

これは意図的な仕様です。タイ文字グリフのないフォントは、すべてのタイ文字を輪郭が空の.notdefグリフにマップします。空の輪郭でできたテキストには計測可能なバウンディングボックスがなく、以前はオブジェクト全体がキャレット位置ではなくドキュメント原点に取り残され、見えず復旧も困難でした。見える疑問符に置き換えることで、ジオメトリを有効に保ち、テキストを置いた場所に留めます。

つまり疑問符の列が見えても、何も壊れておらず、何も失われていません。ラテン文字専用のフォントを使っているだけです。その文字体系を含むファミリーを選ぶか、アップロードすれば、文字は正しく描画されます。同じ置き換えは入力とペーストの両方で動くので、どちらも同じ挙動になります。

フォントはネットワーク経由で取得されます。オフライン時や外部フォントサーバーに到達できない環境では、埋め込みファミリーしか使えず、非ラテン文字の作業には実際の制約になります。必要なフォントをアップロードするのが確実な解決策です。

よくある質問