rails · jathayde · Mar 29, 2024 · Apr 16, 2024 · Apr 16, 2024 · Apr 16, 2024
diff --git a/guides/assets/javascripts/guides.js b/guides/assets/javascripts/guides.js
@@ -103,4 +103,15 @@
       e.clearSelection();
     });
   });
+
+  // Observe the HTML tag for Google Translate CSS class, to swap our lang direction LTR/RTL.
+  var observer = new MutationObserver(function(mutations, _observer) {
+    each(mutations, function(mutation) {
+      if (mutation.type === "attributes" && mutation.attributeName == "class") {
+        mutation.target.dir = mutation.target.classList.contains("translated-rtl") ? "rtl" : "ltr";
+      }
+    })
+  });
+  observer.observe(document.querySelector("html"), { attributeFilter: ["class"] });
+
 }).call(this);
diff --git a/guides/assets/stylesrc/_main.scss b/guides/assets/stylesrc/_main.scss
@@ -17,19 +17,27 @@ body.guide {
 
   -webkit-tap-highlight-color:rgba(38, 27, 35, 0);
 
-  // ----------------------------------------------------------------------------
+  html.translated-rtl & {
+    direction: rtl;
+
+    p {
+      text-align: right;
+    }
+  }
+
+    // ----------------------------------------------------------------------------
-
-    // ----------------------------------------------------------------------------
+  // ----------------------------------------------------------------------------
-
-    // ----------------------------------------------------------------------------
+  // ----------------------------------------------------------------------------
   // Typographic Baseline
   // ----------------------------------------------------------------------------
 
   :root {
-    font-family: Inter, sans-serif;
+    font-family: Inter, "Noto Sans Arabic", "Heebo", sans-serif;
     font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
   }
   @supports (font-variation-settings: normal) {
     :root { font-family: InterVariable, sans-serif; }
   }
 
-  font-family: Inter, sans-serif;
+  font-family: Inter, "Noto Sans Arabic", "Heebo", sans-serif;
   font-size: 1rem; /* 16px */
   font-style: normal;
   font-weight: 400;
@@ -56,8 +64,9 @@ body.guide {
     hyphenate-limit-last: always;
 
     margin: 0 0 0.75em 0; // Space after paragraph
-    text-align: left;
 
+    :where(body[dir="ltr"]) & { text-align: left; }
+    :where(body[dir="rtl"]) & { text-align: right; }
   } // p
 
   // Links
@@ -107,7 +116,9 @@ body.guide {
       color: #fff;
       font-size: 0.875em;
       padding: 0.5em;
-      text-align: left;
+
+      :where(body[dir="ltr"]) & { text-align: left; }
+      :where(body[dir="rtl"]) & { text-align: right; }
     }
 
     tr {
@@ -125,7 +136,7 @@ body.guide {
   // TODO: media queries to increase font size, current sizes are for desktop, so drop base to mobile appropriate and MQ up twice (min width 60/120 em, minheight 30/60em)
   h1 {
     color: $rf-brand;
-    font-family: 'Calibre', sans-serif;
+    font-family: 'Calibre', "Noto Sans Arabic", "Heebo", sans-serif;
     font-size: 3rem; /* 48px */
     font-weight: 700; /* Light */
     line-height: 1em;
@@ -135,7 +146,7 @@ body.guide {
   } // h1
 
   h2 {
-    font-family: 'Calibre', sans-serif;
+    font-family: 'Calibre', "Noto Sans Arabic", "Heebo", sans-serif;
     font-size: 2.25rem; // Calibre is smaller than inter at the same size
     font-weight: 700; /* Bold */
 
@@ -261,10 +272,12 @@ body.guide {
   } // dl
 
   // :where(&[dir="ltr"]) dd { margin-left: 1.5em; }
-  // :where(&[dir="rtl"]) dd { margin-right: 1.5em; }
+  // :where(&[dir="rtl"]) dd,
+  //  html.translated-rtl dd { margin-right: 1.5em; }
 
   // :where(&[dir="ltr"]) :is(dd) { margin-left: 0; padding-left: 0; }
-  // :where(&[dir="rtl"]) :is(dd) { margin-right: 0; padding-right: 0; }
+  // :where(&[dir="rtl"]) :is(dd),
+  //  html.translated-rtl :is(dd) { margin-right: 0; padding-right: 0; }
 
   li {
     margin-bottom: 0.5em;
@@ -274,7 +287,7 @@ body.guide {
 
   pre, code {
     font-size: 1rem;
-    font-family: "IBM Plex Mono", "Anonymous Pro", "Inconsolata", "Menlo", "Consolas", "Bitstream Vera Sans Mono", "Courier New", monospace;
+    font-family: "IBM Plex Mono", "Anonymous Pro", "Inconsolata", "Menlo", "Consolas", "Bitstream Vera Sans Mono", "Courier New", monospace !important;
     line-height: 1.5;
     margin: 1em 0;
     overflow: auto;
@@ -325,12 +338,19 @@ body.guide {
     padding: 1em;
 
     :where(body[dir="ltr"]) & { text-align: left; }
-    :where(body[dir="rtl"]) & { text-align: right; }
+    :where(body[dir="rtl"]) &,
+    html.translated-rtl & { text-align: right; }
 
     @include media('>desktop') { // 1024
       max-width: calc(55rem + 420px);
       margin: 0 auto;
       padding-right: 470px;
+
+      :where(body[dir="rtl"]) &,
+      html.translated-rtl & {
+        padding-right: 1.5em;
+        padding-left: 470px;
+      }
     }
   } // .wrapper
 
@@ -439,7 +459,7 @@ body.guide {
           background-repeat: no-repeat;
           background-position: top center;
           display: inline-block;
-          font-family: 'Calibre', sans-serif;
+          font-family: 'Calibre', "Noto Sans Arabic", "Heebo", sans-serif;
           font-size: 2.25rem;
           font-weight: 700;
           margin: 0 auto;
@@ -586,7 +606,8 @@ body.guide {
     padding-bottom: 0.125em;
 
     :where(body[dir="ltr"]) & { background-position: right top; padding-right: 1em; }
-    :where(body[dir="rtl"]) & { background-position: left top; padding-left: 1em; }
+    :where(body[dir="rtl"]) &,
+    html.translated-rtl & { background-position: left top; padding-left: 1em; }
   }
 
 
@@ -606,7 +627,8 @@ body.guide {
     z-index: 10;
 
     :where(body[dir="ltr"]) & { left: auto; right: 50px; }
-    :where(body[dir="rtl"]) & { left: 50px; right: auto; }
+    :where(body[dir="rtl"]) &,
+    html.translated-rtl & { left: 50px; right: auto; }
 
     &.visible {
       display: block !important;
@@ -622,9 +644,11 @@ body.guide {
       .guides-section {
         flex: auto;
         margin: 0 2em 0.5em 0;
-        text-align: left;
         width: 33%;
 
+        :where(body[dir="ltr"]) & { text-align: left; }
+        :where(body[dir="rtl"]) & { text-align: right; }
+
         dt, dd {
           font-weight: 400 !important;
           font-size: 0.825rem;
@@ -707,6 +731,11 @@ body.guide {
           right: 50px;
         max-height: calc(100vh - 200px);
         width: 400px;
+
+        :where(body[dir="rtl"]) &,
+        html.translated-rtl & {
+          right: auto; left: 50px;
+        }
       }
 
       &.guide-index {
@@ -795,4 +824,27 @@ body.guide {
     }
   }
 
-} // body.guide
+} // body.guide
+
+html.translated-rtl:lang("ar", "fa") {
+  body.guide {
+    h1, h2, h3, h4, h5, h6, p, dl, dd, dt, ul, ol, li {
+      font-family: "Noto Sans Arabic", sans-serif;
+      font-optical-sizing: auto;
+      font-weight: 400;
+      font-style: normal;
+      font-variation-settings: "wdth" 100;
+    }
+  }
+}
+
+html.translated-rtl:lang("he", "iw") {
+  body.guide {
+    h1, h2, h3, h4, h5, h6, p, dl, dd, dt, ul, ol, li {
+      font-family: "Heebo", sans-serif;
+      font-optical-sizing: auto;
+      font-weight: 400;
+      font-style: normal;
+    }
+  }
+}
diff --git a/guides/assets/stylesrc/components/_code-container.scss b/guides/assets/stylesrc/components/_code-container.scss
@@ -22,7 +22,8 @@ intermediate whitespace looks uniform. */
 
   // Padding and spacing for LTR vs RTL langauge defaults
   :where(body[dir="ltr"]) & { background-position: 10px 10px; padding-right: 1em !important; padding-left: 56px !important; }
-  :where(body[dir="rtl"]) & { background-position: calc(100% - 10px) 10px; padding-right: 56px !important; padding-left: 1em !important; }
+  :where(body[dir="rtl"]) &,
+  html.translated-rtl & { background-position: calc(100% - 10px) 10px; padding-right: 56px !important; padding-left: 1em !important; }
 
   /* Remove bottom margin of paragraphs in special boxes, otherwise they get a
   spurious blank area below with the box background. */
@@ -39,6 +40,8 @@ intermediate whitespace looks uniform. */
     background-color: $gray-900;
     min-height: auto; // remove if icon is restored
     padding-left: 1em !important; // remove if icon is restored
+    direction: ltr !important;
+    text-align: left !important;
 
     pre {margin: 0;}
 
@@ -52,9 +55,9 @@ intermediate whitespace looks uniform. */
       padding: 0.25em 0.5em !important;
       position: absolute;
         bottom: 10px;
-        :where(body[dir="ltr"]) & { right: 10px; }
-        :where(body[dir="rtl"]) & { left: 10px; }
+        right: 10px;
       text-transform: uppercase;
+      width: auto;
     } // button.clipboard-button
   } // &.code
 

diff --git a/guides/source/layout.html.erb b/guides/source/layout.html.erb
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html dir="<%= @direction %>" lang="en">
 
 <head>
   <meta charset="utf-8">
@@ -25,10 +25,15 @@
   <meta property="og:image" content="https://avatars.githubusercontent.com/u/4223" />
   <meta property="og:type" content="website" />
 
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100..900&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@100..900&family=Noto+Sans+Arabic:wght@100..900&display=swap" rel="stylesheet">
+
   <meta name="theme-color" content="#C81418">
 </head>
 
-<body dir="<%= @direction %>" class="guide">
+<body class="guide">
   <nav id="topNav" aria-label="Secondary">
     <div class="wrapper">
       <strong class="more-info-label">More at <a href="https://rubyonrails.org/">rubyonrails.org:</a> </strong>