How readable a table is often has nothing to do with the data itself and everything to do with how the text sits inside its cells. Titles need to be centred, amounts need to be pushed right, multi-line descriptions need to be indented, a long sentence in a narrow column needs to fold, and a header set at an angle fits more information into limited column width. All of these are cell text layout settings. Spire.XLS for JavaScript performs them directly in the browser through WebAssembly, managing input and output files with a virtual file system (VFS) and requiring no backend service.
This article covers four key features:
- Set the Alignment of Text
- Set the Indent of Text
- Set the Orientation of Text
- Set the Wrapping of Text
For installation and project setup, see Integrating Spire.XLS for JavaScript in a React Project. The examples below assume Spire.XLS is already installed and the WebAssembly module has been initialized.
Set the Alignment of Text
Alignment works along two axes. Vertical alignment decides where the text sits within the height of the cell and is set through the VerticalAlignment property, which accepts Top, Center, Bottom and others. Horizontal alignment decides where the text sits within the width of the cell and is set through the HorizontalAlignment property, which accepts General, Left, Center, Right and others. The two are independent and can be combined freely. The steps are as follows:
- Create a workbook and get the first worksheet.
- Write the sample text.
- Set the vertical alignment through
VerticalAlignment. - Set the horizontal alignment through
HorizontalAlignment. - Save the workbook.
Here is a complete code example that sets the alignment of cell text in React:
function App() {
const setTextAlignment = async () => {
// Get the Spire.XLS WASM module
const xlsModule = window.wasmModule?.spirexls;
// Check if the module is ready
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// Load the font into VFS
await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
// Create a new workbook
const workbook = new xlsModule.Workbook();
// Get the first worksheet
const sheet = workbook.Worksheets.get(0);
// Write the sample text for vertical alignment
sheet.Range.get("A1").Text = "Alignment";
sheet.Range.get("B1").Text = "Sample";
sheet.Range.get("A2").Text = "Vertical Top";
sheet.Range.get("B2").Text = "VerticalAlignType.Top";
sheet.Range.get("A3").Text = "Vertical Center";
sheet.Range.get("B3").Text = "VerticalAlignType.Center";
sheet.Range.get("A4").Text = "Vertical Bottom";
sheet.Range.get("B4").Text = "VerticalAlignType.Bottom";
// Write the sample text for horizontal alignment
sheet.Range.get("A6").Text = "Horizontal General";
sheet.Range.get("B6").Text = "HorizontalAlignType.General";
sheet.Range.get("A7").Text = "Horizontal Left";
sheet.Range.get("B7").Text = "HorizontalAlignType.Left";
sheet.Range.get("A8").Text = "Horizontal Center";
sheet.Range.get("B8").Text = "HorizontalAlignType.Center";
sheet.Range.get("A9").Text = "Horizontal Right";
sheet.Range.get("B9").Text = "HorizontalAlignType.Right";
// Set the vertical alignment
sheet.Range.get("B2").Style.VerticalAlignment = xlsModule.VerticalAlignType.Top;
sheet.Range.get("B3").Style.VerticalAlignment = xlsModule.VerticalAlignType.Center;
sheet.Range.get("B4").Style.VerticalAlignment = xlsModule.VerticalAlignType.Bottom;
// Set the horizontal alignment
sheet.Range.get("B6").Style.HorizontalAlignment = xlsModule.HorizontalAlignType.General;
sheet.Range.get("B7").Style.HorizontalAlignment = xlsModule.HorizontalAlignType.Left;
sheet.Range.get("B8").Style.HorizontalAlignment = xlsModule.HorizontalAlignType.Center;
sheet.Range.get("B9").Style.HorizontalAlignment = xlsModule.HorizontalAlignType.Right;
// Widen column B and raise rows 2-4 so the alignment differences are visible
sheet.Range.get("B1:B9").ColumnWidth = 32;
sheet.Range.get("A2:B4").RowHeight = 40;
// Save the workbook
const outputFileName = "TextAlignment.xlsx";
workbook.SaveToFile(outputFileName);
// Release resources
workbook.Dispose();
// Read the result file from VFS and trigger the download
const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([fileArray], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
a.click();
URL.revokeObjectURL(url);
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>Set Text Alignment</h1>
<button onClick={setTextAlignment}>Start</button>
</div>
);
}
export default App;
Vertical alignment is only visible once the row is tall enough, which is why the example sets rows 2-4 to a height of 40; horizontal alignment is at its clearest once the column is wide enough.
After running, the effect of setting the alignment of text:
Set the Indent of Text
Indentation leaves blank space on the left (or right) inside a cell, which suits data that has a hierarchy, such as "region → city". The indent level is set through the IndentLevel property, where one level is roughly one character wide. The steps are as follows:
- Create a workbook and get the first worksheet.
- Write the sample text.
- Set the horizontal alignment to left so the indentation takes effect.
- Set an increasing indent level through
IndentLevel. - Save the workbook.
Here is a complete code example that sets the indent of cell text in React:
function App() {
const setTextIndent = async () => {
// Get the Spire.XLS WASM module
const xlsModule = window.wasmModule?.spirexls;
// Check if the module is ready
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// Load the font into VFS
await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
// Create a new workbook
const workbook = new xlsModule.Workbook();
// Get the first worksheet
const sheet = workbook.Worksheets.get(0);
// Write the sample text
sheet.Range.get("A1").Text = "Indent Level";
sheet.Range.get("B1").Text = "Sample";
sheet.Range.get("A2").Text = "0";
sheet.Range.get("B2").Text = "Worldwide";
sheet.Range.get("A3").Text = "1";
sheet.Range.get("B3").Text = "North Region";
sheet.Range.get("A4").Text = "2";
sheet.Range.get("B4").Text = "Beijing";
sheet.Range.get("A5").Text = "3";
sheet.Range.get("B5").Text = "Haidian District";
// Indentation only takes effect together with left alignment
sheet.Range.get("B2:B5").Style.HorizontalAlignment = xlsModule.HorizontalAlignType.Left;
// Set the indentation level of the text
sheet.Range.get("B2").Style.IndentLevel = 0;
sheet.Range.get("B3").Style.IndentLevel = 1;
sheet.Range.get("B4").Style.IndentLevel = 2;
sheet.Range.get("B5").Style.IndentLevel = 3;
// Widen column B so the indentation differences are visible
sheet.Range.get("B1:B5").ColumnWidth = 32;
// Save the workbook
const outputFileName = "Indentation.xlsx";
workbook.SaveToFile(outputFileName);
// Release resources
workbook.Dispose();
// Read the result file from VFS and trigger the download
const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([fileArray], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
a.click();
URL.revokeObjectURL(url);
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>Set Text Indent</h1>
<button onClick={setTextIndent}>Start</button>
</div>
);
}
export default App;
The four rows step in one level at a time, forming exactly the hierarchy "Worldwide → North Region → Beijing → Haidian District". Cell B5 has an IndentLevel of 3, so its text starts about three characters in from the left edge.
After running, the effect of setting the indent of text:
Set the Orientation of Text
Text orientation covers two independent settings. The first is the rotation angle, set through the Rotation property, where values 0 to 90 are degrees counterclockwise and -1 to -90 are degrees clockwise. There is also the special value 255, which stacks the text vertically one character per line; rotation is often used to fit a long header into a narrow column. The second is the reading order, set through the ReadingOrder property, which accepts LeftToRight, RightToLeft and Context. It decides which direction the mixed content in a cell is laid out from, and is used for languages written from right to left such as Arabic and Hebrew. Rotated or stacked text takes up far more height than usual, so the row height has to be raised at the same time to keep the text inside the cell. The steps are as follows:
- Create a workbook and get the first worksheet.
- Write the sample text.
- Set the rotation angle through
Rotation. - Set the reading order through
ReadingOrder. - Save the workbook.
Here is a complete code example that sets the orientation of cell text in React:
function App() {
const setTextOrientation = async () => {
// Get the Spire.XLS WASM module
const xlsModule = window.wasmModule?.spirexls;
// Check if the module is ready
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// Load the font into VFS
await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
// Create a new workbook
const workbook = new xlsModule.Workbook();
// Get the first worksheet
const sheet = workbook.Worksheets.get(0);
// Write the sample text for the rotation angle
sheet.Range.get("A1").Text = "Text Orientation";
sheet.Range.get("B1").Text = "Sample";
sheet.Range.get("A2").Text = "Counterclockwise 45";
sheet.Range.get("B2").Text = "Rotation = 45";
sheet.Range.get("A3").Text = "Counterclockwise 90";
sheet.Range.get("B3").Text = "Rotation = 90";
sheet.Range.get("A4").Text = "Clockwise 45";
sheet.Range.get("B4").Text = "Rotation = -45";
sheet.Range.get("A5").Text = "Stacked";
sheet.Range.get("B5").Text = "Spire";
// Write the sample text for the reading order: Latin mixed with Hebrew, so the
// difference between the two directions is actually visible
sheet.Range.get("A7").Text = "Left to Right";
sheet.Range.get("B7").Text = "Spire.XLS שלום";
sheet.Range.get("A8").Text = "Right to Left";
sheet.Range.get("B8").Text = "Spire.XLS שלום";
// Set the rotation angle of the text; 255 stacks the text vertically
sheet.Range.get("B2").Style.Rotation = 45;
sheet.Range.get("B3").Style.Rotation = 90;
sheet.Range.get("B4").Style.Rotation = -45;
sheet.Range.get("B5").Style.Rotation = 255;
// Set the reading order of the text
sheet.Range.get("B7").Style.ReadingOrder = xlsModule.ReadingOrderType.LeftToRight;
sheet.Range.get("B8").Style.ReadingOrder = xlsModule.ReadingOrderType.RightToLeft;
// Widen column B and raise rows 2-5 so the rotated and stacked text fits
sheet.Range.get("B1:B8").ColumnWidth = 20;
sheet.Range.get("A2:B5").RowHeight = 60;
// Save the workbook
const outputFileName = "TextOrientation.xlsx";
workbook.SaveToFile(outputFileName);
// Release resources
workbook.Dispose();
// Read the result file from VFS and trigger the download
const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([fileArray], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
a.click();
URL.revokeObjectURL(url);
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>Set Text Orientation</h1>
<button onClick={setTextOrientation}>Start</button>
</div>
);
}
export default App;
In the example, B2, B3 and B4 are rotated 45 degrees, 90 degrees and -45 degrees respectively, and B5 uses a Rotation of 255, which stacks the text into a column running top to bottom; all five rows are given a height of 60. B7 and B8 hold the same mixed Latin and Hebrew string with opposite reading orders, and the Hebrew ends up on opposite sides in the two rows — which is exactly what reading order does to mixed content.
After running, the effect of setting the orientation of text:
Set the Wrapping of Text
When a piece of text is longer than the column, it spills over onto the neighbouring empty cell by default, and is cut off as soon as that neighbour has content of its own. Setting the WrapText property to true folds the text inside the cell instead; setting it to false returns the text to a single line. As with rotation, wrapping only changes how the text is laid out and does not adjust the row height by itself, so the row height is usually raised as well to show every folded line in full. The steps are as follows:
- Create a workbook and get the first worksheet.
- Write a long piece of text.
- Turn wrapping on or off through
WrapText. - Adjust the column width and row height so the folding is fully visible.
- Save the workbook.
Here is a complete code example that sets the wrapping of cell text in React:
function App() {
const setTextWrap = async () => {
// Get the Spire.XLS WASM module
const xlsModule = window.wasmModule?.spirexls;
// Check if the module is ready
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// Load the font into VFS
await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
// Create a new workbook
const workbook = new xlsModule.Workbook();
// Get the first worksheet
const sheet = workbook.Worksheets.get(0);
// Write the sample text
sheet.Range.get("A1").Text = "Wrap Text";
sheet.Range.get("B1").Text = "Sample";
sheet.Range.get("A2").Text = "On";
sheet.Range.get("B2").Text = "Spire.XLS for JavaScript can wrap text inside a cell in the browser.";
sheet.Range.get("A3").Text = "Off";
sheet.Range.get("B3").Text = "Spire.XLS for JavaScript can wrap text inside a cell in the browser.";
// Turn wrapping on so the text folds inside the cell when it is wider than the column
sheet.Range.get("B2").Style.WrapText = true;
// Turn wrapping off so the text stays on a single line
sheet.Range.get("B3").Style.WrapText = false;
// Narrow column B and raise rows 2-3 so the wrapping is visible
sheet.Range.get("B1:B3").ColumnWidth = 24;
sheet.Range.get("A2:B3").RowHeight = 60;
// Save the workbook
const outputFileName = "WrapText.xlsx";
workbook.SaveToFile(outputFileName);
// Release resources
workbook.Dispose();
// Read the result file from VFS and trigger the download
const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([fileArray], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
a.click();
URL.revokeObjectURL(url);
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>Set Text Wrap</h1>
<button onClick={setTextWrap}>Start</button>
</div>
);
}
export default App;
B2 and B3 hold the very same sentence; the only difference is the value of WrapText. B2 folds into several lines and shows in full, while B3 stays on one line. The cell to the right of B3 is empty, so the text spills into it; if there were content there, the overflow would simply be cut off.
After running, the effect of setting the wrapping of text:
FAQ
I set IndentLevel and the text is not indented at all?
Cause: Indentation is only displayed when the horizontal alignment is a non-General value such as Left or Right. Cells default to General alignment, and IndentLevel is ignored outright in that case — so setting only the indent level shows no change.
Solution: Set HorizontalAlignment first, then IndentLevel:
// Indentation only takes effect together with left alignment
sheet.Range.get("B2").Style.HorizontalAlignment = xlsModule.HorizontalAlignType.Left;
sheet.Range.get("B3").Style.HorizontalAlignment = xlsModule.HorizontalAlignType.Left;
// Set the indent level of the text
sheet.Range.get("B2").Style.IndentLevel = 1;
sheet.Range.get("B3").Style.IndentLevel = 2;
I want the text stacked vertically, one character per line — why does Rotation = 90 not do it?
Cause: The 0 to 90 and -1 to -90 ranges of Rotation only deal with the rotation angle. 90 merely lays the text on its side; it never breaks it into a column of single characters.
Solution: Stacked text needs the special value 255:
// 90 degrees simply rotates the text
sheet.Range.get("B2").Style.Rotation = 90;
// 255 stacks the text vertically, one character per line
sheet.Range.get("B3").Style.Rotation = 255;
Get a Free License
Spire.XLS for JavaScript offers a 30-day full-featured free trial license with no functional limitations. Apply here to evaluate before purchasing.
