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.

Sign up for GitHub

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

Jump to bottom

Support for Right to Left #1486

Closed
moaz-mokhtar opened this issue Mar 12, 2021 · 6 comments
Closed

Support for Right to Left #1486

moaz-mokhtar opened this issue Mar 12, 2021 · 6 comments
Labels
A-Localization Area: Localization, language support, etc.

Comments

@moaz-mokhtar
Copy link

moaz-mokhtar commented Mar 12, 2021 •
edited
Loading

EDITED

Very thankful for this tool.
We need to add support to configure RTL languages (ex: Arabic) to be appeared professionally.

I did test mdbook for Arabic text as below:
image

First fix

I did edit html tag in resulted chapter_1.html as below to support rtl:

<html dir="rtl" lang="en" class="sidebar-visible no-js light">

It is appeared as below:
image

Second fix

I did edit the linked stylesheet in chapter_1.html as below to right align.

<link rel="stylesheet" type="text/css" href="font-awesome-rtl.css">

Appeared as below:
image

Still found issue:

  • Sidebar is not Right aligned.
@moaz-mokhtar moaz-mokhtar changed the title Support for Right to Lift Support for Right to Left Mar 12, 2021
@mgeier mgeier mentioned this issue Mar 13, 2021
Open
@crawfxrd
Copy link
Contributor

Sidebar is not Right aligned

Seems to be because src/theme/css/chrome.css (build/css/chrome.css) only sets padding-left for .chapter.

@moaz-mokhtar
Copy link
Author

Thank you Tim, but actually I think we need to right alight the whole sidebar.

I tried to change padding-left to padding-right but same issue which only did change alight of the chapter name inside sidebar not the whole sidebar.

When padding-lift disabled, result is as below:
image

When

.chapter {
  list-style: none outside none;
  /* padding-left: 0; */
  padding-right: 0;
  line-height: 2.2em;
}

Result as below:
image

So I think we need to fix the css properties to confirm RTL working properly.

@crawfxrd
Copy link
Contributor

Ah, I see. I thought you just meant the huge padding in the sidebar itself.

So more like this:

 .sidebar {
     ...
-    left:0;
+    right: 0;
     ...
 }
 @media only screen and (min-width: 620px) {
     .sidebar-visible .page-wrapper {
         transform: none;
-        margin-left: var(--sidebar-width);
+        margin-right: var(--sidebar-width);
     }
 }
 .next {
-    float: right;
+    float: left;
     right: var(--page-padding);
}

The arrow directions for next/previous (set by class .fa-angle-{left,right}) would need to change as well.

@crawfxrd
Copy link
Contributor

crawfxrd commented Mar 15, 2021 •
edited
Loading

Best solution would probably be to use CSS logical properties. Most common ones seem to be supported on everything except Internet Explorer.

This was referenced Mar 15, 2021
Closed
Closed
@ehuss ehuss added the A-Localization Area: Localization, language support, etc. label Jul 6, 2021
@mgeisler mgeisler mentioned this issue May 24, 2023
Open
@hamidrezakp
Copy link

hamidrezakp commented Oct 17, 2023 •
edited
Loading

Hey @moaz-mokhtar and @crawfxrd , I don't know if this is directly related to this RTL support but in order to have good quality support for Arabic-script languages like Arabic and Persian we need to use proper fonts than open-sans.

Is there any option to configure specific fonts for specific languages?

I know we can modify themes but if mdbook itself had proper fonts builtin such as open-sans for latin-script languages, it would be way better.

@moaminsharifi moaminsharifi mentioned this issue Oct 23, 2023
Closed
@ehuss
Copy link
Contributor

ehuss commented Feb 13, 2024

I'm going to close as basic rtl support is now available with the book.text-direction option (docs).

@ehuss ehuss closed this as completed Feb 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
A-Localization Area: Localization, language support, etc.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Support right-to-left languages
4 participants
@ehuss @crawfxrd @moaz-mokhtar @hamidrezakp