Add letter spacing support for svg (fabricjs#3718)

* add letter spacing support for svg * fix letter spacing for Parser * Update itext.svg_export.js * Update text.class.js
thiagocunha · Apr 1, 2018 · 827fcd5 · 827fcd5
1 parent 82cb298
commit 827fcd5
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/src/parser.js b/src/parser.js
@@ -35,6 +35,7 @@
         'font-size':          'fontSize',
         'font-style':         'fontStyle',
         'font-weight':        'fontWeight',
+        'letter-spacing':     'charSpacing',
         'paint-order':        'paintFirst',
         'stroke-dasharray':   'strokeDashArray',
         'stroke-linecap':     'strokeLineCap',
@@ -110,6 +111,10 @@
     else if (attr === 'textAnchor' /* text-anchor */) {
       value = value === 'start' ? 'left' : value === 'end' ? 'right' : 'center';
     }
+    else if (attr === 'charSpacing') {
+      // parseUnit returns px and we convert it to em
+      parsed = parseUnit(value, fontSize) / fontSize * 1000;
+    }
     else if (attr === 'paintFirst') {
       var fillIndex = value.indexOf('fill');
       var strokeIndex = value.indexOf('stroke');

diff --git a/src/shapes/text.class.js b/src/shapes/text.class.js
@@ -1319,7 +1319,7 @@
    * @see: http://www.w3.org/TR/SVG/text.html#TextElement
    */
   fabric.Text.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(
-    'x y dx dy font-family font-style font-weight font-size text-decoration text-anchor'.split(' '));
+    'x y dx dy font-family font-style font-weight font-size letter-spacing text-decoration text-anchor'.split(' '));
 
   /**
    * Default SVG font size

diff --git a/test/unit/text.js b/test/unit/text.js
@@ -220,6 +220,7 @@
     elTextWithAttrs.setAttribute('font-style', 'italic');
     elTextWithAttrs.setAttribute('font-weight', 'bold');
     elTextWithAttrs.setAttribute('font-size', '123');
+    elTextWithAttrs.setAttribute('letter-spacing', '1em');
     elTextWithAttrs.setAttribute('text-decoration', 'underline');
     elTextWithAttrs.setAttribute('text-anchor', 'middle');
 
@@ -246,6 +247,7 @@
         fontFamily:       'Monaco',
         paintFirst:       'fill',
         fontStyle:        'italic',
+        charSpacing:      1000,
         fontWeight:       'bold',
         fontSize:         123,
         underline:        true,