Adds right-to-left script option.

README.md

@@ -47,15 +47,13 @@ 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")
 [![Pratik Pingale](https://github.com./PROxZIMA.png?size=60)](https://github.com./PROxZIMA "Pratik Pingale on GitHub")
 [![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 +69,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,6 +106,7 @@ 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!
 
@@ -125,6 +123,7 @@ Feel free to [open a PR](https://github.com./DenverCoder1/readme-typing-svg/issue
 | `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       |

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>

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");

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"];
                 ?>

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,