Blazor DocumentEditor renders Word document incorrectly

[Austin Smith]

We are using the Syncfusion Blazor DocumentEditor to display a Word document (docx) in a web application. Unfortunately, the document is rendered incorrectly. In the image below, the document is displayed using the Syncfusion DocumentEditorContainer component on the left, and in MS Word on the right. As you can see, the spacing is different in the two documents. This results in some text being cut off. This affects how the document is displayed in the browser, and also how it is printed (if it's printed from the DocumentEditor).

This document is not being created in the DocumentEditor - it's being loaded in from an external source. It appears that the paragraph styles in the document are not being correctly applied. Is there a way to force the DocumentEditor to render the document the same way MS Word does? I can supply a copy of the document, if needed.

[Mohammed Affan Saqib Hussain]

Hi Austin Smith,

We suspect that the reported problems might be due to the contents in the input Word document used at your end. We need to investigate the contents of your input Word document to reproduce the exact problem on our end. So, could you please provide us with the input Word document used at your end and also share the details of any issues you faced in the console? This will allow us to analyze further and provide you with the appropriate solution at the earliest.

Note: If you have any confidential data in your Word document, please replace it with some dummy data and provide us with the same. We just need your document to recreate the problem you are facing.

Regards,

Mohammed Affan C

[Austin Smith]

I've attached the document. Thanks for taking a look.

-Austin

Attachment: Document_bda57559.zip

[Mohammed Affan Saqib Hussain]

Hi Austin Smith,

We are able to reproduce the reported issue. Currently, we are validating the issue and will get back to you with more details by March 05, 2025.

Regards,

Mohammed Affan C

[Saran Nagaraj]

Hi Austin Smith,

In Microsoft Word, the font size is retrieved from the application's default value when the document's default font size is not available. In the Document Editor, the default font size is 11. We can change the default character format by using the setDefaultCharacterFormat API. Previously, there was a bug in the setDefaultCharacterFormat API. However, we have now fixed the issue, so you can change the default font size to any valid value by using the following code snippet:

await container.SetDefaultCharacterFormat(new CharacterFormatProperties { FontSize = 10 });
 Copy

Code snippet:

<SfDocumentEditorContainer @ref="container" Width="85%" Height="590px" EnableToolbar=true>
  <DocumentEditorContainerEvents Created="OnCreated"></DocumentEditorContainerEvents>
</SfDocumentEditorContainer>

@code {
   SfDocumentEditorContainer container;
   public async void OnCreated(object args)    {
       await container.SetDefaultCharacterFormat(new CharacterFormatProperties { FontSize = 10 });
       string filePath = "wwwroot/Data/Document.docx";
       using (FileStream fileStream = new FileStream(filePath, System.IO.FileMode.Open, System.IO.FileAccess.Read))
       {
           SfDocumentEditor editor = container.DocumentEditor;
           await editor.OpenAsync(fileStream, ImportFormatType.Docx);
       }
   }
}

Regards,
Saran N.

[Austin Smith]

Hello-

I've updated our Syncfusion packages to the latest version, and I am setting the container's default character format to a font size of 10 before loading the document.

await _container.SetDefaultCharacterFormat(new CharacterFormatProperties { FontSize = 10 });
await _container.DocumentEditor.OpenAsync(stream, ImportFormatType.Docx);

 Copy

However, the text is still being loaded with a default font size of 11 (although the same document, saved to disk and opened in MS Word, has a default font size of 10). Is there something else I need to do to force the editor to acknowledge the default font size?

Thanks for your help,

-Austin Smith

[Mohammed Affan Saqib Hussain]

Hi Austin Smith,

We have attached a sample for your reference. Please use the attached sample to check the issue.

Regards,

Mohammed Affan C

Attachment: BlazorApp_ce466e4e.zip

[Austin Smith]

Hi Mohammed-

I'm still seeing the same issue. In the screenshot below, the same document is open in MS Word on the left, and your attached sample application on the right. The text is being drawn differently, and the bottom line of the top left table cell (which contains a URL) is being cut off.

[Mohammed Affan Saqib Hussain]

Hi Austin Smith,

Using the document you provided, we attempted to replicate the issue; however, we did not observe any differences in the layout. We compared the document side by side in MS Word and Document Editor and found no discrepancies. For your reference, we have attached a video.

Regards,

Mohammed Affan C

Attachment: DocumentLayout_6f00d259.zip

[Austin Smith]

Hello Mohammed-

The problem is that the phone number is initially cut off, and cannot be seen. Since this document is intended to be printed on labels which have specific dimensions, it's not viable in practice to resize the table cells to fit. Is there no way to get it to render exactly the same in both Word and the

[Mohammed Affan Saqib Hussain]

Hi Austin Smith,

We have reviewed the provided document and observed that its layout is similar to that of the Document Editor. Upon closer examination, we noticed that the table row includes a specific height property with the 'Exactly' option enabled. This setting restricts the row's height to the defined value.

For your reference, we have attached a video showcasing the layout in MS Word. Kindly review the video.

Regards,

Mohammed Affan C

Attachment: DocumentTableRendering_6ed7c08c.zip