SpreadJS 15
Features / Cells / Cell Alignment and Indentation
In This Topic
    Cell Alignment and Indentation
    In This Topic

    You can align or indent text in a cell. You can also add a text decoration. You can specify the vertical and horizontal alignment using the hAlign and vAlign methods. You can specify the indent using the textIndent method.

     

    Cell alignment and indentation

    The vAlign method also supports the text vertical alignment in cell editing mode as shown in the below picture.

     

    Vertical text alignment

    Note: In cell editing mode, the vertical alignment of the text is only supported for the "editable div" and is not supported for the "textarea" element. While working on desktop devices with cells of text cell type, you need to replace the textarea element with editable div in order to implement vertical alignment of text in cell editing mode.

    Also, the Ime-mode does not work in two browsers : Google Chrome and Mozilla Firefox.

    Using Code

    This example sets the vertical and horizontal alignment for cell B2 and specifies a text indent for cell B3.

    JavaScript
    Copy Code
    window.onload = function()
    {
       var spread =
       new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
       var activeSheet = spread.getActiveSheet();
      
       // Set the horizontal and vertical alignment of string to “center”
       var cell = activeSheet.getCell(1, 1, GC.Spread.Sheets.SheetArea.viewport);
       cell.hAlign(GC.Spread.Sheets.HorizontalAlign.center);
       cell.vAlign(GC.Spread.Sheets.VerticalAlign.center);
       cell.value("Alignment");
       // Set the indent of strings.
       cell = activeSheet.getCell(2, 1, GC.Spread.Sheets.SheetArea.viewport);
       cell.textIndent(2);
       cell.value("Indent");
       activeSheet.getRange(1, -1,  2, -1, GC.Spread.Sheets.SheetArea.viewport).height(40);
       activeSheet.getRange(-1, 1, -1, 1, GC.Spread.Sheets.SheetArea.viewport).width(120);
    }
    

    Center Across Selection

    SpreadJS provides the "Center Across Selection" horizontal alignment which helps to center the contents of selected cells across columns without merging the cells. This type of horizontal alignment can be set using the HorizontalAlign.centerContinuous enumeration option.

    The following table shows the different behavior observed when using the "Center Across Selection" horizontal alignment:

    Behavior Example
    When a range is set to the alignment, each cell will keep looking to the right for successive empty value cells, and finally place its contents in the center of all cells.
    If a value is entered into the selected range later, the selection and centering are updated to exclude that cell onward.
    The selection always starts from the formatted cell.  So if selection extends from the left of the cell, those cells are not included.
    The centering is adjusted as columns are resized.

    The following code example implements the "Center Across Selection" horizontal alignment in a worksheet.

    JavaScript
    Copy Code
    activeSheet.getCell(1,1).value("Center Across Selection");
    activeSheet.getRange(1, 1, 1, 5, GC.Spread.Sheets.SheetArea.viewport).hAlign(GC.Spread.Sheets.HorizontalAlign.centerContinuous);
    

    The "Center Across Selection" horizontal alignment interacts with other features of SpreadJS in the following ways:

    Using SpreadJS Designer

    You can use alignment and indentation features by accessing the Alignment tab in the Format Cells window. Click the "HOME" tab > "Alignment" group > bottom right arrow button to open the "Format Cells" window.

    See Also