diff --git a/www/index.html b/www/index.html index 041ce95..c43e312 100644 --- a/www/index.html +++ b/www/index.html @@ -190,6 +190,12 @@ + +
diff --git a/www/lang/de-DE.json b/www/lang/de-DE.json index adbebc6..1ade635 100644 --- a/www/lang/de-DE.json +++ b/www/lang/de-DE.json @@ -107,5 +107,9 @@ "text-font": "Schriftart", "text-size": "Textgröße", "enter-text": "Text eingeben", - "wrap-by-space": "Autom. Zeilenumbruch" + "wrap-by-space": "Autom. Zeilenumbruch", + "text-align": "Textausrichtung", + "align-left": "Linksbündig", + "align-mid": "Zentriert", + "align-right": "Rechtsbündig" } \ No newline at end of file diff --git a/www/lang/en-US.json b/www/lang/en-US.json index 8c39e0f..80ba3ce 100644 --- a/www/lang/en-US.json +++ b/www/lang/en-US.json @@ -132,5 +132,9 @@ "text-font": "Font", "text-size": "Size", "enter-text": "Enter text", - "wrap-by-space": "Wrap words by spaces" + "wrap-by-space": "Wrap words by spaces", + "text-align": "Align text", + "align-left": "Left", + "align-mid": "Center", + "align-right": "Right" } \ No newline at end of file diff --git a/www/main.css b/www/main.css index e7b8d80..100c7f7 100644 --- a/www/main.css +++ b/www/main.css @@ -660,4 +660,11 @@ 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; width: var(--paper-width); overflow: hidden auto; white-space: pre-line;} +#insert-text-area { + white-space: pre; + height: 50vh; + width: var(--paper-width); + overflow: hidden auto; + white-space: pre-line; + resize:none; +} diff --git a/www/main.js b/www/main.js index afa6bbd..d44c459 100644 --- a/www/main.js +++ b/www/main.js @@ -307,7 +307,7 @@ class CanvasController { this._thresholdRange = document.querySelector('[name="threshold"]'); this._energyRange = document.querySelector('[name="energy"]'); this.imageUrl = null; - this.textAlign = 0; // 0: Left, 1: Center, 2: Right + this.textAlign = document.getElementById("text-align"); const prevent_default = (event) => { event.preventDefault(); @@ -330,6 +330,7 @@ class CanvasController { 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('#text-align' , 'change', () => this.textArea.style["text-align"] = this.textAlign.value); putEvent('input[name="wrap-by-space"]' , 'change', () => this.textArea.style["word-break"] = this.wrapBySpace.checked ? "break-word" : "break-all"); putEvent('#button-preview' , 'click', this.activatePreview , this); putEvent('#button-reset' , 'click', this.reset , this); @@ -513,9 +514,10 @@ class CanvasController { let y_pos = y_step; for (let line of lines) { let x_pos = 0; - if (this.textAlign == 2) { + // Text-alignment + if (this.textAlign.value == "right") { x_pos = Math.max(max_width - ctx.measureText(line).width, 0) - } else if (this.textAlign == 1) { + } else if (this.textAlign.value == "center") { x_pos = Math.max(max_width - ctx.measureText(line).width, 0) / 2; }