Tools to Capture and Convert the Web

Supported CSS attributes when converting HTML to DOCX

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 HTML to 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
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
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
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 page-break-after, page-break-inside More information on how to use page breaks in your app.

Special DOCX HTML elements

While not strictly CSS, these features can help you enhance your Word document and are worth being noted here.