Jenee

Vertical Text Generator

Auto-generate vertical text HTML code using CSS writing-mode. Adjust font size, line height, and direction with a real-time preview.

24px
2
縦書きの テキストを 表示します
<div style="writing-mode: vertical-rl; text-orientation: mixed; font-size: 24px; line-height: 2; padding: 16px; display: inline-block; white-space: pre-wrap;">縦書きの
テキストを
表示します</div>
.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 24px;
  line-height: 2;
  white-space: pre-wrap;
}

How to Use

  1. STEP 1
    Enter the text you want to display vertically (use Enter for new lines).
  2. STEP 2
    Adjust font size, line height, and direction using the controls.
  3. STEP 3
    Switch to the 'HTML Code' tab, copy the code, and paste it into your site.
  • writing-mode is supported by modern browsers (Chrome, Firefox, Safari, Edge). Not supported in IE.
  • For upright ASCII in vertical text, add text-orientation: upright to the CSS manually.

Tips

1

Use vertical text for Japanese new year cards and invitation designs.

2

Right-to-Left is the traditional Japanese vertical direction.

3

A line-height of 1.5–2 makes vertical text comfortable to read.

FAQ

  • Q1

    Will English text appear sideways in vertical mode?

    With text-orientation: mixed, ASCII characters rotate 90°. Add upright to display them standing upright.

  • Q2

    How is this different from vertical text in Word/PowerPoint?

    Both use the same underlying principle, but this tool generates HTML/CSS code ready for use on the web.

  • Q3

    Can I control line wrapping?

    Yes, use white-space, width, or max-height in the generated CSS to control wrapping behavior.

Feedback (Contact)