Working with Paragraph Formatting in Blazor DocumentEditor Component

27 Oct 20252 minutes to read

Blazor Document Editor supports various paragraph formatting options such as text alignment, indentation, paragraph spacing, and more.

Indentation

Indentation is used to adjust the distance between the paragraph and the page margins. The left or right indentation of selected paragraphs can be modified using the following sample code.

await documentEditor.Selection.ParagraphFormat.SetLeftIndentAsync(24);
await documentEditor.Selection.ParagraphFormat.SetRightIndentAsync(24);

Special indentation

A special indent for the first line of the paragraph can be defined using the following sample code.

await documentEditor.Selection.ParagraphFormat.SetFirstLineIndentAsync(24);

Increase indent

The left indent of selected paragraphs can be increased by a factor of 36 points using the following sample code.

await documentEditor.Editor.IncreaseIndentAsync();

Decrease indent

The left indent of selected paragraphs can be decreased by a factor of 36 points using the following sample code.

await documentEditor.Editor.DecreaseIndentAsync();

Text alignment

The text alignment of selected paragraphs can be retrieved or set using the following sample code.

await documentEditor.Selection.ParagraphFormat.SetTextAlignmentAsync(TextAlignment.Center);

You can toggle the text alignment of selected paragraphs by specifying a value using the following sample code.

await documentEditor.Editor.ToggleTextAlignmentAsync(TextAlignment.Center);

Line spacing and its type

You can define the line spacing and its type for selected paragraphs using the following sample code.

// Set line spacing type
await documentEditor.Selection.ParagraphFormat.SetLineSpacingTypeAsync(LineSpacingType.AtLeast);
// Set line spacing value (supports both integer and float)
await documentEditor.Selection.ParagraphFormat.SetLineSpacingAsync(6);     // Integer value
await documentEditor.Selection.ParagraphFormat.SetLineSpacingAsync(6.5);   // Float value

Paragraph spacing

You can define the spacing before or after the paragraph by using the following sample code.

await documentEditor.Selection.ParagraphFormat.SetBeforeSpacingAsync(24);
await documentEditor.Selection.ParagraphFormat.SetAfterSpacingAsync(24);

Show or Hide Paragraph marks

You can show or hide the hidden formatting symbols like spaces, tab, paragraph marks, and breaks in Document editor component. These marks help identify the start and end of a paragraph and all the hidden formatting symbols in a Word document.

The following example code illustrates how to show or hide paragraph marks.

<SfDocumentEditorContainer @ref="container" Height="590px" DocumentEditorSettings="settings">
</SfDocumentEditorContainer>

@code {
    SfDocumentEditorContainer container;
    DocumentEditorSettingsModel settings = new DocumentEditorSettingsModel() { ShowHiddenMarks = true };
}

You can also explore our Blazor Word Processor example to know how to render and configure the document editor.