RTL support in `gr.Textbox`

[MohamedAliRashad]

• [x] I have searched to see if a similar issue already exists.

Is your feature request related to a problem? Please describe.
I want to build Arabic demo websites.

Describe the solution you'd like
I want a toggle to switch the web app from LTR to RTL

[abidlabs]

Hi @MohamedAliRashad can you elaborate more on what the desired behavior is? Is it just that the Textbox component should support text written from RTL, or something more?

[MohamedAliRashad]

@abidlabs I was talking more about the whole UI. An option that i can flip from False to True that transforms the whole web page from LTR to RTL.

[zaidalyafeai]

It seems the current Textbox doesn't support rtl languages like Arabic, correct me if I am wrong?

[MohamedAliRashad]

@zaidalyafeai No, Nothing support RTL out of the box.

(BTW, Thanks for the whisper-ar model (and space) on huggingface.)

[abidlabs]

In what sense are they not supported? I tested right now and the text is written from RTL as expected, although it is not right-aligned. Is that the concern?

[MohamedAliRashad]

@abidlabs The Arabic text itself is supported. I am talking about the right-alignment using a flag in the gradio interface.

gr.interface(rtl=True)
# or
gr.Blocks(rtl=True)

(It's possible to force something like this using global css i think).

[abidlabs]

Yes understood @MohamedAliRashad. I was referring to @zaidalyafeai's comment about gr.Textbox specifically

[zaidalyafeai]

Yeah, I meant the alignment, something like html dir will be cool

<input dir="rtl"/>

[zaidalyafeai]

@abidlabs I am releasing a demo soon, is there any way we can add dir='rtl' to textarea? I have modified it using inspect and it works.

[zaidalyafeai]

Also, allowing more freedom in passing styles will be awesome!

gr.inputs.Textbox().style({'text-align': 'right'})

[abidlabs]

Hi @zaidalyafeai we probably won't be able to have it in time for your demo, but this is something we can look into the future.

In the meantime, you could apply custom CSS to your demo to get the desired effect. It would look like this:

css = """
#rtl-textbox{
  text-align: right;
}
"""

with gr.Blocks(css=css)
   ...
   gr.Textbox(elem_id="rtl-textbox")

You can read more about custom css here: https://gradio.app/custom-CSS-and-JS/

[abidlabs]

I'll also switch the focus of this issue from RTL across all of Gradio Blocks (since that's not something we're likely to implement -- too complex with all of the layouts people can create with Blocks) to just the Textbox component, which we can probably support in the future

[zaidalyafeai]

Hi @zaidalyafeai we probably won't be able to have it in time for your demo, but this is something we can look into the future.

In the meantime, you could apply custom CSS to your demo to get the desired effect. It would look like this:

css = """
#rtl-textbox{
  text-align: right;
}
"""

with gr.Blocks(css=css)
   ...
   gr.Textbox(elem_id="rtl-textbox")

You can read more about custom css here: https://gradio.app/custom-CSS-and-JS/

That is exactly what I needed, thank you.