deltaY highlighting

frontend/src/components/canvas/utils.js

@@ -150,6 +150,10 @@ const transformHighlightedText = (
         /[áčďéěíňóřšťúůýžÁČĎÉĚÍŇÓŘŠŤÚÝŽ]+/.test(text)
     )
 
+    const textContainsHighlight = (
+        /\*/.test(text)
+    )
+
     let positionWithinLine = 0
     let linePosition = 0
     let highlightIsActive = false
@@ -175,6 +179,10 @@ const transformHighlightedText = (
             style.fill = highlightedTextColor
         }
 
+        if (options.padWhenDiacritics && textContainsHighlight && textContainsDiacritics) {
+            style.deltaY = Math.ceil(fontSize * 0.1)
+        }
+
         styles[linePosition][positionWithinLine] = style
 
         positionWithinLine++

frontend/src/views/basic_photo_banner/canvas.js

@@ -109,7 +109,8 @@ const redraw = async (canvas, options) => {
             mainTextWidth,
             'Bebas Neue',
             options.colors.highlight.value,
-            options.colors.highlightedText.value
+            options.colors.highlightedText.value,
+            {padWhenDiacritics: true}
         )
 
         mainTextBox = new PaddedHighlightingTextbox(

frontend/src/views/text_banner/canvas.js

@@ -100,7 +100,8 @@ const redraw = async (canvas, options) => {
             textBoxWidth,
             'Bebas Neue',
             options.colors.highlight.value,
-            options.colors.highlightedText.value
+            options.colors.highlightedText.value,
+            {padWhenDiacritics: true}
         )
 
         textBox = new PaddedHighlightingTextbox(