Update app.py

app.py

@@ -53,7 +53,7 @@ def generate_initial_design(word):
     for i, letter in enumerate(letters):
         style = {
             'font-family': random.choice(fonts),
-            'line-height': '110%',
+            'line-height': '138%',
             'font-size': random.choice(font_sizes),
             'letter-spacing': random.choice(letter_spacings),
             'text-shadow': random.choice(text_shadows),
@@ -61,16 +61,17 @@ def generate_initial_design(word):
             'margin-top': random.choice(["-0.06cm", "-0.03cm", "0.00cm", "0.03cm", "0.06cm"]),
             'position': 'relative',
             'top': random.choice(font_tops),
-            'color': '#000000',  # Black color
+            'color': '#000000',
             'display': 'inline-block',
-            'margin': '0 1px'
+            'margin': '0 1px',
+            'vertical-align': 'baseline'
         }
         
         style_str = '; '.join([f'{k}: {v}' for k, v in style.items()])
-        styled_letter = f'<div class="styled-letter" style="{style_str}">{letter}</div>'
+        styled_letter = f'<span class="styled-letter" style="{style_str}">{letter}</span>'
         styled_letters.append(styled_letter)
 
-    return f'<div style="display: flex; align-items: baseline; position: relative; top: 20px;">{" ".join(styled_letters)}</div>'
+    return f'<span style="display: inline-flex; align-items: baseline; position: relative;">{" ".join(styled_letters)}</span>'
 
 def generate_movement_design(word):
     """Generate a completely new random design for the movement animation."""
@@ -123,7 +124,7 @@ def generate_movement_design(word):
     for i, letter in enumerate(letters):
         style = {
             'font-family': random.choice(fonts),
-            'line-height': '110%',
+            'line-height': '138%',
             'font-size': random.choice(font_sizes),
             'letter-spacing': random.choice(letter_spacings),
             'text-shadow': random.choice(text_shadows),
@@ -134,12 +135,13 @@ def generate_movement_design(word):
             'color': random_color,
             'display': 'inline-block',
             'margin': '0 1px',
+            'vertical-align': 'baseline',
             'animation': f'{animation_name} 0.5s ease-in-out',
             'animation-delay': f'{i * 0.1}s'
         }
         
         style_str = '; '.join([f'{k}: {v}' for k, v in style.items()])
-        styled_letter = f'<div class="styled-letter" style="{style_str}">{letter}</div>'
+        styled_letter = f'<span class="styled-letter" style="{style_str}">{letter}</span>'
         styled_letters.append(styled_letter)
 
     return f'''
@@ -149,9 +151,9 @@ def generate_movement_design(word):
         transition: all 0.3s ease;
     }}
     </style>
-    <div style="display: flex; align-items: baseline; position: relative; top: 20px;">
+    <span style="display: inline-flex; align-items: baseline; position: relative;">
         {" ".join(styled_letters)}
-    </div>
+    </span>
     '''
 
 def process_text(input_text):