Merge pull request #168 from dantman/inline-height

Implement inlining of height attributes.

Author: jrit

README.md

@@ -52,6 +52,7 @@ All juice methods take an options object that can contain any of these propertie
  * `preserveMediaQueries` - preserves all media queries (and contained styles) within `<style></style>` tags as a refinement when `removeStyleTags` is `true`. Other styles are removed. Defaults to `false`.
   * `preserveFontFaces` - preserves all `@font-face` within `<style></style>` tags as a refinement when `removeStyleTags` is `true`. Other styles are removed. Defaults to `false`.
  * `applyWidthAttributes` - whether to use any CSS pixel widths to create `width` attributes on elements set in `juice.widthElements`. Defaults to `false`.
+ * `applyHeightAttributes` - whether to use any CSS pixel heights to create `height` attributes on elements set in `juice.heightElements`. Defaults to `false`.
  * `applyAttributesTableElements` - whether to create attributes for styles in `juice.styleToAttribute` on elements set in `juice.tableElements`. Defaults to `false`.
  * `webResources` - An options object that will be passed to [web-resource-inliner](https://www.npmjs.com/package/web-resource-inliner) for juice functions that will get remote resources (`juiceResources` and `juiceFile`). Defaults to `{}`.
  * `inlinePseudoElements` - Whether to insert pseudo elements (`::before` and `::after`) as `<span>` into the DOM. *Note*: Inserting pseudo elements will modify the DOM and may conflict with CSS selectors elsewhere on the page (e.g., `:last-child`).
@@ -121,6 +122,10 @@ Array of ignored pseudo-selectors such as 'hover' and 'active'.
 
 Array of HTML elements that can receive `width` attributes.
 
+#### juice.heightElements
+
+Array of HTML elements that can receive `height` attributes.
+
 #### juice.styleToAttribute
 
 Object of style property names (key) to their respective attribute names (value).

lib/juice.js

@@ -61,6 +61,7 @@ juice.utils = require('./utils');
 
 juice.ignoredPseudos = ['hover', 'active', 'focus', 'visited', 'link'];
 juice.widthElements = ['TABLE', 'TD', 'IMG'];
+juice.heightElements = ['TABLE', 'TD', 'IMG'];
 juice.tableElements = ['TABLE', 'TD', 'TH', 'TR', 'TD', 'CAPTION', 'COLGROUP', 'COL', 'THEAD', 'TBODY', 'TFOOT'];
 juice.nonVisualElements = [ "HEAD", "TITLE", "BASE", "LINK", "STYLE", "META", "SCRIPT", "NOSCRIPT" ];
 juice.styleToAttribute = {
@@ -89,7 +90,15 @@ function inlineDocument($, css, options) {
   }
 
   if (options && options.applyWidthAttributes) {
-    editedElements.forEach(setWidthAttrs);
+    editedElements.forEach(function(el) {
+      setDimensionAttrs(el, 'width');
+    });
+  }
+
+  if (options && options.applyHeightAttributes) {
+    editedElements.forEach(function(el) {
+      setDimensionAttrs(el, 'height');
+    });
   }
 
   if (options && options.applyAttributesTableElements) {
@@ -221,18 +230,18 @@ function inlineDocument($, css, options) {
     }
   }
 
-  function setWidthAttrs(el) {
+  function setDimensionAttrs(el, dimension) {
     var elName = el.name.toUpperCase();
-    if (juice.widthElements.indexOf(elName) > -1) {
+    if (juice[dimension + 'Elements'].indexOf(elName) > -1) {
       for (var i in el.styleProps) {
-        if (el.styleProps[i].prop === 'width') {
+        if (el.styleProps[i].prop === dimension) {
           if (el.styleProps[i].value.match(/px/)) {
-            var pxWidth = el.styleProps[i].value.replace('px', '');
-            $(el).attr('width', pxWidth);
+            var pxSize = el.styleProps[i].value.replace('px', '');
+            $(el).attr(dimension, pxSize);
             return;
           }
           if (juice.tableElements.indexOf(elName) > -1 && el.styleProps[i].value.match(/\%/)) {
-            $(el).attr('width', el.styleProps[i].value);
+            $(el).attr(dimension, el.styleProps[i].value);
             return;
           }
         }
@@ -334,6 +343,7 @@ function getDefaultOptions(options) {
     preserveMediaQueries: false,
     preserveFontFaces: false,
     applyWidthAttributes: false,
+    applyHeightAttributes: false,
     applyAttributesTableElements: false,
     url: ""
   }, options);

test/cases/juice-content/height-attr.css

@@ -0,0 +1,27 @@
+<html>
+<head>
+    <style>
+        p, td.px, img.px {
+            height: 200px;
+        }
+        td.percentage, img.percentage {
+            height: 50%;
+        }
+    </style>
+</head>
+<body>
+    <p>none</p>
+    <table>
+        <tr>
+            <td class="px">
+                high
+            </td>
+            <td class="percentage">
+                high
+            </td>
+        </tr>
+    </table>
+    <img src="" alt="high" class="px">
+    <img src="" alt="high" class="percentage">
+</body>
+</html>

test/cases/juice-content/height-attr.html

@@ -0,0 +1,5 @@
+{
+    "url": "./",
+    "removeStyleTags": true,
+    "applyHeightAttributes": true
+}

test/cases/juice-content/height-attr.json

@@ -0,0 +1,20 @@
+<html>
+<head>
+    
+</head>
+<body>
+    <p style="height: 200px;">none</p>
+    <table>
+        <tr>
+            <td class="px" style="height: 200px;" height="200">
+                high
+            </td>
+            <td class="percentage" style="height: 50%;" height="50%">
+                high
+            </td>
+        </tr>
+    </table>
+    <img src="" alt="high" class="px" style="height: 200px;" height="200">
+    <img src="" alt="high" class="percentage" style="height: 50%;">
+</body>
+</html>