The AppendHtml() method of WParagraph ignores HTML attributes

Hello,

I am using the AppendHtml() method of WParagraph to populate a document with HTML text. The HTML includes elements with in-line style attributes, and I'd like the style CSS properties in the style attributes to be reflected in the resulting document (in particular the 'color' property). 

However, it seems that all attributes are ignored in the styling of the resulting document.

Could you tell me if there is a way around this? 

Kind regards,

Barney.



6 Replies 1 reply marked as answer

DS Dharanya Sakthivel Syncfusion Team October 28, 2024 11:43 AM UTC

Hi Barney,

We tried to reproduce the issue by adding inline styles with the color property using the AppendHtml() method, and it worked as expected. The styles, including colors, appeared correctly in the resulting document. Please refer to the code snippet below and resultant document in the below attachment.

// Create a new Word document.

 using (WordDocument document = new WordDocument())

 {

     // Add a new section and paragraph to the document.

     IWSection section = document.AddSection();

     IWParagraph paragraph = section.AddParagraph();

 

     // Define the HTML content with inline CSS.

     string htmlContent = @"

 <html>

     <body>

         <h1 style='color: #2E86C1; font-size: 24px;'>Welcome to Syncfusion DocIO</h1>

         <p style='color: #A93226; font-size: 18px; font-family: Arial;'>

             This is a paragraph with inline CSS. The text color is red, and the font is Arial.

         </p>

         <p style='color: #117A65; font-size: 16px;'>

             Inline styles allow you to apply specific styles to individual elements. This text is green.

         </p>

         <p style='color: #884EA0; font-size: 16px;'>

             Another paragraph with a different color. This text is purple.

         </p>

         <p style='background-color: #F7DC6F; color: #000; font-weight: bold;'>

             This paragraph has a yellow background and bold, black text.

         </p>

     </body>

 </html>";

 

     // Append HTML content to the paragraph.

     paragraph.AppendHTML(htmlContent);

 

     // Save the document to a file.

     using (FileStream outputFileStream = new FileStream(@"C:\Downloads\HTML-Content.docx", FileMode.Create, FileAccess.ReadWrite))

     {

         document.Save(outputFileStream, FormatType.Docx);

     }

 

     // Close the document.

     document.Close();

 }


If you are still experiencing the same issue, kindly share the complete code snippet and HTML file you are using. Based on that we will check and update you.


Regards,
Dharanya.



DS Dharanya Sakthivel Syncfusion Team October 28, 2024 11:44 AM UTC

 Barney, kindly refer to the attached result document which we generated at our end.


Attachment: HTMLContent_6ccbb15e.docx


BW Barney Walton replied to Dharanya Sakthivel October 28, 2024 12:03 PM UTC

Hi Dharanya,

Thank you very much for you prompt reply.  


The issue is in fact with the the style attribute only, and the color CSS property of RGBA format, e.g.

<span style="color: rgba(10, 20, 30, 1);">Some text</span>.


My apologies for providing you with inaccurate information.


Kind regards,

Barney



DS Dharanya Sakthivel Syncfusion Team October 29, 2024 06:36 PM UTC

Barney,

We tried to reproduce the issue using the provided RGBA color styling; however, Microsoft Word does not support this styling.

As a workaround, please use the previously shared code snippet to apply color or refer to the below HTML code to apply color.

<p>My mother has <span style=\"color:#0070C0\">blue</span> eyes.</p>


Regards,
Dharanya.


Marked as answer

BW Barney Walton October 31, 2024 02:40 PM UTC

Hi Dharanya,

Thank you very much for your help. I've substituted the RGBA-formatted styling for hex strings, and it works very well now.

Kind regards,

Barney



CA Chrispine Agunja Imbo Syncfusion Team November 1, 2024 05:25 AM UTC

Hi Barney,

We are glad to know that it works. Please feel free to contact us if you have any questions.

Regards,

Chris


Loader.
Up arrow icon