This is the most advanced and robust component for achieving "beautiful vertical typography" in Japanese and English within Framer.
More than just stacking characters vertically, you get every feature required in professional design environments—from "horizontal-in-vertical" for numbers and text orientation management to SEO and accessibility considerations—all for an investment of $X.
🌟 Why Do You Need This Component?
Standard web browser vertical writing (vertical-rl) comes with many limitations. This component solves these issues with its own built-in markup engine.
Precise Horizontal-in-Vertical (Tate-chu-yoko): Horizontally align 2 to 4 digit numbers or Latin characters within the vertical flow. Automatic detection is also available.
Flexible Text Orientation: You can rotate parts of a sentence 90 degrees ("Sideways") or stack Latin characters upright ("Upright").
Professional Escape Processing: Full support for escape functions when you want to display special markup symbols (like [ or {) as-is within the design. Line breaks are also possible using <br>.
SEO & Accessibility: Even with internal character splitting, aria-label ensures search engines and screen readers recognize it as a single, correct sentence. You can also configure heading tag (h1–h6) semantics.
🛠 4 Markup Stylings
Instantly switch styles simply by enclosing text in specific symbols within the input field.
[24]：Horizontal-in-Vertical — Fits numbers or short Latin words into a single character space.
{Latin}：Sideways (90° Rotation) — Rotates Latin words horizontally for a modern editorial feel.
(ABC)：Upright Stacking — Stacks the alphabet vertically, one character at a time.
\\：Escape Symbol — Used when you want to display the markup symbol itself (e.g., \\[text\\]).
🎨 Advanced Customization (Inspector Controls)
Styling per Markup: Set individual fonts, scale, margins, and tracking (letter spacing) for Horizontal-in-Vertical and Sideways text.
Layout: Intuitive control over vertical alignment (Start / Center / End), padding, corner radius, and background color.
Typography: Control text shadows, line height, and even toggle Soft Wrap on or off.
📦 Contents
Vertical Text Pro Component (React-based)
SEO / Accessibility Ready Core Logic
Designer's Note:
This component was developed to reproduce editorial design on the web where misalignment is not an option. It elevates your Framer projects to the next level of typographic quality.
Pitaly 8
