Request for Comment: Text Direction (LTR/RTL) Handling for Page Content #4483

Open
opened 2026-02-05 08:58:47 +03:00 by OVERLORD · 1 comment
Owner

Originally created by @ssddanbrown on GitHub (Feb 25, 2024).

Current Handling

Within the page editor we set a text direction based upon the user's language preference.
If it's a RTL language, we'll load the editor as RTL, with added text direction controls. Otherwise it's shown as LTR.

When viewing page content, we set the direction to auto, meaning the browser will auto infer the content direction based upon the it's written in. From testing experience, this often means direction is inferred from the page name/title.

Current Problems

The difference in edit/display can cause differences in presentation between the editor and page view.
A RTL language editor can save their page, and see content flip if that content is written in English. I believe the reverse would be true too.

I don't think we should try to use auto in the editors, since the content will be changing and provide an unstable/uncontrolled experience.

Proposed Solution

  • Store the text direction against the page entry (much like we do for the editor type now).
    • Defaults to the page creator's language text direction.
  • Use the stored page text direction for display, regardless of viewer user language.
  • Use the stored page text direction for editing, regardless of editor user language.
  • Provide control to change this page text direction.

Questionables

  • Where do we expose the added text-direction control?
  • Should the markdown editor be flipped? Currently the layout is flipped in RTL but the code editor remains LTR.

Input Welcomed

I'd really like some feedback on this, especially as someone not well-versed in RTL languages myself, only familiar with them via supporting them in BookStack. Below are some specific areas I'd like feedback on:

  • Does the proposed solution seem sensible?
  • Are there additional considerations/issues that are not covered by this solution?
  • Could the solution introduce new issues?
  • Response to questionables above.
Originally created by @ssddanbrown on GitHub (Feb 25, 2024). ### Current Handling Within the page editor we set a text direction based upon the user's language preference. If it's a RTL language, we'll load the editor as RTL, with added text direction controls. Otherwise it's shown as LTR. When viewing page content, we set the direction to `auto`, meaning the browser will auto infer the content direction based upon the it's written in. From testing experience, this often means direction is inferred from the page name/title. ### Current Problems The difference in edit/display can cause differences in presentation between the editor and page view. A RTL language editor can save their page, and see content flip if that content is written in English. I believe the reverse would be true too. I don't think we should try to use `auto` in the editors, since the content will be changing and provide an unstable/uncontrolled experience. ### Proposed Solution - Store the text direction against the page entry (much like we do for the editor type now). - Defaults to the page creator's language text direction. - Use the stored page text direction for display, regardless of viewer user language. - Use the stored page text direction for editing, regardless of editor user language. - Provide control to change this page text direction. ### Questionables - Where do we expose the added text-direction control? - Should the markdown editor be flipped? Currently the layout is flipped in RTL but the code editor remains LTR. ### Input Welcomed I'd really like some feedback on this, especially as someone not well-versed in RTL languages myself, only familiar with them via supporting them in BookStack. Below are some specific areas I'd like feedback on: - Does the proposed solution seem sensible? - Are there additional considerations/issues that are not covered by this solution? - Could the solution introduce new issues? - Response to questionables above.
OVERLORD added the Open to discussion💆 UX labels 2026-02-05 08:58:47 +03:00
Author
Owner

@lior-burshan commented on GitHub (Mar 8, 2025):

Im writing as a multi language user,
as of now i added the following css in order for the page to display the direction correctly.
`.page-content p, h2, h3, h4, h5,blockquote {
unicode-bidi: embed;
direction: rtl;
text-align: right;
}

.page-content p[dir="ltr"], h2[dir="ltr"], h3[dir="ltr"], h4[dir="ltr"],h5[dir="ltr"],blockquote[dir="ltr"],code {
direction: ltr;
text-align: left;
unicode-bidi: embed;
}`
i added text alignment to fix the issue that ENG text will also align right regardless of editor configuration.
in regards to unicode-bidi it helps me when i combine the two languages in the same sentence ( mostly referring to files written in english).

I believe text alignment should be considered as well.

@lior-burshan commented on GitHub (Mar 8, 2025): Im writing as a multi language user, as of now i added the following css in order for the page to display the direction correctly. `.page-content p, h2, h3, h4, h5,blockquote { unicode-bidi: embed; direction: rtl; text-align: right; } .page-content p[dir="ltr"], h2[dir="ltr"], h3[dir="ltr"], h4[dir="ltr"],h5[dir="ltr"],blockquote[dir="ltr"],code { direction: ltr; text-align: left; unicode-bidi: embed; }` i added text alignment to fix the issue that ENG text will also align right regardless of editor configuration. in regards to unicode-bidi it helps me when i combine the two languages in the same sentence ( mostly referring to files written in english). I believe text alignment should be considered as well.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/BookStack#4483