Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Right-to-left language support #22730

Open
sftim opened this issue Jul 25, 2020 · 26 comments
Open

Right-to-left language support #22730

sftim opened this issue Jul 25, 2020 · 26 comments
Labels
area/localization General issues or PRs related to localization area/web-development Issues or PRs related to the kubernetes.io's infrastructure, design, or build processes kind/feature Categorizes issue or PR as related to a new feature. lifecycle/frozen Indicates that an issue or PR should not be auto-closed due to staleness. priority/important-longterm Important over the long term, but may not be staffed and/or may need multiple releases to complete. triage/accepted Indicates an issue or PR is ready to be actively worked on.

Comments

@sftim
Copy link
Contributor

sftim commented Jul 25, 2020

This is a Feature Request

What would you like to be added
Add support for serving the Kubernetes website and displaying it in a right-to-left language such as Arabic, Hebrew or Urdu.

Why is this needed
On the web, content is usually rendered horizontally. Existing merged localizations are all right-to-left, or can be (Chinese and Japanese, for example, are also sometimes written top-to-bottom starting top right).

Comments
We'll need this as part of adding Arabic and Persian.

This is likely to form an umbrella issue with child issues to cover specific topics.

/area web-development

@k8s-ci-robot k8s-ci-robot added the area/web-development Issues or PRs related to the kubernetes.io's infrastructure, design, or build processes label Jul 25, 2020
@sftim
Copy link
Contributor Author

sftim commented Jul 25, 2020

/kind feature
/priority important-longterm

@k8s-ci-robot k8s-ci-robot added kind/feature Categorizes issue or PR as related to a new feature. priority/important-longterm Important over the long term, but may not be staffed and/or may need multiple releases to complete. labels Jul 25, 2020
@celestehorgan
Copy link
Contributor

For visibility adding generalized support for this is an open issue in hugo: gohugoio/hugo#3255. This issue also proposes a reasonable stop-gap solution.

@fejta-bot
Copy link

Issues go stale after 90d of inactivity.
Mark the issue as fresh with /remove-lifecycle stale.
Stale issues rot after an additional 30d of inactivity and eventually close.

If this issue is safe to close now please do so with /close.

Send feedback to sig-testing, kubernetes/test-infra and/or fejta.
/lifecycle stale

@k8s-ci-robot k8s-ci-robot added the lifecycle/stale Denotes an issue or PR has remained open with no activity and has become stale. label Oct 23, 2020
@fejta-bot
Copy link

Stale issues rot after 30d of inactivity.
Mark the issue as fresh with /remove-lifecycle rotten.
Rotten issues close after an additional 30d of inactivity.

If this issue is safe to close now please do so with /close.

Send feedback to sig-testing, kubernetes/test-infra and/or fejta.
/lifecycle rotten

@k8s-ci-robot k8s-ci-robot added lifecycle/rotten Denotes an issue or PR that has aged beyond stale and will be auto-closed. and removed lifecycle/stale Denotes an issue or PR has remained open with no activity and has become stale. labels Nov 22, 2020
@fejta-bot
Copy link

Rotten issues close after 30d of inactivity.
Reopen the issue with /reopen.
Mark the issue as fresh with /remove-lifecycle rotten.

Send feedback to sig-testing, kubernetes/test-infra and/or fejta.
/close

@k8s-ci-robot
Copy link
Contributor

@fejta-bot: Closing this issue.

In response to this:

Rotten issues close after 30d of inactivity.
Reopen the issue with /reopen.
Mark the issue as fresh with /remove-lifecycle rotten.

Send feedback to sig-testing, kubernetes/test-infra and/or fejta.
/close

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

@sftim
Copy link
Contributor Author

sftim commented Oct 27, 2022

Also see #37546

@sftim
Copy link
Contributor Author

sftim commented Feb 6, 2024

/reopen

@k8s-ci-robot k8s-ci-robot reopened this Feb 6, 2024
@k8s-ci-robot
Copy link
Contributor

@sftim: Reopened this issue.

In response to this:

/reopen

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

@k8s-ci-robot k8s-ci-robot added the needs-triage Indicates an issue or PR lacks a `triage/foo` label and requires one. label Feb 6, 2024
@sftim
Copy link
Contributor Author

sftim commented Feb 6, 2024

/remove-lifecycle rotten
/lifecycle frozen
/triage accepted

/area localization

@k8s-ci-robot k8s-ci-robot added triage/accepted Indicates an issue or PR is ready to be actively worked on. lifecycle/frozen Indicates that an issue or PR should not be auto-closed due to staleness. area/localization General issues or PRs related to localization and removed lifecycle/rotten Denotes an issue or PR that has aged beyond stale and will be auto-closed. needs-triage Indicates an issue or PR lacks a `triage/foo` label and requires one. labels Feb 6, 2024
@mboukhalfa
Copy link
Member

In his preview we can see the issue with the logo position when changing the language to Arabic :
https://deploy-preview-45056--kubernetes-io-main-staging.netlify.app/ar/
Screenshot from 2024-02-07 15-31-27

@sftim
Copy link
Contributor Author

sftim commented May 11, 2024

The key things I think we should do are:

  • set dir attributes on the <html> or <body> element of all pages (whatever locale they are in). Hugo already knows the text direction for each localization. Pick one of <html> or <body> and stick with that choice
  • validate that the header and footer work the way we want in RTL locales (making fixes if needed)
    • and without LTR locale regressions
  • check if we want RTL versions of the Kubernetes and CNCF logos (the action is to check, nothing more at this stage)
  • validate that https://kubernetes.io/releases/download/ works right for RTL locales, because this page has a bunch of custom layouts, and is important to get right
  • validate that https://kubernetes.io/docs/home/supported-doc-versions/ works right for RTL locales (it should just work!)

@ricardoamaro
Copy link
Contributor

ricardoamaro commented May 15, 2024

Per the SIG docs meeting and as a follow-up, could we try segregating the work in consumable chunks that several people could pick up independently?

@mboukhalfa
Copy link
Member

mboukhalfa commented May 15, 2024

Per the SIG docs meeting and as a follow-up, could we try segregating the work in consumable chunks that several people could pick up independently?

Probably we can open a discussion on github and also slack and we go through the following points :

  1. Identify clearly the issues and their scope (k8s / docsy / specific CSS file or layout)
  2. Set how solution should look like and also its scope (push fix to docy / k8s for all the website / keep the fix only for RTL lang example )
  3. Create couple of issues each with a clear technical problem and describe how to fix

@chalin
Copy link
Contributor

chalin commented May 15, 2024

FYI, I've slated some time this week to start working on Docsy RTL support (google/docsy#1442). I'm off next week, so I don't know when it'll get wrapped up. Again, FYI.

Side note: there still doesn't seem to be a lot of interest for Docsy RTL support if I judge from the number of 👍. @ricardoamaro et al., if you haven't already, could you given google/docsy#1442 a thumbs up?

@sftim
Copy link
Contributor Author

sftim commented May 15, 2024

@chalin if you want to talk about the challenges in broad strokes (I don't speak any language usually written RTL, so I'm not the right person for fine details), I can make time in the next few months. Nudge me on K8s Slack if this sounds useful.

@chalin
Copy link
Contributor

chalin commented May 16, 2024

Here's a preview of Docsy RTL support: https://deploy-preview-2002--docsydocs.netlify.app/docs/ using the en but configured as if an rtl language. @mboukhalfa et al., let me know what you think.

Edit: if it looks ok overall, I can update the Docsy example, which has pages written in an actual RTL language for a better preview.

Thanks for the offer @sftim, I may take you up on it if necessary -- maybe the changes illustrated above cover the necessary bases?

@mboukhalfa
Copy link
Member

Here's a preview of Docsy RTL support: https://deploy-preview-2002--docsydocs.netlify.app/docs/ using the en but configured as if an rtl language. @mboukhalfa et al., let me know what you think.

Thanks for the offer @sftim, I may take you up on it if necessary -- maybe the changes illustrated above cover the necessary bases?

Thanks @chalin That preview seems managing the navbar nicely but I still can see an issue with current page path, the slash is not in the correct place :
image

I am sure on the docsy example it would look much better than what we have on k8s because on k8s we are not using native docsy layout for navbar and navbar-brand our customization cause us more troubles

@sftim
Copy link
Contributor Author

sftim commented May 16, 2024

I think we could switch Kubernetes to native layouts more (see #41171)

@chalin
Copy link
Contributor

chalin commented May 16, 2024

@mboukhalfa et al. - could you have another look at the preview, I've fixed some issues: https://deploy-preview-2002--docsydocs.netlify.app/docs/language/

@mboukhalfa
Copy link
Member

@mboukhalfa et al. - could you have another look at the preview, I've fixed some issues: https://deploy-preview-2002--docsydocs.netlify.app/docs/language/

Great work @chalin looks good to me from the preview I will take a detailed look later and check the implementation If you can link me to the code PR would be nice ! I am not sure if the menu with small device preview stay in horizontal list still the expected behavior ?

@sftim
Copy link
Contributor Author

sftim commented May 16, 2024

If you can link me to the code PR would be nice ! I am not sure if the menu with small device preview stay in horizontal list still the expected behavior ?

It's google/docsy#2002

@chalin
Copy link
Contributor

chalin commented May 17, 2024

@sftim
Copy link
Contributor Author

sftim commented Jun 11, 2024

I've linked some PRs to #41171 that help pave the way to using more upstream Docsy support, and eventually to adding RTL language support.

@chalin
Copy link
Contributor

chalin commented Oct 10, 2024

Status update: after a change in implementation strategy, Docsy's RTL support is looking good. All known issues (e.g., with the navs and footer) have been resolved. Site previews:

As was mentioned before, if you have questions or comment about Docsy RTL, add them to one of:

If no other issues are found, then I'll be updating the Docsy docs to explain how to set up RTL support, and then publish an official version. Please give a thumbs up to google/docsy#1442 if you haven't already.

@adowair
Copy link

adowair commented Oct 13, 2024

Thank you for pushing this through the long haul @chalin—we're looking forward to pulling this into Kubernetes!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/localization General issues or PRs related to localization area/web-development Issues or PRs related to the kubernetes.io's infrastructure, design, or build processes kind/feature Categorizes issue or PR as related to a new feature. lifecycle/frozen Indicates that an issue or PR should not be auto-closed due to staleness. priority/important-longterm Important over the long term, but may not be staffed and/or may need multiple releases to complete. triage/accepted Indicates an issue or PR is ready to be actively worked on.
Projects
None yet
Development

No branches or pull requests

8 participants