Class VmlHelper

java.lang.Object
dev.jcputney.mjml.render.VmlHelper

public final class VmlHelper extends Object
Helper for generating Outlook VML (Vector Markup Language) for background images. Outlook doesn't support CSS background-image, so VML is needed for background images in sections, wrappers, and hero components.

MjSection and MjWrapper produce different VML output:

  • MjSection uses percent-based origin formulas with auto/repeat/no-repeat modes
  • MjWrapper always uses tile with simple keyword mapping (cssAxisToVml)
  • Method Details

    • buildSectionVmlRect

      public static String buildSectionVmlRect(String widthStyle, String bgUrl, String bgColor, String bgPosition, String bgSize, String bgRepeat)
      Builds VML rect markup for MjSection background image support in MSO/Outlook. Follows the official MJML algorithm for computing VML origin/position/type.
      Parameters:
      widthStyle - the CSS width style (e.g. "600px" or "mso-width-percent:1000;")
      bgUrl - the background image URL
      bgColor - the fallback background color (may be null/empty)
      bgPosition - resolved CSS background-position (e.g. "center top")
      bgSize - CSS background-size value (e.g. "auto", "cover", "contain")
      bgRepeat - CSS background-repeat value (e.g. "repeat", "no-repeat")
      Returns:
      the VML rect markup string for section background rendering in Outlook
    • buildWrapperVmlRect

      public static String buildWrapperVmlRect(String widthStyle, String bgUrl, String bgColor, String bgPosition, String bgSize)
      Builds VML rect markup for MjWrapper background image support in MSO/Outlook. Simpler than section: always uses tile type with keyword-based origin mapping.
      Parameters:
      widthStyle - the CSS width style (e.g. "600px" or "mso-width-percent:1000;")
      bgUrl - the background image URL
      bgColor - the fallback background color (may be null/empty)
      bgPosition - resolved CSS background-position (e.g. "center top")
      bgSize - CSS background-size value (e.g. "auto", "cover", "contain")
      Returns:
      the VML rect markup string for wrapper background rendering in Outlook
    • cssPositionToPercent

      public static double cssPositionToPercent(String value, boolean isX)
      Converts a CSS position keyword or percentage to a percentage value.
      Parameters:
      value - the CSS position keyword (e.g. "left", "center", "right") or percentage string
      isX - true if this is for the X axis, false for Y axis
      Returns:
      the corresponding percentage value (0-100)
    • formatVmlCoord

      public static String formatVmlCoord(double value)
      Formats a VML coordinate value. Integers are rendered without decimals.
      Parameters:
      value - the numeric coordinate value to format
      Returns:
      the formatted coordinate string
    • cssAxisToVml

      public static String cssAxisToVml(String value)
      Maps a CSS axis keyword to a VML coordinate value.
      Parameters:
      value - the CSS axis keyword (e.g. "left", "center", "right", "top", "bottom")
      Returns:
      the VML coordinate string ("0", "0.5", or "1")