Update app.py

app.py

@@ -31,9 +31,9 @@ def generate_initial_design(word):
         "'Pacifico', cursive",
         "'Teko', sans-serif"
     ]
-    font_sizes = ["17px", "19px", "21px", "23px", "25px", "27px"]
-    font_tops = ["11px", "13px", "15px"]
-    letter_spacings = ["-6px", "-4px", "-3px", "-2px", "-1px", "0px", "1px", "2px"]
+    font_sizes = ["18px", "19px", "20px"]  # Narrower range
+    font_tops = ["0px", "1px", "-1px"]  # Smaller adjustments
+    letter_spacings = ["-1px", "0px", "1px"]  # Reduced range
     text_shadows = [
         "0px 0px 1px",
         "0px 0px 2px",
@@ -53,25 +53,31 @@ def generate_initial_design(word):
     for i, letter in enumerate(letters):
         style = {
             'font-family': random.choice(fonts),
-            'line-height': '138%',
+            'line-height': '1.6',  # Consistent with body text
             'font-size': random.choice(font_sizes),
             'letter-spacing': random.choice(letter_spacings),
             'text-shadow': random.choice(text_shadows),
             'transform': f'skew({random.choice(skew_angles)})',
-            'margin-top': random.choice(["-0.06cm", "-0.03cm", "0.00cm", "0.03cm", "0.06cm"]),
+            'margin-top': random.choice(["-0.02cm", "0.00cm", "0.02cm"]),  # Reduced range
             'position': 'relative',
             'top': random.choice(font_tops),
             'color': '#000000',
             'display': 'inline-block',
             'margin': '0 1px',
-            'vertical-align': 'baseline'
+            'vertical-align': 'middle'
         }
         
         style_str = '; '.join([f'{k}: {v}' for k, v in style.items()])
         styled_letter = f'<span class="styled-letter" style="{style_str}">{letter}</span>'
         styled_letters.append(styled_letter)
 
-    return f'<span style="display: inline-flex; align-items: baseline; position: relative;">{" ".join(styled_letters)}</span>'
+    return f'''
+    <span style="display: inline-flex; 
+                 align-items: baseline; 
+                 vertical-align: middle; 
+                 margin: 0 2px;">
+        {" ".join(styled_letters)}
+    </span>'''
 
 def generate_movement_design(word):
     """Generate a completely new random design for the movement animation."""
@@ -87,9 +93,9 @@ def generate_movement_design(word):
         "'Orbitron', sans-serif",
         "'Raleway', sans-serif"
     ]
-    font_sizes = ["17px", "19px", "21px", "23px", "25px", "27px"]
-    font_tops = ["11px", "13px", "15px"]
-    letter_spacings = ["-6px", "-4px", "-3px", "-2px", "-1px", "0px", "1px", "2px"]
+    font_sizes = ["18px", "19px", "20px"]  # Narrower range
+    font_tops = ["0px", "1px", "-1px"]  # Smaller adjustments
+    letter_spacings = ["-1px", "0px", "1px"]  # Reduced range
     text_shadows = [
         "0px 0px 1px",
         "0px 0px 2px",
@@ -124,18 +130,18 @@ def generate_movement_design(word):
     for i, letter in enumerate(letters):
         style = {
             'font-family': random.choice(fonts),
-            'line-height': '138%',
+            'line-height': '1.6',  # Consistent with body text
             'font-size': random.choice(font_sizes),
             'letter-spacing': random.choice(letter_spacings),
             'text-shadow': random.choice(text_shadows),
             'transform': f'skew({random.choice(skew_angles)})',
-            'margin-top': random.choice(["-0.06cm", "-0.03cm", "0.00cm", "0.03cm", "0.06cm"]),
+            'margin-top': random.choice(["-0.02cm", "0.00cm", "0.02cm"]),  # Reduced range
             'position': 'relative',
             'top': random.choice(font_tops),
             'color': random_color,
             'display': 'inline-block',
             'margin': '0 1px',
-            'vertical-align': 'baseline',
+            'vertical-align': 'middle',
             'animation': f'{animation_name} 0.5s ease-in-out',
             'animation-delay': f'{i * 0.1}s'
         }
@@ -151,7 +157,10 @@ def generate_movement_design(word):
         transition: all 0.3s ease;
     }}
     </style>
-    <span style="display: inline-flex; align-items: baseline; position: relative;">
+    <span style="display: inline-flex; 
+                 align-items: baseline; 
+                 vertical-align: middle; 
+                 margin: 0 2px;">
         {" ".join(styled_letters)}
     </span>
     '''