From 0e4621d9e582e8da00a240b9945fa7b8bf2db082 Mon Sep 17 00:00:00 2001 From: avael Date: Sun, 19 Feb 2017 06:28:05 +0100 Subject: [PATCH 1/4] add letter spacing support for svg --- src/mixins/itext.svg_export.js | 1 + src/parser.js | 1 + src/shapes/text.class.js | 3 ++- 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/mixins/itext.svg_export.js b/src/mixins/itext.svg_export.js index 09209c09212..ff49958d189 100644 --- a/src/mixins/itext.svg_export.js +++ b/src/mixins/itext.svg_export.js @@ -98,6 +98,7 @@ (styleDecl.fontSize ? 'font-size="' + styleDecl.fontSize + '" ' : ''), (styleDecl.fontStyle ? 'font-style="' + styleDecl.fontStyle + '" ' : ''), (styleDecl.fontWeight ? 'font-weight="' + styleDecl.fontWeight + '" ' : ''), + (styleDecl.charSpacing ? 'letter-spacing="' + styleDecl.charSpacing / 1000 + 'em" ' : ''), (styleDecl.textDecoration ? 'text-decoration="' + styleDecl.textDecoration + '" ' : ''), 'style="', fillStyles, '">', fabric.util.string.escapeXml(_char), diff --git a/src/parser.js b/src/parser.js index 23e41489c90..7a18673f002 100644 --- a/src/parser.js +++ b/src/parser.js @@ -34,6 +34,7 @@ 'font-size': 'fontSize', 'font-style': 'fontStyle', 'font-weight': 'fontWeight', + 'letter-spacing': 'charSpacing', 'stroke-dasharray': 'strokeDashArray', 'stroke-linecap': 'strokeLineCap', 'stroke-linejoin': 'strokeLineJoin', diff --git a/src/shapes/text.class.js b/src/shapes/text.class.js index 732a69a82c6..797985fe04b 100644 --- a/src/shapes/text.class.js +++ b/src/shapes/text.class.js @@ -934,6 +934,7 @@ (this.fontStyle ? 'font-style="' + this.fontStyle + '" ' : ''), (this.fontWeight ? 'font-weight="' + this.fontWeight + '" ' : ''), (this.textDecoration ? 'text-decoration="' + this.textDecoration + '" ' : ''), + (this.charSpacing ? 'letter-spacing="' + this.charSpacing / 1000 + 'em" ' : ''), 'style="', this.getSvgStyles(noShadow), '" >\n', textAndBg.textSpans.join(''), '\t\t\n', @@ -1107,7 +1108,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 From 94b674368f967a68492d306e90169a69b9017218 Mon Sep 17 00:00:00 2001 From: avael Date: Sun, 19 Feb 2017 06:47:49 +0100 Subject: [PATCH 2/4] fix letter spacing for Parser --- src/parser.js | 4 ++++ test/unit/text.js | 2 ++ 2 files changed, 6 insertions(+) diff --git a/src/parser.js b/src/parser.js index 7a18673f002..82eb1929913 100644 --- a/src/parser.js +++ b/src/parser.js @@ -97,6 +97,10 @@ else if (attr === 'originX' /* 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 { parsed = isArray ? value.map(parseUnit) : parseUnit(value, fontSize); } diff --git a/test/unit/text.js b/test/unit/text.js index e90c369704c..27079368ed1 100644 --- a/test/unit/text.js +++ b/test/unit/text.js @@ -224,6 +224,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'); @@ -251,6 +252,7 @@ fontStyle: 'italic', fontWeight: 'bold', fontSize: 123, + charSpacing: 1000, textDecoration: 'underline', originX: 'center' }); From 3e5809454de19bb1923306da0de2029df63f1dc9 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sun, 1 Apr 2018 18:23:43 +0200 Subject: [PATCH 3/4] Update itext.svg_export.js --- src/mixins/itext.svg_export.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/mixins/itext.svg_export.js b/src/mixins/itext.svg_export.js index ff49958d189..09209c09212 100644 --- a/src/mixins/itext.svg_export.js +++ b/src/mixins/itext.svg_export.js @@ -98,7 +98,6 @@ (styleDecl.fontSize ? 'font-size="' + styleDecl.fontSize + '" ' : ''), (styleDecl.fontStyle ? 'font-style="' + styleDecl.fontStyle + '" ' : ''), (styleDecl.fontWeight ? 'font-weight="' + styleDecl.fontWeight + '" ' : ''), - (styleDecl.charSpacing ? 'letter-spacing="' + styleDecl.charSpacing / 1000 + 'em" ' : ''), (styleDecl.textDecoration ? 'text-decoration="' + styleDecl.textDecoration + '" ' : ''), 'style="', fillStyles, '">', fabric.util.string.escapeXml(_char), From 4aebc511e1e1b2af58ba0dc81ebb7e604b20851d Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sun, 1 Apr 2018 18:24:41 +0200 Subject: [PATCH 4/4] Update text.class.js --- src/shapes/text.class.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/shapes/text.class.js b/src/shapes/text.class.js index 797985fe04b..94b2cac2386 100644 --- a/src/shapes/text.class.js +++ b/src/shapes/text.class.js @@ -934,7 +934,6 @@ (this.fontStyle ? 'font-style="' + this.fontStyle + '" ' : ''), (this.fontWeight ? 'font-weight="' + this.fontWeight + '" ' : ''), (this.textDecoration ? 'text-decoration="' + this.textDecoration + '" ' : ''), - (this.charSpacing ? 'letter-spacing="' + this.charSpacing / 1000 + 'em" ' : ''), 'style="', this.getSvgStyles(noShadow), '" >\n', textAndBg.textSpans.join(''), '\t\t\n',