ReoGrid ReoGrid Web
text-rotation vertical-text 縦書き lite v1.6

Text Rotation & Vertical Text

Turn cell text through Excel's -90..90 degrees for slanted headers over narrow columns, or switch on Japanese vertical writing. Auto-fit measures the rotated outline, and screen, xlsx, print and PDF all agree.

How it works

This demo shows the two things v1.6.0 added to cell text: rotation through Excel's -90..90 degrees, and Japanese vertical writing (縦書き). Both are available in both editions. In Excel they are one control, and they are here too β€” setting an angle clears vertical writing, and vice versa.

  • The quarter headers sit at 45Β° over 76px columns. Without rotation each column would have to be as wide as 第1ε››εŠζœŸ; the slant is what lets the numbers set the width
  • Drag the slider to turn them anywhere in -90..90 β€” values outside that range are clamped, as in Excel
  • The yellow strip beside the table is setVerticalText(): characters stacked top-to-bottom in 34px columns, with 、and 。sitting at the top-right of the character box as vertical typesetting requires
  • Auto-fit measures the rotated outline, so a 90Β°-turned label is allocated a column only as wide as the row is tall
  • The bottom row shows -90, -45, 0, 45 and 90 side by side
  • Screen, xlsx, browser print and PDF export all produce the same placement; the style round-trips as Excel's <alignment textRotation> (255 for vertical)

Key APIs used

ws.range('B2:E2').setTextRotation(45)

Turn text through Excel's -90..90; positive reads up to the right, out-of-range values clamp

ws.range('A9:C9').setVerticalText()

Japanese vertical writing β€” characters stacked top-to-bottom, columns right to left

ws.range(...).setVerticalText(false)

Back to horizontal; setting an angle also clears vertical writing

ws.column(c).setWidth(w)

The point of the slant: auto-fit measures the rotated outline, so columns stay narrow

Source Code

TypeScript

Related Documentation

Related Demos

Stay Updated

Be first to know β€” get updates as they ship

Get notified of new releases, features, and announcements.
No spam β€” just updates that matter.