Saving in HTML format with External CSS doesn't embed background in the CSS class

I tried to convert a document with custom styles (“titre” stands for “title” in french):

  • Titre 1 Update
  • Style Update

They are used to let the author points out the updated part of his document (Titre 1 Update is applied to a section, Style Update to a paragraph). Basically, they just embed a background color.

So I tried to convert it into the HTML format, with an external css file as option (sorry, it’s VB.NET):

Dim doc As Document = New Aspose.Words.Document("D:\lorem_ipsum.docx")
Dim so As Saving.HtmlSaveOptions = New Saving.HtmlSaveOptions(SaveFormat.Html)
so.CssStyleSheetType = Aspose.Words.Saving.CssStyleSheetType.External
doc.Save("D:\lorem_ipsum.html", so)

The CSS class definition looks OK:

/* CSS */
.Titre1Update {
    margin-top: 18pt;
    margin-left: 21.6pt;
    margin-bottom: 12pt;
    text-indent: -21.6pt;
    text-align: left;
    page-break-after: avoid;
    font-family: 'Times New Roman';
    font-size: 14pt;
    font-weight: bold;
    background-color: #dbe5f1;
}

The HTML code seems to disable - among other style definitions - the background and performs an overriding at the parent node level:

<div style="margin-top:18pt; margin-bottom:12pt; background-color:#dbe5f1"> <!-- /!\ overrriding -->
<p class="Titre1Update" style="margin-top:0pt; margin-bottom:0pt; background-color:transparent"
		<span>1</span>
		<span style="font:7pt 'Times New Roman'; -awimport:spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>
		<a name="_Toc536782546">
			<span>Lorem</span>
			<span> </span>
			<span>Ipsum</span>
		</a>
	</p>
</div>`

Hence, editing the CSS file won’t have an effect on the HTML conversion. However, it looks fine for Style Update applied to the paragraph.

<p class="StyleUpdate">
	<span>Lorem</span>
	<span> </span>
	<span>ipsum</span>
	<span> dolor sit </span>
	<!-- [...] -->
	<span> tempus.</span>
</p>

the Is there a way to prevent that? I also uploaded the docx sample (13.7 KB) in a ZIP format.

Best regards.

@monir.aittahar

Thanks for your inquiry. Could you please share some more detail about your query what exact you want to achieve using Aspose.Words? Please share your expected output HTML here for our reference. We will then provide you more information about your query.

Thank for you reply @tahir.manzoor.

Maybe it wasn’t clear, actually if I attempt to edit the CSS class which is set to the <p> element, the changes could be overridden by the inline style of the div element.

Did I miss something in the previous code lines?

Regards,
M

@monir.aittahar

Thanks for your inquiry. It seems that your query is more related to HTML and CSS. No, the changes will not affect on inline style of DIV tag. The changes will behave according to CSS and HTML standards. You need to modify the HTML according to your requirement.

@tahir.manzoor,

Thanks for your reply.

If I understand correctly, there isn’t a conversion option to completely embed the inline styles - the ones which are from a defined style in a Document - inside CSS classes ? I mean something looking like (or anything similary):

<div style="Titre1Update">
    <p class="margin-bottom:0pt; background-color:transparent">
        <!-- [...] -->
    </p>
</div>`

Regards.

@monir.aittahar

Thanks for your inquiry. We suggest you please check the detail of CssStyleSheetType.

When CssStyleSheetType is set as CssStyleSheetType.External, Aspose.Words exports the CSS correctly in .css file. The style applied to paragraph is exported in .css file. However, there are some other formatting set to paragraph are exported as inline style e.g. space after/before.

Could you please share some more detail about your issue that you are facing with output HTML that is generate by Aspose.Words? We will then provide you more information about your query.

@tahir.manzoor,

Thanks for your reply. Actually I was wondering if I could be able to edit the CSS classes programmatically after a conversion (for example, to set a common style to a document set). If the style keeps being duplicated (both in a class and inline), this won’t have any effect.

Regards.

@monir.aittahar

Thanks for your inquiry. Aspose.Words does not provide API to edit CSS styles. However, regarding the duplicate CSS issue, we have noticed that the style background-color:#dbe5f1" is exported in CSS file and DIV tag. For the sake of correction, we have logged this problem in our issue tracking system as WORDSNET-18121. You will be notified via this forum thread once this issue is resolved.

We apologize for your inconvenience.

Thank you @tahir.manzoor, it was the point of my question indeed.

Best regards.

@monir.aittahar

Thanks for your feedback. We will inform you via this forum thread once this issue is resolved. Please let us know if you have any more queries.