How to insert the css formatting as it is in HTNL when populating a docx file with insert_html()

In my task, we are collecting user inputs from the CKEditor (in HTML format) and populating them into DOCX files. However, when formatting is applied, even though I provide the CSS values generated by CKEditor, the formatting does not appear correctly in the DOCX.

code:
files.zip (79.4 KB)

CK editor input :

actual output :

Expected formatting:

@sachithaPDF

To ensure that CSS formatting from HTML is preserved when using the insert_html() method to populate a DOCX file, you can utilize the HtmlSaveOptions class in Aspose.Words. Here’s a structured approach to address the issue:

Cause: When inserting HTML into a DOCX file, CSS styles may not be preserved if the appropriate options are not configured.

Solution: Use the HtmlSaveOptions class to set specific properties that control how CSS and other resources are handled during the conversion process. Here are some key settings to consider:

  1. CSS Stylesheet Type: Set the CssStyleSheetType to CssStyleSheetType.EXTERNAL to save CSS in an external file, or CssStyleSheetType.INLINE to embed it directly in the HTML.

  2. Export Font Resources: Enable the export of font resources by setting ExportFontResources to true. This ensures that the fonts used in the HTML are available in the DOCX.

  3. Export Images: If your HTML contains images, set the ImagesFolder property to specify where images should be saved.

  4. Use High-Quality Rendering: For better quality of images and shapes, enable high-quality rendering options.

Next Steps: Here’s a sample code snippet to illustrate how to set these options:

Document doc = new Document();
HtmlSaveOptions options = new HtmlSaveOptions(SaveFormat.HTML);
options.setCssStyleSheetType(CssStyleSheetType.EXTERNAL);
options.setExportFontResources(true);
options.setImagesFolder("path/to/images");
options.setPrettyFormat(true); // Optional for better readability

// Insert HTML content
doc.getFirstSection().getBody().insertHtml("<div style='color: red;'>Hello World!</div>", options);
doc.save("output.docx");

Make sure to adjust the paths and settings according to your specific requirements. This approach will help maintain the CSS formatting as intended when converting HTML to DOCX.

If you have any further questions or need additional assistance, feel free to ask!

@sachithaPDF You should note, that HTML documents and MS Word documents object models are quite different and it is not always possible to provide 100% fidelity after conversion one format to another. In most cases Aspose.Words mimics MS Word behavior when work with HTML documents.
I am afraid there is no way to 100% preserve formatting of content imported from HTML.

If convert your HTML to MS Word document using MS Word the result is the same as Aspose.Words:
ms.docx (49.1 KB)

I simplified your HTML to the following:
in.zip (34.2 KB)