Persian interface imperfections #3083

New Issue

OVERLORD · 2026-02-05T06:01:51+03:00

OVERLORD commented

2026-02-05 06:01:51 +03:00

Originally created by @merrime-n on GitHub (Sep 6, 2022).

Describe the Bug

There are some undesirable bugs in Bookstack's Persian interface, due to the RTL direction apparently. These imperfections are as follows (steps to reproduce & screenshots included):

When clicking on "Set changelog" in English interface, a window pops up just under the button; prompting the user to enter a brief description of changes they have made. However, in the Persian interface, "Set changelog" (which is "تنظیم تغییرات" in Persian) is located on the left side of the top bar - which is perfectly correct - but when the users clicks on the button, the pop-up window does not show up under the button. Instead, it pops up in the right side of the screen; and it is ANNOYING.
In Book Navigation, when the interface is English, the " Pages " string (which is "صفحه" in Persian) is located on the bottom left, just under the chapter name. But when the interface is Persian, it remains there where it used to be in English interface. In Persian, it should be located on the bottom RIGHT.
In templates section, when the interface is English, the up & down arrows are located on the right side, in front of the template name. But in the Persian interface, these buttons still remain on the right side and overlay the template names which are in Persian and are written from right to left.
In the Persian interface, when we have uploaded an attachment and we need to remove it, we simply click on the X button to delete it. Then at this point, a confirmation warning pops up in Persian and we cannot see half of it! Because it is partly out of the screen.
When we head to change the language interface, there is a dropdown in which we can select the preferred language. When the interface is English, a small arrow is shown in front of the language name. But when the interface is Persian, the arrow overlays the language name.
When the interface is English and we click on our username on the top bar, a windows pops up just under the button and fits in the screen perfectly. But when the Interface is Persian, the left part of the pop-up windows lays outside the screen and does not fits in.
Additionally, it is worth mentioning that keeping the Persian interface up-to-date along with Crowdin contributions is a great help.

Steps to Reproduce

Steps are detailed in the bug description section.

Expected Behaviour

We need to have a perfectly normal RTL interface when we change the language to Persian (فارسی). But sometimes the elements overlay the strings, or pop-up windows does not appear in the right place.

Screenshots or Additional Context

Set changelog

English interface

Persian interface

Book Navigation

English interface

Persian interface

Templates

English interface

Persian Interface

Attachment Deletion

Changing the language (Dropdown arrow)

English interface

Persian interface

Pop-up window not fit

English interface

Persian interface

Browser Details

No response

Exact BookStack Version

v22.07.3

PHP Version

No response

Hosting Environment

Ubuntu Server 22.04 (Installed Bookstack via Docker Compose)

Originally created by @merrime-n on GitHub (Sep 6, 2022). ### Describe the Bug There are some undesirable bugs in Bookstack's Persian interface, due to the RTL direction apparently. These imperfections are as follows (steps to reproduce & screenshots included): 1. When clicking on "Set changelog" in English interface, a window pops up just under the button; prompting the user to enter a brief description of changes they have made. However, in the Persian interface, "Set changelog" (which is "تنظیم تغییرات" in Persian) is located on the left side of the top bar - which is perfectly correct - but when the users clicks on the button, the pop-up window does not show up under the button. Instead, it pops up in the right side of the screen; and it is ANNOYING. 2. In Book Navigation, when the interface is English, the " Pages " string (which is "صفحه" in Persian) is located on the bottom left, just under the chapter name. But when the interface is Persian, it remains there where it used to be in English interface. In Persian, it should be located on the bottom RIGHT. 3. In templates section, when the interface is English, the up & down arrows are located on the right side, in front of the template name. But in the Persian interface, these buttons still remain on the right side and overlay the template names which are in Persian and are written from right to left. 4. In the Persian interface, when we have uploaded an attachment and we need to remove it, we simply click on the X button to delete it. Then at this point, a confirmation warning pops up in Persian and we cannot see half of it! Because it is partly out of the screen. 5. When we head to change the language interface, there is a dropdown in which we can select the preferred language. When the interface is English, a small arrow is shown in front of the language name. But when the interface is Persian, the arrow overlays the language name. 6. When the interface is English and we click on our username on the top bar, a windows pops up just under the button and fits in the screen perfectly. But when the Interface is Persian, the left part of the pop-up windows lays outside the screen and does not fits in. 7. Additionally, it is worth mentioning that keeping the Persian interface up-to-date along with Crowdin contributions is a great help. ### Steps to Reproduce Steps are detailed in the bug description section. ### Expected Behaviour We need to have a perfectly normal RTL interface when we change the language to Persian (فارسی). But sometimes the elements overlay the strings, or pop-up windows does not appear in the right place. ### Screenshots or Additional Context 1. Set changelog - English interface ![photo_2022-09-06_14-27-43](https://user-images.githubusercontent.com/100111649/188606157-04bd8857-ac65-4eff-92ee-23f270f58a3d.jpg) - Persian interface ![photo_2022-09-06_14-27-44](https://user-images.githubusercontent.com/100111649/188606208-e435de5d-2172-4e62-92d3-edf29c9861f2.jpg) 2. Book Navigation - English interface ![photo_2022-09-06_14-25-06](https://user-images.githubusercontent.com/100111649/188605530-d95557c2-6d60-49a4-9bc6-13ad461ce6f0.jpg) - Persian interface ![photo_2022-09-06_14-25-07](https://user-images.githubusercontent.com/100111649/188605535-fd9a16c1-0f4c-42d2-9193-faa21fbf1520.jpg) 3. Templates - English interface ![photo_2022-09-06_14-29-29](https://user-images.githubusercontent.com/100111649/188606511-209d2141-9bfd-438b-826f-70b9ba58b533.jpg) - Persian Interface ![photo_2022-09-06_14-29-30](https://user-images.githubusercontent.com/100111649/188606559-8f0411af-9973-4511-9c29-69c6005c3b8e.jpg) 4. Attachment Deletion ![photo_2022-09-06_14-31-03](https://user-images.githubusercontent.com/100111649/188606823-dd7f6185-4f46-4725-b447-f68fb54a7529.jpg) 5. Changing the language (Dropdown arrow) - English interface ![cap7-2](https://user-images.githubusercontent.com/100111649/188607195-01d3337c-bf74-4b86-9c6f-1266cf0db508.PNG) - Persian interface ![cap7-1](https://user-images.githubusercontent.com/100111649/188607109-8677513d-d89c-4a12-8014-4e94be6f9e2d.PNG) 6. Pop-up window not fit - English interface ![photo_2022-09-06_14-34-43](https://user-images.githubusercontent.com/100111649/188607618-88bae3fb-b97c-4603-9494-d8b0a31f17b2.jpg) - Persian interface ![photo_2022-09-06_14-34-44](https://user-images.githubusercontent.com/100111649/188607651-8c148028-3b11-45b3-b657-52ee869a197b.jpg) ### Browser Details _No response_ ### Exact BookStack Version v22.07.3 ### PHP Version _No response_ ### Hosting Environment Ubuntu Server 22.04 (Installed Bookstack via Docker Compose)