HTML to DOCX conversion issue with list numbers using .NET

Aspose.Words Product Family
1

Hello,

I would like to know how a nested numbered list can be rendered in Aspose word document.

I’m creating the document from an input html builder. The input HTML has a global style which would render the nested numbered list.
Nested numbered list.PNG (2.9 KB)

HTML is rendered using below CSS global styles -
ol {
counter-reset: item;
}

ol li {
display: block
}

ol li:before {
content: counters(item, “.”) ". ";
counter-increment: item;
}

In aspose doc though I am not able to apply global CSS styles in HTML.

Any help would be appreciated. Thanks.

2

@sujishpradeep

Could you please ZIP and attach your input and expected output documents here for our reference? We will then provide you more information on it along with code example.

3

Hi Tahir,
Thanks for the response.

I have provided input html, expected and actual output.

In the dotnet core backend, I would build the document from this HTML using htmlbuilder.

documentBuilder.InsertHtml(htmlBuilder.ToString());

Nested Number.zip (7.9 KB)

Please note that a global CSS style is applied to input HTML -

ol {
counter-reset: item;
}

ol li {
display: block
}

ol li:before {
content: counters(item, “.”) ". ";
counter-increment: item;
}

The problem I’m facing is I am not able apply this style when building html because ol li:before here is pseudo class which cannot be added as an inline style.

4

@sujishpradeep

You are facing the expected behavior of Aspose.Words. To get the desired output, you need to insert the following HTML into document.

<!DOCTYPE html>
<html>
<head>
<style>
ol {
counter-reset: item;
}

ol li {
display: block
}

ol li:before {
content: counters(item, ".") ".";
counter-increment: item;
}
</style>
</head>
<body>

<ol><li>Vehicles<ol><li>Four wheels<ol><li>Cars</li><li>Bus</li></ol></li><li>Two wheels<ol><li>Cycle</li></ol></li></ol></li><li>Test<ol><li>Test<ol><li>&nbsp;</li></ol></li></ol></li><li>Gadgets<ol><li>Laptop</li></ol></li></ol>
</body>
</html>

You can also import this HTML into Aspose.Words’ DOM and insert it at desired location using DocumentBuilder.InsertDocument method.

5

Hi Tahir,

Thanks for quick response.

I have tried with similar HTML format and still getting weird results.

The attached image has the actual output. You can see the second level of numbering does not start correctly.
Nested Number2.zip (6.1 KB)

Instead of 2.1 Test and 3.1 Laptop. The output is 1.1 Test and 1.1 Laptop.

Can you take a look at this? Please ignore the red underline in image.

I have provided the htmlstring used for test which was converted to doc using documentBuilder.InsertHtml.

Thanks.

6

@sujishpradeep

We have tested the scenario using the latest version of Aspose.Words for .NET 20.7 with following code example and have not found the shared issue. So, please use Aspose.Words for .NET 20.7. We have attached the output DOCX with this post for your kind reference. output.zip (7.5 KB)

Document doc = new Document();
DocumentBuilder builder = new DocumentBuilder(doc);
builder.InsertHtml(File.ReadAllText(MyDir + "Nested Number2.html"));
doc.Save(MyDir + "output.docx");
7

Thanks again. I have updated the aspose version and it works well now.

8

@sujishpradeep

Thanks for your feedback. Please feel free to ask if you have any question about Aspose.Words, we will be happy to help you.

9

Very informative post. I really do hope and pray this stuff works!

10

@GreenNinja

Please feel free to ask if you have any question about Aspose.Words, we will be happy to help you.