From e6351a5486e3e3092965cc479368d55829c706be Mon Sep 17 00:00:00 2001
From: Caesar Augustus <wiccaesar@hotmail.com>
Date: Sat, 27 Jan 2024 22:28:42 -0300
Subject: [PATCH 1/2] Adds right-to-left script option.

Implements right-to-left script (rtl) functionality to Typing SVG, meaning the animation will start from the right if true. Useful for languages such as Arabic, Hebrew, Urdu, or simply for style.
---
 README.md                    | 45 ++++++++++++++++++------------------
 src/demo/index.php           |  6 +++++
 src/models/RendererModel.php |  5 ++++
 src/templates/main.php       | 35 ++++++++++++++++++----------
 src/views/RendererView.php   |  1 +
 5 files changed, 58 insertions(+), 34 deletions(-)

diff --git a/README.md b/README.md
index 1d9e92c7..424e8807 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,5 @@
 <!-- markdownlint-disable MD033 MD041 -->
+
 <p align="center">
   <h3 align="center">⌨️ Readme Typing SVG</h3>
 </p>
@@ -31,7 +32,7 @@
 
 Here you can easily customize your Typing SVG with a live preview.
 
-<https://readme-typing-svg.demolab.com/demo/>
+[https://readme-typing-svg.demolab.com/demo/](https://readme-typing-svg.demolab.com/demo/)
 
 [![Demo Site](https://user-images.githubusercontent.com/20955511/183703055-42ec8754-d84c-414f-8132-a02974224aa1.gif "Demo Site")](https://readme-typing-svg.demolab.com/demo/)
 
@@ -47,7 +48,6 @@ Below are links to profiles where you can see Readme Typing SVGs in action!
 [![Shiva Sankeerth Reddy](https://github.com/ShivaSankeerth.png?size=60)](https://github.com/ShivaSankeerth "Shiva Sankeerth Reddy on GitHub")
 [![Tarun Kamboj](https://github.com/Tarun-Kamboj.png?size=60)](https://github.com/Tarun-Kamboj "Tarun Kamboj on GitHub")
 [![T.A.Vignesh](https://github.com/tavignesh.png?size=60)](https://github.com/tavignesh "T.A.Vignesh on GitHub")
-[![Angelo Fallaria](https://github.com/angelofallars.png?size=60)](https://github.com/angelofallars "Angelo Fallaria on GitHub")
 [![William J. Ghelfi](https://github.com/trumbitta.png?size=60)](https://github.com/trumbitta "William J. Ghelfi on GitHub")
 [![Mano Bharathi M](https://i.imgur.com/Audc6L9.png)](https://github.com/ManoBharathi93 "Mano Bharathi M on GitHub")
 [![Shivam Yadav](https://github.com/sudoshivam.png?size=60)](https://github.com/sudoshivam "Shivam Yadav on GitHub")
@@ -55,7 +55,6 @@ Below are links to profiles where you can see Readme Typing SVGs in action!
 [![Vydr'Oz](https://github.com/VydrOz.png?size=60)](https://github.com/VydrOz "Vydr'Oz on GitHub")
 [![Caroline Heloíse](https://github.com/Carol42.png?size=60)](https://github.com/Carol42 "Caroline Heloíse on GitHub")
 [![PriyanshK09](https://github.com/PriyanshK09.png?size=60)](https://github.com/PriyanshK09 "PriyanshK09 on GitHub")
-[![BenjaminMichaelis](https://github.com/BenjaminMichaelis.png?size=60)](https://github.com/BenjaminMichaelis "BenjaminMichaelis on GitHub")
 [![Thakur Ballary](https://github.com/thakurballary.png?size=60)](https://github.com/thakurballary "Thakur Ballary on GitHub")
 [![NiceSapien](https://github.com/nicesapien.png?size=60)](https://github.com/nicesapien "NiceSapien on GitHub")
 [![Manthan Ank](https://github.com/manthanank.png?size=60)](https://github.com/manthanank "Manthan Ank on GitHub")
@@ -71,7 +70,6 @@ Below are links to profiles where you can see Readme Typing SVGs in action!
 [![UlisesAlexanderAM](https://github.com/UlisesAlexanderAM.png?size=60)](https://github.com/UlisesAlexanderAM "UlisesAlexanderAM on GitHub")
 [![SpookyJelly](https://github.com/SpookyJelly.png?size=60)](https://github.com/SpookyJelly "SpookyJelly on GitHub")
 [![cfcife](https://github.com/cfcife.png?size=60)](https://github.com/cfcife "cfcife on GitHub")
-[![majidtdeni666](https://github.com/majidtdeni666.png?size=60)](https://github.com/majidtdeni666 "majidtdeni666 on GitHub")
 [![GalexY727](https://github.com/galexy727.png?size=60)](https://github.com/galexy727 "GalexY727 on GitHub")
 [![HectorSaldes](https://github.com/HectorSaldes.png?size=60)](https://github.com/HectorSaldes "HectorSaldes on GitHub")
 [![Ash-codes18](https://github.com/Ash-codes18.png?size=60)](https://github.com/Ash-codes18 "Ash-codes18 on GitHub")
@@ -109,27 +107,29 @@ Below are links to profiles where you can see Readme Typing SVGs in action!
 [![presentformyfriends](https://github.com/presentformyfriends.png?size=60)](https://github.com/presentformyfriends "presentformyfriends on Github")
 [![Ad7amstein](https://github.com/Ad7amstein.png?size=60)](https://github.com/Ad7amstein "Ad7amstein on Github")
 [![LakshmanKishore](https://github.com/LakshmanKishore.png?size=60)](https://github.com/LakshmanKishore "LakshmanKishore on Github")
+[![WicCaesar](https://github.com/WicCaesar.png?size=60)](https://github.com/WicCaesar "WicCaesar on Github")
 
 Feel free to [open a PR](https://github.com/DenverCoder1/readme-typing-svg/issues/21#issue-870549556) and add yours!
 
 ## 🔧 Options
 
-|  Parameter   |                                   Details                                   |  Type   |               Example               |
-| :----------: | :-------------------------------------------------------------------------: | :-----: | :---------------------------------: |
-|   `lines`    |       Text to display with lines separated by `;` and `+` for spaces        | string  | `First+line;Second+line;Third+line` |
-|   `height`   |             Height of the output SVG in pixels (default: `50`)              | integer |         Any positive number         |
-|   `width`    |             Width of the output SVG in pixels (default: `400`)              | integer |         Any positive number         |
-|    `size`    |                     Font size in pixels (default: `20`)                     | integer |         Any positive number         |
-|    `font`    |                     Font family (default: `monospace`)                      | string  |     Any font from Google Fonts      |
-|   `color`    |                    Color of the text (default: `36BCF7`)                    | string  |  Hex code without # (eg. `F724A9`)  |
-| `background` |             Background color of the text (default: `00000000`)              | string  |  Hex code without # (eg. `FEFF4C`)  |
-|   `center`   |    `true` to center text or `false` for left aligned (default: `false`)     | boolean |          `true` or `false`          |
-|  `vCenter`   |  `true` to center vertically or `false`(default) to align above the center  | boolean |          `true` or `false`          |
-| `multiline`  |  `true` to wrap lines or `false` to retype on one line (default: `false`)   | boolean |          `true` or `false`          |
-|  `duration`  | Duration of the printing of a single line in milliseconds (default: `5000`) | integer |         Any positive number         |
-|   `pause`    |     Duration of the pause between lines in milliseconds (default: `0`)      | integer |       Any non-negative number       |
-|   `repeat`   |  `true` to loop around to the first line after the last (default: `true`)   | boolean |          `true` or `false`          |
-| `separator`  |     Separator used between lines in the lines parameter (default: `;`)      | string  |        `;`, `;;`, `/`, etc.         |
+|   Parameter   |                                      Details                                      |  Type  |                Example                |
+| :------------: | :--------------------------------------------------------------------------------: | :-----: | :-----------------------------------: |
+|   `lines`   |         Text to display with lines separated by `;` and `+` for spaces         | string | `First+line;Second+line;Third+line` |
+|   `height`   |                Height of the output SVG in pixels (default: `50`)                | integer |          Any positive number          |
+|   `width`   |                Width of the output SVG in pixels (default: `400`)                | integer |          Any positive number          |
+|    `size`    |                        Font size in pixels (default: `20`)                        | integer |          Any positive number          |
+|    `font`    |                        Font family (default: `monospace`)                        | string |      Any font from Google Fonts      |
+|   `color`   |                       Color of the text (default: `36BCF7`)                       | string |  Hex code without # (eg.`F724A9`)  |
+| `background` |                Background color of the text (default: `00000000`)                | string |  Hex code without # (eg.`FEFF4C`)  |
+|   `center`   |     `true` to center text or `false` for left aligned (default: `false`)     | boolean |         `true` or `false`         |
+|  `vCenter`  |   `true` to center vertically or `false` (default) to align above the center   | boolean |         `true` or `false`         |
+|    `rtl`    | `true` to use right-to-left script (Arabic, Hebrew…) (default: `false`) | boolean |         `true` or `false`         |
+| `multiline` |   `true` to wrap lines or `false` to retype on one line (default: `false`)   | boolean |         `true` or `false`         |
+|  `duration`  |    Duration of the printing of a single line in milliseconds (default: `5000`)    | integer |          Any positive number          |
+|   `pause`   |        Duration of the pause between lines in milliseconds (default: `0`)        | integer |        Any non-negative number        |
+|   `repeat`   |    `true` to loop around to the first line after the last (default: `true`)    | boolean |         `true` or `false`         |
+| `separator` |        Separator used between lines in the lines parameter (default: `;`)        | string |      `;`, `;;`, `/`, etc.      |
 
 ## 📤 Deploying it on your own
 
@@ -141,7 +141,7 @@ You can deploy the PHP files on any website server with PHP installed or as a He
 
 ### Step-by-step instructions for deploying to Heroku
 
-1. Sign in to **Heroku** or create a new account at <https://heroku.com>
+1. Sign in to **Heroku** or create a new account at [https://heroku.com](https://heroku.com)
 2. Click the "Deploy to Heroku" button below
 
 [![Deploy](https://www.herokucdn.com/deploy/button.svg "Deploy to Heroku")](https://heroku.com/deploy?template=https://github.com/DenverCoder1/readme-typing-svg/tree/main)
@@ -163,6 +163,7 @@ Refer to [CONTRIBUTING.md](/CONTRIBUTING.md) for more details on contributing, i
 💙 If you like this project, give it a ⭐ and share it with friends!
 
 <!-- markdownlint-disable MD033 -->
+
 <p align="left">
   <a href="https://www.youtube.com/channel/UCipSxT7a3rn81vGLw9lqRkg?sub_confirmation=1"><img alt="Youtube" title="Youtube" src="https://img.shields.io/badge/-Subscribe-red?style=for-the-badge&logo=youtube&logoColor=white"/></a>
   <a href="https://github.com/sponsors/DenverCoder1"><img alt="Sponsor with Github" title="Sponsor with Github" src="https://img.shields.io/badge/-Sponsor-ea4aaa?style=for-the-badge&logo=github&logoColor=white"/></a>
@@ -177,7 +178,7 @@ Made with ❤️ and PHP
 
 <!-- markdownlint-disable MD033 -->
 
-<a href="https://heroku.com/"><img alt="Powered by Heroku" title="Powered by Heroku" src="https://img.shields.io/badge/-Powered%20by%20Heroku-6567a5?style=for-the-badge&logo=heroku&logoColor=white"/></a>
+`<a href="https://heroku.com/"><img alt="Powered by Heroku" title="Powered by Heroku" src="https://img.shields.io/badge/-Powered%20by%20Heroku-6567a5?style=for-the-badge&logo=heroku&logoColor=white"/>``</a>`
 
 <!-- markdownlint-enable MD033 -->
 
diff --git a/src/demo/index.php b/src/demo/index.php
index 5c9184ca..83ad7335 100644
--- a/src/demo/index.php
+++ b/src/demo/index.php
@@ -94,6 +94,12 @@ function gtag() {
                     <option>true</option>
                 </select>
 
+                <label for="rtl">Right-to-left script</label>
+                <select class="param" id="rtl" name="rtl" alt="Right-to-left script">
+                    <option>false</option>
+                    <option>true</option>
+                </select>
+
                 <label for="multiline">Multiline</label>
                 <select class="param" id="multiline" name="multiline" alt="Multiline">
                     <option value="false">Type sentences on one line</option>
diff --git a/src/models/RendererModel.php b/src/models/RendererModel.php
index 64e08d0e..b4b191f5 100644
--- a/src/models/RendererModel.php
+++ b/src/models/RendererModel.php
@@ -37,6 +37,9 @@ class RendererModel
     /** @var int $height SVG height (px) */
     public $height;
 
+    /** @var int $rtl False = animation starts from the left, True = from the right */
+    public $rtl;
+
     /** @var bool $multiline True = wrap to new lines, False = retype on same line */
     public $multiline;
 
@@ -72,6 +75,7 @@ class RendererModel
         "vCenter" => "false",
         "width" => "400",
         "height" => "50",
+        "rtl" => "false",
         "multiline" => "false",
         "duration" => "5000",
         "pause" => "0",
@@ -101,6 +105,7 @@ public function __construct($template, $params)
         $this->vCenter = $this->checkBoolean($params["vCenter"] ?? $this->DEFAULTS["vCenter"]);
         $this->width = $this->checkNumberPositive($params["width"] ?? $this->DEFAULTS["width"], "Width");
         $this->height = $this->checkNumberPositive($params["height"] ?? $this->DEFAULTS["height"], "Height");
+        $this->rtl = $this->checkBoolean($params["rtl"] ?? $this->DEFAULTS["rtl"], "rtl");
         $this->multiline = $this->checkBoolean($params["multiline"] ?? $this->DEFAULTS["multiline"]);
         $this->duration = $this->checkNumberPositive($params["duration"] ?? $this->DEFAULTS["duration"], "duration");
         $this->pause = $this->checkNumberNonNegative($params["pause"] ?? $this->DEFAULTS["pause"], "pause");
diff --git a/src/templates/main.php b/src/templates/main.php
index 7664f89b..75c8e726 100644
--- a/src/templates/main.php
+++ b/src/templates/main.php
@@ -24,8 +24,14 @@
                 $freeze = !$repeat && $i == $lastLineIndex;
                 // empty line values
                 $yOffset = $height / 2;
-                $emptyLine = "m0,$yOffset h0";
-                $fullLine = "m0,$yOffset h$width";
+                // rtl true means writing from the right, else, behaves normally
+                if ($rtl === true) {
+                    $emptyLine = "m$width,$yOffset h0";
+                    $fullLine = "m$width,$yOffset h-$width";
+                } else {
+                    $emptyLine = "m0,$yOffset h0";
+                    $fullLine = "m0,$yOffset h$width";
+                }
                 $values = [$emptyLine, $fullLine, $fullLine, $freeze ? $fullLine : $emptyLine];
                 // keyTimes for the animation
                 $keyTimes = [
@@ -45,8 +51,13 @@
                 $lineHeight = $size + 5;
                 $lineDuration = ($duration + $pause) * $nextIndex;
                 $yOffset = $nextIndex * $lineHeight;
-                $emptyLine = "m0,$yOffset h0";
-                $fullLine = "m0,$yOffset h$width";
+                if ($rtl === true) {
+                    $emptyLine = "m$width,$yOffset h0";
+                    $fullLine = "m$width,$yOffset h-$width";
+                } else {
+                    $emptyLine = "m0,$yOffset h0";
+                    $fullLine = "m0,$yOffset h$width";
+                }
                 $values = [$emptyLine, $emptyLine, $fullLine, $fullLine];
                 $keyTimes = ["0", $i / $nextIndex, $i / $nextIndex + $duration / $lineDuration, "1"];
                 ?>
@@ -55,12 +66,12 @@
                     values='<?= implode(" ; ", $values) ?>' keyTimes='<?= implode(";", $keyTimes) ?>' />
             <?php endif; ?>
         </path>
-    <text font-family='"<?= $font ?>", monospace' fill='<?= $color ?>' font-size='<?= $size ?>'
-        dominant-baseline='<?= $vCenter ? "middle" : "auto" ?>'
-        x='<?= $center ? "50%" : "0%" ?>' text-anchor='<?= $center ? "middle" : "start" ?>'>
-        <textPath xlink:href='#path<?= $i ?>'>
-            <?= $lines[$i] . "\n" ?>
-        </textPath>
-    </text>
-<?php endfor; ?>
+        <text font-family='"<?= $font ?>", monospace' fill='<?= $color ?>' font-size='<?= $size ?>'
+            dominant-baseline='<?= $vCenter ? "middle" : "auto" ?>'
+            x='<?= $center ? "50%" : "0%" ?>' text-anchor='<?= $center ? "middle" : "start" ?>'>
+            <textPath xlink:href='#path<?= $i ?>'>
+                <?= $lines[$i] . "\n" ?>
+            </textPath>
+        </text>
+    <?php endfor; ?>
 </svg>
diff --git a/src/views/RendererView.php b/src/views/RendererView.php
index 7c540003..ba2dbc85 100644
--- a/src/views/RendererView.php
+++ b/src/views/RendererView.php
@@ -36,6 +36,7 @@ public function render()
             "vCenter" => $this->model->vCenter,
             "width" => $this->model->width,
             "height" => $this->model->height,
+            "rtl" => $this->model->rtl,
             "multiline" => $this->model->multiline,
             "fontCSS" => $this->model->fontCSS,
             "duration" => $this->model->duration,

From 440f4cbf22f5d214f3aecce996b0ec0f497e9940 Mon Sep 17 00:00:00 2001
From: Caesar Augustus <wiccaesar@hotmail.com>
Date: Sat, 27 Jan 2024 22:47:09 -0300
Subject: [PATCH 2/2] Adds right-to-left script option.

Implements right-to-left script (rtl) functionality to Typing SVG, meaning the animation will start from the right if true. Useful for languages such as Arabic, Hebrew, Urdu, or simply for style. Testers wanted.
---
 README.md              | 42 ++++++++++++++++++++----------------------
 src/templates/main.php | 16 ++++++++--------
 2 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/README.md b/README.md
index 424e8807..41530a44 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,4 @@
 <!-- markdownlint-disable MD033 MD041 -->
-
 <p align="center">
   <h3 align="center">⌨️ Readme Typing SVG</h3>
 </p>
@@ -32,7 +31,7 @@
 
 Here you can easily customize your Typing SVG with a live preview.
 
-[https://readme-typing-svg.demolab.com/demo/](https://readme-typing-svg.demolab.com/demo/)
+<https://readme-typing-svg.demolab.com/demo/>
 
 [![Demo Site](https://user-images.githubusercontent.com/20955511/183703055-42ec8754-d84c-414f-8132-a02974224aa1.gif "Demo Site")](https://readme-typing-svg.demolab.com/demo/)
 
@@ -113,23 +112,23 @@ Feel free to [open a PR](https://github.com/DenverCoder1/readme-typing-svg/issue
 
 ## 🔧 Options
 
-|   Parameter   |                                      Details                                      |  Type  |                Example                |
-| :------------: | :--------------------------------------------------------------------------------: | :-----: | :-----------------------------------: |
-|   `lines`   |         Text to display with lines separated by `;` and `+` for spaces         | string | `First+line;Second+line;Third+line` |
-|   `height`   |                Height of the output SVG in pixels (default: `50`)                | integer |          Any positive number          |
-|   `width`   |                Width of the output SVG in pixels (default: `400`)                | integer |          Any positive number          |
-|    `size`    |                        Font size in pixels (default: `20`)                        | integer |          Any positive number          |
-|    `font`    |                        Font family (default: `monospace`)                        | string |      Any font from Google Fonts      |
-|   `color`   |                       Color of the text (default: `36BCF7`)                       | string |  Hex code without # (eg.`F724A9`)  |
-| `background` |                Background color of the text (default: `00000000`)                | string |  Hex code without # (eg.`FEFF4C`)  |
-|   `center`   |     `true` to center text or `false` for left aligned (default: `false`)     | boolean |         `true` or `false`         |
-|  `vCenter`  |   `true` to center vertically or `false` (default) to align above the center   | boolean |         `true` or `false`         |
-|    `rtl`    | `true` to use right-to-left script (Arabic, Hebrew…) (default: `false`) | boolean |         `true` or `false`         |
-| `multiline` |   `true` to wrap lines or `false` to retype on one line (default: `false`)   | boolean |         `true` or `false`         |
-|  `duration`  |    Duration of the printing of a single line in milliseconds (default: `5000`)    | integer |          Any positive number          |
-|   `pause`   |        Duration of the pause between lines in milliseconds (default: `0`)        | integer |        Any non-negative number        |
-|   `repeat`   |    `true` to loop around to the first line after the last (default: `true`)    | boolean |         `true` or `false`         |
-| `separator` |        Separator used between lines in the lines parameter (default: `;`)        | string |      `;`, `;;`, `/`, etc.      |
+|  Parameter   |                                   Details                                   |  Type   |               Example               |
+| :----------: | :-------------------------------------------------------------------------: | :-----: | :---------------------------------: |
+|   `lines`    |       Text to display with lines separated by `;` and `+` for spaces        | string  | `First+line;Second+line;Third+line` |
+|   `height`   |             Height of the output SVG in pixels (default: `50`)              | integer |         Any positive number         |
+|   `width`    |             Width of the output SVG in pixels (default: `400`)              | integer |         Any positive number         |
+|    `size`    |                     Font size in pixels (default: `20`)                     | integer |         Any positive number         |
+|    `font`    |                     Font family (default: `monospace`)                      | string  |     Any font from Google Fonts      |
+|   `color`    |                    Color of the text (default: `36BCF7`)                    | string  |  Hex code without # (eg. `F724A9`)  |
+| `background` |             Background color of the text (default: `00000000`)              | string  |  Hex code without # (eg. `FEFF4C`)  |
+|   `center`   |    `true` to center text or `false` for left aligned (default: `false`)     | boolean |          `true` or `false`          |
+|  `vCenter`   |  `true` to center vertically or `false`(default) to align above the center  | boolean |          `true` or `false`          |
+|    `rtl`     |   `true` to use right-to-left script (Arabic, Hebrew…) (default: `false`)   | boolean |          `true` or `false`          |
+| `multiline`  |  `true` to wrap lines or `false` to retype on one line (default: `false`)   | boolean |          `true` or `false`          |
+|  `duration`  | Duration of the printing of a single line in milliseconds (default: `5000`) | integer |         Any positive number         |
+|   `pause`    |     Duration of the pause between lines in milliseconds (default: `0`)      | integer |       Any non-negative number       |
+|   `repeat`   |  `true` to loop around to the first line after the last (default: `true`)   | boolean |          `true` or `false`          |
+| `separator`  |     Separator used between lines in the lines parameter (default: `;`)      | string  |        `;`, `;;`, `/`, etc.         |
 
 ## 📤 Deploying it on your own
 
@@ -141,7 +140,7 @@ You can deploy the PHP files on any website server with PHP installed or as a He
 
 ### Step-by-step instructions for deploying to Heroku
 
-1. Sign in to **Heroku** or create a new account at [https://heroku.com](https://heroku.com)
+1. Sign in to **Heroku** or create a new account at <https://heroku.com>
 2. Click the "Deploy to Heroku" button below
 
 [![Deploy](https://www.herokucdn.com/deploy/button.svg "Deploy to Heroku")](https://heroku.com/deploy?template=https://github.com/DenverCoder1/readme-typing-svg/tree/main)
@@ -163,7 +162,6 @@ Refer to [CONTRIBUTING.md](/CONTRIBUTING.md) for more details on contributing, i
 💙 If you like this project, give it a ⭐ and share it with friends!
 
 <!-- markdownlint-disable MD033 -->
-
 <p align="left">
   <a href="https://www.youtube.com/channel/UCipSxT7a3rn81vGLw9lqRkg?sub_confirmation=1"><img alt="Youtube" title="Youtube" src="https://img.shields.io/badge/-Subscribe-red?style=for-the-badge&logo=youtube&logoColor=white"/></a>
   <a href="https://github.com/sponsors/DenverCoder1"><img alt="Sponsor with Github" title="Sponsor with Github" src="https://img.shields.io/badge/-Sponsor-ea4aaa?style=for-the-badge&logo=github&logoColor=white"/></a>
@@ -178,7 +176,7 @@ Made with ❤️ and PHP
 
 <!-- markdownlint-disable MD033 -->
 
-`<a href="https://heroku.com/"><img alt="Powered by Heroku" title="Powered by Heroku" src="https://img.shields.io/badge/-Powered%20by%20Heroku-6567a5?style=for-the-badge&logo=heroku&logoColor=white"/>``</a>`
+<a href="https://heroku.com/"><img alt="Powered by Heroku" title="Powered by Heroku" src="https://img.shields.io/badge/-Powered%20by%20Heroku-6567a5?style=for-the-badge&logo=heroku&logoColor=white"/></a>
 
 <!-- markdownlint-enable MD033 -->
 
diff --git a/src/templates/main.php b/src/templates/main.php
index 75c8e726..53c37117 100644
--- a/src/templates/main.php
+++ b/src/templates/main.php
@@ -66,12 +66,12 @@
                     values='<?= implode(" ; ", $values) ?>' keyTimes='<?= implode(";", $keyTimes) ?>' />
             <?php endif; ?>
         </path>
-        <text font-family='"<?= $font ?>", monospace' fill='<?= $color ?>' font-size='<?= $size ?>'
-            dominant-baseline='<?= $vCenter ? "middle" : "auto" ?>'
-            x='<?= $center ? "50%" : "0%" ?>' text-anchor='<?= $center ? "middle" : "start" ?>'>
-            <textPath xlink:href='#path<?= $i ?>'>
-                <?= $lines[$i] . "\n" ?>
-            </textPath>
-        </text>
-    <?php endfor; ?>
+    <text font-family='"<?= $font ?>", monospace' fill='<?= $color ?>' font-size='<?= $size ?>'
+        dominant-baseline='<?= $vCenter ? "middle" : "auto" ?>'
+        x='<?= $center ? "50%" : "0%" ?>' text-anchor='<?= $center ? "middle" : "start" ?>'>
+        <textPath xlink:href='#path<?= $i ?>'>
+            <?= $lines[$i] . "\n" ?>
+        </textPath>
+    </text>
+<?php endfor; ?>
 </svg>