Vertical Text Generator
A Framer plugin that creates authentic Japanese vertical text (縦書き) components using CSS writing-mode. Supports text orientation control, responsive font sizing with clamp(), and line-break rules (禁則処理) for proper Japanese typography.
Vertical Text Generator
Creates Japanese vertical text components using native CSS `writing-mode: vertical-rl`.
Features
Vertical writing — Authentic right-to-left vertical text using native CSS
Text orientation — Choose how ASCII/numbers appear: mixed, upright, or sideways
Font customization — Full control over font family, size, weight, line height, and letter spacing
Responsive font sizing — CSS `clamp()` based font size that adapts to viewport width
Line-break control (禁則処理) — Four modes (auto, loose, normal, strict) for proper Japanese typographic rules
Real-time preview — See your vertical text instantly before inserting
One-click insertion — Insert a fully configurable Code Component onto the canvas
How to use
Open the plugin from the Plugins menu
Enter your text and select text orientation
Click "縦書きテキストを挿入"
Adjust properties (text, font, color, responsive settings) in the right panel
Ideal for
Japanese websites and portfolios
Editorial and magazine-style layouts
Traditional Japanese typography
Bilingual (Japanese/English) designs
---
Vertical Text Generator
Vertical Text Generator は、CSS `writing-mode: vertical-rl` を使用して日本語の縦書きテキストコンポーネントを生成する Framer プラグインです。
機能
縦書きテキスト — ネイティブ CSS による本格的な右から左への縦書き表示
文字向き切替 — 英数字の表示方法を選択可能（混合 / 正立 / 横倒し）
フォントカスタマイズ — フォントファミリー、サイズ、太さ、行間、字間をフルコントロール
レスポンシブフォント — CSS `clamp()` によるビューポート連動の可変フォントサイズ
禁則処理 — 自動 / 緩い / 標準 / 厳密の4モードで日本語組版品質を向上
リアルタイムプレビュー — 挿入前にプラグイン内で縦書き表示を確認
ワンクリック挿入 — 設定可能な Code Component をキャンバスに即座に配置
使い方
Plugins メニューからプラグインを開く
テキストを入力し、文字向きを選択
「縦書きテキストを挿入」をクリック
右パネルでプロパティを調整（テキスト、フォント、色、レスポンシブ設定）
こんな用途におすすめ
日本語の Web サイト・ポートフォリオ
エディトリアル・雑誌風レイアウト
伝統的な日本語タイポグラフィ
日英バイリンガルデザイン
Details
hicard
