Right-to-Left support for form elements (text field, text area, select, etc.)

[merrime-n]

Problem you would like to solve

I have just updated the Modeler to v5.23.0 and I can see a HTML View component is added and it is great for customization and font changes, especially for RTL languages like Persian and Arabic. But as declared in the official docs, the section on security and sanitation strategy, it's for information presentation purposes only. Therefore, it cannot be used for input fields.

On the other hand, the input fields (such as text fields or date-time) do not support right-to-left languages. It can be frustrating when creating forms in those languages.

Proposed solution

• It'd be great if input fields supported text direction and align.
• Preferrably the mode (RTL) can be configured globally for a form (Right-to-Left support for form elements (text field, text area, select, etc.) #4306 (comment))

Alternatives considered

First, I thought I could achieve this by creating input fields in HTML View element but since it is disabled due to XSS and clickjacking attacks, it doesn't seem like a good idea. Moreover, the passing of values in the workflow may be tricky in this way.

Additional context

No response

---

Depends on bpmn-io/form-js#1185

[nikku]

As I understand your feature request is support for RTL languages, right? How would you envision such support? I'd assume it would be globally applied (per form)?

[merrime-n]

Yes. In forms, it'd be awesome if we could choose the direction for each element (maybe via the properties panel). Then the element positioning may be done using the resize option. However, I also noticed this unusual behavior for resizing elements which is discussed here as well.

[nikku]

What is the use case for maintaining RTL for each element? Do you envision forms to mix RTL and LTR language inputs?

[volodymyr-melnykc]

Related issue: bpmn-io/form-js#1185

[merrime-n]

No. It is not necessary for the form to include input values in both English and non-English languages.

Maybe it's just better to be a preference setting for the whole form. It can be added to the form properties where we can set its unique ID.

[nikku]

It is not necessary for the form to include input values in both English and non-English languages.

This is what I thought, too. Thanks for confirming.

---

Could you create another FR for this issue:

* Also, the Jalali calendar support for date-time element is also requested.

[merrime-n]

I'd be grateful if you guys keep me informed of this issue. It's of high importance for my organization.

[nikku]

@okaeiz Consider to contribute if this is important to your organization.

[merrime-n]

I have played around with adding custom components to form-js and I managed to create an RTL text input field which has RTL labels and values. But I think the form-js repository seems forgotten and nothing is happening there exactly. Should I consider contributing to Modeler?

As you can see, I have created a Text Input RTL form component. I'm looking for a proper icon for it.

[nikku]

@okaeiz As we discussed:

• Preferrably the mode (RTL) can be configured globally for a form (Right-to-Left support for form elements (text field, text area, select, etc.) #4306 (comment))

Let's not require users to configure it locally, but rather inherit the value from the global form configuration, if provided. Or did you change your mind and think that this provides value to configure it for each element indivudually?

I'm not sure why you'd want a separate Text Input RTL when you could configure the text direction (LTR or RTL) for these components.

[volodymyr-melnykc]

@okaeiz Thanks a lot for working on it! The form-js repository is active, and you can contribute to it. I agree with @nikku's comments. Rather than having separate RTL components, we can extend existing ones (text field, text area, select etc.) with the direction (left or right).