SOLVED: [1.5 RC] RTL issues when selecting LTR as builder language direction

Bricks Version: 1.5 RC
Browser: Chrome 103
OS: Windows
Hi,
By Selecting LTR as builder language direction, alot of bugs previously reported for RTL languages have been addressed and resolved like tooltips not visible and some other reported bugs but new bugs have arised related to heading, plain text and rich text elements.
The above mentioned three elements have changed direction from rtl to ltr which is not what rtl users want.
We need some parts to be LTR. For example: code element, creating class, search classes, adding values like px or rem and briefly every other part that we write in English should be LTR and by selecting LTR as builder language, all above mentioned English language related parts work fine but in some parts of builder we need to write in Hebrew or Arabic or Persian and those parts should always stay RTL. Which Parts?
We need heading, plain text and rich text elements to be always RTL even if we select LTR as builder language. These three elements have been used in other elements too. For example tabs element and accordion element have text sections and those text sections should stay RTL.
I hope the issue is clarified.
Regards,

1 Like

by adding this css:
#brx-header ,#brx-content, #brx-footer
{
direction: rtl;
}
and loading it conditionally for ?bricks=
headings, plain text and rich text becomes RTL in canvas even if we select LTR builder direction. They are still LTR in strucutre panel but at least we can edit them inline in canvas in RTL mode. This CSS also solves what we see what we get issue for RTL languages too.
Without this css the bricks canvas is LTR but website is RTL. By adding this css canvas (I mean header, footer, content) become RTL but bricks structure is LTR which is a suitable combination.

1 Like

Yup we mentioned it here too

1 Like

@Sharif_Payenda You missed the game :sweat_smile:
Already fixed in the RC release too :slight_smile:
didn’t install the RC yet…

Hi @Mehdimoradi and @Kareem,
You had a long discussion in the other post that you have mentioned and it seems that post is the origin of decision to add LTR and RTL Builder Directions.
As RTL users we have to use LTR builder direction because of lots of benefits but it seems without adding the above mentioned css that I mentioned here and it was also mentioned in the other post by Nima, the game is not over.
The best solution for RTL users is combination of selecting LTR Builder Direction and adding above mentioned CSS conditionally for every url which contains ?bricks=
Now lets start the game again!

  1. At first we select LTR Builder Direction and save it because we as RTL users want to use bricks builder in LTR mode and till now everything is fine.
  2. Now open the header template and also open a website page which has menu and watch menu in bricks and website carefully. You will see that menu direction is link1-link2-link3-link4 in bricks and link4-link3-link2-link1 in website. What WE See and What WE Get are Different!
    If we add the above mentioned css conditionally then the problem will be resolved.
  3. Now lets play with text. Open a template and add a heading or plain text or rich text element or any element like tab or accordion which has text sections.
    Write something and you will see that text has LTR direction but when you save it and see it in website you will see it has RTL direction. What We See and What We Get are different. If we add above mentioned css conditionally then the problem will be resolved.
    in one sentence: Bricks builder canvas direction and website direction should be the same.
    If website is RTL the canvas should be RTL too regardless of selection LTR Builder Direction or RTL Builder Direction.
    If website is LTR the canvas should be LTR too regardless of selection LTR Builder Direction or RTL Builder Direction.
1 Like

Till now I haven’t tested the RC! Will do ASAP on my localhost and will see how about this!
You confused me a lot! Would be great if you shared a short video…

Regards

Is this what you mean?

@Kareem ,
Yes. not only this but also menu. Try to add a menu and save it. Then see the direction in Bricks and also in website.
You will see that your السلام علیکم text and menu have different directions in bricks and in website. You will not get what you see in bricks.

1 Like

OKAY!
So in 1.5 BETA, All is good except the menu! in English & Arabic… aligned from Right to left! for both languages! other than this all looks good for now!

In the RC!
Well! things become missy! as I shared in the SS attached above!
Content in the builder canvas for the RTL language works as LTR! which wasn’t in the BETA!
besides the menu alignment! as in the beta… same issue! aligned RTL for both languages.

What I’m missing too?

@Kareem
Maybe the code which has been implemented is different from what you had discussed in another post. For now if you want to use LTR Builder Direction for RTL sites this CSS should be added conditionally for every url which contains ?bricks=
#brx-header ,#brx-content, #brx-footer
{
direction: rtl;
}
Without above css we can not use LTR Builder Direction for RTL sites.
Again to make it simple for developers I should mention:
Bricks builder canvas direction and website direction should be the same regardless of RTL or LTR Builder Direction
If website is RTL the canvas should be RTL too regardless of selecting LTR Builder Direction or RTL Builder Direction.
If website is LTR the canvas should be LTR too regardless of selecting LTR Builder Direction or RTL Builder Direction.

1 Like

@thomas @Sridhar
Please check this!!!

Yes you are right, we just want to change the direction of the structure and elements panel
But other things remain in rtl

1 Like

Hi @Mehdimoradi and @Kareem,
Lets invite @Nima to this discussion too.

1 Like

We have no update yet regarding this issue!

Unfortunatley No update. If what I have said in above bold sentences is applied then the bug will be resolved. The only thing we can do is to update this post and will wait when a developer will reply.

1 Like

it’s the first week of August… According to Thomas’s statement! within days we might have a stable release!
@thomas I hope this issue will be addressed!

1 Like

Ah, ok. Then I misunderstood the builder language setting requirements. The direction setting is currently applied to the entire builder (panels & canvas).

But the builder direction setting should only apply to the builder panels, not the canvas, so the canvas matches the frontend, correct?

In the screenshot below my site is set to use an RTL language. And the Bricks builder direction is set to “LTR”. Now only the builder (toolbar & panels) uses this LTR direction. The canvas uses RTL (same as the frontend).

Please let me know if that’s the expected behaviour!

Then I can include this fix in the 1.5-rc2, which we’ll release today.

1 Like

Hi @thomas,

Correct. That will resolve the bug.
Regards,

2 Likes

This will solve the menu issue as well?

Yes. It will solve the menu issue as well.

1 Like