Rich Text Formatting

3 Jul 202617 minutes to read

Rich text formatting allows you to apply different styles to specific portions of text within a single cell to improve readability and presentation. Currently, subscript and superscript formatting are supported, and other rich text font styles are not supported.

In the React Spreadsheet Editor component, rich text formatting is supported through the richText property of the cell model. This property lets you define multiple text segments inside a cell, where each segment can have its own style.

Each richText segment contains:

• text – Specifies the content of the segment
• style – Defines formatting using the CellStyleModel

Subscript and Superscript

Subscript and superscript formatting are supported as part of rich text formatting and can be applied to specific portions of text within a cell.

To apply these formats, use the verticalAlign property within the style of a rich text segment:

Set verticalAlign: 'super' for superscript and verticalAlign: 'sub' for subscript.

How to Apply Subscript and Superscript

You can apply subscript and superscript formatting in following ways:

1. Select the desired portion of text within a cell, then click the Subscript or Superscript option in the ribbon to apply the formatting.

1. You can define the richText property directly while initializing the Spreadsheet. This is useful when you want the formatting to be applied when the data is loaded.

    cells: [
        {
            value: 'H2O',
            richText: [
                { text: 'H' },
                { text: '2', style: { verticalAlign: 'sub' } },
                { text: 'O' }
            ]
        }
    ]

1. You can also apply subscript and superscript dynamically using the updateCell method.

    spreadsheet.updateCell({ value: 'X2', richText: [
                    { text: 'X' },
                    { text: '2', style: { verticalAlign: 'super' } }
                ] }, 'A5');

The following code example shows the subscript and superscript formatting in cells of the spreadsheet.

app.jsx

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

function App() {
    const spreadsheetRef = React.useRef(null);
    const sheets = [
        {
            columns: [{ width: 200 }],
            rows: [
                { cells: [{ value: 'Plain Text' }] },
                {
                    cells: [
                        {
                            value: 'Mineral Water H2O',
                            richText: [
                                { text: 'Mineral Water H' },
                                { text: '2', style: { verticalAlign: 'sub' } },
                                { text: 'O' }
                            ]
                        }
                    ]
                },
                {
                    cells: [
                        {
                            value: 'Energy Supplement C6H12O6',
                            richText: [
                                { text: 'Energy Supplement C' },
                                { text: '6', style: { verticalAlign: 'sub' } },
                                { text: 'H' },
                                { text: '12', style: { verticalAlign: 'sub' } },
                                { text: 'O' },
                                { text: '6', style: { verticalAlign: 'sub' } }
                            ]
                        }
                    ]
                },
                { cells: [{ value: 'H2O' }] },
            ]
        }
    ];
    
    const onCreated = () => {
        const spreadsheet = spreadsheetRef.current;
        if (!spreadsheet) return;
        spreadsheet.updateCell({ richText: [{text: 'H'},{ text: '2', style: { verticalAlign: 'sub' } }, { text: 'O' }
        ] }, 'A4');
        spreadsheet.updateCell({ value: 'X2', richText: [
                { text: 'X' },
                { text: '2', style: { verticalAlign: 'super' } }
            ] }, 'A5');
    };

    return (
        <div>
            <SpreadsheetComponent ref={spreadsheetRef} sheets={sheets} showFormulaBar={false} created={onCreated} >
            </SpreadsheetComponent>
        </div>
    );
}

export default App;

const root = createRoot(document.getElementById('root'));
root.render(<App />);

app.tsx

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent, SheetModel } from '@syncfusion/ej2-react-spreadsheet';

function App(): React.ReactElement {
    const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
    const sheets: SheetModel[] = [
        {
            columns: [{ width: 200 }],
            rows: [
                { cells: [{ value: 'Plain Text' }] },
                {
                    cells: [
                        {
                            value: 'Mineral Water H2O',
                            richText: [
                                { text: 'Mineral Water H' },
                                { text: '2', style: { verticalAlign: 'sub' } },
                                { text: 'O' }
                            ]
                        }
                    ]
                },
                {
                    cells: [
                        {
                            value: 'Energy Supplement C6H12O6',
                            richText: [
                                { text: 'Energy Supplement C' },
                                { text: '6', style: { verticalAlign: 'sub' } },
                                { text: 'H' },
                                { text: '12', style: { verticalAlign: 'sub' } },
                                { text: 'O' },
                                { text: '6', style: { verticalAlign: 'sub' } }
                            ]
                        }
                    ]
                },
                { cells: [{ value: 'H2O' }] },
            ]
        }
    ];
    
    const onCreated = (): void => {
        const spreadsheet = spreadsheetRef.current;
        if (!spreadsheet) return;
        spreadsheet.updateCell({ richText: [{text: 'H'},{ text: '2', style: { verticalAlign: 'sub' } }, { text: 'O' }
        ] }, 'A4');
        spreadsheet.updateCell({ value: 'X2', richText: [
                { text: 'X' },
                { text: '2', style: { verticalAlign: 'super' } }
            ] }, 'A5');
    };

    return (
        <div>
            <SpreadsheetComponent ref={spreadsheetRef} sheets={sheets} showFormulaBar={false} created={onCreated} >
            </SpreadsheetComponent>
        </div>
    );
}

export default App;

const root = createRoot(document.getElementById('root')!);
root.render(<App />);

Limitations

• Limited formatting support: Only subscript and superscript formatting are supported within rich text. Other formatting options such as font size, font color, and font weight are not supported.
• Edit mode requirement: Formatting can be applied only while the cell is in edit mode. Selecting text outside of edit mode does not support subscript or superscript formatting.