We're sorry Aspose doesn't work properply without JavaScript enabled.

Free Support Forum - aspose.com

Word to HTML - Nested Ordered List Issues

Aspose.Words Product Family
#1
Issue:
Nested ordered lists are not being rendered as ordered lists themselves. The resulting HTML will look correct, but that is because the subsequent nested lists are being rendered as paragraphs and their margin styling is being offset to compensate.

This causes massive repercussions when expecting to run the resulting html into a rich html editor, hitting enter at the end of one of these "ordered" lists results in a new line, not a new list item, since its using paragraph and not ordered list tag as it should.

Source Document:

Resulting HTML:




    <li style=
    "font-family:Calibri; font-size:11pt; line-height:108%; margin:0pt 0pt 0pt 13.35pt; padding-left:4.65pt; text-indent:0pt">
    First

    <li style=
    "font-family:Calibri; font-size:11pt; line-height:108%; margin:0pt 0pt 0pt 13.35pt; padding-left:4.65pt; text-indent:0pt">
    <span style=
    "font-family:Calibri; font-size:11pt">Second

    <li style=
    "font-family:Calibri; font-size:11pt; line-height:108%; margin:0pt 0pt 0pt 13.35pt; padding-left:4.65pt; text-indent:0pt">
    Third

    <p style=
    "font-size:11pt; line-height:108%; margin:0pt 0pt 0pt 39.6pt; text-indent:-21.6pt">
    <span style=
    "font-family:Calibri; font-size:11pt">3.1.<span style=
    "font:7.0pt 'Times New Roman'">   <span style=
    "font-family:Calibri; font-size:11pt">Third.First

    <p style=
    "font-size:11pt; line-height:108%; margin:0pt 0pt 0pt 61.2pt; text-indent:-25.2pt">
    3.1.1.
    <span style=
    "font-family:Calibri; font-size:11pt">Third.First.First

    <p style=
    "font-size:11pt; line-height:108%; margin:0pt 0pt 0pt 61.2pt; text-indent:-25.2pt">
    3.1.2.
    <span style=
    "font-family:Calibri; font-size:11pt">Third.First.<span style=
    "font-family:Calibri; font-size:11pt">Second

    <p style=
    "font-size:11pt; line-height:108%; margin:0pt 0pt 0pt 61.2pt; text-indent:-25.2pt">
    3.1.3.
    <span style=
    "font-family:Calibri; font-size:11pt">Third.First.<span style=
    "font-family:Calibri; font-size:11pt">Third

    <p style=
    "font-size:11pt; line-height:108%; margin:0pt 0pt 0pt 61.2pt; text-indent:-25.2pt">
    3.1.4.
    <span style=
    "font-family:Calibri; font-size:11pt">Third.First.Fourth

    <p style=
    "font-size:11pt; line-height:108%; margin:0pt 0pt 0pt 39.6pt; text-indent:-21.6pt">
    <span style=
    "font-family:Calibri; font-size:11pt">3.2.<span style=
    "font:7.0pt 'Times New Roman'">   <span style=
    "font-family:Calibri; font-size:11pt">Third.Second

    <p style=
    "font-size:11pt; line-height:108%; margin:0pt 0pt 0pt 39.6pt; text-indent:-21.6pt">
    <span style=
    "font-family:Calibri; font-size:11pt">3.3.<span style=
    "font:7.0pt 'Times New Roman'">   <span style=
    "font-family:Calibri; font-size:11pt">Third.Third

    <p style=
    "font-size:11pt; line-height:108%; margin:0pt 0pt 0pt 39.6pt; text-indent:-21.6pt">
    <span style=
    "font-family:Calibri; font-size:11pt">3.4.<span style=
    "font:7.0pt 'Times New Roman'">   <span style=
    "font-family:Calibri; font-size:11pt">Third.Fourth

    <p style=
    "font-size:11pt; line-height:108%; margin:0pt 0pt 0pt 39.6pt; text-indent:-21.6pt">
    <span style=
    "font-family:Calibri; font-size:11pt">3.5.<span style=
    "font:7.0pt 'Times New Roman'">   <span style=
    "font-family:Calibri; font-size:11pt">Third.Fifth

      <li style=
      "font-family:Calibri; font-size:11pt; line-height:108%; margin:0pt 0pt 0pt 13.35pt; padding-left:4.65pt; text-indent:0pt">
      <span style=
      "font-family:Calibri; font-size:11pt">Fourth

      <li style=
      "font-family:Calibri; font-size:11pt; line-height:108%; margin:0pt 0pt 0pt 13.35pt; padding-left:4.65pt; text-indent:0pt">
      Fifth

      <li style=
      "font-family:Calibri; font-size:11pt; line-height:108%; margin:0pt 0pt 0pt 13.35pt; padding-left:4.65pt; text-indent:0pt">
      Sixth

      <p style=
      "font-size:11pt; line-height:108%; margin:0pt 0pt 0pt 39.6pt; text-indent:-21.6pt">
      <span style=
      "font-family:Calibri; font-size:11pt">6.1.<span style=
      "font:7.0pt 'Times New Roman'">   <span style=
      "font-family:Calibri; font-size:11pt">Sixth.First

      <p style=
      "font-size:11pt; line-height:108%; margin:0pt 0pt 0pt 61.2pt; text-indent:-25.2pt">
      6.1.1.
      <span style=
      "font-family:Calibri; font-size:11pt">Sixth.First.First

      <p style=
      "font-size:11pt; line-height:108%; margin:0pt 0pt 0pt 86.4pt; text-indent:-32.4pt">
      <span style=
      "font-family:Calibri; font-size:11pt">6.1.1.1.<span style=
      "font:7.0pt 'Times New Roman'">             
      <span style=
      "font-family:Calibri; font-size:11pt">Sixth.First.First.First

      <p style=
      "font-size:11pt; line-height:108%; margin:0pt 0pt 0pt 111.6pt; text-indent:-39.6pt">
      <span style=
      "font-family:Calibri; font-size:11pt">6.1.1.1.1.<span style=
      "font:7.0pt 'Times New Roman'">                    
      <span style=
      "font-family:Calibri; font-size:11pt">Sixth.First.First.First.First

      <p style=
      "font-size:11pt; line-height:108%; margin:0pt 0pt 0pt 136.8pt; text-indent:-46.8pt">
      <span style=
      "font-family:Calibri; font-size:11pt">6.1.1.1.1.1.<span style=
      "font:7.0pt 'Times New Roman'">   <span style=
      "font-family:Calibri; font-size:11pt">Sixth.First.First.First.First.First

      <p style=
      "font-size:11pt; line-height:108%; margin:0pt 0pt 0pt 162pt; text-indent:-54pt">
      <span style=
      "font-family:Calibri; font-size:11pt">6.1.1.1.1.1.1.<span style=
      "font:7.0pt 'Times New Roman'">        
      <span style=
      "font-family:Calibri; font-size:11pt">Sixth.First.First.First.First.First.First

      <p style=
      "font-size:11pt; line-height:108%; margin:0pt 0pt 0pt 162pt; text-indent:-54pt">
      <span style=
      "font-family:Calibri; font-size:11pt">6.1.1.1.1.1.2.<span style=
      "font:7.0pt 'Times New Roman'">        
      <span style=
      "font-family:Calibri; font-size:11pt">Sixth.First.First.First.First.First.Second

      <p style=
      "font-size:11pt; line-height:108%; margin:0pt 0pt 0pt 162pt; text-indent:-54pt">
      <span style=
      "font-family:Calibri; font-size:11pt">6.1.1.1.1.1.3.<span style=
      "font:7.0pt 'Times New Roman'">        
      <span style=
      "font-family:Calibri; font-size:11pt">Sixth.First.First.First.First.First.Third

      <p style=
      "font-size:11pt; line-height:108%; margin:0pt 0pt 8pt 187.2pt; text-indent:-61.2pt">
      <span style=
      "font-family:Calibri; font-size:11pt">6.1.1.1.1.1.3.1.               
      <span style=
      "font-family:Calibri; font-size:11pt">Sixth.First.First.First.First.First.Third.First
      #2

      Hi Philip,


      Thanks for your inquiry.

      Aspose.Words mimics the behaviour of Microsoft Word. To you, this means that if you convert your input HTML file into Word document using Aspose.Words, the output will appear exactly as if it was done by Microsoft Word. However, you can control how list labels are exported to HTML by using the HtmlSaveOptions.ExportListLabels property. Please see the following code:

      Document doc = new
      Document(@“C:\Temp\Nested+Ordered+List.docx”);

      HtmlSaveOptions saveOptions = new HtmlSaveOptions(SaveFormat.Html);

      saveOptions.ExportListLabels = ExportListLabels.ByHtmlTags;

      doc.Save(@"C:\Temp\out.html", saveOptions);


      However, when using the above code, the list labels (numbering) and the distance between list label and list text are not being preserved in output HTML. I have logged this issue in our bug tracking system. The ID of this issue is WORDSNET-8881. Your request has also been linked to this issue and you will be notified as soon as it is resolved. Sorry for the inconvenience.

      Best regards,
      #3
      awais.hafeez:
      Hi Philip,

      Thanks for your inquiry.

      Aspose.Words mimics the behaviour of Microsoft Word. To you, this means that if you convert your input HTML file into Word document using Aspose.Words, the output will appear exactly as if it was done by Microsoft Word. However, you can control how list labels are exported to HTML by using the HtmlSaveOptions.ExportListLabels property. Please see the following code:

      Document doc = new Document(@"C:\Temp\Nested+Ordered+List.docx");

      HtmlSaveOptions saveOptions = new HtmlSaveOptions(SaveFormat.Html);

      saveOptions.ExportListLabels = ExportListLabels.ByHtmlTags;

      doc.Save(@"C:\Temp\out.html", saveOptions);


      However, when using the above code, the list labels (numbering) and the distance between list label and list text are not being preserved in output HTML. I have logged this issue in our bug tracking system. The ID of this issue is WORDSNET-8881. Your request has also been linked to this issue and you will be notified as soon as it is resolved. Sorry for the inconvenience.

      Best regards,

      Enabled that option, the ordered list html looks ok now. Thank you for logging that issue of appearance.



      However, I do have a follow up question though. The document I provided has the ordered list nested in a particular manner....the List Library (Word's term) of:
      1.
      1.1
      1.1.1

      Is this possible to have done?


      I have managed to post-process the document to include a snippet of code into the resulting html and thus provide the behavior I need. It would be much better if this was somehow automated by Aspose. Here is the snippet of code I introduce to get the correct ordered list styling:

      OL { counter-reset: item !important }
      LI { display: block !important}
      LI:before { content: counters(item, ".") " "; counter-increment: item !important}
      #4

      Hi Philip,


      Thanks for your inquiry. The list numbering and spacing problems will be addressed by WORDSNET-8881. We will inform you as soon as this issue is resolved. We apologize for any inconvenience. However, if you want to separate styling information from Html tags/content, you can use the following code:

      Document doc = new
      Document(@“C:\Temp\Nested+Ordered+List.docx”);

      HtmlSaveOptions saveOptions = new HtmlSaveOptions(SaveFormat.Html);

      saveOptions.PrettyFormat = true;

      saveOptions.CssStyleSheetType = CssStyleSheetType.Embedded;

      saveOptions.ExportListLabels = ExportListLabels.ByHtmlTags;

      doc.Save(@"C:\Temp\out.html", saveOptions);


      This option writes CSS styles separately from the content in a style sheet embedded in the HTML file.

      Best regards,
      #5

      Could you elaborate on what is actually confirmed as a bug with the ticket you logged for me? I have encountered other visual bugs and I am unsure if they match what you have already documented. If they aren’t the same I’d like to get them reported as bugs.


      One issue I’m seeing is that the
        tags have a “start=0” on them.
      Another is the ol tags are being given a style tag which includes margin and padding. I believe this is the one you mentioned.


      #6

      Hi Philip,


      Thanks for your inquiry. The spacing problem only occurs when you open the output Html with IE9. Please find attached a screenshot showing the problematic areas and the fix to WORDSNET-8881 will address these two problems. Please let me know if I can be of any further assistance.

      Best regards,
      #7

      Hi Philip,


      In addition to my last reply, to fix the spacing problem in IE9, we can offer you to use ExportXhtmlTransitional option as follows:

      Document doc = new
      Document(@“C:\Temp\Nested+Ordered+List.docx”);

      HtmlSaveOptions saveOptions = new HtmlSaveOptions(SaveFormat.Html);

      saveOptions.PrettyFormat = true;

      saveOptions.CssStyleSheetType = CssStyleSheetType.Embedded;

      saveOptions.ExportListLabels = ExportListLabels.ByHtmlTags;

      saveOptions.ExportXhtmlTransitional = true;

      doc.Save(@"C:\Temp\out.html", saveOptions);


      Rest assured, we will inform you via this thread as soon as this issue is resolved.

      Best regards,
      #8

      The issues you have found earlier (filed as WORDSNET-8881) have been fixed in this .NET update and this Java update.

      This message was posted using Notification2Forum from Downloads module by aspose.notifier.