SpreadJS 13
SpreadJS Documentation / Developer's Guide / Features / Customize Appearance / Rotate Text In Cells
In This Topic
    Rotate Text In Cells
    In This Topic

    SpreadJS allows users to rotate the text in a cell. This feature helps users to change the way data appears in a cell.

    Users can rotate the font angle from -90 to +90 degrees (including 45⁰ , 90⁰, -45⁰ , -90⁰ etc.), or change the data alignment as per their specific preferences while working with spreadsheets. The text can be rotated in upwards direction, downwards direction, clockwise direction or counterclockwise direction, as shown in the screenshot shared below:

    Text rotation 

    Usage Scenario

    Text Rotation is helpful especially when:

    Rotating Text in a Cell

    When the text to be rotated is a normal text or the text is in accounting format, then the number of characters filled will be related to the cell height. If users adjust the cell height, the text will change dynamically.

    The following image depicts annual sales revenues of different companies in a spreadsheet with text rotation feature applied to the cells along with border styling and custom background color.

    Rotation feature applied to the cells 

    When the text in the cells is rotated, the following worksheet features will be affected:

    1. Text Alignment - The rotation angle will affect the order of the text. When the rotation angle is negative, the text is displayed from right to left. When the rotation angle is positive, then the text is displayed from left to right.
    2. Word Wrap - Only the height of the current cell will affect the wordwrap feature.
    3. Cell Overflow - This is related to the horizontal alignment. When "hAlign=left", the text will be over to the right and when "hAlign=right", then the text will be over to the left. 
    4.  Text Indentation - If the text in the cell is indented, then the text rotation feature will not work.
    5. Shrink to Fit - For accounting format text, the repeat characters will be eliminiated and hence, the text will shrink to fit in the cell.
    6. Text Decoration - When the text is rotated, the placeholders will also have text decoration just like in Excel.
    7. Text Hidden and AutoFit - When the height after the rotation exceeds the height of the current cell, then the text will hide the extra text above the viewport and the rowHeightAutoFit will be calculated according to the vertical length after rotation. For accounting format text, the repeat characters will be eliminiated and hence, the text will automatically fit inside the cell.

    Rotating Cell Border with Background

    When users apply text rotation in the cells (containing data values) of a spreadsheet, then the border and the background color will also rotate to the corresponding angle. The position of the text will automatically adjust itself according to the position of the cell after the rotation, as shown in the screenshot shared below:

    Rotating cell border with background

    Note: When users set the background color, the rotation on the background color will take effect only if the cell contains a value and has an arbitrary border so that the background can fill the rotated border area.

    Using Code

    Refer to the following example code to rotate text in the cells while working with spreadsheets. 

    Copy Code
    // Initializing Spread
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
    // Get the activesheet
    var activeSheet = spread.getActiveSheet();
    // Prepare data
    activeSheet.setValue(1, 1, "Company Sales Data");
    activeSheet.setValue(1, 3, "Year-2015");
    activeSheet.setValue(1, 4, "Year-2016");
    activeSheet.setValue(1, 5, "Year-2017");
    activeSheet.setValue(1, 6, "Year-2018");
    activeSheet.setValue(1, 7, "Year-2019");
    activeSheet.setValue(2, 2, "Gradlco");
    activeSheet.setValue(3, 2, "Saagiate");
    activeSheet.setValue(4, 2, "Inferno");
    activeSheet.setColumnWidth(1, 120);
    for (var r = 2; r <= 4; r++) {
    for (var c = 3; c < 8; c++) {
    activeSheet.setValue(r, c, parseInt(Math.random() * 5000));
    // Create a Style with TextOrientation and apply it on a range of cells
    var style = new GC.Spread.Sheets.Style();
    style.textOrientation = 60;
    style.backColor = "pink";
    style.foreColor = "red";
    for (var i = 3; i < 8; i++)
    activeSheet.setStyle(1, i, style, GC.Spread.Sheets.SheetArea.viewport);
    // Set Row Height
    activeSheet.setRowHeight(1, 60, GC.Spread.Sheets.SheetArea.viewport);
    activeSheet.addSpan(1, 1, 4, 1, GC.Spread.Sheets.SheetArea.viewport);
    // Set textOrientation for Cell(1,1), this cell is without borders.
    activeSheet.getCell(1, 1).textOrientation(60);
    activeSheet.getCell(1, 1).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
    activeSheet.getCell(1, 1).hAlign(GC.Spread.Sheets.VerticalAlign.center);
    activeSheet.getCell(1, 1).backColor("LightBlue");
    // Set border for cells
    activeSheet.getRange(1, 3, 4, 5, GC.Spread.Sheets.SheetArea.viewport).setBorder(new GC.Spread.Sheets.LineBorder("Blue", GC.Spread.Sheets.LineStyle.medium), { all: true }, 3);
    // Set cell's backColor
    for (var i = 2; i < 5; i++)
    activeSheet.getCell(i, 2).backColor("lightGray");