RTL support

irmmr

Flarum RTL support

This extension is for adding RTL support to Flarum. Unlike previous versions, you no longer need to write additional LESS/CSS for your forum.

This extension tries to change the directions from LTR to RTL as much as possible.
This project focuses on the Flarum core user interface and other known extensions.

Install

Installation is like all flarum extensions.

composer require irmmr/flarum-ext-rtl

You can also use the latest changes.

composer require irmmr/flarum-ext-rtl:dev-main

Update

composer update irmmr/flarum-ext-rtl

This plugin adds an RTL version alongside all compiled CSS files. While using this method has many advantages, it can also come with some issues. If you encounter a serious problem while using this plugin, you can visit the issue section.

Supporting /*rtl:ignore*/, /*rtl:remove*/, /*rtl:rename:A*/, /*rtl:raw:A*/.

Links

vahidbanei

Hi,
irmmr , I use your extension with Persian language
on the PC I have a problem with avatars, how can I fix this problem?

Umutcan

Good luck 💪

yahya

I have an issue with it

It only happens with the normal user (admin work fine)

where can I find the CSS file

irmmr

yahya Hi, what extension did you install for that? (I mean the progress bar)

yahya

level rank
here: https://discuss.flarum.org/d/27869-level-ranks

I play with CSS (there are two lines that need to be changed to the right instead of the left and -85 not -80) it will works great!

.PostUser-level {
    float: right;
    position: relative;
    margin-right: -85px;
    margin-top: 75px;
    width: 64px;
    text-align: center;
}

As for the profile picture, it disintegrated on its own when I added the Arabic language and I don't know-how.

thank you a lot for this addition, it saves me a lot of time 😄

irmmr

yahya
Thank you. yes, this plugin was not supported, but now i added the style of this extension as the same you entered and it's works now.
https://github.com/irmmr/flarum-ext-rtl/blob/main/less/extensions/ianm-level-ranks/forum.less

.PostUser-level {
  float: right;
  margin-right: -80px;
  margin-left: auto;
}

about profile, please send me the Arabic language link you added.
‍you're welcome. I’m happy to help you.

yahya

thank you 😄

here the arabic language: https://github.com/neerugupta/flarum-lang-arabic

It does not need anything, just activate it and the image will work normally
my site is now working good, thank you very much for your help

irmmr

yahya My pleasure, good luck

AhmedShiboub

hello irmmr ,
when i convert my site into RTL there is a problem on mobile view only and it is that when am trying to reply or write a topic the (x) button to dismiss the popup is not clickable.

irmmr

AhmedShiboub Hello, thank you for your report, I fixed it in the new update:

composer require irmmr/flarum-ext-rtl:dev-main

AhmedShiboub

irmmr thanks alot

irmmr

vahidbanei Hi, sorry for the late reply, please update the ext and test it again!

composer require irmmr/flarum-ext-rtl:dev-main
php flarum cache:clear

Medelinor

Hello

Hope you are all well

When I enable the alternative voting layout feature in posts, I get an error formatting the discussions, so that some containers appear on top of each other:

The ones that appear on the left, I think they are supposed to appear on the right below the user’s picture.

In addition, for some programming reason, the alternative voting layout cannot be used in posts, in other words, they are not clickable.

Note that the problem also appears on the home page if the feature is selected to appear on the All Discussions page.

Thanks in advance

irmmr

Medelinor Hello there,

If what you mean by the alternative voting layout feature in posts is fof/gamification, I have also added this plugin to the list of RTL plugins. I hope there won't be any issues. Otherwise, I would appreciate it if you could explain more.

Also, I apologize for responding so late. I hope you are doing well.

alirezam

@irmmr
Thank you for developing the extension. I have used this extension. Please pay attention to the red area in the image below. This part causes the width of the displayed text in posts to be reduced. Please provide a solution for this issue.

Medelinor

Hi alirezam , how are you?
I got some help from a specialist here who helped me fix this and other related issues in the right to left extention.
Here are some codes that if you add them to your custom CSS from your forum it will improve:

/* Remove unnecessary spacing for post stream (RTL v0.1.4, fixed in main) */
@media @tablet-up {
  .DiscussionPage-stream {
    margin-left: unset !important;
    margin-right: unset !important;
  }
}

Please let me know the result.

alirezam

hi @Medelinor thanks a lot
my problem is solved.
thanks

Medelinor

alirezam Actually I am not a programmer, thanks to @SKevo who helped me solve the problem.
Thank you for your kind response and sharing the result with me.

irmmr

Updated to Flarum 1.8.8

composer require irmmr/flarum-ext-rtl:dev-main

Medelinor

Hi irmmr I hope you are well

Please note that I use translation.

Exactly what I meant, and I was also wondering if the alternate voting layout appears to the right of the profile picture on the discussion page, or in flat dimensions below the picture. Or the left side of the replies:

Also note that enabling the alternate voting layout in the discussion list does not generally show the arrow or icon:

Notice in the last image on the left that when the alternative voting layout is enabled, the number of comments and number of views change places inconveniently.

I have enabled both of these options on my forum, and will leave them enabled so you can have a closer look at the topic.

I apologize for the delay in responding for reasons beyond my control

Thank you very much