arabicright-to-leftdocusaurusfarsi

Making docusaurus RTL

I'm having trouble making docusaurus RTL. I used a solution that changed the CSS by the following:

  html {
  direction: rtl;
  font-family: 'Vazir', 'Tahoma', 'Arial', sans-serif;
}


/* Optionally, override Infima's font for all elements */
* {
  font-family: 'Vazir', 'Tahoma', 'Arial', sans-serif;
}

/* Sidebar */

/* Sidebar */

[class^="button button--secondary button--outline collapseSidebarButton_1CGd"] {
  border-bottom: unset !important;
}

/* Sidebar RTL: Move sidebar border/line to the right */
html[dir="rtl"] .theme-doc-sidebar-container {
  border-right: var(--ifm-toc-border-width, 1px) solid var(--ifm-toc-border-color, #ebedf0);
  border-left: none;
}

but the markdown section and the details in sidebar and TOC didn't responded to be RTL at all.

I have also selected the details in the picture: enter image description here

Solution

  • Using the blog below from the docusaurus official site helped me. By default using i18n feature handles this problem:

    The i18n system should work with any language, including Right-to-Left languages.

    https://docusaurus.io/blog/2021/03/09/releasing-docusaurus-i18n