Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork5.8k
feat: Add Right-to-Left (RTL) layout support#2551
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 ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
base:develop
Are you sure you want to change the base?
Uh oh!
There was an error while loading.Please reload this page.
Conversation
This commit introduces a new feature enabling Right-to-Left (RTL) layout for docsify sites.Key changes:- **Configuration:** Added a new boolean option `rtl` (default: `false`) to `window.$docsify` configuration in `src/core/config.js`. Setting this to `true` enables RTL mode.- **Styling:** - Created `src/themes/shared/_rtl.css` with specific styles for RTL layout, including adjustments for text direction, sidebar positioning, and content margins. - Imported `_rtl.css` into `src/themes/shared/__index.css`.- **Behavior:** Modified `src/core/Docsify.js` to add a `rtl` class to the `<body>` element when `config.rtl` is true. This class activates the RTL-specific CSS rules.- **Testing:** Added a new end-to-end test suite in `test/e2e/rtl.test.js` to verify: - The `rtl` class is applied to the body. - The sidebar is positioned on the right. - Content margins are adjusted for the right-hand sidebar.- **Documentation:** Updated `docs/configuration.md` to document the new `rtl` option, its type, default value, and usage.This feature addresses your request for better RTL support, allowing you to create documentation sites that cater to RTL languages.
vercelbot commentedMay 27, 2025 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
The latest updates on your projects. Learn more aboutVercel for Git ↗︎
|
Thanks for your contribution. I added some screenshots. There are some issues, such as search shortcut key prompts, etc. Check screenshots
|
| this.initFetch();// Fetch data | ||
| if(this.config.rtl){ | ||
| document.body.classList.add('rtl'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
Instead of adding a class, what about using thedir attribute?<html dir="rtl"> and target the changes in the layout using that as the selector?[dir=rtl] .layout
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
Agree with@rrickay that usingdir="rtl" is more reasonable since it is the standard HTML attr for RTL contents layout.
But if it add-on onhtml level for all contents, there is no place to change non-RTL content(img, code...etc) to place as LTR.
Maybe the styling on RTL should be more specific either configurable.
Uh oh!
There was an error while loading.Please reload this page.
Summary
This commit introduces a new feature enabling Right-to-Left (RTL) layout for docsify sites.
Related issue, if any:
Close#2511
What kind of change does this PR introduce?
rtl(default:false) towindow.$docsifyconfiguration insrc/core/config.js. Setting this totrueenables RTL mode.src/themes/shared/_rtl.csswith specific styles for RTL layout, including adjustments for text direction, sidebar positioning, and content margins._rtl.cssintosrc/themes/shared/__index.css.src/core/Docsify.jsto add artlclass to the<body>element whenconfig.rtlis true. This class activates the RTL-specific CSS rules.test/e2e/rtl.test.jsto verify:rtlclass is applied to the body.docs/configuration.mdto document the newrtloption, its type, default value, and usage.For any code change,
Does this PR introduce a breaking change?
No
Tested in the following browsers: