Use 'start' and 'end' text alignment properties for better RTL support (#4442)

Author: clicktodev

website/src/css/customTheme.scss

@@ -318,14 +318,14 @@ hr {
       text-transform: uppercase;
       padding: 6px 10px;
       font-size: 0.7rem;
-      text-align: left;
+      text-align: start;
     }
 
     tr td {
       font-size: 90%;
       line-height: 1.3em;
       padding: 10px;
-      text-align: left;
+      text-align: start;
 
       code {
         display: inline-block;
@@ -1184,7 +1184,7 @@ button[class*="tocCollapsibleButton"] {
 
   .lastUpdated {
     font-size: 13px;
-    text-align: right;
+    text-align: end;
   }
 
   time,

website/src/css/showcase.scss

@@ -67,7 +67,7 @@ html[data-theme="dark"] {
   h2 {
     margin: 4px -20px 12px;
     padding: 0 40px 0;
-    text-align: left;
+    text-align: start;
 
     img {
       margin: 16px 0 8px;
@@ -80,7 +80,7 @@ html[data-theme="dark"] {
   }
 
   .showcaseSectionDescription {
-    text-align: left;
+    text-align: start;
     color: var(--subtle);
     padding: 0 20px;
     margin-bottom: 8px;

website/src/pages/Home/Framework/styles.module.css

@@ -48,7 +48,7 @@
 
   .card {
     flex-direction: row;
-    text-align: left;
+    text-align: start;
   }
 
   .cardImage {

website/src/theme/DocItem/Footer/styles.module.css

@@ -6,6 +6,6 @@
 
 @media (min-width: 997px) {
   .lastUpdated {
-    text-align: right;
+    text-align: end;
   }
 }