feat: Options to add dimension HTML attributes from CSS properties

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Added
+
+- `InlineOptions::apply_width_attributes` and `InlineOptions::apply_height_attributes` options to add dimension HTML attributes from CSS properties on supported elements (`table`, `td`, `th`, `img`). [#652](https://github.com/Stranger6667/css-inline/issues/652)
+
 ### Performance
 
 - Skip selectors that reference non-existent classes, IDs, or tags.

README.md

@@ -135,6 +135,8 @@ fn main() -> css_inline::Result<()> {
 - `extra_css`. Extra CSS to be inlined. Default: `None`
 - `preallocate_node_capacity`. **Advanced**. Preallocates capacity for HTML nodes during parsing. This can improve performance when you have an estimate of the number of nodes in your HTML document. Default: `32`
 - `remove_inlined_selectors`. Specifies whether to remove selectors that were successfully inlined from `<style>` blocks. Default: `false`
+- `apply_width_attributes`. Specifies whether to add `width` HTML attributes from CSS `width` properties on supported elements (`table`, `td`, `th`, `img`). Default: `false`
+- `apply_height_attributes`. Specifies whether to add `height` HTML attributes from CSS `height` properties on supported elements (`table`, `td`, `th`, `img`). Default: `false`
 
 You can also skip CSS inlining for an HTML tag by adding the `data-css-inline="ignore"` attribute to it:
 

bindings/c/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Added
+
+- `apply_width_attributes` and `apply_height_attributes` options to add dimension HTML attributes from CSS properties on supported elements (`table`, `td`, `th`, `img`). [#652](https://github.com/Stranger6667/css-inline/issues/652)
+
 ### Performance
 
 - Skip selectors that reference non-existent classes, IDs, or tags.

bindings/c/README.md

@@ -161,6 +161,8 @@ Possible configurations:
 - `extra_css`. Extra CSS to be inlined. Default: `NULL`
 - `preallocate_node_capacity`. **Advanced**. Preallocates capacity for HTML nodes during parsing. This can improve performance when you have an estimate of the number of nodes in your HTML document. Default: `32`
 - `remove_inlined_selectors`. Specifies whether to remove selectors that were successfully inlined from `<style>` blocks. Default: `false`
+- `apply_width_attributes`. Specifies whether to add `width` HTML attributes from CSS `width` properties on supported elements (`table`, `td`, `th`, `img`). Default: `false`
+- `apply_height_attributes`. Specifies whether to add `height` HTML attributes from CSS `height` properties on supported elements (`table`, `td`, `th`, `img`). Default: `false`
 
 You can also skip CSS inlining for an HTML tag by adding the `data-css-inline="ignore"` attribute to it:
 

bindings/c/src/lib.rs

@@ -99,6 +99,10 @@ pub struct CssInlinerOptions {
     pub minify_css: bool,
     /// Remove selectors that were successfully inlined from inline `<style>` blocks.
     pub remove_inlined_selectors: bool,
+    /// Apply `width` HTML attributes from CSS `width` properties on supported elements.
+    pub apply_width_attributes: bool,
+    /// Apply `height` HTML attributes from CSS `height` properties on supported elements.
+    pub apply_height_attributes: bool,
 }
 
 macro_rules! inliner {
@@ -201,6 +205,8 @@ pub extern "C" fn css_inliner_default_options() -> CssInlinerOptions {
         extra_css: ptr::null(),
         preallocate_node_capacity: 32,
         remove_inlined_selectors: false,
+        apply_width_attributes: false,
+        apply_height_attributes: false,
     }
 }
 
@@ -258,6 +264,8 @@ impl TryFrom<&CssInlinerOptions> for InlineOptions<'_> {
             preallocate_node_capacity: value.preallocate_node_capacity,
             resolver: Arc::new(DefaultStylesheetResolver),
             remove_inlined_selectors: value.remove_inlined_selectors,
+            apply_width_attributes: value.apply_width_attributes,
+            apply_height_attributes: value.apply_height_attributes,
         })
     }
 }

bindings/java/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Added
+
+- `applyWidthAttributes` and `applyHeightAttributes` options to add dimension HTML attributes from CSS properties on supported elements (`table`, `td`, `th`, `img`). [#652](https://github.com/Stranger6667/css-inline/issues/652)
+
 ### Performance
 
 - Skip selectors that reference non-existent classes, IDs, or tags.

bindings/java/README.md

@@ -154,6 +154,8 @@ public class ConfigExample {
 - **`setCacheSize(int)`** - External stylesheet cache size, must be ≥ 0 (default: `0`)
 - **`setPreallocateNodeCapacity(int)`** - HTML node capacity, must be > 0 (default: `32`)
 - **`setRemoveInlinedSelectors(boolean)`** - Remove selectors that were successfully inlined from `<style>` blocks (default: `false`)
+- **`setApplyWidthAttributes(boolean)`** - Add `width` HTML attributes from CSS `width` properties on supported elements (`table`, `td`, `th`, `img`) (default: `false`)
+- **`setApplyHeightAttributes(boolean)`** - Add `height` HTML attributes from CSS `height` properties on supported elements (`table`, `td`, `th`, `img`) (default: `false`)
 
 
 ### HTML Fragments

bindings/java/src/main/java/org/cssinline/CssInlineConfig.java

@@ -35,9 +35,16 @@ public class CssInlineConfig {
 	/** Remove selectors that were successfully inlined from inline style blocks. */
 	public final boolean removeInlinedSelectors;
 
+	/** Apply width HTML attributes from CSS width properties on supported elements. */
+	public final boolean applyWidthAttributes;
+
+	/** Apply height HTML attributes from CSS height properties on supported elements. */
+	public final boolean applyHeightAttributes;
+
 	private CssInlineConfig(boolean inlineStyleTags, boolean keepStyleTags, boolean keepLinkTags,
 			boolean keepAtRules, boolean minifyCss, boolean loadRemoteStylesheets, String baseUrl, String extraCss,
-			int cacheSize, int preallocateNodeCapacity, boolean removeInlinedSelectors) {
+			int cacheSize, int preallocateNodeCapacity, boolean removeInlinedSelectors,
+			boolean applyWidthAttributes, boolean applyHeightAttributes) {
 		this.inlineStyleTags = inlineStyleTags;
 		this.keepStyleTags = keepStyleTags;
 		this.keepLinkTags = keepLinkTags;
@@ -49,6 +56,8 @@ private CssInlineConfig(boolean inlineStyleTags, boolean keepStyleTags, boolean
 		this.cacheSize = cacheSize;
 		this.preallocateNodeCapacity = preallocateNodeCapacity;
 		this.removeInlinedSelectors = removeInlinedSelectors;
+		this.applyWidthAttributes = applyWidthAttributes;
+		this.applyHeightAttributes = applyHeightAttributes;
 	}
 
 	/**
@@ -66,6 +75,8 @@ public static class Builder {
 		private int cacheSize = 0;
 		private int preallocateNodeCapacity = 32;
 		private boolean removeInlinedSelectors = false;
+		private boolean applyWidthAttributes = false;
+		private boolean applyHeightAttributes = false;
 
 		/**
 		 * Creates a new builder with default configuration values.
@@ -210,14 +221,40 @@ public Builder setRemoveInlinedSelectors(boolean b) {
 			return this;
 		}
 
+		/**
+		 * Apply width HTML attributes from CSS width properties on supported elements.
+		 * This is useful for email compatibility with clients like Outlook that ignore CSS width.
+		 * Supported elements: table, td, th, img.
+		 *
+		 * @param b true to apply width attributes, false to skip them
+		 * @return this builder instance for method chaining
+		 */
+		public Builder setApplyWidthAttributes(boolean b) {
+			this.applyWidthAttributes = b;
+			return this;
+		}
+
+		/**
+		 * Apply height HTML attributes from CSS height properties on supported elements.
+		 * This is useful for email compatibility with clients like Outlook that ignore CSS height.
+		 * Supported elements: table, td, th, img.
+		 *
+		 * @param b true to apply height attributes, false to skip them
+		 * @return this builder instance for method chaining
+		 */
+		public Builder setApplyHeightAttributes(boolean b) {
+			this.applyHeightAttributes = b;
+			return this;
+		}
+
 		/**
 		 * Creates a new {@link CssInlineConfig} instance with the current builder settings.
 		 *
 		 * @return a new immutable configuration instance
 		 */
 		public CssInlineConfig build() {
 			return new CssInlineConfig(inlineStyleTags, keepStyleTags, keepLinkTags, keepAtRules, minifyCss, loadRemoteStylesheets, baseUrl,
-					extraCss, cacheSize, preallocateNodeCapacity, removeInlinedSelectors);
+					extraCss, cacheSize, preallocateNodeCapacity, removeInlinedSelectors, applyWidthAttributes, applyHeightAttributes);
 		}
 	}
 }

bindings/java/src/main/rust/lib.rs

@@ -80,6 +80,8 @@ fn build_inliner(
     let cache_size = env.get_int_field(&cfg, "cacheSize")?;
     let preallocate_node_capacity = env.get_int_field(&cfg, "preallocateNodeCapacity")?;
     let remove_inlined_selectors = env.get_bool_field(&cfg, "removeInlinedSelectors")?;
+    let apply_width_attributes = env.get_bool_field(&cfg, "applyWidthAttributes")?;
+    let apply_height_attributes = env.get_bool_field(&cfg, "applyHeightAttributes")?;
 
     let extra_css = env.get_string_field_opt(&cfg, "extraCss")?;
     let base_url = env.get_string_field_opt(&cfg, "baseUrl")?;
@@ -92,7 +94,9 @@ fn build_inliner(
         .load_remote_stylesheets(load_remote_stylesheets)
         .extra_css(extra_css.map(Cow::Owned))
         .preallocate_node_capacity(preallocate_node_capacity as usize)
-        .remove_inlined_selectors(remove_inlined_selectors);
+        .remove_inlined_selectors(remove_inlined_selectors)
+        .apply_width_attributes(apply_width_attributes)
+        .apply_height_attributes(apply_height_attributes);
 
     if let Some(url) = base_url {
         match css_inline::Url::parse(&url) {

bindings/javascript/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Added
+
+- `applyWidthAttributes` and `applyHeightAttributes` options to add dimension HTML attributes from CSS properties on supported elements (`table`, `td`, `th`, `img`). [#652](https://github.com/Stranger6667/css-inline/issues/652)
+
 ### Performance
 
 - Skip selectors that reference non-existent classes, IDs, or tags.

bindings/javascript/README.md

@@ -124,6 +124,8 @@ var inlined = inlineFragment(
 - `extraCss`. Extra CSS to be inlined. Default: `null`
 - `preallocateNodeCapacity`. **Advanced**. Preallocates capacity for HTML nodes during parsing. This can improve performance when you have an estimate of the number of nodes in your HTML document. Default: `32`
 - `removeInlinedSelectors`. Specifies whether to remove selectors that were successfully inlined from `<style>` blocks. Default: `false`
+- `applyWidthAttributes`. Specifies whether to add `width` HTML attributes from CSS `width` properties on supported elements (`table`, `td`, `th`, `img`). Default: `false`
+- `applyHeightAttributes`. Specifies whether to add `height` HTML attributes from CSS `height` properties on supported elements (`table`, `td`, `th`, `img`). Default: `false`
 
 You can also skip CSS inlining for an HTML tag by adding the `data-css-inline="ignore"` attribute to it:
 

bindings/javascript/index.d.ts

@@ -37,6 +37,10 @@ export interface Options {
   preallocateNodeCapacity?: number
   /** Remove selectors that were successfully inlined from inline `<style>` blocks. */
   removeInlinedSelectors?: boolean
+  /** Apply width HTML attributes from CSS width properties on supported elements (table, td, th, img). */
+  applyWidthAttributes?: boolean
+  /** Apply height HTML attributes from CSS height properties on supported elements (table, td, th, img). */
+  applyHeightAttributes?: boolean
 }
 
 export interface StylesheetCache {

bindings/javascript/src/options.rs

@@ -58,6 +58,16 @@ pub struct Options {
     pub preallocate_node_capacity: Option<u32>,
     /// Remove selectors that were successfully inlined from inline `<style>` blocks.
     pub remove_inlined_selectors: Option<bool>,
+    /// Apply `width` HTML attributes from CSS `width` properties on supported elements.
+    ///
+    /// This is useful for email compatibility with clients like Outlook that ignore CSS width.
+    /// Supported elements: `table`, `td`, `th`, `img`.
+    pub apply_width_attributes: Option<bool>,
+    /// Apply `height` HTML attributes from CSS `height` properties on supported elements.
+    ///
+    /// This is useful for email compatibility with clients like Outlook that ignore CSS height.
+    /// Supported elements: `table`, `td`, `th`, `img`.
+    pub apply_height_attributes: Option<bool>,
 }
 
 impl TryFrom<Options> for css_inline::InlineOptions<'_> {
@@ -132,6 +142,8 @@ impl TryFrom<Options> for css_inline::InlineOptions<'_> {
                 }
             },
             remove_inlined_selectors: value.remove_inlined_selectors.unwrap_or(false),
+            apply_width_attributes: value.apply_width_attributes.unwrap_or(false),
+            apply_height_attributes: value.apply_height_attributes.unwrap_or(false),
         })
     }
 }

bindings/javascript/wasm/index.d.ts

@@ -13,6 +13,8 @@ export interface InlineOptions {
 	extraCss?: string;
 	preallocateNodeCapacity?: number;
 	removeInlinedSelectors?: boolean;
+	applyWidthAttributes?: boolean;
+	applyHeightAttributes?: boolean;
 }
 export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembly.Module;
 /**

bindings/javascript/wasm/index.html

@@ -35,6 +35,12 @@
           ),
           keepAtRules: document.getElementById("css-inline-opt-keep-at-rules"),
           minifyCss: document.getElementById("css-inline-opt-minify-css"),
+          applyWidthAttributes: document.getElementById(
+            "css-inline-opt-apply-width-attributes",
+          ),
+          applyHeightAttributes: document.getElementById(
+            "css-inline-opt-apply-height-attributes",
+          ),
           extraCss: document.getElementById("css-inline-opt-extra-css"),
         };
 
@@ -55,6 +61,12 @@
             minifyCss: optionControls.minifyCss
               ? optionControls.minifyCss.checked
               : false,
+            applyWidthAttributes: optionControls.applyWidthAttributes
+              ? optionControls.applyWidthAttributes.checked
+              : false,
+            applyHeightAttributes: optionControls.applyHeightAttributes
+              ? optionControls.applyHeightAttributes.checked
+              : false,
           };
 
           const extraCss = optionControls.extraCss
@@ -294,6 +306,34 @@ <h2 class="text-lg font-semibold text-gray-900">Configuration</h2>
                   >
                 </span>
               </label>
+              <label class="flex items-start gap-3 text-sm text-gray-900">
+                <input
+                  id="css-inline-opt-apply-width-attributes"
+                  type="checkbox"
+                  class="mt-1 h-4 w-4 shrink-0 rounded border-gray-300 accent-indigo-600 focus:ring-indigo-600"
+                />
+                <span>
+                  <strong>Apply width attributes</strong>
+                  <span class="block text-xs text-gray-500"
+                    >Add HTML width attributes from CSS for Outlook
+                    compatibility.</span
+                  >
+                </span>
+              </label>
+              <label class="flex items-start gap-3 text-sm text-gray-900">
+                <input
+                  id="css-inline-opt-apply-height-attributes"
+                  type="checkbox"
+                  class="mt-1 h-4 w-4 shrink-0 rounded border-gray-300 accent-indigo-600 focus:ring-indigo-600"
+                />
+                <span>
+                  <strong>Apply height attributes</strong>
+                  <span class="block text-xs text-gray-500"
+                    >Add HTML height attributes from CSS for Outlook
+                    compatibility.</span
+                  >
+                </span>
+              </label>
             </div>
             <div class="mt-6 flex flex-col gap-1">
               <label

bindings/php/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Added
+
+- `applyWidthAttributes` and `applyHeightAttributes` options to add dimension HTML attributes from CSS properties on supported elements (`table`, `td`, `th`, `img`). [#652](https://github.com/Stranger6667/css-inline/issues/652)
+
 ### Performance
 
 - Skip selectors that reference non-existent classes, IDs, or tags.

bindings/php/README.md

@@ -175,6 +175,8 @@ $inliner->inline($html);
 - `extraCss`. Extra CSS to be inlined. Default: `null`
 - `preallocateNodeCapacity`. **Advanced**. Preallocates capacity for HTML nodes during parsing. This can improve performance when you have an estimate of the number of nodes in your HTML document. Default: `32`
 - `removeInlinedSelectors`. Specifies whether to remove selectors that were successfully inlined from `<style>` blocks. Default: `false`
+- `applyWidthAttributes`. Specifies whether to add `width` HTML attributes from CSS `width` properties on supported elements (`table`, `td`, `th`, `img`). Default: `false`
+- `applyHeightAttributes`. Specifies whether to add `height` HTML attributes from CSS `height` properties on supported elements (`table`, `td`, `th`, `img`). Default: `false`
 
 You can also skip CSS inlining for an HTML tag by adding the `data-css-inline="ignore"` attribute to it:
 

bindings/php/src/lib.rs

@@ -55,6 +55,8 @@ impl CssInliner {
         preallocateNodeCapacity = 32,
         cache = None,
         removeInlinedSelectors = false,
+        applyWidthAttributes = false,
+        applyHeightAttributes = false,
     ))]
     #[php(optional = inlineStyleTags)]
     #[allow(clippy::too_many_arguments)]
@@ -70,6 +72,8 @@ impl CssInliner {
         preallocateNodeCapacity: i64,
         cache: Option<&StylesheetCache>,
         removeInlinedSelectors: bool,
+        applyWidthAttributes: bool,
+        applyHeightAttributes: bool,
     ) -> PhpResult<CssInliner> {
         if preallocateNodeCapacity < 0 {
             return Err(PhpException::default(
@@ -99,6 +103,8 @@ impl CssInliner {
             preallocate_node_capacity: preallocateNodeCapacity as usize,
             cache: stylesheet_cache,
             remove_inlined_selectors: removeInlinedSelectors,
+            apply_width_attributes: applyWidthAttributes,
+            apply_height_attributes: applyHeightAttributes,
             ..Default::default()
         };
 

bindings/python/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Added
+
+- `apply_width_attributes` and `apply_height_attributes` options to add dimension HTML attributes from CSS properties on supported elements (`table`, `td`, `th`, `img`). [#652](https://github.com/Stranger6667/css-inline/issues/652)
+
 ### Performance
 
 - Skip selectors that reference non-existent classes, IDs, or tags.

bindings/python/README.md

@@ -156,6 +156,8 @@ inliner.inline("...")
 - `extra_css`. Extra CSS to be inlined. Default: `None`
 - `preallocate_node_capacity`. **Advanced**. Preallocates capacity for HTML nodes during parsing. This can improve performance when you have an estimate of the number of nodes in your HTML document. Default: `32`
 - `remove_inlined_selectors`. Specifies whether to remove selectors that were successfully inlined from `<style>` blocks. Default: `False`
+- `apply_width_attributes`. Specifies whether to add `width` HTML attributes from CSS `width` properties on supported elements (`table`, `td`, `th`, `img`). Default: `False`
+- `apply_height_attributes`. Specifies whether to add `height` HTML attributes from CSS `height` properties on supported elements (`table`, `td`, `th`, `img`). Default: `False`
 
 You can also skip CSS inlining for an HTML tag by adding the `data-css-inline="ignore"` attribute to it: