Persian interface imperfections

[merrime-n]

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

• Persian interface

2. Book Navigation

• English interface

• Persian interface

3. Templates

• English interface

• Persian Interface

4. Attachment Deletion

5. Changing the language (Dropdown arrow)

• English interface

• Persian interface

6. 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)

[ssddanbrown]

Thanks for reporting @okaeiz.
I've applied a range of fixes to address these issues in 98aed79.
These will be part of the next feature release.

Additionally, it is worth mentioning that keeping the Persian interface up-to-date along with Crowdin contributions is a great help.

While I try to ensure changes/additions support RTL languages, which is getting easier as new CSS features make this easier, I cannot generally assure the state & display of content outside of English since that's our target and what is primarily tested.
Other languages, especially those written RTL, will lean a bit more on community reports such as this one. Happy to address issues raised though as done here.

[merrime-n]

Thanks for your kind attention and help. 💙
I will let you know if any other bug appears in Persian interface.