This form is accompanied by this sample form, which includes both Arabic and English. It uses the baseline-text and select_one-select_multiple field plug-ins. For help deploying it to your server, check out our support article Deploying form definitions.
Most European-based scripts, such as the Latin script used in English and all Romance languages, are read from left-to-right. However, some scripts in the world, including Arabic, Urdu, and Hebrew scripts, are written from right-to-left. In your forms, it is important to format all visible text correctly, such as by positioning right-to-left (RTL) scripts on the right. This will make your forms look more professional, and also easier to fill out.
Latin script characters refers to any characters used in Latin-based scripts, while English letters refers to the primary 26 characters (uppercase and lowercase) used in English. For example, ç is a Latin script character, but not an English letter. Field names in SurveyCTO can only use English letters, numbers, underscores, hyphens, and dots (though some downstream applications don't support hyphens and dots, so consider the characters you use carefully). |
Most computer applications are developed with left-to-right languages in mind. Unfortunately, this means RTL languages have been a secondary consideration, and they can be difficult to set up in different applications (some of which are used to design SurveyCTO forms). It can get to the point where even applications made by the same developer, such as Microsoft Word and Microsoft Excel, treat mixing left-to-right scripts (LTR) and RTL differently. SurveyCTO can be used on a wide variety of platforms and operating systems, which often treat RTL and LTR scripts differently, so when designing your form, you will need to account for those differences. In this support article, we will guide you through the best way to use RTL scripts in your form.
| In this support article, we will mainly be discussing Microsoft Excel for designing forms. However, Google Sheets and the online form designer will be very similar when using RTL languages. |
Alignment
While LTR languages are usually aligned to the left, RTL languages should be aligned to the right instead. There are two main ways to set this up in SurveyCTO.
Using field plug-ins
Nearly all of the field plug-ins in the field plug-in catalog will align Arabic and other RTL scripts to the right. In the form definition, simply add a field plug-in to a field with an RTL script character as the first letter in the label, and the field label will be aligned to the right. If you do not want the field plug-in to do anything besides right-align Arabic text, use one of the baseline field plug-ins. For example, if the field is a select_one field, use the select_one-select_multiple field plug-in on that field.
The text direction will be determined by the first letter in the field label, which you can learn about more in Determining the direction below. Because of this, if you are mixing LTR and RTL, and the main script is an RTL script, but the field label starts with a Latin character, you will have to use a different method, since the alignment will be to the left instead of the right.
Using HTML
You can also use HTML to determine the direction of the text. Even if you are completely unfamiliar with HTML, this is easy to set up. In the field label, simply start the text with <div dir="rtl">, and end it with </div>, like this:
<div dir="rtl">
ما إسمك
</div>
That will align the text to the right. Even if the unprocessed text (that is, the text where the HTML has not yet been applied, as shown above) is aligned to the left in Excel, as long as you have that dir="rtl" in the <div> tag, it will be aligned to the right in the actual form.
You cannot use HTML in choices in select_one or select_multiple fields, so for those fields, you should always use a field plug-in.
| HTML in choice labels will not be applied in SurveyCTO Collect, but they will in web forms. However, even if your form is web-based, the radio buttons and checkboxes will always be on the left instead of the right, so even for web forms, we recommend using field plug-ins for select_one and select_multiple fields. |
It is perfectly okay to mix different methods. For example, if the field is a select_one field, and the choice labels are primarily in Arabic, it is a good idea to use a field plug-in to make sure the choice labels are aligned correctly. But, if the first character of the field label is a Latin character, like this:
SurveyCTO
إنها أفضل طريقة لتصميم النماذج الخاصة بك
Then you will need to use HTML to make sure the label is aligned to the right, since field plug-ins determine alignment based on the first character. The field label should look something like this:
<div dir="rtl">
SurveyCTO إنها أفضل طريقة لتصميم النماذج الخاصة بك
</div>
Here is how that looks in the form:
And here is how that looks in SurveyCTO Collect:
We will discuss mixing different scripts later.
Determining the direction
When working in Microsoft Excel, the direction of the text in the cell will be determined by the first letter used. For example, if the first letter is a "ب" (ba'), then the cell text will be RTL; if the first letter is a "B", then the cell text will be LTR. For consistency, it may be a good idea to always have the first letter in each field label be from the same script. That way, it looks more consistent during editing. However, the direction of the cell in Excel does not affect the direction of the text in SurveyCTO.
When you use a field plug-in, the SurveyCTO will also determine the direction using the first letter of the field's label.
Mixing left-to-right and right-to-left languages
Using both LTR and RTL scripts in the same field label can be tricky to set up, but crucial, since field references are often used in field labels, and field references use English letters, an LTR script. So, if your form is written in an RTL script, such as Arabic, and you want to use field references, you will have to mix RTL and LTR.
There are many ways to set this up, but we will discuss two methods that will hopefully lead to fewer headaches.
Method 1: Use placeholders
Type out the Arabic field label, and where there should be a field reference, add a placeholder, like this:
كم كيلوغرامًا من X زرعت هذا العام؟
You can then replace the placeholders with field references. One great advantage of this method is that a translator who is not familiar with SurveyCTO can just provide the translation, and then the form designer can add the field references later.
When you start typing in the field references, type them out as you usually would, starting with the $, followed by the {, the field name, and finally the }. As the characters appear on the screen, they may not appear next to the cursor, and the dollar sign will be on the right instead of the left: do not be alarmed by this, and simply leave it be. Here is an example of an Arabic field label with a SurveyCTO field reference:
كم كيلوغرامًا من ${crop_name} زرعت هذا العام؟
The dollar sign is to the right instead of the left (since the first character is an RTL character, not an LTR character), but SurveyCTO will still be able to understand that field reference.
Check out the video below for an example of a field reference being entered. Here, the translator has left an X where the field reference will go, which is replaced by the form designer:
Notice how the dollar sign is typed first, followed by the left-curly bracket, but it appears as a right-curly brace instead. Then, the English characters for the field name appear to the left of the cursor, including the underscore, and then finally the right-curly bracket, which appears as a left-curly bracket. This is all to be expected, and the field reference will be applied well in your SurveyCTO form.
Method 2: Using HTML
Even if you are not familiar with HTML, this method can be a lot easier than trying to mix LTR and RTL languages on the same row of text. This method involves adding a new line whenever there is a change in the script used, which will be removed when the field label is displayed in SurveyCTO.
To start, add a <div> tag at the top of the field label, and a </div> tag at the bottom, with a blank line in the middle, like this:
<div>
</div>
If the main script is an RTL script, add dir="rtl" to the upper <div> tag, like this:
<div dir="rtl">
</div>
The dir="rtl" will make sure the text is aligned to the right, and also when line breaks are removed, the sentence parts will go from right-to-left. You will see an example of this soon.
Next, start adding the field label between those tags. Whenever you have to switch scripts (such as adding a field reference), add a line break between the scripts, like this:
<div dir="rtl">
كم كيلوغرامًا من
${crop_name}
زرعت هذا العام؟
</div>
That way, you don't have to worry about mixing different scripts on the same line, so they are easier to type out.
Finally, to the bottom, add the element <div style="line-height:0"><br></div>, like this:
<div dir="rtl">
كم كيلوغرامًا من
${crop_name}
زرعت هذا العام؟
</div>
<div style="line-height:0"><br></div>
Normally, SurveyCTO interprets line breaks as normal line breaks. The <br> tag is a line break element, and by adding it in, it tells SurveyCTO that for that field, that tag will be used for line breaks instead. That way, line breaks without the <br> tag will become normal spaces. And, by giving that <br> tag a height of 0, that extra line break will not be seen by enumerators, so it still looks neater in the spreadsheet, and as expected when filling out the form.
With all of this together, line breaks without the <br> tag will be removed, and each line will be put next to each other from right-to-left. The final field label will look something like this:
كم كيلوغرام من تفاح زرعت هذا العام؟
Notice how the field reference ${crop_name} has been replaced with "تفاح".
Line breaks: <br>
If you want actual line breaks to appear in your form, you can use the <br> tag without changing the line height, like this:
<div dir="rtl">
مندوب إحصاء: ابدأ بقراءة المجالات بصوت عالٍ
<br>
كم كيلوغرامًا من
${crop_name}
زرعت هذا العام؟
</div>
When shown in the form, the label will look something like this:
مندوب إحصاء: ابدأ بقراءة المجالات بصوت عالٍ
كم كيلوغرامات من التفاح زُرعت هذا العام؟
Line breaks: <p></p>
You can also use the <p> tag to group separate paragraphs with line breaks, like this:
<div dir="rtl">
<p>
مندوب إحصاء: ابدأ بقراءة المجالات بصوت عالٍ
</p>
<p>
كم كيلوغرامًا من
${crop_name}
زرعت هذا العام؟
</p>
</div>
<div style="line-height:0"><br></div>
The advantage of this method is that you can use HTML attributes to change the style of different paragraphs. For example, you can use this to make the first paragraph red, while the second paragraph will still be black:
<div dir="rtl">
<p style="color:red">
مندوب إحصاء: ابدأ بقراءة المجالات بصوت عالٍ
</p>
<p>
كم كيلوغرامًا من
${crop_name}
زرعت هذا العام؟
</p>
</div>
<div style="line-height:0"><br></div>
Punctuation
Punctuation is one of the trickiest parts to set up when mixing LTR and RTL languages. Keep in mind that the direction of the cell is determined by the first character. When a field label only uses an LTR or RTL script, then adding punctuation is easy, since it will match the direction of the script. This is why when there is only an RTL script used, when a field reference is used, it is okay that the dollar sign is on the right instead of the left.
However, it is different when mixing scripts.
Let's say your field label starts with Latin script, and ends with Arabic script, like this:
<div dir="rtl">
شكرا لك على المشاركة في هذا الاستطلاع
</div>
Let's say you want that sentence to end in an exclamation point. This might sound backwards, but for the exclamation point to appear on the left (so at the end of the Arabic script) in the field label, it needs to be on the right of the last line.
That way, when the HTML is applied (namely the dir="rtl"), the exclamation point will be moved to the end:
If your field label ends in an HTML closing tag, the best option is to click into the cell, move the cursor to the bottom row, and click the left-arrow key until the cursor is to the right of the last RTL script row. The dir="rtl" attribute will move it to the left when the HTML is applied. Check out this video for an example:
Tip: Working in Google Sheets
When you attempt to mix RTL and LTR in Google Sheets, Google Sheets will often format the text in RTL, no matter what the first character is:
While this will be read correctly by SurveyCTO, it is difficult to work with when editing.
To make the HTML easier to read, it is a good idea to format it in LTR. To do so, select the cell you would like to format (or select all content), and in the upper-right, click this button in green (it will become green when you select it):
That will format the text in LTR, which can make it easier to read.
Hiring a translator
Many organizations have someone write the field labels in a separate document, such as a Microsoft Word document. However, since different applications treat right-to-left languages differently, it is generally best to make sure the translations are saved in the same file type as the form design. For example, if your form is going to be designed in Microsoft Excel, then have the label writer add the labels in Microsoft Excel. That way, the format and order will be kept.
For an example, check out this video:
If you did not watch the video, this translation was generated from Google Translate (not recommended, but fine for our purposes):
It was then pasted into Microsoft Word, but it is backwards:
Notice how the letter م (mīm) and the question mark is now in the middle instead of the end, like it should be?
But when pasting into Excel, it looks fine:
If the translator were to provide their translations via Microsoft Word, and the form designer were to try and paste them into Microsoft Excel, it is very likely the order will become mixed up, and a pain to rearrange and fix. To save yourself some headaches later, make sure the translator uses the same application you will be using.
Do you have thoughts on this support article? We'd love to hear them! Feel free to fill out this feedback form.
0 Comments