Merge pull request #51600 from xirehat/kubernetes-website-rtl-support

k8s-ci-robot · web-flow · commit 9e1a118ff5fb · 2025-08-02T03:37:36.000-07:00
Add RTL support
diff --git a/assets/scss/_desktop.scss b/assets/scss/_desktop.scss
@@ -3,6 +3,19 @@ $vendor-strip-height: 44px;
 
 @media screen and (min-width: 1024px) {
 
+  body:dir(rtl) {
+    overflow-x: hidden;
+  }
+
+  table:dir(rtl) {
+    text-align: right;
+    direction: rtl;
+  }
+
+  .breadcrumb-item:dir(rtl) + .breadcrumb-item:dir(rtl)::before {
+    float: right;
+  }
+
   .td-home {
     .header-hero {
       #vendorStrip {
@@ -34,6 +47,9 @@ $vendor-strip-height: 44px;
         p {
           text-align: left
         }
+        p:dir(rtl) {
+          text-align: right
+        }
 
         .image-wrapper {
           position: absolute;
diff --git a/assets/scss/_documentation.scss b/assets/scss/_documentation.scss
@@ -90,14 +90,20 @@ div.feature-state-notice {
 
 // All callout headings should be bold
 .alert {
-  border-style: solid;
-  border-width: 0 0 0 4px;
-  border-radius: 0 0 2rem 0;
   h4 {
     font-weight: bold;
     font-style: initial;
   }
 }
+.alert:dir(ltr) {
+  // color the left border (left-to-right locales)
+  border-width: 0 0 0 4px;
+}
+
+.alert:dir(rtl) {
+  // color the right border (right-to-left locales)
+  border-width: 0 4px 0 0;
+}
 
 .glossary-tooltip {
   display: inline-block;
diff --git a/assets/scss/_tablet.scss b/assets/scss/_tablet.scss
@@ -18,6 +18,15 @@ $vendor-strip-font-size: 16px;
     display: none;
   }
 
+  body:dir(rtl) {
+    overflow-x: hidden;
+  }
+
+  table:dir(rtl) {
+    text-align: right;
+    direction: rtl;
+  }
+
   .td-home {
     #viewDocs,
     #tryKubernetes {
@@ -118,6 +127,10 @@ $vendor-strip-font-size: 16px;
       text-align: left;
       margin: 0 5% 15px 0;
     }
+
+    &:dir(rtl) > .light-text {
+      text-align: right;
+    }
   }
 
   #mobileShowVideoButton {
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="{{ .Site.Language.Lang }}" class="{{.Params.class}} no-js">
+<html lang="{{ .Site.Language.Lang }}" class="{{.Params.class}} no-js" dir="{{ or .Site.Language.LanguageDirection `ltr` }}">
 {{- if eq hugo.Environment "preview" -}}
   <!-- deploy preview -->
 {{- end -}}
diff --git a/layouts/blog/baseof.html b/layouts/blog/baseof.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="{{ .Site.Language.Lang }}" class="no-js">
+<html lang="{{ .Site.Language.Lang }}" class="no-js" dir="{{ or .Site.Language.LanguageDirection `ltr` }}">
   <head>
     {{ with .Params.canonicalUrl }}
     <link rel="canonical" href="{{ . }}">
diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="{{ .Site.Language.Lang }}" class="no-js">
+<html lang="{{ .Site.Language.Lang }}" class="no-js" dir="{{ or .Site.Language.LanguageDirection `ltr` }}">
   <head>
     {{ partial "head.html" . }}
     <title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}</title>
