DOCX to HTML Conversion has different CSS margin styles using Aspose.Words Cloud API

Anatoliy · August 28, 2019, 12:12pm

Hi, I have a question. I want to know how do you build html code from docx file? Sometimes I get html code with different margin styles constructions. For example: I can get margin-top: 10pt; margin-bottom: 5pt; I can get margin: 10pt 0 5pt; I want to know how do you build margins styles in html code?

BR,
Anatoliy

tilal.ahmad · August 28, 2019, 3:33pm

@Anatoliy,

Thanks for your inquiry. We will appreciate it if you please share your documents showing different margin styles. It will help us to address your query exactly.

Anatoliy · August 29, 2019, 4:00am

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Style-Type" content="text/css" /><meta name="generator" content="Aspose.Words for .NET 19.3" /><title></title></head><body><div>ACTION BY WRITTEN CONSENTOF THE STOCKHOLDERS OFXYZ, INC.DATEPursuant to Section 228 of the Delaware General Corporation Law and Section 2.11 of the Bylaws of XYZ, Inc., a Delaware corporation (the “Company”), the undersigned stockholders of the Company hereby take the following actions and adopt the following resolutions by written consent:<ol type="1" style="margin:0pt; padding-left:0pt"><li style="margin-bottom:12pt; text-align:justify; font-family:'Times New Roman'; font-size:12pt; font-weight:bold; list-style-position:inside; -aw-list-padding-sml:22pt">               Certificate of Incorporation.</li></ol>RESOLVED:  That a copy of the Certificate of Incorporation of the Company as filed with the Delaware Secretary of State and bearing the file stamp and certification of the Delaware Secretary of State, and attached hereto as Exhibit A, is hereby accepted and ratified.<ol start="2" type="1" style="margin:0pt; padding-left:0pt"><li style="margin-bottom:12pt; text-align:justify; font-family:'Times New Roman'; font-size:12pt; font-weight:bold; list-style-position:inside; -aw-list-padding-sml:22pt">               Bylaws.</li></ol>RESOLVED:  That a copy of the Bylaws of the Company as adopted by the Incorporator of the Company and approved by the Board of Directors of the Company, and attached hereto as Exhibit B, is hereby accepted and ratified.<ol start="3" type="1" style="margin:0pt; padding-left:0pt"><li style="margin-bottom:12pt; text-align:justify; font-family:'Times New Roman'; font-size:12pt; font-weight:bold; list-style-position:inside; -aw-list-padding-sml:22pt">               Adoption of YEAR Stock Plan.</li></ol>RESOLVED:  That the YEAR Stock Plan (the “Plan”), in substantially the form attached hereto as Exhibit C, is hereby adopted and approved and RESERVED SHARES shares of the Company’s Common Stock are hereby reserved for issuance thereunder.<ol start="4" type="1" style="margin:0pt; padding-left:0pt"><li style="margin-bottom:12pt; text-align:justify; font-family:'Times New Roman'; font-size:12pt; font-weight:bold; list-style-position:inside; -aw-list-padding-sml:22pt">               Indemnification Agreement.</li></ol>RESOLVED:  That the Company may enter into Indemnification Agreements with its present and future officers and directors in substantially the form attached hereto as Exhibit D, together with any changes to such agreements determined by the Chief Executive Officer of the Company to be desirable.  Such determination shall be conclusively evidenced by such officer’s execution and delivery of a definitive Indemnification Agreement.RESOLVED FURTHER:  That the officers of the Company are authorized to execute such Indemnification Agreements on behalf of the Company and to take whatever action they deem necessary to perform the Company’s obligations under such agreements.<ol start="5" type="1" style="margin:0pt; padding-left:0pt"><li style="margin-bottom:12pt; text-align:justify; font-family:'Times New Roman'; font-size:12pt; font-weight:bold; list-style-position:inside; -aw-list-padding-sml:22pt">               [S Corporation Election.</li></ol>RESOLVED:  That the undersigned stockholders consent to the Company’s election to be taxed as an “S corporation” under Section 1362(a) of the Internal Revenue Code and Section 23801(a) of the California Tax Code.RESOLVED FURTHER:  That the officers of this Company are hereby authorized and directed to solicit each stockholder’s consent to such election and to prepare, execute and file Internal Revenue Service Form 2553, together with a statement by each stockholder consenting to this election, and to do all other acts that may be required to make such elections effective.]<ol start="6" type="1" style="margin:0pt; padding-left:0pt"><li style="margin-bottom:12pt; text-align:justify; font-family:'Times New Roman'; font-size:12pt; font-weight:bold; list-style-position:inside; -aw-list-padding-sml:22pt">               Omnibus Resolution.</li></ol>RESOLVED:  That each of the officers of the Company is authorized and directed, on behalf of the Company, to execute and deliver any agreement, documents or instrument pursuant to or necessary to be delivered in connection with the foregoing resolutions, with such modifications or amendments thereto as may be approved by the officer or officers executing and delivering the same, such approval to be conclusively evidenced by the execution and delivery thereof.[Signature Page Follows] This action by written consent of the stockholders of the Company shall be effective as of the date the Company receives the requisite consent of the Company’s stockholders.  This action by written consent may be executed in any number of counterparts, each of which shall be deemed an original and all of which together shall constitute one instrument. This action by written consent shall be filed in the minute book of the Company. [name] _________________________________________(signature)Date of Signature: __________________________ EXHIBIT ACERtiFICATE OF INCORPORATION EXHIBIT BBYLAWS EXHIBIT CYEAR Stock plan</div> <div>exhibit dFORM OF INDEMNIFICATION AGREEMENT  </div></body></html>

Here, html code that I get after parse my .docx file. The html code contain the following structures “margin-top:0pt; margin-bottom:12pt;” or “margin:0pt;” or “margin:0pt 36pt 12pt;” or “margin-top:0pt; margin-left:36pt; margin-bottom:12pt;” or “margin-top:0pt; margin-left:216pt; margin-bottom:0pt;” and anothers. I would like how does the structure choice depend on the style parameters in .docx file?

BR,
Anatoliy

tilal.ahmad · August 29, 2019, 9:27am

@Anatoliy,

Thanks for your feedback. But I am afraid you have not shared your input docx files. As requested earlier, please share your input word documents those return different margins (10pts and 0pt) in resultant HTML. After checking the structure of the documents, we can guide you exactly.

Anatoliy · August 30, 2019, 6:30am

SLSForm - Organizational Stockholders Consent.docx - input docx file

tilal.ahmad · August 30, 2019, 12:25pm

@Anatoliy

I am afraid I am unable to find any document. Please double check and share the document. Please note you can zip the Word documents and attach here.

Anatoliy · August 31, 2019, 7:02am

SLSForm - Organizational Stockholders Consent.zip (23.4 KB)

Here input docx file

tilal.ahmad · August 31, 2019, 5:11pm

@Anatoliy

Thanks for sharing the sample document. We are looking into your query and will update you shortly.

tilal.ahmad · September 3, 2019, 1:23am

@Anatoliy,

Please note while converting DOCX to HTML default value of ExportPageMargins property is false and API does not preserve the page margins. If you want to preserve page margins in resultant HTML, you need to use SaveAs API with detailed HtmlSaveOptions as following. Hopefully it will help you to accomplish the task.

curl -X PUT "https://api.aspose.cloud/v4.0/words/SLSForm%20-%20Organizational%20Stockholders%20Consent.docx/saveAs"
-H "accept: application/json"
-H "authorization: Bearer [Access_Token]"
-H "Content-Type: application/json"
-d "{ "SaveFormat":"html", "FileName":"TestHtml_Margins.html", "ExportPageMargins": true}"

Anatoliy · September 3, 2019, 10:06am

Thank you for you answer. But my question not about it. I want to know how your api generate html with different margins. In what case we get as result margin with 4 values or 3 values, when we get as result margin with 2 values or 1 values, when we get ‘margin-left, margin-right, margin-top and margin-bottom values’ and not margin with different count of values?

BR,
Anatoliy

tilal.ahmad · September 3, 2019, 6:02pm

@Anatoliy,

Thanks for additional information. I am looking into the requirement and will share the details shortly.

tilal.ahmad · September 4, 2019, 5:12pm

@Anatoliy

I am afraid there is no simple rule. Aspose.Words calculates "margin-xxx" values of each element. Then removes styles that duplicate values applied from other sources (the default stylesheet or the stylesheet generated by Aspose.Words itself). Then tries to combine individual "margin-xxx" declarations to shorthand "margin" declarations. And then writes the result to the document.

In most cases "margin-left" and "margin-right" are exported from ParagraphFormat.LeftIndentLeftIndent and ParagraphFormat.RightIndentRightIndent. But they may be adjusted if HtmlSaveOptions.AllowNegativeIndent=false (which is the default) in order to prevent paragraph text from overflowing the browser window and being clipped.

Also, we adjust these values for list item paragraphs that are being exported to native HTML list items (<li> elements). This is required because HTML list items have their own default margins and paddings that affect positioning of list item text.

Please check some margin examples below, how Aspose.Words calculates the margins and write in HTML.

margin:72pt: all four margins are same because page margin is 1 inch for each side and exported because of the "ExportPageMargins=true" option.

margin:0pt 36pt 12pt: marign top=0, left=right=36 and bottom=12, margins of of the corresponding paragraph.

margin-top:0pt; margin-bottom:12pt: ParagraphFormat.LeftIndentLeftIndent and ParagraphFormat.RightIndent values are zero. Aspose.Words didn’t write “margin-left:0” and “margin-right:0” because it had calculated that these are applied to this element by default. We try to avoid writing CSS that would duplicate styles from other sources (for example, from the default CSS stylesheet used by browsers)

margin:0pt: <ol> is needed to zero vertical margins of this element. By default, <ol> elements have 1em top and bottom margins. "margin-top:0; margin-bottom:0" would do here, too. But we write "margin:0pt" for historical reasons.

However, can you please tell us why you need the margin calculation? So we can guide you exactly.

Anatoliy · September 5, 2019, 3:26am

Thank you for your answer.
I try selected different styles for different paragraphs (these data I get from aspose - format by each paragraph) and match them with styles that I get from aspose in html, but I receive fail in most cases because the margins that I take from the paragraph formats do not match the margins that come in html.
For example:

fragment html:

<p style="margin:0pt 36pt 12pt; text-align:justify; line-height:12pt"><span style="font-family:'Times New Roman'; font-size:12pt; font-weight:bold; text-decoration:underline">RESOLVED</span><span style="font-family:'Times New Roman'; font-size:12pt; font-weight:bold">:</span><span style="font-family:'Times New Roman'; font-size:12pt; -aw-import:spaces">&#xa0; </span><span style="font-family:'Times New Roman'; font-size:12pt">That a copy of the Certificate of Incorporation of the Company as filed with the Delaware Secretary of State and bearing the file stamp and certification of the Delaware Secretary of State, and attached hereto as </span><span style="font-family:'Times New Roman'; font-size:12pt; text-decoration:underline">Exhibit</span><span style="font-family:'Times New Roman'; font-size:12pt; text-decoration:underline">&#xa0;</span><span style="font-family:'Times New Roman'; font-size:12pt; text-decoration:underline">A</span><span style="font-family:'Times New Roman'; font-size:12pt">, is hereby accepted and ratified.</span></p>```

fragment json describing paragraph format

{
“id”: 1468,
“paragraph_id”: 1273,
“add_space_between_far_east_and_alpha”: true,
“add_space_between_far_east_and_digit”: true,
“alignment”: “Justify”,
“bidi”: false,
“drop_cap_position”: “None”,
“first_line_indent”: 0,
“keep_together”: false,
“keep_with_next”: false,
“left_indent”: 36,
“line_spacing”: 12,
“line_spacing_rule”: “AtLeast”,
“lines_to_drop”: 0,
“no_space_between_paragraphs_of_same_style”: false,
“outline_level”: “BodyText”,
“page_break_before”: false,
“right_indent”: 36,
“space_after”: 12,
“space_after_auto”: false,
“space_before”: 0,
“space_before_auto”: false,
“style_identifier”: “User”,
“style_name”: “Resolution”,
“suppress_auto_hyphens”: false,
“suppress_line_numbers”: false,
“Widow_control”: true,
“created_at”: “2019-08-23T06:45:19.556Z”,
“updated_at”: “2019-08-23T06:45:19.556Z”
}```

I usually build such mapping:
right_indent -> margin-right,
left_indent -> margin-left,
space_before -> margin-top,
space_after -> margin-bottom

In result I get margin-right: 36pt;margin-left: 36pt;margin-top: 0pt; margin-bottom: 0pt; and it not equal margin:0pt 36pt 12pt;

tilal.ahmad · September 5, 2019, 2:23pm

@Anatoliy

Can you please confirm how you are getting margin-bottom. As I see it is 12 pt in HTML, Word document and paragraph format as well.

Anatoliy · September 6, 2019, 2:21am

Sorry, I made typo, here I don’t have question, but my question why one margin (and not 4 margins: margin-right: 36pt;margin-left: 36pt;margin-top: 0pt; margin-bottom: 12pt; ), I get fail because different strings.

BR,
Anatoliy

tilal.ahmad · September 6, 2019, 6:44am

@Anatoliy

Thanks for the additional details. You know margin is a shorthand property of margin-top, margin-right, margin-bottom and margin-left. So where possible, we are using it to shorten the code. For example margin:72t and margin:0pt 36pt 12pt.

Anatoliy · September 6, 2019, 6:52am

I understood, but you have algorithm that set margin short or margins with specify side. I’d like to use like algorithm for my tasks.

BR,
Anatoliy

tilal.ahmad · September 6, 2019, 4:45pm

@Anatoliy,

As already stated above, Aspose.Words calculates all “margin-xxx” values, but writes only those that don’t duplicate values inherited from other sources. If some of the written values are same and can be represented with the shorthand property “margin”, Aspose.Words uses the shorthand. Otherwise, it writes individual properties.

Since individual calculated margin values depend on the structure of the document, there is no simple rule like “always write shorthand for lists” or “don’t write horizontal margins for paragraphs”.

Furthermore, in general you cannot match the CSS and Paragraph formatting. Because there is no 1-to-1 mapping between paragraph formatting and CSS styles. We have to adjust the CSS in certain cases in order to preserve the look of the document and compensate for differences between HTML and MS Word rendering rules.