As part of my preparation for teaching a SAPUI5 workshop in Israel, I was asked to provide some explanation on how SAPUI5 handles the topic of right-to-left languages. Since I've never had to look at that subject before, I've done some digging and asking around, and here's what I've found.
First we must understand how a browser handles the direction in which characters should be printed. This could be right-to-left, left-to-right or some mixture of both (known as bi-directional).
Once we understand how browsers handle this topic, then the way SAPUI5 handles the subject will make a lot more sense (and take far less time to explain).
Since I am not a Hebrew speaker, I trust that Google Translate is telling me the truth when it says that "Hello World!" is "Shalom Olam!" or !שלום עולם
There are two things to understand here:
Any browser that supports the use of Unicode characters must support the use of the W3C's bi-directional algorithm. As end-users, we don't have to care too much about how this algorithm works internally, but we do need to understand how it behaves. See section 8.2 of the W3C’s Language Direction specification for browsers http://www.w3.org/TR/html4/struct/dirlang.html
The behaviour of this algorithm can be loosely summarised in the following way:
For example, the following HTML page contains two paragraphs that both say "Hello World", first in English then in Hebrew. The Hebrew characters have been represented as Unicode escape characters rather than the actual Hebrew glyphs.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>Bidirectional Text</title>
</head>
<body>
<p>Hello World!</p>
<p>שלום עולם!</p>
</body>
</html>
When the browser renders this page, the following logic is used:
If we display this HTML file as is, we get the following:
Notice that the following things have happened here:
Overall, this is not an acceptable way to render both English and Hebrew text together on the same web page. So let’s correct the situation.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>Bidirectional Text</title>
</head>
<body>
<p>Hello World!</p>
<p dir="rtl">שלוםעולם!</p>
</body>
</html>
Simply by adding the dir="rtl" parameter to a block element (the paragraph element in this case), we are telling the browser that we want to change the directionality of the text within this block.
Displaying this web page now gives the following:
That's better! Now the Hebrew text has been rendered correctly. The entire paragraph is right justified and the exclamation mark is at the left-hand end of the sentence.
But there's one more twist to the story...
Let's change the HTML page to add a third paragraph in which the actual Hebrew glyphs have been entered - not their Unicode escaped representation:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>Bidirectional Text</title>
</head>
<body>
<p>Hello World!</p>
<p dir="rtl">שלום עולם!</p>
<p>!שלום עולם</p>
</body>
</html>
Now let's see what that looks like...
Hmmm, that's not right. Ok, let's add the direction parameter back in....
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>Bidirectional Text</title>
</head>
<body>
<p>Hello World!</p>
<p dir="rtl">שלום עולם!</p>
<p dir="rtl">!שלום עולם</p>
</body>
</html>
What the...!! The exclamation mark is now in the wrong place!
First of all, by entering text into the web page directly in Hebrew glyphs, the browser does not reverse the character order of "Shalom Olam". This is because the character order is only reversed when Unicode escape characters are used, not actual glyphs.
Secondly though, we have mixed the Hebrew characters with a Latin character (the exclamation mark). Consequently, the browser looks at the overall contents of this paragraph and sees only two things:
The Unicode bidirectional algorithm now kicks in and reasons that since the overall text direction of the web page is LTR, therefore all text, irrespective of language, will be specified in this order. However, we have just told the browser that the text direction is RTL; therefore, it must reverse the order of the exclamation mark and the Hebrew character string.
Oops!
This can be "fixed" by moving the exclamation mark to the right-hand end of the character string; but this is really a workaround.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>Bidirectional Text</title>
</head>
<body>
<p>Hello World!</p>
<p dir="rtl">שלום עולם!</p>
<p dir="rtl">שלום עולם!</p>
</body>
</html>
For more information on this topic, see the W3C's web page on creating HTML pages using RTL scripts.
Now we should turn our attention to .properties files
For .properties files, there are several factors involved here:
So in a .properties file in which you wish to place the Hebrew text “Shalom Olam”, it is incorrect to add the text like this:
shalomOlam=!שלום עולם
This is wrong for two reasons:
If you enter the text string in the way shown above, it will create a similar problem to the one described immediately above when a mixture of Hebrew glyphs and Latin characters were entered directly into the HTML page. When rendered in the browser, the Hebrew glyphs will be in the correct order, but if any Latin characters are additionally present, then the order will be reversed.
The correct entry in the .properties file is this:
shalomOlam=\u05E9\u05DC\u05D5\u05DD \u05E2\u05D5\u05DC\u05DD!
Notice that the Latin exclamation mark character is now also at the right hand end of the text string because the entire string has been reversed.
Using step 8 of the SAPUI5 Walkthrough tutorial as the starting point, here's a simple modification that includes "Hello World" in Hebrew.
Modify i18n/i18n.properties to add a property called shalomOlam
shalomOlam=\u05E9\u05DC\u05D5\u05DD \u05E2\u05D5\u05DC\u05DD!
Modify view/App.view.xml to include the following extra <Text> element shown in red:
<mvc:View controllerName="sap.ui.demo.wt.controller.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc" >
<Button text="Say Hello" press="onShowHello"/>
<Input value="{/recipient/name}"
description="{i18n>showHelloButtonText}"
valueLiveUpdate="true"
width="60%"/>
<Text text="{i18n>shalomOlam}" class="sapUiMarginSmall" textDirection="RTL" />
</mvc:View>
So there you have it - how to get RTL text to appear in the correct order in a SAPUI5 app. As you can see, the majority of this blog discusses how a browser handles this situation. Therefore, if you understand that, you're about 90% of the way to getting this working in SAPUI5.
Chris W
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
38 | |
19 | |
14 | |
12 | |
10 | |
10 | |
10 | |
8 | |
8 | |
8 |