One of the most common issues when it comes to developing a web application that displays Arabic language is its capability to support RTL (Right-to-Left) text. Not only the text have to be displayed from right-to-left, but also all application components must be well-organized to handle this issue.
This topic covers the issues I have faced and how I solved them.
The pink block (in the picture) displays the category name of an article. The block appears in the left side of the application, and we want it to be in the right side.
Here is the code portion of xml file before solving the problem:
<TextView android:id="@+id/txtCategoryName" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@color/text_and_icon_color" android:textSize="@dimen/subhead" android:background="@color/accent_color" android:textAllCaps="true" android:paddingLeft="@dimen/caption_padding" android:paddingRight="@dimen/caption_padding" android:layout_marginTop="@dimen/standard_margin" />
The following lines were added to the TextView:
android:textDirection="anyRtl" android:gravity="start" android:textAlignment="gravity" android:layout_gravity="right"
We have fixed the first issue related to the TextView of category name, but what about the article content which is a WebView not a TextView!
WebView deals with HTML, so to make the text direction be right-to-left, we add the direction as shown in bold:
mWebContent.loadData("<body dir=RTL style='margin:0;padding:0;'>"+ mContent + "</body>", "text/html; charset=utf-8", "UTF-8");