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

    SpreadJS supports rich text formatting in the cells by allowing users to style the text displayed in row header, column header and the viewport area in a worksheet. Rich text formatting enables users to enhance the aesthetic appearance of a spreadsheet and manipulate data in an effective way.

    With the rich text feature, you can format text with different styles including subscript, superscript, text decoration, text alignment, text in vertical direction, word wrap and text indent along with some of the built-in features like JSON serialization and deserialization, excel I/O, shrink to fit, auto fit etc.

    After rich text format is applied to a cell, it will convert the cell value to normal. By default, when you enter textual information in a cell, the alphabets in the viewport area of the worksheet are displayed without any formatting style as shown in the cell A1 below. However, when you apply rich text formatting in a cell, the alphabets are displayed as shown in the cell A3 in the screenshot shared below.


    Rich text set in viewport area

    Shared below is a screenshot that depicts rich text formatting applied to the column header and row header.

     

    Rich text formatting applied to the column header and row header

     

    Applying rich text formatting to cells not only facilitates users in rendering different text styles like subscript, superscript, text decoration, text alignment, text in vertical direction, word wrap, text indent etc. but also enables them to enhance the visual appearance of a spreadsheet. Some of the built-in features including JSON serialization and deserialization, excel I/O, shrink to fit, auto fit etc. are also supported. 

    Shared below is a screenshot that depicts rich text formatting applied to the viewport area in vertical direction for cell B4.

     

    Rich text set vertical direction

    Using Code

    This example code sets the rich text in a column header cell, a row header cell and a cell in the viewport area of the worksheet.

    JavaScript
    Copy Code
    var SpreadJS =
    {
                    richText: [{
                        style: {
                            font: "bold 36px Calibri",
                            foreColor: "rgb(78,133,242)"
                        },
                        text: "S"
                    },
                    {
                        style: {
                            font: "bold 36px Calibri",
                            foreColor: "rgb(228,65,52)"
                        },
                        text: "p"
                    },
                    {
                        style: {
                            font: "bold 36px Calibri",
                            foreColor: "rgb(247,188,32)"
                        },
                        text: "r"
                    },
                    {
                        style: {
                            font: "bold 36px Calibri",
                            foreColor: "rgb(78,133,242)"
                        },
                        text: "e"
                    },
                    {
                        style: {
                            font: "bold 36px Calibri",
                            foreColor: "rgb(65,168,87)"
                        },
                        text: "a"
                    },
                    {
                        style: {
                            font: "bold 36px Calibri",
                            foreColor: "rgb(228,65,54)"
                        },
                        text: "d"
                    }
                    ]
    };
     var sJS =
    {
                    richText: [
                        {
                            style: {
                                font: "bold 24px Calibri",
                                foreColor: "rgb(78,133,242)"
                            },
                            text: "S"
                        },
                        {
                            style: {
                                font: "bold 24px Calibri",
                                foreColor: "rgb(65,168,87)"
                            },
                            text: "p"
                        },
                        {
                            style: {
                                font: "bold 24px Calibri",
                                foreColor: "rgb(247,188,32)"
                            },
                            text: "r"
                        },
                        {
                            style: {
                                font: "bold 24px Calibri",
                                foreColor: "rgb(78,133,242)"
                            },
                            text: "e"
                        },
                        {
                            style: {
                                font: "bold 24px Calibri",
                                foreColor: "rgb(65,168,87)"
                            },
                            text: "a"
                        },
                        {
                            style: {
                                font: "bold 24px Calibri",
                                foreColor: "rgb(228,65,54)"
                            },
                            text: "d"
                        }
                    ]
    };
    
    var sheet = spread.getActiveSheet();
    // Apply rich text in a cell in the viewport
     sheet.setValue(3, 0, SpreadJS, 3);
     sheet.setValue(2, 2, sJS, GC.Spread.Sheets.SheetArea.viewport);
    // Apply rich text to the column header cell
    sheet.setValue(0, 4, { richText: [{ style: { font: 'bold 36px Arial ', foreColor: 'blue' }, text: 'Spread' }] }, GC.Spread.Sheets.SheetArea.colHeader);
    sheet.setValue(0, 1, SpreadJS, GC.Spread.Sheets.SheetArea.colHeader);
    // Apply rich text to a cell in the row header
    sheet.setValue(2, 0, sJS, GC.Spread.Sheets.SheetArea.rowHeader);
    

    Note: While working with rich text in a cell, the following points should be taken care of:

    • Spread JS doesn't supports rich text formatting in the editing mode.
    • Rich text format cannot be applied to checkbox celltype and hyperlink celltype
    • The line height of the rich text will be rendered on the basis of the largest font size of the line.
    • When the rich text is formatted in vertical direction, text decoration will have no effect. Also, using superscript and subscript when the rich text is displayed in the vertical direction will reduce the font size.