Changing CSS styling from Left-to-Right to Right-to-Left
For some survey languages, there is a need to change the CSS orientation so that text is returned in a Right-to-Left format (e.g. Arabic).
The purpose of this article is to provide a simple dynamic syntax that can change a survey's orientation; dependent on the language the survey is taken in.
Internet Option: ADP
(Editor's note: This section is redundant for clients using AskiaSuite 5.6 and above, as the ADPs from this version perform this function automatically/without additional script input)
Depending on whether you are using an ADP (custom coded or an Askia-provided default), you can include a few lines of syntax to dynamically change the survey's CSS orientation using an inline script.
As an example, if my question regarding language selection was using the shortcut 'qLang' my syntax would read thus:
{% If qLang Has {rtl response code} Then %}
body {
direction: rtl !important;
}
td {
text-align: right;
}
{% EndIf %}
This syntax can be easily included in the 'Additional' section of your Internet settings in AskiaDesign's screens mode:
Internet Option: Legacy
(Editor's note: This section is still relevant for clients using AskiaSuite 5.6 and above who use Legacy settings)
If you are using Legacy Internet Settings in your survey, the process remains the same, but with slightly different syntax. Instead of targeting the Body tag ourselves, we can use the 'dir' (direction) attribute to set the orientation of our questionnaire and look similar to this:
{% If qLang Has {rtl response code} Then %} dir="rtl" {% EndIf %}
Such syntax will be placed in the 'Body tag' input of the Internet settings:
Additional resources for the 'rtl' & 'ltr' attributes and customizing CSS this way can be found here:
- https://developer.mozilla.org/en-US/docs/Glossary/LTR
- https://www.w3.org/International/questions/qa-bidi-css-markup
- https://www.w3schools.com/tags/att_global_dir.asp