Added word spacing to text formatting tools

2021-01-25 13:25:22 +01:00
parent 92eac95627
commit 69bf3d9d81
70 changed files with 320 additions and 61 deletions
--- a/src/editor/images/svg_edit_icons.svg
+++ b/src/editor/images/svg_edit_icons.svg
@@ -1093,6 +1093,24 @@
  </svg>
 </g>

+<g id="wordspacing">
+  <svg width="44" height="18" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+    <defs>
+      <marker id="se_marker_start_svg_2" markerHeight="5" markerWidth="5" orient="auto" refX="50" refY="50" viewBox="0 0 100 100">
+        <path d="m0,50l100,40l-30,-40l30,-40l-100,40z" fill="#ff7f00" id="svg_3" stroke="#ff7f00" stroke-width="10"/>
+      </marker>
+      <marker id="se_marker_end_svg_2" markerHeight="5" markerWidth="5" orient="auto" refX="50" refY="50" viewBox="0 0 100 100">
+        <path d="m100,50l-100,40l30,-40l-30,-40l100,40z" fill="#ff7f00" id="svg_4" stroke="#ff7f00" stroke-width="10"/>
+      </marker>
+    </defs>
+    <g class="layer">
+      <title>Layer 1</title>
+      <text fill="#000000" font-family="serif" font-size="15" id="svg_1" stroke="#000000" stroke-width="0" text-anchor="middle" x="21.78779" xml:space="preserve" y="14.00814">A      B</text>
+      <line fill="none" id="svg_2" marker-end="url(#se_marker_end_svg_2)" marker-start="url(#se_marker_start_svg_2)" stroke="#ff7f00" x1="15.19377" x2="28.36873" y1="8.75" y2="8.75"/>
+    </g>
+  </svg>
+</g>
+
 <g id="svg_eof"/>

 </svg>
--- a/src/editor/index.html
+++ b/src/editor/index.html
@@ -344,6 +344,20 @@
              </ul>
            </div>
          </div>
+          <div class="toolset" id="tool_word_spacing" title="Change the word spacing of the text">
+            <label>
+              <span id="word_spacing_icon" class="icon_label"></span>
+              <input id="word_spacing" size="3" value="0" type="text" />
+            </label>
+            <div id="word_spacing_dropdown" class="dropdown">
+              <button></button>
+              <ul>
+                <li class="special">
+                  <div id="word_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
@@ -307,6 +307,7 @@ export const readLang = function (langData) {
    tool_image: tools.mode_image,
    tool_italic: properties.italic,
    tool_letter_spacing: properties.letter_spacing,
+    tool_word_spacing: properties.word_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
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.ar.js
+++ b/src/editor/locale/lang.ar.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.az.js
+++ b/src/editor/locale/lang.az.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.be.js
+++ b/src/editor/locale/lang.be.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.bg.js
+++ b/src/editor/locale/lang.bg.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.ca.js
+++ b/src/editor/locale/lang.ca.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.cs.js
+++ b/src/editor/locale/lang.cs.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Hlavní menu',
--- a/src/editor/locale/lang.cy.js
+++ b/src/editor/locale/lang.cy.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.da.js
+++ b/src/editor/locale/lang.da.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.de.js
+++ b/src/editor/locale/lang.de.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Den Text linksbündig ausrichten',
    text_anchor_middle: 'Den Text zentriert ausrichten',
    text_anchor_end: 'Den Text rechtsbündig ausrichten',
-    letter_spacing: 'Den Abstand zwischen den Buchstabend anpassen'
+    letter_spacing: 'Den Abstand zwischen den Buchstaben anpassen',
+    word_spacing: 'Den Abstand zwischen den einzelnen Wörtern anpassen'
  },
  tools: {
    main_menu: 'Hauptmenü',
--- a/src/editor/locale/lang.el.js
+++ b/src/editor/locale/lang.el.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.en.js
+++ b/src/editor/locale/lang.en.js
@@ -75,6 +75,7 @@ export default {
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing',
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.es.js
+++ b/src/editor/locale/lang.es.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Menú principal',
--- a/src/editor/locale/lang.et.js
+++ b/src/editor/locale/lang.et.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.fa.js
+++ b/src/editor/locale/lang.fa.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.fi.js
+++ b/src/editor/locale/lang.fi.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.fr.js
+++ b/src/editor/locale/lang.fr.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Menu principal',
--- a/src/editor/locale/lang.fy.js
+++ b/src/editor/locale/lang.fy.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.ga.js
+++ b/src/editor/locale/lang.ga.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.gl.js
+++ b/src/editor/locale/lang.gl.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.he.js
+++ b/src/editor/locale/lang.he.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.hi.js
+++ b/src/editor/locale/lang.hi.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.hr.js
+++ b/src/editor/locale/lang.hr.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.hu.js
+++ b/src/editor/locale/lang.hu.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.hy.js
+++ b/src/editor/locale/lang.hy.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.id.js
+++ b/src/editor/locale/lang.id.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.is.js
+++ b/src/editor/locale/lang.is.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.it.js
+++ b/src/editor/locale/lang.it.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Menù principale',
--- a/src/editor/locale/lang.ja.js
+++ b/src/editor/locale/lang.ja.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.ko.js
+++ b/src/editor/locale/lang.ko.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.lt.js
+++ b/src/editor/locale/lang.lt.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.lv.js
+++ b/src/editor/locale/lang.lv.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.mk.js
+++ b/src/editor/locale/lang.mk.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.ms.js
+++ b/src/editor/locale/lang.ms.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.mt.js
+++ b/src/editor/locale/lang.mt.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.nl.js
+++ b/src/editor/locale/lang.nl.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Hoofdmenu',
--- a/src/editor/locale/lang.no.js
+++ b/src/editor/locale/lang.no.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.pl.js
+++ b/src/editor/locale/lang.pl.js
@@ -75,7 +75,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Menu główne',
--- a/src/editor/locale/lang.pt-BR.js
+++ b/src/editor/locale/lang.pt-BR.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Menu Principal',
--- a/src/editor/locale/lang.pt-PT.js
+++ b/src/editor/locale/lang.pt-PT.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.ro.js
+++ b/src/editor/locale/lang.ro.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Menu Principal',
--- a/src/editor/locale/lang.ru.js
+++ b/src/editor/locale/lang.ru.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Главное меню',
--- a/src/editor/locale/lang.sk.js
+++ b/src/editor/locale/lang.sk.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Hlavné menu',
--- a/src/editor/locale/lang.sl.js
+++ b/src/editor/locale/lang.sl.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Glavni meni',
--- a/src/editor/locale/lang.sq.js
+++ b/src/editor/locale/lang.sq.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.sr.js
+++ b/src/editor/locale/lang.sr.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.sv.js
+++ b/src/editor/locale/lang.sv.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.sw.js
+++ b/src/editor/locale/lang.sw.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.test.js
+++ b/src/editor/locale/lang.test.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.th.js
+++ b/src/editor/locale/lang.th.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.tl.js
+++ b/src/editor/locale/lang.tl.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.tr.js
+++ b/src/editor/locale/lang.tr.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.uk.js
+++ b/src/editor/locale/lang.uk.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.vi.js
+++ b/src/editor/locale/lang.vi.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.yi.js
+++ b/src/editor/locale/lang.yi.js
@@ -75,6 +75,7 @@ export default {
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing',
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.zh-CN.js
+++ b/src/editor/locale/lang.zh-CN.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: '主菜单',
--- a/src/editor/locale/lang.zh-HK.js
+++ b/src/editor/locale/lang.zh-HK.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/locale/lang.zh-TW.js
+++ b/src/editor/locale/lang.zh-TW.js
@@ -74,7 +74,8 @@ export default {
    text_anchor_start: 'Align the text in start',
    text_anchor_middle: 'Align the text in middle',
    text_anchor_end: 'Align the text in end',
-    letter_spacing: 'Change the letter spacing'
+    letter_spacing: 'Change the letter spacing',
+    word_spacing: 'Change the word spacing'
  },
  tools: {
    main_menu: 'Main Menu',
--- a/src/editor/svgedit.js
+++ b/src/editor/svgedit.js
@@ -1204,6 +1204,7 @@ editor.init = () => {
        '#text_anchor_icon': 'anchor_middle',
        '#text_decoration_icon': 'textdecoration',
        '#letter_spacing_icon': 'letterspacing',
+        '#word_spacing_icon': 'wordspacing',

        '.flyout_arrow_horiz': 'arrow_right',
        '.dropdown button, #main_button .dropdown': 'arrow_down',
@@ -2329,6 +2330,9 @@ editor.init = () => {
          const letterSpacingValue = svgCanvas.getLetterSpacing(elem);
          $('#letter_spacing').val(letterSpacingValue);
          $('#letter_spacing_slider').slider('option', 'value', letterSpacingValue);
+          const wordSpacingValue = svgCanvas.getWordSpacing(elem);
+          $('#word_spacing').val(wordSpacingValue);
+          $('#word_spacing_slider').slider('option', 'value', wordSpacingValue);
          $('#font_family').val(elem.getAttribute('font-family'));
          $('#font_size').val(elem.getAttribute('font-size'));
          $('#text').val(elem.textContent);
@@ -3955,6 +3959,31 @@ editor.init = () => {
    svgCanvas.setLetterSpacing(val);
  };

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

  When a flyout icon is selected
@@ -5838,6 +5867,9 @@ editor.init = () => {
  $('#letter_spacing').SpinButton({
    min: -1000, step: 1, stateObj, callback: changeLetterSpacing
  });
+  $('#word_spacing').SpinButton({
+    min: -1000, step: 1, stateObj, callback: changeWordSpacing
+  });
  $('#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
@@ -717,6 +717,38 @@ export const setLetterSpacingMethod = function (value) {
  }
 };

+/**
+ * Returns the word spacing value
+ * @function module:svgcanvas.SvgCanvas#getWordSpacing
+ * @returns {string} The word spacing value
+ */
+export const getWordSpacingMethod = function () {
+  const selectedElements = elemContext_.getSelectedElements();
+  const selected = selectedElements[0];
+  if (!isNullish(selected) && selected.tagName === 'text' && isNullish(selectedElements[1])) {
+    return selected.getAttribute('word-spacing') || 0;
+  }
+  return null;
+};
+
+/**
+ * Set the new word spacing.
+ * @function module:svgcanvas.SvgCanvas#setWordSpacing
+ * @param {string} value - The word spacing
+ * @returns {void}
+ */
+export const setWordSpacingMethod = function (value) {
+  const selectedElements = elemContext_.getSelectedElements();
+  const selected = selectedElements[0];
+  if (!isNullish(selected) && selected.tagName === 'text' &&
+    isNullish(selectedElements[1])) {
+    elemContext_.getCanvas().changeSelectedAttribute('word-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', 'letter-spacing', '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', 'word-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
@@ -58,7 +58,8 @@ import {
  setZoomMethod, setColorMethod, setGradientMethod, findDuplicateGradient, setPaintMethod,
  setStrokeWidthMethod, setStrokeAttrMethod, getBoldMethod, setBoldMethod, getItalicMethod,
  setItalicMethod, hasTextDecorationMethod, addTextDecorationMethod, removeTextDecorationMethod, setLetterSpacingMethod,
-  getLetterSpacingMethod, setTextAnchorMethod, getFontFamilyMethod, setFontFamilyMethod, setFontColorMethod, getFontColorMethod,
+  getLetterSpacingMethod, setWordSpacingMethod, getWordSpacingMethod, setTextAnchorMethod,
+  getFontFamilyMethod, setFontFamilyMethod, setFontColorMethod, getFontColorMethod,
  getFontSizeMethod, setFontSizeMethod, getTextMethod, setTextContentMethod,
  setImageURLMethod, setLinkURLMethod, setRectRadiusMethod, makeHyperlinkMethod,
  removeHyperlinkMethod, setSegTypeMethod, setBackgroundMethod
@@ -2248,7 +2249,6 @@ class SvgCanvas {
     */
    this.getLetterSpacing = getLetterSpacingMethod;

-
    /**
     * Changes the letter spacing.
     * @function module:svgcanvas.SvgCanvas#setLetterSpacing
@@ -2257,6 +2257,22 @@ class SvgCanvas {
     */
    this.setLetterSpacing = setLetterSpacingMethod;

+    /**
+     * Returns the word spacing.
+     * @function module:svgcanvas.SvgCanvas#getWordSpacing
+     * @param {string} value - The value that should be set
+     * @returns {string} The word spacing value
+     */
+    this.getWordSpacing = getWordSpacingMethod;
+
+    /**
+     * Changes the word spacing.
+     * @function module:svgcanvas.SvgCanvas#setWordSpacing
+     * @param {string} value - The value that should be set
+     * @returns {void}
+     */
+    this.setWordSpacing = setWordSpacingMethod;
+
    /**
 * Set the new text anchor.
 * @function module:svgcanvas.SvgCanvas#setTextAnchor