diff --git a/www/index.html b/www/index.html
index 4c9d634..c91f465 100644
--- a/www/index.html
+++ b/www/index.html
@@ -178,31 +178,22 @@
         </div>
         <div id="text-input">
             <h1 data-i18n="insert-text">Insert Text</h1>
-            <span>
+            <div style="display:flex; flex-direction: column;">
+                
+                <div id="text-settings">
+                    <select id="text-font" style="margin: 0px; margin-left: 0px; margin-left: 10px;">
+                        <option value="Serif">Serif</option>
+                        <option value="Sans-serif" selected>Sans-serif</option>
+                        <option value="monospace">Monospace</option>
+                        <option value="cursive">Cursive</option>
+                    </select>
+                    <input id="text-size" type="number" name="text-size" min="1" max="100" value="20" data-key style="margin: 0px;"/>
+                    <label data-i18n="wrap-by-space"><input type="checkbox" name="wrap-by-space" data-key checked />Wrap text</label>
+                </div>
                 <div id="text-textarea">
                     <textarea id="insert-text-area"></textarea>
                 </div>
-                
-                <div id="text-settings">
-                    <label data-i18n="text-font">Font</label>
-                        <select id="text-font">
-                            <option value="Serif">Serif</option>
-                            <option value="Sans-serif" selected>Sans-serif</option>
-                            <option value="monospace">Monospace</option>
-                            <option value="cursive">Cursive</option>
-                        </select>
-                        <br>
-                        <label>
-                            <span data-i18n="text-size-">Size:</span>
-                            <input id="text-size" type="number" name="text-size" min="1" max="100" value="20" data-key />
-                            <span>px</span>
-                        </label>
-                        <br>
-                        <input type="checkbox" name="wrap-by-space" data-key checked />
-                        <span data-i18n="wrap-by-space">Wrap text</span>
-                    </label>
-                </div>
-            </span>
+            </div>
         </div>
         <iframe id="frame" src="about:blank" name="frame" title="frame" data-key="v"></iframe>
     </div>
diff --git a/www/lang/de-DE.json b/www/lang/de-DE.json
index e4f772e..adbebc6 100644
--- a/www/lang/de-DE.json
+++ b/www/lang/de-DE.json
@@ -105,7 +105,7 @@
     "welcome": "Welcome!",
     "some-rights-reserved": "Einige Rechte sind vorbehalten.",
     "text-font": "Schriftart",
-    "text-size": "Größe",
+    "text-size": "Textgröße",
     "enter-text": "Text eingeben",
-    "wrap-by-space": "autom. Zeilenumbruch"
+    "wrap-by-space": "Autom. Zeilenumbruch"
 }
\ No newline at end of file
diff --git a/www/main.css b/www/main.css
index d58e6cb..e7b8d80 100644
--- a/www/main.css
+++ b/www/main.css
@@ -660,12 +660,4 @@ body.high-contrast #control-overlay { background-color: var(--shade); }
     font-family: 'Unifont';
     src: local('Unifont') url('unifont.ttf') url('unifont.otf');
 }
-#insert-text-area { white-space: pre; height: 50vh; }
-#text-textarea { display: inline-grid;position: relative;margin: auto 0; }
-#text-settings {
-    display: inline-block;
-    vertical-align: top;
-    margin: auto;
-    position: absolute; 
-    padding: 0px 0px 0px 10px;
-}
\ No newline at end of file
+#insert-text-area { white-space: pre; height: 50vh; width: var(--paper-width); overflow: hidden auto; white-space: pre-line;}
diff --git a/www/main.js b/www/main.js
index b838e32..2dc546a 100644
--- a/www/main.js
+++ b/www/main.js
@@ -320,9 +320,16 @@ class CanvasController {
             return prevent_default(event);
         });
 
+        this.textArea.style["font-size"] = this.textSize.value + "px";
+        this.textArea.style["font-family"] = this.textFont.value;
+        this.textArea.style["word-break"] = this.wrapBySpace.checked ? "break-word" : "break-all";
+
         putEvent('input[name="algo"]', 'change', (event) => this.useAlgorithm(event.currentTarget.value), this);
         putEvent('#insert-picture'   , 'click', () => this.insertPicture(), this);
-        putEvent('#insert-text'   , 'click', () => Dialog.alert("#text-input", () => this.insertText(this.textArea.value))); //Dialog.prompt(i18n('enter-text'), (text) => this.insertText(text), true), this);
+        putEvent('#insert-text'   , 'click', () => Dialog.alert("#text-input", () => this.insertText(this.textArea.value)));
+        putEvent('#text-size'   , 'change', () => this.textArea.style["font-size"] = this.textSize.value + "px"); 
+        putEvent('#text-font'   , 'change', () => this.textArea.style["font-family"] = this.textFont.value); 
+        putEvent('input[name="wrap-by-space"]'   , 'change', () => this.textArea.style["word-break"] = this.wrapBySpace.checked ? "break-word" : "break-all"); //TODO: refresh on startup
         putEvent('#button-preview'   , 'click', this.activatePreview , this);
         putEvent('#button-reset'     , 'click', this.reset           , this);
         putEvent('#canvas-expand'    , 'click', this.expand          , this);