InsertHTML into Word ignores the styling

Hello,

we have a HTML with a checkbox. This checkbox is designed with css. But after we insert the HTML we have no checkbox in the Word-Document.

If we insert the HTML without css it works.

Example (HTML and Docx are also in the attachment):

import com.aspose.words.Document;
import com.aspose.words.DocumentBuilder;

/**
* Created on 15.12.2016.
*/

public class AsposeTest {
public static void main(String[] args) {

try {

String html = "\n" +
"<html lang=\"en-gb\">\n" +
" \n" +
" <meta charset=\"UTF-8\">\n" +
" Example - pure CSS\n" +
" \n" +
" label {\n" +
"\tdisplay: inline;\n" +
"}\n" +
"\n" +
".regular-checkbox {\n" +
"\tdisplay: none;\n" +
"}\n" +
"\n" +
".regular-checkbox + label {\n" +
"\tbackground-color: #fafafa;\n" +
"\tborder: 1px solid #cacece;\n" +
"\tbox-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);\n" +
"\tpadding: 9px;\n" +
"\tborder-radius: 3px;\n" +
"\tdisplay: inline-block;\n" +
"\tposition: relative;\n" +
"}\n" +
"\n" +
".regular-checkbox + label:active, .regular-checkbox:checked + label:active {\n" +
"\tbox-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);\n" +
"}\n" +
"\n" +
".regular-checkbox:checked + label {\n" +
"\tbackground-color: #e9ecee;\n" +
"\tborder: 1px solid #adb8c0;\n" +
"\tbox-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);\n" +
"\tcolor: #99a1a7;\n" +
"}\n" +
"\n" +
".regular-checkbox:checked + label:after {\n" +
"\tcontent: '\\2714';\n" +
"\tfont-size: 14px;\n" +
"\tposition: absolute;\n" +
"\ttop: 0px;\n" +
"\tleft: 3px;\n" +
"\tcolor: #99a1a7;\n" +
"}\n" +
"\n" +
".tag {\n" +
"\tfont-family: Arial, sans-serif;\n" +
"\twidth: 200px;\n" +
"\tposition: relative;\n" +
"\ttop: 5px;\n" +
"\tfont-weight: bold;\n" +
"\ttext-transform: uppercase;\n" +
"\tdisplay: block;\n" +
"\tfloat: left;\n" +
"}\n" +
"\n" +
".button-holder {\n" +
"\tfloat: left;\n" +
"}\n" +
"\n" +
" \n" +
" \n" +
" \n" +
"
\n" +
"\t\t<div class=\"tag\">Checkbox Small
\n" +
"\t\t<input type=\"checkbox\" id=\"checkbox-1-1\" class=\"regular-checkbox\" /><label for=\"checkbox-1-1\">\n" +
"\t
\n" +
"\t
\n" +
"\t \n" +
"";


Document document = new Document();
DocumentBuilder documentBuilder = new DocumentBuilder(document);

documentBuilder.insertHtml(html);

document.save("C:\\temp\\testDocument.docx");

} catch (Exception e) {
e.printStackTrace();
}
}
}
Hi Cailun,

Thanks for your inquiry. We have tested the scenario and have managed to reproduce the same issue at our side. For the sake of correction, we have logged this problem in our issue tracking system as WORDSNET-14616. You will be notified via this forum thread once this issue is resolved.

We apologize for your inconvenience.
Hi Cailun,

Thanks for your patience. We regret to share with you that the issue WORDSNET-14616 has been postponed. You are facing this issue due to a missing feature. Please check the following analysis of this issue.

The checkbox in the HTML document is not a regular element. It is a custom-drawn empty element, which is associated with a hidden (display: none) element. When a user clicks the (the custom-drawn checkbox square), the associated activates (the :active pseudo-class is applied to the element). This causes an ::after pseudo-element containing a check mark character to appear on the .

Aspose.Words doesn't import the checkbox for the following reasons:

  • The actual element is hidden (display: none). Unlike MS Word, Aspose.Words ignores hidden elements on import. As a result, there is no usual checkbox in the resulting document.
  • The element, which represents the custom-drawn checkbox, is empty. Aspose.Words ignores empty inline elements in import, because there is no counterpart for them in the document model. As a result, there is no custom-drawn checkbox in the resulting document.

Aspose.Words is not able to recognize the element as a checkbox, because it cannot analyse dynamic behavior of HTML elements.

Note that it is the 'display: none' style that causes the element to be ignored by Aspose.Words. You can workaround this issue by replaceing style "regular-checkbox" with following style. Hope this helps you.

.regular-checkbox {
position: absolute;
width: 1px;
height: 1px;
}

We apologize for your inconvenience.

Hi Tahir,


thanks for the information - you are right, with the new class works, thanks.

But, the styling of the checkbox is getting lost. Have you maybe planned that Aspose.Words will import custom styled elements?

Greetings
Hi Cailun,

Thanks for your inquiry. Please note that Aspose.Words mimics the same behavior as MS Word does. Could you please share your expected output Word document here for our reference? We will then provide you more information on this.

The issues you have found earlier (filed as ) have been fixed in this update. This message was posted using BugNotificationTool from Downloads module by MuzammilKhan