Improve text direction detection by adding the lang and dir attributes

[SamMousa]

Are you requesting a feature, reporting a bug or asking a question?

Bug / feature

What is the current behavior?

SurveyJS doesn't support RTL languages automatically.

What is the expected behavior?

It should be supported automatically (and dynamically)

How would you reproduce the current behavior (if this is a bug)?

• Go here: https://surveyjs.io/form-library/examples/survey-localization/reactjs
• Select an RTL language
• Note that the text is not aligned to the right

Solution

I realize this is quite a complex topic. I've been researching solutions for a bit.
First of all we need to note a few things:

1. SurveyJS does not control full page HTML (the survey may be in a different language from the page) -- This means we should set a lang attribute on the proper element.
2. SurveyJS renders localized texts, but if not available falls back to the default locale. These need not have the same text direction.

If we ignore 2 for now, we could:

1. Add lang={survey.language} to the survey root element dynamically. (So it updates when survey language changes)
2. Add css like this to force a text direction, setting the text direction will also automatically adjust the default direction of flex:row, which is what we need for navigation buttons.

My working code to fix this looks like this:

combineLatest([locale$, rootElement$]).subscribe(([locale, rootElement]) => {
		rootElement.setAttribute('lang', locale ?? 'en')
		/**
		 * When getTextInfo becomes available in FF we can drop this library
		 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getTextInfo
		 */
		rootElement.setAttribute('dir', rtlDetect.isRtlLang(locale ?? 'en') ? 'rtl' : 'ltr');
		console.log(rootElement);
	});

Note that rootElement$ and locale$ are observables linked to the survey.

[JaneSjs]

Similar user requests:

• If the survey language is set to Arabic, the sentence of the question is displayed left to right instead of right to left
• T7876 - change text alignment of input fields
• T9623 - Support for RTL Languages
• T2854 - Is RTL supported in SurveyJs