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

文字回転・縦書き

セルの文字をExcelと同じ-90〜90度で傾け、狭い列に斜めのヘッダーを付けられます。日本語の縦書きにも対応。自動調整は回転後の外形を測り、画面・xlsx・印刷・PDFのすべてが同じ配置になります。

デモの解説

このデモは、v1.6.0でセルの文字に加わった2つの機能を示します — Excelと同じ-90〜90度の回転と、日本語の縦書きです。どちらも両エディションで利用できます。Excelではこの2つは1つのコントロールで、ここでも同じです。角度を設定すると縦書きが解除され、その逆も同様です。

  • 四半期の見出しは76px幅の列の上に45度で配置されています。回転がなければ各列は「第1四半期」と同じ幅が必要ですが、傾けることで数値が列幅を決められます
  • スライダーをドラッグすると-90〜90度の任意の角度に変わります。範囲外の値はExcelと同じくクランプされます
  • 表の横の黄色い帯がsetVerticalText()です。34px幅の列に文字が縦に積まれ、「、」「。」は縦組みの組版どおり文字枠の右上に寄ります
  • 自動調整は回転後の外形を測るため、90度倒したラベルには行の高さぶんだけの狭い列が割り当たります
  • 最下段は-90・-45・0・45・90を並べたものです
  • 画面・xlsx・ブラウザ印刷・PDFエクスポートのすべてが同じ配置になり、スタイルはExcelの<alignment textRotation>(縦書きは255)としてそのまま往復します

主要 API

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

Excelと同じ-90〜90度で回転。正の値は右上がりで、範囲外はクランプされます

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

日本語の縦書き — 文字は上から縦に積まれ、段は右から左へ流れます

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

横書きに戻します。角度を設定した場合も縦書きは解除されます

ws.column(c).setWidth(w)

傾ける狙いはここ:自動調整が回転後の外形を測るため、列幅を狭いまま保てます

ソースコード

TypeScript

関連ドキュメント

関連デモ

ニュースレター

開発の最新情報をお届けします

新しいリリース・機能追加・お知らせをいち早く受け取るには、
メーリングリストにご登録ください。