Closed deema-A closed 8 months ago
Hi @deema-A thank you for creating this issue. Can you elaborate what's the issue with this alignment?
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!
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.
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:
and
return gr.Interface(fn=rank_fluency, inputs=inputs, outputs=outputs, title="العربية", description="", css=css)
link to the space Arabic space