Added letter spacing to text formatting tools

2021-01-25 07:39:48 +01:00 · 2021-01-25 07:39:48 +01:00 · 92eac95627
parent 7c9e9d26d6
commit 92eac95627
70 changed files with 365 additions and 87 deletions
--- a/badges/coverage-badge.svg
+++ b/badges/coverage-badge.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="428" height="20"><defs><style>text{font-size:11px;font-family:Verdana,DejaVu Sans,Geneva,sans-serif}text.shadow{fill:#010101;fill-opacity:.3}text.high{fill:#fff}</style><linearGradient id="smooth" x2="0" y2="100%"><stop offset="0" stop-color="#aaa" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="round"><rect width="100%" height="100%" rx="3" fill="#fff"/></mask></defs><g id="bg" mask="url(#round)"><path fill="green" stroke="#000" d="M0 0h120v20H0zM120 0h109v20H120zM229 0h87v20h-87zM316 0h112v20H316z"/><path fill="url(#smooth)" d="M0 0h428v20H0z"/></g><g id="fg"><text class="shadow" x="5.5" y="15">Statements 53.05%</text><text class="high" x="5" y="14">Statements 53.05%</text><text class="shadow" x="125.5" y="15">Branches 41.79%</text><text class="high" x="125" y="14">Branches 41.79%</text><text class="shadow" x="234.5" y="15">Lines 53.87%</text><text class="high" x="234" y="14">Lines 53.87%</text><text class="shadow" x="321.5" y="15">Functions 60.57%</text><text class="high" x="321" y="14">Functions 60.57%</text></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="421" height="20"><defs><style>text{font-size:11px;font-family:Verdana,DejaVu Sans,Geneva,sans-serif}text.shadow{fill:#010101;fill-opacity:.3}text.high{fill:#fff}</style><linearGradient id="smooth" x2="0" y2="100%"><stop offset="0" stop-color="#aaa" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="round"><rect width="100%" height="100%" rx="3" fill="#fff"/></mask></defs><g id="bg" mask="url(#round)"><path fill="green" stroke="#000" d="M0 0h113v20H0zM113 0h109v20H113zM222 0h87v20h-87zM309 0h112v20H309z"/><path fill="url(#smooth)" d="M0 0h421v20H0z"/></g><g id="fg"><text class="shadow" x="5.5" y="15">Statements 53.1%</text><text class="high" x="5" y="14">Statements 53.1%</text><text class="shadow" x="118.5" y="15">Branches 41.93%</text><text class="high" x="118" y="14">Branches 41.93%</text><text class="shadow" x="227.5" y="15">Lines 53.92%</text><text class="high" x="227" y="14">Lines 53.92%</text><text class="shadow" x="314.5" y="15">Functions 60.63%</text><text class="high" x="314" y="14">Functions 60.63%</text></g></svg>
--- a/badges/tests-badge.svg
+++ b/badges/tests-badge.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="97" height="20"><defs><style>text{font-size:11px;font-family:Verdana,DejaVu Sans,Geneva,sans-serif}text.shadow{fill:#010101;fill-opacity:.3}text.high{fill:#fff}</style><linearGradient id="smooth" x2="0" y2="100%"><stop offset="0" stop-color="#aaa" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="round"><rect width="100%" height="100%" rx="3" fill="#fff"/></mask></defs><g id="bg" mask="url(#round)"><path fill="#696969" d="M0 0h41v20H0z"/><path fill="#4c1" d="M41 0h56v20H41z"/><path fill="url(#smooth)" d="M0 0h97v20H0z"/></g><g id="fg"><text class="shadow" x="5.5" y="15">Tests</text><text class="high" x="5" y="14">Tests</text><text class="shadow" x="46.5" y="15">147/147</text><text class="high" x="46" y="14">147/147</text></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="97" height="20"><defs><style>text{font-size:11px;font-family:Verdana,DejaVu Sans,Geneva,sans-serif}text.shadow{fill:#010101;fill-opacity:.3}text.high{fill:#fff}</style><linearGradient id="smooth" x2="0" y2="100%"><stop offset="0" stop-color="#aaa" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="round"><rect width="100%" height="100%" rx="3" fill="#fff"/></mask></defs><g id="bg" mask="url(#round)"><path fill="#696969" d="M0 0h41v20H0z"/><path fill="#4c1" d="M41 0h56v20H41z"/><path fill="url(#smooth)" d="M0 0h97v20H0z"/></g><g id="fg"><text class="shadow" x="5.5" y="15">Tests</text><text class="high" x="5" y="14">Tests</text><text class="shadow" x="46.5" y="15">151/151</text><text class="high" x="46" y="14">151/151</text></g></svg>
--- a/cypress/integration/ui/snapshots/scenario.js.snap
+++ b/cypress/integration/ui/snapshots/scenario.js.snap
@ -493,6 +493,7 @@ exports[`use various parts of svg-edit > check tool_star #0`] = `
      font-style="italic"
      font-weight="bold"
      text-decoration=" underline overline line-through"
+      letter-spacing="150"
    >
      B
    </text>
@ -585,6 +586,7 @@ exports[`use various parts of svg-edit > check tool_polygon #0`] = `
      font-style="italic"
      font-weight="bold"
      text-decoration=" underline overline line-through"
+      letter-spacing="150"
    >
      B
    </text>
@ -1044,3 +1046,70 @@ exports[`use various parts of svg-edit > check tool_text_decoration_linethrough
  </g>
 </svg>
 `;
+
+exports[`use various parts of svg-edit > check tool_letter_spacing #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer">
+    <title>Layer 1</title>
+    <rect
+      id="rect"
+      fill="#FF0000"
+      height="70"
+      stroke="#000000"
+      stroke-width="5"
+      width="94"
+      x="69.5"
+      y="51.5"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></rect>
+    <text
+      fill="#ffff00"
+      stroke="#000000"
+      stroke-width="0"
+      x="116"
+      y="87"
+      id="svg_1"
+      font-size="24"
+      font-family="serif"
+      text-anchor="end"
+      xml:space="preserve"
+      fill-opacity="1"
+      stroke-opacity="1"
+      font-=""
+      font-weight="bold"
+      text-decoration=" underline overline line-through"
+      letter-spacing="150"
+    >
+      B
+    </text>
+    <text
+      fill="#000000"
+      stroke="#000000"
+      stroke-width="0"
+      x="136"
+      y="107"
+      font-size="24"
+      font-family="serif"
+      text-anchor="middle"
+      xml:space="preserve"
+      fill-opacity="1"
+      stroke-opacity="1"
+      id="svg_2"
+      transform="matrix(1 0 0 1 0 0)"
+    >
+      B
+    </text>
+  </g>
+</svg>
+`;
--- a/cypress/integration/ui/scenario.js
+++ b/cypress/integration/ui/scenario.js
@ -106,6 +106,14 @@ describe('use various parts of svg-edit', function () {
      .click({force: true});
    testSnapshot();
  });
+  it('check tool_letter_spacing', function () {
+    cy.get('#svg_1').click({force: true});
+    cy.get('#letter_spacing')
+      .type('{selectall}', {force: true})
+      .type('150', {force: true})
+      .type('{enter}', {force: true});
+    testSnapshot();
+  });
  it('check tool_star', function () {
    cy.get('#tool_star')
      .click({force: true});
--- a/cypress/integration/unit/sanitize.js
+++ b/cypress/integration/unit/sanitize.js
@ -16,4 +16,34 @@ describe('sanitize', function () {
    assert.equal(rect.getAttribute('stroke'), 'blue');
    assert.equal(rect.getAttribute('stroke-width'), '40');
  });
+
+  it('Test sanitizeSvg() does not strip letter-spacing attribute from text', function () {
+    const text = document.createElementNS(NS.SVG, 'text');
+    text.setAttribute('letter-spacing', '150');
+    svg.append(text);
+
+    sanitize.sanitizeSvg(text);
+
+    assert.equal(text.getAttribute('letter-spacing'), '150');
+  });
+
+  it('Test sanitizeSvg() does not strip text-anchor attribute from text', function () {
+    const text = document.createElementNS(NS.SVG, 'text');
+    text.setAttribute('text-anchor', 'end');
+    svg.append(text);
+
+    sanitize.sanitizeSvg(text);
+
+    assert.equal(text.getAttribute('text-anchor'), 'end');
+  });
+
+  it('Test sanitizeSvg() does not strip text-decoration attribute from text', function () {
+    const text = document.createElementNS(NS.SVG, 'text');
+    text.setAttribute('text-decoration', 'underline');
+    svg.append(text);
+
+    sanitize.sanitizeSvg(text);
+
+    assert.equal(text.getAttribute('text-decoration'), 'underline');
+  });
 });
--- a/src/editor/images/svg_edit_icons.svg
+++ b/src/editor/images/svg_edit_icons.svg
@ -1076,6 +1076,23 @@
  </svg>
 </g>

+<g id="letterspacing">
+  <svg width="25" height="29" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:se="http://svg-edit.googlecode.com" data-name="Ebene 1">
+    <defs>
+      <marker id="se_marker_start_svg_3" markerHeight="5" markerWidth="5" orient="auto" refX="50" refY="50" se_type="leftarrow" viewBox="0 0 100 100">
+        <path d="m0,50l100,40l-30,-40l30,-40z" fill="#ff7f00" stroke="#ff7f00" stroke-width="10"/>
+      </marker>
+      <marker id="se_marker_end_svg_3" markerHeight="5" markerWidth="5" orient="auto" refX="50" refY="50" se_type="rightarrow" viewBox="0 0 100 100">
+        <path d="m100,50l-100,40l30,-40l-30,-40z" fill="#ff7f00" stroke="#ff7f00" stroke-width="10"/>
+      </marker>
+    </defs>
+    <g>
+      <text fill="#000000" font-family="serif" font-size="24" id="svg_2" stroke="#000000" stroke-width="0" text-anchor="middle" x="13.25" xml:space="preserve" y="21.5">ab</text>
+      <line fill="none" id="svg_3" marker-end="url(#se_marker_end_svg_3)" marker-start="url(#se_marker_start_svg_3)" stroke="#ff7f00" x1="2.75" x2="22.64486" y1="26.75" y2="26.75"/>
+    </g>
+  </svg>
+</g>
+
 <g id="svg_eof"/>

 </svg>
--- a/src/editor/index.html
+++ b/src/editor/index.html
@ -330,6 +330,20 @@
            <div id="text_decoration_icon" class="icon_label"></div>
            <button></button>
          </div>
+          <div class="toolset" id="tool_letter_spacing" title="Change the letter spacing of the text">
+            <label>
+              <span id="letter_spacing_icon" class="icon_label"></span>
+              <input id="letter_spacing" size="3" value="0" type="text" />
+            </label>
+            <div id="letter_spacing_dropdown" class="dropdown">
+              <button></button>
+              <ul>
+                <li class="special">
+                  <div id="letter_spacing_slider"></div>
+                </li>
+              </ul>
+            </div>
+          </div>
          <div class="toolset" id="tool_font_family">
            <label>
              <!-- Font family -->
--- a/src/editor/locale.js
+++ b/src/editor/locale.js
@ -306,6 +306,7 @@ export const readLang = function (langData) {
    tool_link_url: tools.set_link_url,
    tool_image: tools.mode_image,
    tool_italic: properties.italic,
+    tool_letter_spacing: properties.letter_spacing,

    tool_line: tools.mode_line,
    tool_move_bottom: tools.move_bottom,
--- a/src/editor/locale/lang.af.js
+++ b/src/editor/locale/lang.af.js
@ -73,7 +73,8 @@ export default {
    italic: 'Italic Text',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.ar.js
+++ b/src/editor/locale/lang.ar.js
@ -73,7 +73,8 @@ export default {
    italic: 'مائل نص',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.az.js
+++ b/src/editor/locale/lang.az.js
@ -73,7 +73,8 @@ export default {
    italic: 'Italic Text',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.be.js
+++ b/src/editor/locale/lang.be.js
@ -73,7 +73,8 @@ export default {
    italic: 'Нахілены тэкст',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.bg.js
+++ b/src/editor/locale/lang.bg.js
@ -73,7 +73,8 @@ export default {
    italic: 'Курсив текст',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.ca.js
+++ b/src/editor/locale/lang.ca.js
@ -73,7 +73,8 @@ export default {
    italic: 'Text en cursiva',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.cs.js
+++ b/src/editor/locale/lang.cs.js
@ -73,7 +73,8 @@ export default {
    italic: 'Kurzíva',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Hlavní menu',
--- a/src/editor/locale/lang.cy.js
+++ b/src/editor/locale/lang.cy.js
@ -73,7 +73,8 @@ export default {
    italic: 'Italig Testun',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.da.js
+++ b/src/editor/locale/lang.da.js
@ -73,7 +73,8 @@ export default {
    italic: 'Italic Text',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.de.js
+++ b/src/editor/locale/lang.de.js
@ -73,7 +73,8 @@ export default {
    italic: 'Kursiver Text',
    text_anchor_start: 'Den Text linksbündig ausrichten',
    text_anchor_middle: 'Den Text zentriert ausrichten',
-    text_anchor_end: 'Den Text rechtsbündig ausrichten'
+    text_anchor_end: 'Den Text rechtsbündig ausrichten',
+    letter_spacing: 'Den Abstand zwischen den Buchstabend anpassen'
  },
  tools: {
    main_menu: 'Hauptmenü',
--- a/src/editor/locale/lang.el.js
+++ b/src/editor/locale/lang.el.js
@ -73,7 +73,8 @@ export default {
    italic: 'Πλάγιους',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.en.js
+++ b/src/editor/locale/lang.en.js
@ -73,7 +73,8 @@ export default {
    italic: 'Italic Text [I]',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing',
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.es.js
+++ b/src/editor/locale/lang.es.js
@ -73,7 +73,8 @@ export default {
    italic: 'Texto en cursiva',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Menú principal',
--- a/src/editor/locale/lang.et.js
+++ b/src/editor/locale/lang.et.js
@ -73,7 +73,8 @@ export default {
    italic: 'Kursiiv',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.fa.js
+++ b/src/editor/locale/lang.fa.js
@ -73,7 +73,8 @@ export default {
    italic: '‫متن کج ‬',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.fi.js
+++ b/src/editor/locale/lang.fi.js
@ -73,7 +73,8 @@ export default {
    italic: 'Kursivoitu',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.fr.js
+++ b/src/editor/locale/lang.fr.js
@ -73,7 +73,8 @@ export default {
    italic: 'Texte en italique',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Menu principal',
--- a/src/editor/locale/lang.fy.js
+++ b/src/editor/locale/lang.fy.js
@ -73,7 +73,8 @@ export default {
    italic: 'Skean',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.ga.js
+++ b/src/editor/locale/lang.ga.js
@ -73,7 +73,8 @@ export default {
    italic: 'Iodálach Téacs',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.gl.js
+++ b/src/editor/locale/lang.gl.js
@ -73,7 +73,8 @@ export default {
    italic: 'Texto en cursiva',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.he.js
+++ b/src/editor/locale/lang.he.js
@ -73,7 +73,8 @@ export default {
    italic: 'טקסט נטוי',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.hi.js
+++ b/src/editor/locale/lang.hi.js
@ -73,7 +73,8 @@ export default {
    italic: 'इटैलिक पाठ',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.hr.js
+++ b/src/editor/locale/lang.hr.js
@ -73,7 +73,8 @@ export default {
    italic: 'Italic Text',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.hu.js
+++ b/src/editor/locale/lang.hu.js
@ -73,7 +73,8 @@ export default {
    italic: 'Dőlt szöveg',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.hy.js
+++ b/src/editor/locale/lang.hy.js
@ -73,7 +73,8 @@ export default {
    italic: 'Italic Text',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.id.js
+++ b/src/editor/locale/lang.id.js
@ -73,7 +73,8 @@ export default {
    italic: 'Italic Teks',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.is.js
+++ b/src/editor/locale/lang.is.js
@ -73,7 +73,8 @@ export default {
    italic: 'Italic Text',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.it.js
+++ b/src/editor/locale/lang.it.js
@ -73,7 +73,8 @@ export default {
    italic: 'Corsivo',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Menù principale',
--- a/src/editor/locale/lang.ja.js
+++ b/src/editor/locale/lang.ja.js
@ -73,7 +73,8 @@ export default {
    italic: 'イタリック体',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.ko.js
+++ b/src/editor/locale/lang.ko.js
@ -73,7 +73,8 @@ export default {
    italic: '기울임꼴 텍스트',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.lt.js
+++ b/src/editor/locale/lang.lt.js
@ -73,7 +73,8 @@ export default {
    italic: 'Kursyvas',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.lv.js
+++ b/src/editor/locale/lang.lv.js
@ -73,7 +73,8 @@ export default {
    italic: 'Kursīvs',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.mk.js
+++ b/src/editor/locale/lang.mk.js
@ -73,7 +73,8 @@ export default {
    italic: 'Italic текст',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.ms.js
+++ b/src/editor/locale/lang.ms.js
@ -73,7 +73,8 @@ export default {
    italic: 'Italic Teks',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.mt.js
+++ b/src/editor/locale/lang.mt.js
@ -73,7 +73,8 @@ export default {
    italic: 'Test korsiv',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.nl.js
+++ b/src/editor/locale/lang.nl.js
@ -73,7 +73,8 @@ export default {
    italic: 'Cursief',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Hoofdmenu',
--- a/src/editor/locale/lang.no.js
+++ b/src/editor/locale/lang.no.js
@ -73,7 +73,8 @@ export default {
    italic: 'Kursiv tekst',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.pl.js
+++ b/src/editor/locale/lang.pl.js
@ -74,7 +74,8 @@ export default {
    italic: 'Kursywa',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Menu główne',
--- a/src/editor/locale/lang.pt-BR.js
+++ b/src/editor/locale/lang.pt-BR.js
@ -73,7 +73,8 @@ export default {
    italic: 'Italico',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Menu Principal',
--- a/src/editor/locale/lang.pt-PT.js
+++ b/src/editor/locale/lang.pt-PT.js
@ -73,7 +73,8 @@ export default {
    italic: 'Texto em itálico',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.ro.js
+++ b/src/editor/locale/lang.ro.js
@ -73,7 +73,8 @@ export default {
    italic: 'Text Înclinat',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Menu Principal',
--- a/src/editor/locale/lang.ru.js
+++ b/src/editor/locale/lang.ru.js
@ -73,7 +73,8 @@ export default {
    italic: 'Курсив',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Главное меню',
--- a/src/editor/locale/lang.sk.js
+++ b/src/editor/locale/lang.sk.js
@ -73,7 +73,8 @@ export default {
    italic: 'Kurzíva',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Hlavné menu',
--- a/src/editor/locale/lang.sl.js
+++ b/src/editor/locale/lang.sl.js
@ -73,7 +73,8 @@ export default {
    italic: 'Poševno',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Glavni meni',
--- a/src/editor/locale/lang.sq.js
+++ b/src/editor/locale/lang.sq.js
@ -73,7 +73,8 @@ export default {
    italic: 'Italic Text',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.sr.js
+++ b/src/editor/locale/lang.sr.js
@ -73,7 +73,8 @@ export default {
    italic: 'Италиц текст',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.sv.js
+++ b/src/editor/locale/lang.sv.js
@ -73,7 +73,8 @@ export default {
    italic: 'Kursiv text',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.sw.js
+++ b/src/editor/locale/lang.sw.js
@ -73,7 +73,8 @@ export default {
    italic: 'Italiki Nakala',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.test.js
+++ b/src/editor/locale/lang.test.js
@ -73,7 +73,8 @@ export default {
    italic: 'Italic Text',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.th.js
+++ b/src/editor/locale/lang.th.js
@ -73,7 +73,8 @@ export default {
    italic: 'ข้อความตัวเอียง',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.tl.js
+++ b/src/editor/locale/lang.tl.js
@ -73,7 +73,8 @@ export default {
    italic: 'Italic Text',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.tr.js
+++ b/src/editor/locale/lang.tr.js
@ -73,7 +73,8 @@ export default {
    italic: 'Italik yazı',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.uk.js
+++ b/src/editor/locale/lang.uk.js
@ -73,7 +73,8 @@ export default {
    italic: 'Похилий текст',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.vi.js
+++ b/src/editor/locale/lang.vi.js
@ -73,7 +73,8 @@ export default {
    italic: 'Italic Text',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.yi.js
+++ b/src/editor/locale/lang.yi.js
@ -73,7 +73,8 @@ export default {
    italic: 'יטאַליק טעקסט',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing',
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.zh-CN.js
+++ b/src/editor/locale/lang.zh-CN.js
@ -73,7 +73,8 @@ export default {
    italic: '斜体',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: '主菜单',
--- a/src/editor/locale/lang.zh-HK.js
+++ b/src/editor/locale/lang.zh-HK.js
@ -73,7 +73,8 @@ export default {
    italic: '斜体文本',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.zh-TW.js
+++ b/src/editor/locale/lang.zh-TW.js
@ -73,7 +73,8 @@ export default {
    italic: '斜體',
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end'
+    text_anchor_end: 'Align the text in end',
+    letter_spacing: 'Change the letter spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/svgedit.js
+++ b/src/editor/svgedit.js
@ -1203,6 +1203,7 @@ editor.init = () => {
        '#font_sizeLabel': 'fontsize',
        '#text_anchor_icon': 'anchor_middle',
        '#text_decoration_icon': 'textdecoration',
+        '#letter_spacing_icon': 'letterspacing',

        '.flyout_arrow_horiz': 'arrow_right',
        '.dropdown button, #main_button .dropdown': 'arrow_down',
@ -2325,6 +2326,9 @@ editor.init = () => {
          } else {
            $('#tool_bold').removeClass('push_button_pressed').addClass('tool_button');
          }
+          const letterSpacingValue = svgCanvas.getLetterSpacing(elem);
+          $('#letter_spacing').val(letterSpacingValue);
+          $('#letter_spacing_slider').slider('option', 'value', letterSpacingValue);
          $('#font_family').val(elem.getAttribute('font-family'));
          $('#font_size').val(elem.getAttribute('font-size'));
          $('#text').val(elem.textContent);
@ -3926,6 +3930,31 @@ editor.init = () => {
    updateContextPanel();
  }, {});

+  editor.addDropDown('#letter_spacing_dropdown', $.noop);
+
+  $('#letter_spacing_slider').slider({
+    step: 1,
+    stop (evt, ui) {
+      changeLetterSpacing(ui);
+      $('#letter_spacing_dropdown li').show();
+      $(window).mouseup();
+    },
+    slide (evt, ui) {
+      changeLetterSpacing(ui, null);
+    }
+  });
+
+  const changeLetterSpacing = function (ctl, val) {
+    if (Utils.isNullish(val)) { val = ctl.value; }
+    $('#letter_spacing').val(val);
+
+    if (!ctl || !ctl.handle) {
+      $('#letter_spacing_slider').slider('option', 'value', val);
+    }
+
+    svgCanvas.setLetterSpacing(val);
+  };
+
  /*

  When a flyout icon is selected
@ -5512,8 +5541,8 @@ editor.init = () => {
      {sel: '#tool_editor_homepage', fn: openHomePage, evt: 'click'},
      {sel: '#tool_open', fn () { window.dispatchEvent(new CustomEvent('openImage')); }, evt: 'click'},
      {sel: '#tool_import', fn () { window.dispatchEvent(new CustomEvent('importImage')); }, evt: 'click'},
-      {sel: '#tool_delete', fn: deleteSelected, evt: 'click', key: ['del/backspace', true]},
-      {sel: '#tool_delete_multi', fn: deleteSelected, evt: 'click', key: ['del/backspace', true]},
+      {sel: '#tool_delete', fn: deleteSelected, evt: 'click', key: ['delete/backspace', true]},
+      {sel: '#tool_delete_multi', fn: deleteSelected, evt: 'click', key: ['delete/backspace', true]},
      {sel: '#tool_reorient', fn: reorientPath, evt: 'click'},
      {sel: '#tool_node_link', fn: linkControlPoints, evt: 'click'},
      {sel: '#tool_node_clone', fn: clonePathNode, evt: 'click'},
@ -5543,32 +5572,32 @@ editor.init = () => {

      // Shortcuts not associated with buttons

-      {key: 'ctrl+left', fn () { rotateSelected(0, 1); }},
-      {key: 'ctrl+right', fn () { rotateSelected(1, 1); }},
-      {key: 'ctrl+shift+left', fn () { rotateSelected(0, 5); }},
-      {key: 'ctrl+shift+right', fn () { rotateSelected(1, 5); }},
+      {key: 'ctrl+arrowleft', fn () { rotateSelected(0, 1); }},
+      {key: 'ctrl+arrowright', fn () { rotateSelected(1, 1); }},
+      {key: 'ctrl+shift+arrowleft', fn () { rotateSelected(0, 5); }},
+      {key: 'ctrl+shift+arrowright', fn () { rotateSelected(1, 5); }},
      {key: 'shift+O', fn: selectPrev},
      {key: 'shift+P', fn: selectNext},
-      {key: [modKey + 'up', true], fn () { zoomImage(2); }},
-      {key: [modKey + 'down', true], fn () { zoomImage(0.5); }},
+      {key: [modKey + 'arrowup', true], fn () { zoomImage(2); }},
+      {key: [modKey + 'arrowdown', true], fn () { zoomImage(0.5); }},
      {key: [modKey + ']', true], fn () { moveUpDownSelected('Up'); }},
      {key: [modKey + '[', true], fn () { moveUpDownSelected('Down'); }},
-      {key: ['up', true], fn () { moveSelected(0, -1); }},
-      {key: ['down', true], fn () { moveSelected(0, 1); }},
-      {key: ['left', true], fn () { moveSelected(-1, 0); }},
-      {key: ['right', true], fn () { moveSelected(1, 0); }},
-      {key: 'shift+up', fn () { moveSelected(0, -10); }},
-      {key: 'shift+down', fn () { moveSelected(0, 10); }},
-      {key: 'shift+left', fn () { moveSelected(-10, 0); }},
-      {key: 'shift+right', fn () { moveSelected(10, 0); }},
-      {key: ['alt+up', true], fn () { svgCanvas.cloneSelectedElements(0, -1); }},
-      {key: ['alt+down', true], fn () { svgCanvas.cloneSelectedElements(0, 1); }},
-      {key: ['alt+left', true], fn () { svgCanvas.cloneSelectedElements(-1, 0); }},
-      {key: ['alt+right', true], fn () { svgCanvas.cloneSelectedElements(1, 0); }},
-      {key: ['alt+shift+up', true], fn () { svgCanvas.cloneSelectedElements(0, -10); }},
-      {key: ['alt+shift+down', true], fn () { svgCanvas.cloneSelectedElements(0, 10); }},
-      {key: ['alt+shift+left', true], fn () { svgCanvas.cloneSelectedElements(-10, 0); }},
-      {key: ['alt+shift+right', true], fn () { svgCanvas.cloneSelectedElements(10, 0); }},
+      {key: ['arrowup', true], fn () { moveSelected(0, -1); }},
+      {key: ['arrowdown', true], fn () { moveSelected(0, 1); }},
+      {key: ['arrowleft', true], fn () { moveSelected(-1, 0); }},
+      {key: ['arrowright', true], fn () { moveSelected(1, 0); }},
+      {key: 'shift+arrowup', fn () { moveSelected(0, -10); }},
+      {key: 'shift+arrowdown', fn () { moveSelected(0, 10); }},
+      {key: 'shift+arrowleft', fn () { moveSelected(-10, 0); }},
+      {key: 'shift+arrowright', fn () { moveSelected(10, 0); }},
+      {key: ['alt+arrowup', true], fn () { svgCanvas.cloneSelectedElements(0, -1); }},
+      {key: ['alt+arrowdown', true], fn () { svgCanvas.cloneSelectedElements(0, 1); }},
+      {key: ['alt+arrowleft', true], fn () { svgCanvas.cloneSelectedElements(-1, 0); }},
+      {key: ['alt+arrowright', true], fn () { svgCanvas.cloneSelectedElements(1, 0); }},
+      {key: ['alt+shift+arrowup', true], fn () { svgCanvas.cloneSelectedElements(0, -10); }},
+      {key: ['alt+shift+arrowdown', true], fn () { svgCanvas.cloneSelectedElements(0, 10); }},
+      {key: ['alt+shift+arrowleft', true], fn () { svgCanvas.cloneSelectedElements(-10, 0); }},
+      {key: ['alt+shift+arrowright', true], fn () { svgCanvas.cloneSelectedElements(10, 0); }},
      {key: 'a', fn () { svgCanvas.selectAllInCurrentLayer(); }},
      {key: modKey + 'a', fn () { svgCanvas.selectAllInCurrentLayer(); }},

@ -5806,6 +5835,9 @@ editor.init = () => {
  $('#blur').SpinButton({
    min: 0, max: 10, step: 0.1, stateObj, callback: changeBlur
  });
+  $('#letter_spacing').SpinButton({
+    min: -1000, step: 1, stateObj, callback: changeLetterSpacing
+  });
  $('#zoom').SpinButton({
    min: 0.001, max: 10000, step: 50, stepfunc: stepZoom,
    stateObj, callback: changeZoom
--- a/src/svgcanvas/elem-get-set.js
+++ b/src/svgcanvas/elem-get-set.js
@ -685,6 +685,38 @@ export const setTextAnchorMethod = function (value) {
  }
 };

+/**
+ * Returns the letter spacing value
+ * @function module:svgcanvas.SvgCanvas#getLetterSpacing
+ * @returns {string} The letter spacing value
+ */
+export const getLetterSpacingMethod = function () {
+  const selectedElements = elemContext_.getSelectedElements();
+  const selected = selectedElements[0];
+  if (!isNullish(selected) && selected.tagName === 'text' && isNullish(selectedElements[1])) {
+    return selected.getAttribute('letter-spacing') || 0;
+  }
+  return null;
+};
+
+/**
+ * Set the new letter spacing.
+ * @function module:svgcanvas.SvgCanvas#setLetterSpacing
+ * @param {string} value - The letter spacing
+ * @returns {void}
+ */
+export const setLetterSpacingMethod = function (value) {
+  const selectedElements = elemContext_.getSelectedElements();
+  const selected = selectedElements[0];
+  if (!isNullish(selected) && selected.tagName === 'text' &&
+    isNullish(selectedElements[1])) {
+    elemContext_.getCanvas().changeSelectedAttribute('letter-spacing', value);
+  }
+  if (!selectedElements[0].textContent) {
+    elemContext_.getCanvas().textActions.setCursor();
+  }
+};
+
 /**
 * @function module:svgcanvas.SvgCanvas#getFontFamily
 * @returns {string} The current font family
--- a/src/svgcanvas/sanitize.js
+++ b/src/svgcanvas/sanitize.js
@ -49,7 +49,7 @@ const svgWhiteList_ = {
  svg: ['class', 'clip-path', 'clip-rule', 'filter', 'id', 'height', 'mask', 'preserveAspectRatio', 'requiredFeatures', 'style', 'systemLanguage', 'viewBox', 'width', 'x', 'xmlns', 'xmlns:se', 'xmlns:xlink', 'y'],
  switch: ['class', 'id', 'requiredFeatures', 'systemLanguage'],
  symbol: ['class', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'id', 'opacity', 'preserveAspectRatio', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform', 'viewBox'],
-  text: ['class', 'clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'id', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'text-decoration', 'style', 'systemLanguage', 'text-anchor', 'transform', 'x', 'xml:space', 'y', 'display'],
+  text: ['class', 'clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'id', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'text-decoration', 'letter-spacing', 'style', 'systemLanguage', 'text-anchor', 'transform', 'x', 'xml:space', 'y', 'display'],
  textPath: ['class', 'id', 'method', 'requiredFeatures', 'spacing', 'startOffset', 'style', 'systemLanguage', 'transform', 'xlink:href', 'display'],
  title: [],
  tspan: ['class', 'clip-path', 'clip-rule', 'dx', 'dy', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'id', 'mask', 'opacity', 'requiredFeatures', 'rotate', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'text-anchor', 'textLength', 'transform', 'x', 'xml:space', 'y', 'display'],
--- a/src/svgcanvas/svgcanvas.js
+++ b/src/svgcanvas/svgcanvas.js
@ -57,8 +57,8 @@ import {
  setDocumentTitleMethod, setResolutionMethod, getEditorNSMethod, setBBoxZoomMethod,
  setZoomMethod, setColorMethod, setGradientMethod, findDuplicateGradient, setPaintMethod,
  setStrokeWidthMethod, setStrokeAttrMethod, getBoldMethod, setBoldMethod, getItalicMethod,
-  setItalicMethod, hasTextDecorationMethod, addTextDecorationMethod, removeTextDecorationMethod,
-  setTextAnchorMethod, getFontFamilyMethod, setFontFamilyMethod, setFontColorMethod, getFontColorMethod,
+  setItalicMethod, hasTextDecorationMethod, addTextDecorationMethod, removeTextDecorationMethod, setLetterSpacingMethod,
+  getLetterSpacingMethod, setTextAnchorMethod, getFontFamilyMethod, setFontFamilyMethod, setFontColorMethod, getFontColorMethod,
  getFontSizeMethod, setFontSizeMethod, getTextMethod, setTextContentMethod,
  setImageURLMethod, setLinkURLMethod, setRectRadiusMethod, makeHyperlinkMethod,
  removeHyperlinkMethod, setSegTypeMethod, setBackgroundMethod
@ -2240,6 +2240,23 @@ class SvgCanvas {
     */
    this.removeTextDecoration = removeTextDecorationMethod;

+    /**
+     * Returns the letter spacing.
+     * @function module:svgcanvas.SvgCanvas#getLetterSpacing
+     * @param {string} value - The value that should be set
+     * @returns {string} The letter spacing value
+     */
+    this.getLetterSpacing = getLetterSpacingMethod;
+
+
+    /**
+     * Changes the letter spacing.
+     * @function module:svgcanvas.SvgCanvas#setLetterSpacing
+     * @param {string} value - The value that should be set
+     * @returns {void}
+     */
+    this.setLetterSpacing = setLetterSpacingMethod;
+
    /**
 * Set the new text anchor.
 * @function module:svgcanvas.SvgCanvas#setTextAnchor