email/transformations/transformemailfiguretotable

Constants

• transformEmailFigureToTable : ExportInlineStylesTransformation

  module:email/transformations/transformemailfiguretotable~transformEmailFigureToTable

  Transforms a <figure> element into an email-compatible structure by replacing it with a table-based layout. The exact output depends on the figure's styles and children:

  Float — single inner <table> (figure is just a float wrapper): The inner table is promoted in place; figure styles are merged into it and float is converted to an align attribute.

  <figure style="float: left;"><table>…</table></figure>
  →
  <table align="left" style="…">…</table>
  

  Copy code

  Float — mixed content (figure wraps multiple children alongside float): All children are moved into a single-cell presentation table that carries the float as an align attribute.

  <figure style="float: right;"><img><figcaption>…</figcaption></figure>
  →
  <table align="right" style="…"><tbody><tr><td><img><figcaption>…</figcaption></td></tr></tbody></table>
  

  Copy code

  Margin-based alignment — single inner <table> (figure is a display:table alignment wrapper): The inner table is promoted in place; figure styles (minus display, layout props) are merged into it. Alignment and width are already encoded in the surrounding fallback tables added by wrapWithFallbackTables.

  <figure style="display: table; margin: auto; width: 600px;"><table>…</table></figure>
  →
  <table width="100%"><tbody><tr><td align="center">
    <table width="600"><tbody><tr><td>
      <table style="…">…</table>
    </td></tr></tbody></table>
  </td></tr></tbody></table>
  

  Copy code

  Margin-based alignment — mixed content (figure wraps an image, caption, etc.): The figure is replaced with a <div> that inherits its attributes, and the whole thing is wrapped in one or two fallback tables for alignment and width.

  <figure style="margin: auto; width: 600px;"><img><figcaption>…</figcaption></figure>
  →
  <table width="100%"><tbody><tr><td align="center">
    <table width="600"><tbody><tr><td>
      <div style="…"><img><figcaption>…</figcaption></div>
    </td></tr></tbody></table>
  </td></tr></tbody></table>
  

  Copy code