How do I display RTL content in a website with both LTR and RTL pages?

Ask us anything How do I?
1

Hi,

WeWeb supports multilingual pages, where page structure stays identical and only the textual contents of elements are replicated and displayed according to the user selected language.

This is good because it makes it easier to create and maintain multilingual sites without page or element duplication.

At the same time, it seems that there is a challenge with RTL languages such as (Arabic, Azeribaijani, Divehi, Fula, Hebrew, Kurdish, Persian, Urdu and others).

The particular challenge is the display and alignment of elements on RTL language pages, which at this time appears to be coupled to a generic LTR display mode adopted across WeWeb pages.

Question:

In light of the current challenge described above, how can I display LTR and RTL contet on the same WeWeb site without having to duplicate all elements and add conditional display logic to each element to appear based on language selection?

PS: duplicating all elements and adding conditional logic is something that I think needs to be completely avoided, as it is not a practical solution at all.

Suggestion:

Can WeWeb add additional internal presets for alignment and position to be from right-to-left for pages of RTL languages?

Correct display of RTL content in RTL language pages (should be):
Manual changes made:
1. Aligment of container: right
2. Alignment of headlines: right
3. Sizing of headlines: |<->| instead of ->|<-
4. Alignment of button: right

image
image1558×512 28.5 KB

The challenge descibed here becomes more clearly apparent when switching language back to an LTR one (en), where you can see that the changes I made to correct the RTL display are persisting also for LTR.

2

@weweb-team any advice on this topic?

Multilingual with RTL support is a requirement for some of my projects.

Generally speaking, this could mean adding:

  1. A direction tag to a main element (dynamically added on language selection).
  2. Loading an RTL styles file instead of the LTR styles file when a page is loaded with an RTL language.
  3. Making sure the design system components support the RTL styles file.

Here’s how Vuetlify Framework does this with their components:

Applying RTL to a whole page:

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  rtl: true,
})

Changing RTL/LTR with a script:

<!-- App.vue -->

<template>
  <v-app>
    ...
  </v-app>
</template>

<script>
  export default {
    methods: {
      changeRTL () {
        this.$vuetify.rtl = true
      },
    },
  }
</script>
3

For now this is something we do not support. Container direction are RTL compliant, but not margin/padding etc.
We need to go through all our components to check we use RTL compliant properties + have a way to ignore/force (like vuetify).
This require a lot of work on dev and UX design, and i understand this can be an important feature.
I have push this to the product team, but this is not on our roadmap for the moment.
Feel free to use this subject to push us suggestion for when we implement this feature

4

Thanks @aurelie. I understand that this needs a significant amount of work and time to have, for the time being it is enough for me to know that it could be possible to achieve sometime in the future.