Add RTL support #51600

xirehat · 2025-07-14T23:07:06Z

Add RTL support to the Kubernetes website.

netlify · 2025-07-14T23:18:03Z

✅ Pull request preview available for checking

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`485b0a5`
🔍 Latest deploy log	https://app.netlify.com/projects/kubernetes-io-main-staging/deploys/688c4892aeaff600081a939f
😎 Deploy Preview	https://deploy-preview-51600--kubernetes-io-main-staging.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

lmktfy · 2025-07-15T09:01:39Z

Relevant to PR #51598

xirehat · 2025-07-17T07:30:26Z

lmktfy

Thanks for working on this.

Can you describe the testing you've done, especially the work to test that this doesn't break existing content? The more we - reviewers - can see that it's already been tested, the easier it is to review.

It's OK to use tools to check that existing pages still render like they did before.

lmktfy · 2025-07-17T20:58:12Z

assets/scss/_desktop.scss

@@ -3,6 +3,19 @@ $vendor-strip-height: 44px;

 @media screen and (min-width: 1024px) {

+  body:lang(fa) {


Why just Persian / can we use a different selector that is reusable across RTL locales?

lmktfy · 2025-07-17T20:59:30Z

assets/scss/_documentation.scss

+.alert:dir(rtl) {
+  border-style: solid;
+  border-width: 0 4px 0 0;
+  border-radius: 0 0 0 0;


nit: this set of radii doesn't look correct

It's used for RTL, before this note and warning and caution parts are like this image:

After adding this section, for languages that are RTL, that colored line moved to the right:

lmktfy · 2025-07-17T21:00:00Z

assets/scss/_documentation.scss

+  border-style: solid;
+  border-width: 0 4px 0 0;
+  border-radius: 0 0 0 0;
+  h4 {


no need to override this from bold to bold

Is the above comment sufficient for the issue you raised?(#51600 (comment))

lmktfy · 2025-07-17T21:00:14Z

assets/scss/_tablet.scss

@@ -18,6 +18,15 @@ $vendor-strip-font-size: 16px;
    display: none;
  }

+  body:lang(fa) {


Why just Persian / can we use a different selector that is reusable across RTL locales?

xirehat · 2025-07-18T08:26:55Z

Thanks for working on this.

Can you describe the testing you've done, especially the work to test that this doesn't break existing content? The more we - reviewers - can see that it's already been tested, the easier it is to review.

It's OK to use tools to check that existing pages still render like they did before.

Since it turns out that the changes only affect RTL pages, there is no need to worry about pages that were working properly until now. but I did some test that I'm going to share it below:

on main branch I ran this:

$ hugo -D -d /tmp/before-rtl   
Start building sites … 
hugo v0.133.0+extended darwin/arm64 BuildDate=unknown

WARN  Google Analytics 4 (GA4) replaced Google Universal Analytics (UA) effective 1 July 2023. See https://support.google.com/analytics/answer/11583528. Create a GA4 property and data stream, then replace the Google Analytics ID in your site configuration with the new value.

                   |  EN  | BN  | ZH-CN | FR  | DE  | HI  | ID  | IT  | JA  | KO  | PL  | PT-BR | RU  | ES  | UK  | VI   
-------------------+------+-----+-------+-----+-----+-----+-----+-----+-----+-----+-----+-------+-----+-----+-----+------
  Pages            | 2390 | 236 |  1983 | 381 | 210 | 140 | 367 |  92 | 618 | 613 | 122 |   388 | 195 | 320 | 107 | 188  
  Paginator pages  |   65 |   0 |    27 |   0 |   0 |   0 |   0 |   0 |   3 |   0 |   0 |     0 |   0 |   0 |   0 |   0  
  Non-page files   |  857 | 694 |   762 |  85 |  84 |  75 |  81 |  42 | 565 |  89 |  79 |    87 |  80 |  84 |  83 | 278  
  Static files     |  834 | 834 |   834 | 834 | 834 | 834 | 834 | 834 | 834 | 834 | 834 |   834 | 834 | 834 | 834 | 834  
  Processed images |   14 |   0 |     1 |   0 |   0 |   0 |   0 |   0 |   0 |   0 |   0 |     0 |   0 |   0 |   0 |   0  
  Aliases          |    8 |   1 |     6 |   2 |   1 |   0 |   5 |   1 |   3 |   3 |   0 |     3 |   4 |   2 |   1 |   0  
  Cleaned          |    0 |   0 |     0 |   0 |   0 |   0 |   0 |   0 |   0 |   0 |   0 |     0 |   0 |   0 |   0 |   0  

Total in 17560 ms

After that I ran on kubernetes-website-rtl-support on my fork:

$ hugo -D -d /tmp/after-rtl                  
Start building sites … 
hugo v0.133.0+extended darwin/arm64 BuildDate=unknown

WARN  Google Analytics 4 (GA4) replaced Google Universal Analytics (UA) effective 1 July 2023. See https://support.google.com/analytics/answer/11583528. Create a GA4 property and data stream, then replace the Google Analytics ID in your site configuration with the new value.

                   |  EN  | BN  | ZH-CN | FR  | DE  | HI  | ID  | IT  | JA  | KO  | PL  | PT-BR | RU  | ES  | UK  | VI   
-------------------+------+-----+-------+-----+-----+-----+-----+-----+-----+-----+-----+-------+-----+-----+-----+------
  Pages            | 2390 | 236 |  1983 | 381 | 210 | 140 | 367 |  92 | 618 | 613 | 121 |   388 | 195 | 320 | 107 | 188  
  Paginator pages  |   65 |   0 |    27 |   0 |   0 |   0 |   0 |   0 |   3 |   0 |   0 |     0 |   0 |   0 |   0 |   0  
  Non-page files   |  857 | 694 |   762 |  85 |  84 |  75 |  81 |  42 | 565 |  89 |  79 |    87 |  80 |  84 |  83 | 278  
  Static files     |  834 | 834 |   834 | 834 | 834 | 834 | 834 | 834 | 834 | 834 | 834 |   834 | 834 | 834 | 834 | 834  
  Processed images |   14 |   0 |     1 |   0 |   0 |   0 |   0 |   0 |   0 |   0 |   0 |     0 |   0 |   0 |   0 |   0  
  Aliases          |    8 |   1 |     6 |   2 |   1 |   0 |   5 |   1 |   3 |   3 |   0 |     3 |   4 |   2 |   1 |   0  
  Cleaned          |    0 |   0 |     0 |   0 |   0 |   0 |   0 |   0 |   0 |   0 |   0 |     0 |   0 |   0 |   0 |   0  

Total in 15559 ms

After that, I used the diff command to compare the rendered static pages, and there were a lot of differences.

$ diff -rq /tmp/before-rtl /tmp/after-rtl 
Files /tmp/before-rtl/404.html and /tmp/after-rtl/404.html differ
Only in /tmp/after-rtl/blog: 1
Files /tmp/before-rtl/blog/2015/03/Kubernetes-Gathering-Videos/index.html and /tmp/after-rtl/blog/2015/03/Kubernetes-Gathering-Videos/index.html differ
Files /tmp/before-rtl/blog/2015/03/Participate-In-Kubernetes-User/index.html and /tmp/after-rtl/blog/2015/03/Participate-In-Kubernetes-User/index.html differ
Files /tmp/before-rtl/blog/2015/03/Weekly-Kubernetes-Community-Hangout/index.html and /tmp/after-rtl/blog/2015/03/Weekly-Kubernetes-Community-Hangout/index.html differ
Files /tmp/before-rtl/blog/2015/03/Welcome-To-Kubernetes-Blog/index.html and /tmp/after-rtl/blog/2015/03/Welcome-To-Kubernetes-Blog/index.html differ
Files /tmp/before-rtl/blog/2015/04/Borg-Predecessor-To-Kubernetes/index.html and /tmp/after-rtl/blog/2015/04/Borg-Predecessor-To-Kubernetes/index.html differ
Files /tmp/before-rtl/blog/2015/04/Faster-Than-Speeding-Latte/index.html and /tmp/after-rtl/blog/2015/04/Faster-Than-Speeding-Latte/index.html differ
Files /tmp/before-rtl/blog/2015/04/Introducing-Kubernetes-V1Beta3/index.html and /tmp/after-rtl/blog/2015/04/Introducing-Kubernetes-V1Beta3/index.html differ
Files /tmp/before-rtl/blog/2015/04/Kubernetes-And-Mesosphere-Dcos/index.html and /tmp/after-rtl/blog/2015/04/Kubernetes-And-Mesosphere-Dcos/index.html differ
...

In the end, I used vimdiff to see what changes had been made:

$ vimdiff /tmp/before-rtl/404.html /tmp/after-rtl/404.html

Result:

The only changes in all these files are two things: the addition of dir="ltr", and a change in the hash of the static file names, which I believe is permanent.

I performed the tests with these tools, but if you're aware of a better or faster option, let me know.

lmktfy · 2025-07-24T10:31:23Z

/area localization

xirehat · 2025-07-25T16:28:34Z

We need this PR for a better experience in localizing the Kubernetes site in Persian, and for this PR to be merged, we need Persian speakers to approve it. Is it possible for you to help us?
@ah8ad3 @bsalamat

lmktfy · 2025-07-25T16:42:34Z

Can anyone from the nascent Persian team review this? (you can write a review so long as you have a GitHub account and you promise to follow our code of conduct)

lmktfy · 2025-07-25T16:55:28Z

We need this PR for a better experience in localizing the Kubernetes site in Persian, and for this PR to be merged, we need Persian speakers to approve it. Is it possible for you to help us?

No approval is needed, but we do want feedback from people who routinely work in an RTL locale.

Moh0ps · 2025-07-26T17:54:18Z

Can anyone from the nascent Persian team review this? (you can write a review so long as you have a GitHub account and you promise to follow our code of conduct)

I'm involved in the effort to localize the Kubernetes website into Persian and have checked the changes introduced here.
These modifications are in line with the requirements we've encountered for proper RTL rendering and help address issues we've seen while preparing Persian content.
Thanks for working on this.

lmktfy · 2025-07-26T19:16:25Z

assets/scss/_documentation.scss

+.alert:dir(rtl) {
+  border-style: solid;
+  border-width: 0 4px 0 0;
+  border-radius: 0 0 0 0;


Suggested change

border-radius: 0 0 0 0;

Try it without this change to border radius; see what you think. You should leave the change to border-width which is correct.

lmktfy · 2025-07-26T19:17:11Z

assets/scss/_documentation.scss

+  h4 {
+    font-weight: bold;
+    font-style: initial;
+  }
+}


Suggested change

h4 {

font-weight: bold;

font-style: initial;

}

}

Only override things if they are relevant to the configurable writing direction.

right, done

assets/scss/_documentation.scss

lmktfy · 2025-07-26T19:19:55Z

assets/scss/_tablet.scss

+  table:dir(rtl) {
+    text-align: left;
+    direction: ltr;
+  }


Why this change, covering all tables? It at the very least needs an explanatory comment.

Ideally, we make the table shortcode support configurable table direction. If we can't or won't do that, let's discuss why.

Because all tables in Persian must be from right to left, exactly the opposite of English. Therefore, it must be applied to all tables.

Similar to the previous comment, text should be right aligned.

lmktfy · 2025-07-26T19:21:22Z

assets/scss/_tablet.scss

@@ -118,6 +127,13 @@ $vendor-strip-font-size: 16px;
      text-align: left;
      margin: 0 5% 15px 0;
    }
+


Optionally:

Suggested change

&:dir(ltr) > .light-text {

display: block;

float: right;

text-align: left;

margin: 0 5% 15px 0;

}

I think only override RTL ones and do not change anything related to current state of Kubernetes website

lmktfy · 2025-07-26T19:21:23Z

assets/scss/_tablet.scss

+    &:dir(rtl) > .light-text {
+      display: block;
+      float: right;
+      text-align: right;
+      margin-right: 5%;
+    }


Why do this? It seems odd.

for this part

lmktfy · 2025-07-26T19:21:52Z

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` }}">


This looks just right.

lmktfy · 2025-07-26T19:22:36Z

assets/scss/_desktop.scss

+  table:dir(rtl) {
+    text-align: left;
+    direction: ltr;
+  }


Why this change, covering all tables? It at the very least needs an explanatory comment.

Ideally, we make the table shortcode support configurable table direction. If we can't or won't do that, let's discuss why.

Because all tables in Persian must be from right to left, exactly the opposite of English. Therefore, it must be applied to all tables.

So, for content that is right to left, this forces the text direction to be ltr?

It seems odd and I don't understand the intent here.

In LTR languages, we lay tables out LTR and left-align the text by default. I think that applies to all our localizations (modulo that some can also be written vertically, eg Japanese).

I agree with Tim, that the tables in RTL, should have RTL direction and text should be right aligned.

lmktfy · 2025-07-30T13:07:36Z

BTW, if you want to demo this:

find main (eg git fetch origin main:main && rev-parse main)
find the tip commit for this exact branch
merge the two locally
merge in a sample localization that uses RTL, eg Persian
push the result to your fork, and open a draft PR to show the effect

[If you do that, we can preview how tables will look in RTL.]

xirehat · 2025-07-30T20:51:57Z

Thanks, everyone, for reviewing my changes. It was my mistake, I intended the text to be right‑aligned but forgot to change the values from left to right and ltr to rtl. I’ve fixed it and pushed the update.
@lmktfy @bsalamat

lmktfy

LGTM, but someone who reads a right-to-left locale should give this a final once over.

bsalamat · 2025-08-01T01:09:08Z

assets/scss/_desktop.scss

+  }
+
+  .breadcrumb-item + .breadcrumb-item::before {
+    float: right;


Doesn't this affect breadcrumb of ltr pages?

Yes, you’re absolutely right, and I’ve fixed it.
Many thanks, @bsalamat

lmktfy · 2025-08-01T07:13:38Z

/lgtm

k8s-ci-robot · 2025-08-01T07:13:46Z

LGTM label has been added.

Git tree hash: 3cbd3d7ac62cbc0f3f18490bbffba072843a3f97

bsalamat · 2025-08-01T22:51:32Z

/lgtm

Thank you very much, @xirehat! I really appreciate your work to make Kubernetes universally accessible.

lmktfy · 2025-08-02T10:36:45Z

If we're wrong about the impact, we can revert this.

/approve

@xirehat—thank you very much for shepherding this through to approval.

k8s-ci-robot · 2025-08-02T10:36:54Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: lmktfy

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

~~OWNERS~~ [lmktfy]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

k8s-ci-robot added cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. area/web-development Issues or PRs related to the kubernetes.io's infrastructure, design, or build processes labels Jul 14, 2025

k8s-ci-robot requested review from lmktfy and reylejano July 14, 2025 23:07

k8s-ci-robot added sig/docs Categorizes an issue or PR as relevant to SIG Docs. size/M Denotes a PR that changes 30-99 lines, ignoring generated files. labels Jul 14, 2025

xirehat mentioned this pull request Jul 15, 2025

Init Persian Localization #51598

Closed

This was referenced Jul 15, 2025

Start Arabic Translation for K8S #19758

Closed

Kick off فارسی (Persian) localization #22565

Merged

[WIP] Adapt nav bar to support RTL locales #46042

Closed

lmktfy reviewed Jul 17, 2025

View reviewed changes

xirehat force-pushed the kubernetes-website-rtl-support branch from f3fd3bd to a90cf9e Compare July 18, 2025 05:39

k8s-ci-robot added the area/localization General issues or PRs related to localization label Jul 24, 2025

lmktfy reviewed Jul 26, 2025

View reviewed changes

xirehat force-pushed the kubernetes-website-rtl-support branch from a90cf9e to 3ea4fe6 Compare July 29, 2025 09:51

xirehat force-pushed the kubernetes-website-rtl-support branch from 3ea4fe6 to 3ec8c24 Compare July 30, 2025 20:45

lmktfy reviewed Jul 30, 2025

View reviewed changes

bsalamat reviewed Aug 1, 2025

View reviewed changes

Add RTL support

485b0a5

xirehat force-pushed the kubernetes-website-rtl-support branch from 3ec8c24 to 485b0a5 Compare August 1, 2025 04:54

k8s-ci-robot assigned lmktfy Aug 1, 2025

k8s-ci-robot added the lgtm "Looks good to me", indicates that a PR is ready to be merged. label Aug 1, 2025

k8s-ci-robot assigned bsalamat Aug 1, 2025

k8s-ci-robot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Aug 2, 2025

k8s-ci-robot merged commit 9e1a118 into kubernetes:main Aug 2, 2025
6 checks passed

xirehat mentioned this pull request Aug 9, 2025

[fa] Init Persian main page #51801

Merged

		@@ -3,6 +3,19 @@ $vendor-strip-height: 44px;

		@media screen and (min-width: 1024px) {

		body:lang(fa) {

Add RTL support #51600

Add RTL support #51600

Uh oh!

Conversation

xirehat commented Jul 14, 2025

Uh oh!

netlify bot commented Jul 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Pull request preview available for checking

Uh oh!

lmktfy commented Jul 15, 2025

Uh oh!

xirehat commented Jul 17, 2025

Uh oh!

lmktfy left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

xirehat commented Jul 18, 2025

Uh oh!

lmktfy commented Jul 24, 2025

Uh oh!

xirehat commented Jul 25, 2025

Uh oh!

lmktfy commented Jul 25, 2025

Uh oh!

lmktfy commented Jul 25, 2025

Uh oh!

Moh0ps commented Jul 26, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

xirehat Jul 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

netlify bot commented Jul 14, 2025 •

edited

Loading

xirehat Jul 29, 2025 •

edited

Loading