Update scripts.js, index.php

index.php

@@ -12,37 +12,44 @@
   <section class="memory-game">
     <div class="memory-card" data-framework="A">
       <?php 
-        $text = 'Dies ist ein Testtext!';
-        $style = 'background-color: #FFCCCB';
+        $text = 'A longer text which should wrap automatically';
         $width = 640 * 0.25 - 10;
         $height = 640 * 0.33333 - 10;
         $textSize = min($width, $height) * 0.4;
+        $style = 'background-color: #FFCCCB; font-size: ' . $textSize . 'px; font-family: sans-serif; fill: #000000; text-anchor: middle; dominant-baseline: middle; word-wrap: break-word; text-align: center;';
 
-        // Text in mehrere Zeilen aufteilen
         $words = explode(' ', $text);
-        $lines = array('');
-        $currentLine = 0;
+        $lines = [];
+        $currentLine = '';
+
         foreach ($words as $word) {
-          $testLine = $lines[$currentLine] . ' ' . $word;
+          $testLine = $currentLine . ' ' . $word;
           $testWidth = $textSize * strlen($testLine) / 2;
-          if ($testWidth > $width * 0.9) { // 90% der Breite für Zeilenumbruch verwenden
-            $currentLine++;
-            $lines[$currentLine] = $word;
+          if ($testWidth > $width) {
+            $lines[] = $currentLine;
+            $currentLine = $word;
           } else {
-            $lines[$currentLine] = $testLine;
+            $currentLine = $testLine;
           }
         }
-        $text = implode("\n", $lines);
 
-        // SVG-Code generieren
-        $svg = "<svg xmlns='http://www.w3.org/2000/svg' width='$width' height='$height'>";
-        $svg .= "<text x='50%' y='50%' text-anchor='middle' alignment-baseline='middle' font-size='$textSize'>";
-        $svg .= $text;
-        $svg .= "</text></svg>";
+        $lines[] = $currentLine;
+
+        $textElements = '';
+        $numLines = count($lines);
+        $lineHeight = $height / $numLines;
+        $yPos = $lineHeight / 2;
 
+        foreach ($lines as $line) {
+          $textElements .= "<text x='50%' y='$yPos' style='$style'>$line</text>";
+          $yPos += $lineHeight;
+        }
+
+        $svg = "<svg xmlns='http://www.w3.org/2000/svg' width='$width' height='$height'>$textElements</svg>";
         $svgData = base64_encode($svg);
         $src = 'data:image/svg+xml;base64,' . $svgData;
         $imgTag = "<img class='front-face' src='$src' alt='$text' style='$style'/>";
+
         echo $imgTag;
       ?>