hot fix: direction: ltr;

Author: rodzyk

src/app/shared/ui/viewer/components/hint-page/hint-page.component.html

@@ -1,13 +1,13 @@
 <manga-page [dir]="viewer.viewModeOption().dir" style="margin: auto;">
-    <svg frame="3" viewBox="0 0 300 200">
+    <svg dir="ltr" frame="3" viewBox="0 0 300 200">
 
         <text x="50%" y="42%" font-size="28">
             {{lang.ph().getByKey(viewer.viewModeOption().hintPhraceKey)}}
         </text>
         <text x="50%" y="58%" font-size="24">{{viewer.viewModeOption().emoji}}</text>
     </svg>
 
-    <svg frame="1" viewBox="0 0 280 280">
+    <svg dir="ltr" frame="1" viewBox="0 0 280 280">
         <rect x="20" y="80" width="240" height="120" rx="4" stroke-width="2" fill="white" stroke="black" />
         <text fill="currentColor" font-size="14">
             <tspan x="50%" y="38%">Тицьни 👆</tspan>
@@ -17,15 +17,15 @@
         </text>
     </svg>
 
-    <svg frame="3" class="abs" viewBox="0 0 200 150">
+    <svg dir="ltr" frame="3" class="abs" viewBox="0 0 200 150">
         <text class="hand-text" fill="currentColor" font-size="11">
             <tspan x="50%" y="38%">Вгорі справа можна змінити</tspan>
             <tspan x="50%" y="48%">орієнтацію читання</tspan>
         </text>
     </svg>
 
 
-    <svg frame="2" viewBox="0 0 320 320">
+    <svg dir="ltr" frame="2" viewBox="0 0 320 320">
         <rect x="-20" y="85" width="360" height="120" rx="4" stroke-width="2" fill="white" stroke="black"></rect>
         <text fill="currentColor" font-size="14">
             <tspan x="50%" y="34%">для навігації: ⬅➡ або ad</tspan>
@@ -38,7 +38,7 @@
 
     <img frame="4" style="display: block;" src="/assets/icons/icon-line.svg" alt="Chytanka logo">
 
-    <div frame="5">
+    <div dir="ltr" frame="5">
         @if (getPrevIndex() >=0 && playlist[getPrevIndex()]; as prev) {
         <a dir="ltr" [routerLink]="['/', prev.site, prev.id]"
             [queryParams]="{lang: lang.lang(), list: playlistLink, vm: viewer.viewModeOption().code}">⏪

src/app/shared/ui/viewer/components/hint-page/hint-page.component.scss

@@ -15,6 +15,7 @@ svg {
     text {
         text-anchor: middle;
         font-family: 'Troubleside', monospace;
+        direction: ltr;
     }
 
     &.abs {

src/app/shared/ui/viewer/viewer.component.html

@@ -41,24 +41,30 @@
         <div class="page">
             <figure>
                 <app-manga-page-even [dir]="viewer.viewModeOption().dir">
-                    <div frame="1" style="padding: 1ch; width: 100%; display: grid; place-items: center;">
-                        <img style="display: block; max-width:50%;  margin: auto;" src="/assets/images/heart-hand-drawn-symbol-outline-svgrepo-com.svg" alt="heart-hand-drawn-symbol-outline">
+                    <div dir="ltr" frame="1" style="padding: 1ch; width: 100%; display: grid; place-items: center;">
+                        <img style="display: block; max-width:50%;  margin: auto;"
+                            src="/assets/images/heart-hand-drawn-symbol-outline-svgrepo-com.svg"
+                            alt="heart-hand-drawn-symbol-outline">
                     </div>
 
-                    <div frame="5" style="padding: 1ch; width: 100%; display: grid; place-items: center;">
-                        <img style="display: block; max-width:60%;  margin: auto;" src="/assets/images/map-hand-drawn-paper-svgrepo-com.svg" alt="map-hand-drawn-paper">
+                    <div dir="ltr" frame="5" style="padding: 1ch; width: 100%; display: grid; place-items: center;">
+                        <img style="display: block; max-width:60%;  margin: auto;"
+                            src="/assets/images/map-hand-drawn-paper-svgrepo-com.svg" alt="map-hand-drawn-paper">
                     </div>
 
-                    <div frame="2" style="padding: 1ch; width: 100%; display: grid; place-items: center;">
-                        <img style="display: block; max-width:50%;  margin: auto;" src="/assets/images/web-comics-svgrepo-com.svg" alt="map-hand-drawn-paper">
+                    <div dir="ltr" frame="2" style="padding: 1ch; width: 100%; display: grid; place-items: center;">
+                        <img style="display: block; max-width:50%;  margin: auto;"
+                            src="/assets/images/web-comics-svgrepo-com.svg" alt="map-hand-drawn-paper">
                     </div>
-                    
+
                     <!-- <img frame="2" style="display: block;  margin: auto;" src="/assets/images/smile-hand-drawn-emoticon-svgrepo-com.svg" >
                     <img frame="2" style="display: block;  margin: auto;" src="/assets/images/web-comics-svgrepo-com.svg" >
                     <img frame="2" style="display: block;  margin: auto;" src="/assets/images/woman-young-head-hand-drawn-outline-svgrepo-com.svg" > -->
 
-                    <div frame="3" style="padding: 1ch; width: 100%; height: 100%; display: grid; place-items: center;">
-                        <img style="display: block; max-width: 40%; margin: auto;" src="/assets/icons/icon-line.svg" alt="Chytanka logo">
+                    <div dir="ltr" frame="3"
+                        style="padding: 1ch; width: 100%; height: 100%; display: grid; place-items: center;">
+                        <img style="display: block; max-width: 40%; margin: auto;" src="/assets/icons/icon-line.svg"
+                            alt="Chytanka logo">
                         <p style="text-align: center;">Кінець епізоду</p>
 
                         @if (getNextIndex() >=0 && playlist[getNextIndex()]; as next) {
@@ -69,7 +75,8 @@
                             lang.ph().untitled + ' ' + (getNextIndex() + 1)}} ⏩</a>
                         }
                     </div>
-                    <div frame="4" style="padding: 1ch; text-align: center; display: grid; place-content: center;">
+                    <div dir="ltr" frame="4"
+                        style="padding: 1ch; text-align: center; display: grid; place-content: center;">
                         <ng-content />
                     </div>
                 </app-manga-page-even>