Text Orientation

Text in spreadsheets can be rotated by different degrees in SpreadJS. Excel spreadsheets can be imported and exported while keeping their text rotation, and developers can utilize JavaScript code to set rotation and even vertical text for cells in the workbook.

You can create a style and set a rotation using textOrientation as follows: The rotation angle supports -90 to +90 degrees. When setting the rotation on a cell value the border and background color will rotate to the corresponding angle.
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 5 }); initSpread(spread); }; function initSpread(spread) { spread.fromJSON(jsonData); var sheet = spread.getSheet(3); sheet.getCell(0, 2).textDecoration(GC.Spread.Sheets.TextDecorationType.lineThrough); sheet.getCell(0, 3).textDecoration(GC.Spread.Sheets.TextDecorationType.overline); sheet.getCell(0, 4).textDecoration(GC.Spread.Sheets.TextDecorationType.underline); document.getElementById("btnTextOriention").addEventListener('click', function () { var sheet = spread.getActiveSheet(); if (sheet) { var cell = sheet.getCell(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()); var rotationValue = parseInt(document.getElementById("textOriention").value); if(-90 <= rotationValue && rotationValue <= 90){ cell.textOrientation(rotationValue); } else { alert("please input correct rotation angle") } } }); document.getElementById("btnVerticalText").addEventListener('click', function () { var sheet = spread.getActiveSheet(); if (sheet) { var cell = sheet.getCell(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()); cell.isVerticalText(!cell.isVerticalText()); } }); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/textOriention.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <div class="option-row"> <p>Select a cell, such as G5 (“Math”), then change the Angle to ‘30’</p> <label id="Text Oriention" for="textOriention">Angle(-90<= Angle <=90)</label> <input type="text" id="textOriention" /> <input type="button" value="Set TextOriention" id="btnTextOriention" /> </div> <div class="option-row"> <label id="Text Oriention" for="textOriention">Set VerticalText</label> <input type="button" value="Set verticalText" id="btnVerticalText" /> </div> </div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; margin-top: 10px; } label { display: block; margin-bottom: 6px; } input { padding: 4px 6px; } input[type=button] { margin-top: 6px; display: block; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }