Supported CSS attributes when creating DOCX from HTML
GrabzIt's HTML to DOCX converter reads all HTML elements and tries to produce the nearest approximation to each element in DOCX. As we use a browser to do the parse styles of HTML elements either the the browser CSS is used for the element type or custom CSS provided by the HTML.
The table below details how the DOCX text, images, tables, horizontal lines and sections can be styled, while this only gives a broad overview of what the DOCX convertor does it should enable you to easily create HTML that can be converted into great DOCX documents.
| Text | ||
|---|---|---|
| DOCX Attributes | CSS Attributes | Notes |
| font | font-family | |
| font size | font-size | |
| font color | color | |
| left and right spacing | padding-left, padding-right, margin-left, margin -right | |
| top and bottom spacing | padding-top, padding-bottom, margin-top, margin -bottom | |
| line spacing | line-height | |
| kerning | letter-spacing | |
| highlighting | background-color | This will only be applied if it matches one of the highlight colours allowed by the DOCX specification: black, blue, cyan, darkBlue, darkCyan, darkGray, darkGreen, darkMagenta, darkRed, darkYellow, green, lightGray, magenta, none, red, white, yellow |
| bold | font-weight | |
| italic | font-style | |
| underline | text-decoration | |
| underline color | text-decoration-color | |
| underline style | text-decoration-style | |
| strike through | text-decoration | |
| alignment | text-align | |
| direction | direction | |
| uppercase, lowercase, title case | text-transform | |
| small caps | font-variant-caps | |
| text indent | text-indent | |
| superscript and subscript | vertical-align | |
| emboss, engrave, shadow, outline | text-shadow | |
| headings | h1, h2, h3, h4, h5, h6 tags | |
| border width | border-width | Note that these CSS styles will only be applied to the text if all sides of the border have the same value for each attribute type. |
| border color | border-color | |
| border style | border-style | |
| Table | ||
| DOCX Attributes | CSS Attributes | Notes |
| border width | border-width | |
| border color | border-color | |
| border style | border-style | |
| alignment | text-align | |
| keep with next | break-inside | Only applies if the "avoid" option is chosen. |
| Table Row | ||
| DOCX Attributes | CSS Attributes | Notes |
| break across pages | break-inside | Applies, unless the "avoid" option is chosen. |
| Table Cell | ||
| DOCX Attributes | CSS Attributes | Notes |
| border width | border-width | |
| border color | border-color | |
| border style | border-style | |
| vertical alignment | vertical-align | |
| shading | background-color | |
| cell padding | padding | |
| cell width | width | In DOCX there is no concept of cell height. |
| Image | ||
| DOCX Attributes | CSS Attributes | Notes |
| left and right spacing | padding-left, padding-right, margin-left, margin -right | |
| top and bottom spacing | padding-top, padding-bottom, margin-top, margin -bottom | |
| alignment | text-align, margin-left, margin-right, float | |
| direction | direction | |
| rotation | transform | |
| border width | border-width | Note that these CSS styles will only be applied to the image if all sides of the border have the same value for each attribute type. |
| border color | border-color | |
| border style | border-style | |
| List | ||
| DOCX Attributes | CSS Attributes | Notes |
| list item marker | list-style-type | |
| left and right spacing | padding-left, padding-right, margin-left, margin -right | |
| top and bottom spacing | padding-top, padding-bottom, margin-top, margin -bottom | |
| keep with next | break-inside | Only applies if the "avoid" option is chosen. |
| Horizontal Line | ||
| DOCX Attributes | CSS Attributes | Notes |
| border color | border-color | |
| border style | border-style | |
| Section | ||
| DOCX Attributes | CSS Attributes | Notes |
| number of columns | column-count | |
| column line | column-rule | |
| column spacing | column-gap | |
| page breaks | break-after, break-inside | More information on how to use page breaks in your app. |
| Form Controls | ||
| DOCX Attributes | CSS Attributes | Notes |
| font | font-family | |
| font size | font-size | |
| font color | color | |
| left and right spacing | padding-left, padding-right, margin-left, margin -right | |
| top and bottom spacing | padding-top, padding-bottom, margin-top, margin -bottom | |
| highlighting | background-color | This will only be applied if it matches one of the highlight colours allowed by the DOCX specification: black, blue, cyan, darkBlue, darkCyan, darkGray, darkGreen, darkMagenta, darkRed, darkYellow, green, lightGray, magenta, none, red, white, yellow |
| bold | font-weight | |
| italic | font-style | |
| underline | text-decoration | |
| underline color | text-decoration-color | |
| underline style | text-decoration-style | |
| strike through | text-decoration | |
| alignment | text-align | |
| direction | direction | |
| uppercase, lowercase, title case | text-transform | |
| small caps | font-variant-caps | |
| superscript and subscript | vertical-align | |
| emboss, engrave, shadow, outline | text-shadow | |
| border width | border-width | Note that these CSS styles will only be applied to the text if all sides of the border have the same value for each attribute type. |
| border color | border-color | |
| border style | border-style | |
Special DOCX HTML elements
While not strictly CSS, these features can help you enhance your Word document and are worth being noted here.
Not enough information read about the approach GrabzIt takes when converting HTML to DOCX.