テキストノード
テキストノードは、自由に配置・リサイズできるテキストボックスです。日本語を含む任意の文字列を入力でき、フォント・サイズ・文字の塗り・配置・横書き/縦書き・ふきだしスタイルに加えて、文字アウトラインや文字シャドウも設定できます。言語ごとのテキスト設定(default / ja / en)にも対応しています。
多言語テキスト設定
- プロパティパネル上部の「テキスト言語」で、default / 日本語(ja)/ 英語(en)を切り替え(設定済み言語は ✓ 表示)
- 新規ドキュメント作成時の初期選択は default
- 言語ごとに content・fontFamily・fontSize・fontWeight・fontStyle を個別に保持
- 選択中言語のデータが未作成なら、表示は default を使用
- ja / en を初めて作るときは、default の現在値をコピーして生成
- ゴミ箱ボタンで選択中言語(default 以外)の設定を削除。削除後は選択が default に戻る
- 多言語ドロップダウンの現在選択はドキュメントデータに保存され、再読み込み後も復元される
- SVGの switch/systemLanguage では、ブラウザの優先言語設定に一致した最初の言語が表示される。期待どおりに表示されない場合はブラウザの言語設定を確認する
- エクスポートパネルで switch ON の言語が出力対象になる。対象言語のデータがない場合は、その言語に default の内容がフォールバックされる
テキストボックスの作成
ツールバーの「テキストボックス描画」ツール(テキストアイコン)を選択し、キャンバス上をドラッグすると新しいテキストボックスが作成されます。
テキストの編集
テキストボックスをダブルクリックすると編集モードになり、テキストを入力・変更できます。編集モードをOFFにするにはノード外をクリックするか Esc キーを押します。プレースホルダはエディタ上で常に表示されますが、エクスポートには含まれません。
対応ブラウザでは、編集時のカーソル位置と文字位置をIMEへ通知し、日本語変換候補ウィンドウがキャンバス上の表示位置に近い場所へ出るようにしています。未対応ブラウザでは通常のテキスト入力欄による編集にフォールバックします。
選択中は、パディング内側のテキスト領域、ぶら下げ組み用の境界、明示的な改行位置、全角空白を半透明グレーのマーカーで表示します。編集モードではさらにキャレットと選択範囲も表示します。これらのマーカーは編集補助用で、エクスポートには含まれません。
フォント設定
- フォントファミリー: 組み込みローカルフォント(Noto Sans JP / Cine Caption 226)と Google Fonts から選択可能。右のアイコンをクリックするとフォントピッカーが開きます
- フォントドロップダウンは「お気に入り」→「ドキュメントで使用中」→「すべてのフォント」の順で表示されます(同じフォントが複数セクションに重複表示されることがあります)
- フォント一覧(Gallery)でも同じ区分で表示され、各カード右上の ☆ ボタンでお気に入りの追加/解除ができます
- お気に入りフォントはブラウザのローカルストレージに保存され、別ドキュメントでも再利用できます
- ドキュメントを開いたときに、そのドキュメント内テキストで使用中のフォントは自動読み込みされます(全フォントの先読みはしません)
- フォント一覧では、画面内に表示された項目から順にフォントが読み込まれ、スクロール時も表示領域に入った項目が自動で反映されます
- フォントサイズ: 数値入力または +/- ボタンで変更。右クリックでプリセット一覧から選択
- 太字 / 斜体 / 取り消し線: トグルボタンで切り替え
- 文字の塗り: なし / 単色 / 線形グラデーション / 円形グラデーション / チェッカー / ドットから選択
- 文字の塗り色: primary color / secondary color の2色を保持し、塗りの種類を切り替えても以前の色を引き継ぎます
テキスト配置
| 種類 | 選択肢 |
|---|---|
| 水平配置 | 左揃え / 中央揃え / 右揃え / 両端揃え |
| 垂直配置 | 上揃え / 中央揃え / 下揃え |
| 書字方向 | 横書き / 縦書き |
ボックスのスタイル
- スタイル: 「矩形」または「ふきだし」から選択
- 背景: なし / 単色 / 線形グラデーション / 円形グラデーション / チェッカー / ドットから選択
- グラデーション: 選択中のテキストボックスではキャンバス上のハンドルで線形グラデーションの始点・終点、円形グラデーションの中心・半径を調整
- 輪郭色・輪郭太さ: テキストボックスの外枠
- 線種: 実線 / 破線 / 点線 / 一点鎖線
- 新規作成時の枠太さの初期値: 0
- 内側余白 (padding): テキストとボックス縁の間隔。新規作成時の初期値は0
- 書字方向: 横書き / 縦書きを切り替え
- 行送り倍率: 0.5〜4 の範囲で行間を調整
- 角丸: ボックスの角を丸くする半径
- 文字アウトライン: 色・太さ(初期値は太さ0でなし)
- 文字シャドウ: 色・濃さ(0.0〜8.0)・X/Yオフセット・ぼかし。1.0超は重ね描画
- ボックス影: 色・濃さ(0.0〜8.0)・X/Yオフセット・ぼかし。1.0超は重ね描画
ふきだしスタイル
スタイルを「ふきだし」にすると、ボックスからヒゲ(tail)が伸びたふきだし形状になります。
- ノードを選択すると、ヒゲの付け根と先端にハンドルが表示されます。ハンドルをドラッグしてヒゲの形状を自由に調整できます。
- ヒゲ先端のハンドルを現在の辺の外側(別の辺の方向)にドラッグすると、ヒゲが出る辺を切り替えることができます。
💡 複数のテキストボックスを選択して操作すると、フォント・色・サイズなどを一括変更できます。最後に選択したボックスの値がコントロールに表示されます。