0

I can't change the menu sequence from "left to right" to "right to left"! This is need because our first language is Persian and we must read from right to left!

I changed the languge in base.py to "fa-IR" and wagtail cms languges to "فارسی". But it didn't work.

Arash Rahimimehr
  • 21
  • 4

2 Answers2

1

I think that write the code direction: rtl; in this line will change whole website content to "right to left":

[File: main.css] [1]: https://github.com/wagtail/bakerydemo/blob/4c57a845e004b8f2d00180f944d7ddb34f49c5b6/bakerydemo/static/css/main.css#L41

like this:

`html {

direction: rtl;

font-size: 16px;

}`

Arash Rahimimehr
  • 21
  • 4
  • `direction: rtl` should never be used to control the primary direction of a web page. – Andj May 23 '23 at 09:17
0

I don't think the Bakery Demo frontend was designed with right-to-left languages in mind. I think the answer to your specific question is to change flex-direction: row to flex-direction: row-reverse in this line https://github.com/wagtail/bakerydemo/blob/main/bakerydemo/static/css/main.css#L503

But I suspect you will need to make some more changes to get everything working in Persian. You may want to consider starting from scratch and using Bakery Demo for inspiration rather than as code to adapt.

cnk
  • 981
  • 1
  • 5
  • 9
  • Thank you, It was usefull, But as you say it needs some more changes for everything. – Arash Rahimimehr Mar 27 '23 at 19:37
  • 1
    The first place to start is base.html, adding `dir="rtl"` to the root element. Then add dir attribute as required in other templates. Then go through all css and convert to CSS logical properties and values, and then check other css rules for directional bias. Then review flexbox layout wrt direction. – Andj May 23 '23 at 09:27
  • @cnk if the templates are updated for RTL, then `flex-direction: row-reverse` will render do the opposite of what you want. `flex-direction` is dependent on the directionality of the flex container. – Andj May 23 '23 at 09:37