RTL Interface Alignment

[deema-A]

Hi, I'm currently working on designing an interface in Arabic and I need to ensure proper interface alignment. However, this is what I got:

CSS used:

.rtl {
    text-align: right;
}
.selectize-dropdown, .selectize-input {
    direction: rtl !important;
}

and return gr.Interface(fn=rank_fluency, inputs=inputs, outputs=outputs, title="العربية", description="", css=css) link to the space Arabic space

[abidlabs]

Hi @deema-A thank you for creating this issue. Can you elaborate what's the issue with this alignment?

[deema-A]

the output textbox should be on the left side, and the questions should be on the right. So, reversing the current alignment of the interface will make it suitable for RTL languages, but I am not sure if the code I used is correct for that purpose. thank you!

[abidlabs]

Hi @deema-A you'll need to add the following CSS to cause the orientation to be RTL:

  flex-direction: row-reverse; /* Makes the main-axis start from the right */
  justify-content: flex-start; /* Aligns children to the right */

This CSS should be applied to the Row that contains the elements that you want to switch to RTL. You can look at the inspector console to figure out what the id of that row is. For example, this seems to work for a basic example:

import gradio as gr

css = """
#component-3 {
  flex-direction: row-reverse; /* Makes the main-axis start from the right */
  justify-content: flex-start; /* Aligns children to the right */
}
"""

demo = gr.Interface(lambda x:x, "textbox", "image", css=css)
demo.launch()

However, this id (#component-3) will be different depending on your demo. The more robust way would be to build your demo using gr.Blocks() (if you aren't familiar with Blocks, please see: https://www.gradio.app/guides/blocks-and-event-listeners) and then assign an elem_id to the gr.Row() containing your components, and to target that with custom CSS.