Improve right-to-left language support in inputs and outputs

[mapmeld]

Is your feature request related to a problem? Please describe.

In newer versions of HuggingFace_Hub, text inputs and outputs left-justify their text, when we can add an attribute to automatically detect and adjust for right-to-left language text.

Describe the solution you'd like

recommended

• Model Page, Widget input: either the <form> or the <span ... role="textbox"> element should have HTML attribute dir="auto" (no css equivalent)
• Model Page, Text Generation and Speech Recognition output: the <p ... class="alert alert-success"> element should have dir="auto"

less critical

• Model and Dataset readme: I believe what we had earlier would be JS after the markdown element renders, to select .prose > {h1, h2, h3, h4, p} and apply dir="auto"; the selection is so we don't mess with code / pre / table elements
• Model Page, Fill-Mask Widget: the <div> around the bar chart could also have dir="auto"
• Spaces (probably will submit to Gradio) - the user has more control here, so I might just advise the user that they can add direction: rtl CSS to text inputs and outputs

[osanseviero]

cc @mishig25 @gary149

[julien-c]

tagging @severo on this, do you want to take care of this?

[severo]

List of pages to test for widgets:

• https://huggingface.co/m3hrdadfi/gpt2-persian-qa
• https://huggingface.co/bolbolzaban/gpt2-persian