switch spacer's non-breaking spaces from   to  

The character   is being rendered as a space on Apple Mail's preview (tested on 9 and 10). Switching it to a regular   seems to sort the issue. #69 Fix #69
foundation · Nov 16, 2016 · 050a0c4 · 050a0c4
1 parent c6a8408
commit 050a0c4
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/lib/componentFactory.js b/lib/componentFactory.js
@@ -139,15 +139,15 @@ module.exports = function(element) {
       if (element.attr('size-sm') || element.attr('size-lg')) {
         if (element.attr('size-sm')) {
           size = (element.attr('size-sm'));
-          html += format('<table %s class="%s hide-for-large"><tbody><tr><td height="'+size+'px" style="font-size:'+size+'px;line-height:'+size+'px;">&#xA0;</td></tr></tbody></table>', attrs);
+          html += format('<table %s class="%s hide-for-large"><tbody><tr><td height="'+size+'px" style="font-size:'+size+'px;line-height:'+size+'px;">&nbsp;</td></tr></tbody></table>', attrs);
         }
         if (element.attr('size-lg')) {
           size = (element.attr('size-lg'));
-          html += format('<table %s class="%s show-for-large"><tbody><tr><td height="'+size+'px" style="font-size:'+size+'px;line-height:'+size+'px;">&#xA0;</td></tr></tbody></table>', attrs);
+          html += format('<table %s class="%s show-for-large"><tbody><tr><td height="'+size+'px" style="font-size:'+size+'px;line-height:'+size+'px;">&nbsp;</td></tr></tbody></table>', attrs);
         }
       } else {
         size = (element.attr('size')) || 16;
-        html += format('<table %s class="%s"><tbody><tr><td height="'+size+'px" style="font-size:'+size+'px;line-height:'+size+'px;">&#xA0;</td></tr></tbody></table>', attrs);
+        html += format('<table %s class="%s"><tbody><tr><td height="'+size+'px" style="font-size:'+size+'px;line-height:'+size+'px;">&nbsp;</td></tr></tbody></table>', attrs);
       }
 
       if( element.attr('size-sm') && element.attr('size-lg') ) {

diff --git a/test/components.js b/test/components.js
@@ -279,7 +279,7 @@ describe('Spacer', () => {
       <table class="spacer">
         <tbody>
           <tr>
-            <td height="10px" style="font-size:10px;line-height:10px;">&#xA0;</td>
+            <td height="10px" style="font-size:10px;line-height:10px;">&nbsp;</td>
           </tr>
         </tbody>
       </table>
@@ -295,7 +295,7 @@ describe('Spacer', () => {
       <table class="spacer">
         <tbody>
           <tr>
-            <td height="16px" style="font-size:16px;line-height:16px;">&#xA0;</td>
+            <td height="16px" style="font-size:16px;line-height:16px;">&nbsp;</td>
           </tr>
         </tbody>
       </table>
@@ -310,7 +310,7 @@ describe('Spacer', () => {
       <table class="spacer hide-for-large">
         <tbody>
           <tr>
-            <td height="10px" style="font-size:10px;line-height:10px;">&#xA0;</td>
+            <td height="10px" style="font-size:10px;line-height:10px;">&nbsp;</td>
           </tr>
         </tbody>
       </table>
@@ -325,7 +325,7 @@ describe('Spacer', () => {
       <table class="spacer show-for-large">
         <tbody>
           <tr>
-            <td height="20px" style="font-size:20px;line-height:20px;">&#xA0;</td>
+            <td height="20px" style="font-size:20px;line-height:20px;">&nbsp;</td>
           </tr>
         </tbody>
       </table>
@@ -340,14 +340,14 @@ describe('Spacer', () => {
       <table class="spacer hide-for-large">
         <tbody>
           <tr>
-            <td height="10px" style="font-size:10px;line-height:10px;">&#xA0;</td>
+            <td height="10px" style="font-size:10px;line-height:10px;">&nbsp;</td>
           </tr>
         </tbody>
       </table>
       <table class="spacer show-for-large">
         <tbody>
           <tr>
-            <td height="20px" style="font-size:20px;line-height:20px;">&#xA0;</td>
+            <td height="20px" style="font-size:20px;line-height:20px;">&nbsp;</td>
           </tr>
         </tbody>
       </table>
@@ -362,7 +362,7 @@ describe('Spacer', () => {
       <table class="spacer bgcolor">
         <tbody>
           <tr>
-            <td height="10px" style="font-size:10px;line-height:10px;">&#xA0;</td>
+            <td height="10px" style="font-size:10px;line-height:10px;">&nbsp;</td>
           </tr>
         </tbody>
       </table>