email/emailinlinestylestransformations

Returns a collection of style property transformations designed for email compatibility.

These transformations convert modern CSS styles into HTML attributes better supported by email clients. The transformations focus on converting alignment-related CSS properties into corresponding HTML attributes.

Examples of transformations:

1. Float to align:

• <img style="float: left"> → <img align="left">

2. Shorthand margin for centering:

• <table style="margin: auto"></table> → <table width="100%"><tr><td align="center"><table style="..."></table></td></tr></table>

Note:

• The align attribute is only applied to the img elements.
• Tables aligned via margins are wrapped in a container table to ensure proper positioning in all email clients.
• The align attribute overrides any existing alignment attributes on these elements.
• If the float and margin are present, the float property takes precedence for alignment.
• The style attributes remain unchanged.

Parameters

options : EmailInlineStylesTransformationsOptions

Configuration options.

Defaults to {}

Returns

Array<ExportInlineStylesTransformation>

An array of transformations to be applied to style properties for email compatibility.

Transforms a FIGCAPTION element into a DIV element to make it more compatible with email clients.

Parameters

element : Element

The element to transform.

Returns

HTMLElement | undefined

The new DIV element or undefined if no transformation was applied.

Replacing the <figure> element with one or two tables to handle alignment and width for better email compatibility.

Examples:

• <figure style="margin: auto; width: 600px;"> → <table width="100%"><tr><td align="center"><table width="600px"><tr><td><div>...</div></td></tr></table></td></tr></table>

• <figure style="margin-left: auto; width: 400px;"> → <table width="100%"><tr><td align="right"><table width="400px"><tr><td><div>...</div></td></tr></table></td></tr></table>

• <figure style="margin: auto;"> → <table width="100%"><tr><td align="center"><div>...</div></td></tr></table>

Parameters

element : Element

The element to transform.

stylesMap : StylesMap

A map of CSS styles applied to the element.

Returns

HTMLElement | undefined

Transform float: left/right to align="left"/"right" for table and img elements.

Examples:

• <table style="float: left"> → <table style="float: left" align="left">
• <img style="float: right"> → <img style="float: right" align="right">

Parameters

element : Element

The element to transform.

stylesMap : StylesMap

A map of CSS styles applied to the element.

Returns

void

Removes width and height attributes from images that have width defined in styles. This helps to prevent issues with image scaling in some email clients.

Example:

• <img style="width: 100px;" width="200" height="150"> → <img style="width: 100px; height: auto;">

Parameters

element : Element

The element to transform.

stylesMap : StylesMap

A map of CSS styles applied to the element.

Returns

void

Handle margin-left and margin-right combinations for alignment of the table element. It skips elements with float style because float has higher priority for alignment.

It wraps the <table> in a container <table> to ensure proper alignment in all email clients.

Examples:

• <table style="margin: auto"> → <table width="100%"><tr><td align="center"><table style="...">...</table></td></tr></table>

• <table style="margin-left: auto; width: 500px"> → <table width="100%"><tr><td align="right"><table width="500px"><tr><td><table style="...">...</table>...

Parameters

element : Element

The element to transform.

stylesMap : StylesMap

A map of CSS styles applied to the element.

Returns

void