A frequently-asked question is how to rotate cell contents to vertical (or some other angle) in a SpreadSheet. The short answer is that you can't. However, SpreadJS provides simple workaround using CustomCellType in which we can rotate the text. Sometimes there's just too much text to display in SpreadSheet cells. Although you can try wrapping text, using acronyms or shortening words, widen your columns too much to enable viewing of all columns on a single screen. However, scrolling back and forth takes time. So, its better to spend time in designing the business spreadsheet. You can rotate text clockwise, counterclockwise, or vertically by creating CustomCellType. Here in this blog lets discuss how we can create CustomCellType to display text vertically in SpreadSheet cells. This is how SpreadJS will show text in Spreadsheet cells. 
For the demonstration purpose, lets name this CustomCellType as RotateTextCellType which will display text vertically in SpreadSheet Cells. Here, we need to override the paint event of RotateTextCellType.
var ns = $.wijmo.wijspread;
function RotateTextCellType() { }
RotateTextCellType.prototype = new ns.TextCellType();
RotateTextCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) {
ctx.save();
ctx.rect(x, y, w, h);
ctx.clip();
var tw = this.getAutoFitWidth(value, value.toString(), style, 1, context);
var th = this.getAutoFitHeight(value, value.toString(), style, 1, context);
if (style.hAlign === ns.HorizontalAlign.general) {
style.hAlign = ns.HorizontalAlign.left;
var type = $.type(value);
if (type === "boolean") {
style.hAlign = ns.HorizontalAlign.center;
} else if (type === "number" || type === "date") {
style.hAlign = ns.HorizontalAlign.right;
}
}
if (style.hAlign === ns.HorizontalAlign.center) {
x += (w + tw) / 2;
} else if (style.hAlign === ns.HorizontalAlign.right) {
x += w - tw / 2;
} else {
x += tw;
}
if (style.vAlign === ns.VerticalAlign.center) {
y += (h - th) / 2;
} else if (style.vAlign === ns.VerticalAlign.bottom) {
y += h - th - 2;
} else {
y += 2;
}
ctx.beginPath();
ctx.translate(x, y);
ctx.rotate(-0.5 * Math.PI);
ctx.fillText(value, 0, 0);
ctx.restore();
};
RotateTextCellType.prototype.getAutoFitHeight = function (value, text, cellStyle, zoomFactor, context) {
return ns.TextCellType.prototype.getAutoFitWidth.apply(this, arguments);
};
RotateTextCellType.prototype.getAutoFitWidth = function (value, text, cellStyle, zoomFactor, context) {
return ns.TextCellType.prototype.getAutoFitHeight.apply(this, arguments);
}
$(document).ready(function () {
var spread = new GcSpread.Sheets.Spread($("#ss").get(0), { sheetCount: 1 });
var sheet = spread.getActiveSheet();
sheet.setColumnCount(5);
sheet.setRowCount(5);
sheet.isPaintSuspended(true);
sheet.getCell(1, 1).value("Left-Top").cellType(new RotateTextCellType()).hAlign(ns.HorizontalAlign.left).vAlign(ns.VerticalAlign.top);
sheet.getCell(2, 1).value("Left-Center").cellType(new RotateTextCellType()).hAlign(ns.HorizontalAlign.left).vAlign(ns.VerticalAlign.center);
sheet.getCell(3, 1).value("Left-Bottom").cellType(new RotateTextCellType()).hAlign(ns.HorizontalAlign.left).vAlign(ns.VerticalAlign.bottom);
sheet.getCell(1, 2).value("Center-Top").cellType(new RotateTextCellType()).hAlign(ns.HorizontalAlign.center).vAlign(ns.VerticalAlign.top);
sheet.getCell(2, 2).value("Center-Center").cellType(new RotateTextCellType()).hAlign(ns.HorizontalAlign.center).vAlign(ns.VerticalAlign.center);
sheet.getCell(3, 2).value("Center-Bottom").cellType(new RotateTextCellType()).hAlign(ns.HorizontalAlign.center).vAlign(ns.VerticalAlign.bottom);
sheet.getCell(1, 3).value("Right-Top").cellType(new RotateTextCellType()).hAlign(ns.HorizontalAlign.right).vAlign(ns.VerticalAlign.top);
sheet.getCell(2, 3).value("Right-Center").cellType(new RotateTextCellType()).hAlign(ns.HorizontalAlign.right).vAlign(ns.VerticalAlign.center);
sheet.getCell(3, 3).value("Right-Bottom").cellType(new RotateTextCellType()).hAlign(ns.HorizontalAlign.right).vAlign(ns.VerticalAlign.bottom);
sheet.autoFitRow(1);
sheet.autoFitRow(2);
sheet.autoFitRow(3);
sheet.isPaintSuspended(false);
});
This concludes my blog. You can Download Sample for detailed implementation.
MESCIUS inc.