Text Direction

SpreadJS allows users to set the text direction in a cell as per their preferences, like in Excel. It enhances the flexibility and readability of data presentation within a spreadsheet.

Vertical Text Direction

When you enter text in a cell, the alphabets are displayed horizontally by default. However, if you want your text to be displayed in the vertical direction, you can style the text vertically, as shown in the image shared below.

To switch the text orientation to a vertical direction in a cell, you can use the isVerticalText method of the CellRange class. This method accepts boolean parameters - true or false. While passing a boolean value true as a parameter in this method will indicate the text to be displayed vertically, providing a boolean value false will indicate the text to be displayed horizontally. (same as in the default case).

The vertical text direction feature in Spread JS supports horizontal and vertical alignment. You can specify the alignment style by customizing the vAlign method (for vertical alignment) and hAlign undefined (for horizontal alignment). An example is shown in the image shared below.

Use vAlign and hAlign with vertical text direction

You can also control the text indentation while setting the vertical text direction in a cell by using the textIndent method. An example is shown in the image shared below.

Often, a word may seem to be too long to fit in a cell with vertical text. In such a scenario, you can use the wordWrap method in order to make it fit in the same cell. An example is shown in the image shared below.

If you don't want to use word-wrap in a cell, you can allow Spread to automatically reduce the font size of the vertical text by using the shrinkToFit method. An example is shown in the image shared below.

If you don't want to use both word-wrap and shrink-to-fit features in a cell, you can allow Spread to automatically adjust the width and height of a cell in order to fit all the content in the same cell. This can be done by using AutoFitType Enumeration. An example is shown in the image shared below.

The following code sample sets the vertical text direction in cell D4 by passing the boolean value "true" in the isVerticalText method.

var sheet = spread.getActiveSheet();
sheet.setRowHeight(3,150);
sheet.getCell(3,3).value("SpreadJS").isVerticalText(true);
sheet.getCell(3,4).value("SpreadJS").isVerticalText(false);

Right To Left Text Direction

With SpreadJS, you can change the direction of text in a cell from left-to-right to right-to-left, where even the punctuation marks are painted on the left of the text by setting the style's textDirection property to rightToLeft using the TextDirectionType enumeration.

RTL (right-to-left) cell text direction accommodates languages and scripts written and read from the right. It ensures that the data is displayed correctly and naturally for you to work in these languages.

Note: Currently, SpreadJS specifies right-to-left text direction for Arabic and Hebrew letters only.

The following code sample uses the TextDirectionType enumeration to set the text direction.

// This example uses getCell method and textDirection method.
activeSheet.getCell(0, 0).textDirection(GC.Spread.Sheets.TextDirectionType.rightToLeft).value("هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.");

// OR
// This example uses getRange method and textDirection method.
activeSheet.getRange(1, -1, 1, -1).textDirection(GC.Spread.Sheets.TextDirectionType.rightToLeft);
activeSheet.setValue(1, 1, "هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.");
activeSheet.setValue(1, 3, "هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.");

// OR
// This example uses the setStyle method with the textDirection property.
var style = new GC.Spread.Sheets.Style();
style.textDirection = GC.Spread.Sheets.TextDirectionType.rightToLeft;
activeSheet.setStyle(2, 2, style, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setValue(2, 2, "هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.");

The text direction in SpreadJS supports printing and exporting to a PDF file. Text direction is also supported while doing import/export of .sjs, .ssjson, and .xlsx files.

Note: Right-to-Left text direction does not provide support for Chart, Shape, Comments, and Slicer. In addition, the SpreadJS Designer does not allow you to change the text direction in TableSheets, GanttSheets, and ReportSheets.

Limitation

• Right-to-left text direction doesn’t work for English, Chinese, Japanese, and Korean characters.