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:
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.
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:
Add lang={survey.language} to the survey root element dynamically. (So it updates when survey language changes)
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
commented
3 weeks ago
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)?
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:
langattribute on the proper element.If we ignore 2 for now, we could:
lang={survey.language}to the survey root element dynamically. (So it updates when survey language changes)flex:row, which is what we need for navigation buttons.My working code to fix this looks like this:
Note that
rootElement$andlocale$are observables linked to the survey.