Merge "Text improvement 1. Text - Layout text & icons. * Feature added to layout...

[platform/core/uifw/dali-toolkit.git] / docs / content / shared-javascript-and-cpp-documentation / text-label.md

diff --git a/docs/content/shared-javascript-and-cpp-documentation/text-label.md b/docs/content/shared-javascript-and-cpp-documentation/text-label.md
old mode 100644 (file)
new mode 100755 (executable)
index 98734b2..8b9d4d6
--- a/docs/content/shared-javascript-and-cpp-documentation/text-label.md
+++ b/docs/content/shared-javascript-and-cpp-documentation/text-label.md
@@ -89,6 +89,41 @@ label.HorizontalAlignment = "BEGIN"; // "CENTER" or "END"
 | ![ ](../assets/img/text-controls/LatinEnd.png) ![ ](LatinEnd.png) | ![ ](../assets/img/text-controls/ArabicEnd.png) ![ ](ArabicEnd.png) |
 
 
+
+The text's alignment and order can be modified to match the direction of the system language.
+
+If the MATCH_SYSTEM_LANGUAGE_DIRECTION property is set to true then the direction of the text is ignored, instead the text is aligned and ordered as the system default language.
+
+~~~{.cpp}
+// C++
+
+label.SetProperty( Toolkit::DevelTextLabel::Property::MATCH_SYSTEM_LANGUAGE_DIRECTION, true );
+~~~
+
+~~~{.js}
+// JavaScript
+
+label.matchSystemLanguageDirection = true;
+~~~
+
+|  |  |
+|--|--|
+| Current system language direction left-to-right | |
+| MATCH_SYSTEM_LANGUAGE_DIRECTION set to TRUE. | MATCH_SYSTEM_LANGUAGE_DIRECTION set to FALSE (default). |
+| BEGIN alignment | BEGIN alignment  |
+| ![ ](../assets/img/text-controls/HelloWorld-System-BEGIN.png) ![ ](HelloWorld-System-BEGIN.png) | ![ ](../assets/img/text-controls/HelloWorld-Default-BEGIN.png) ![ ](HelloWorld-Default-BEGIN.png) |
+| CENTER alignment | CENTER alignment  |
+| ![ ](../assets/img/text-controls/HelloWorld-System-CENTER.png) ![ ](HelloWorld-System-CENTER.png) | ![ ](../assets/img/text-controls/HelloWorld-Default-CENTER.png) ![ ](HelloWorld-Default-CENTER.png) |
+| END alignment | END alignment  |
+| ![ ](../assets/img/text-controls/HelloWorld-System-END.png) ![ ](HelloWorld-System-END.png) | ![ ](../assets/img/text-controls/HelloWorld-Default-END.png) ![ ](HelloWorld-Default-END.png) |
+
+
+|  |  |
+|--|--|
+| Current system language direction left-to-right | Current system language direction right-to-left |
+| ![ ](../assets/img/text-controls/LTR_order.png) ![ ](LTR_order.png)  | ![ ](../assets/img/text-controls/RTL_order.png) ![ ](RTL_order.png) |
+
+
 The examples above assume that the TextLabel size greater than the minimum required.  
 The next section provides details about the other size related options.
 
@@ -207,7 +242,7 @@ label.textColor = dali.COLOR_RED;
 
 #### Drop Shadow
 
-To add a drop-shadow to the text, simply set the SHADOW property. Shadow parameters can be set through a json string, see the examples below.
+To add a drop-shadow to the text, simply set the SHADOW property. Shadow parameters can be set through a json string or through a property map, see the examples below.
 
 ~~~{.cpp}
  // C++
@@ -222,8 +257,14 @@ label2.SetProperty( TextLabel::Property::SHADOW, "{\"offset\":\"1 1\",\"color\":
 label3.SetProperty( TextLabel::Property::TEXT, "Text with Bigger Shadow" );
 label3.SetProperty( TextLabel::Property::SHADOW, "{\"offset\":\"2 2\",\"color\":\"black\"}" );
 
-label4.SetProperty( TextLabel::Property::TEXT, "Text with Color Shadow" );
-label4.SetProperty( TextLabel::Property::SHADOW, "{\"offset\":\"1 1\",\"color\":\"red\"}" );
+label4.SetProperty( TextLabel::Property::TEXT, "Text with Color Soft Shadow" );
+
+Property::Map shadow;
+shadow.Insert( "offset", Vector2(1.0f, 1.0f) );
+shadow.Insert( "color", Color::RED );
+shadow.Insert( "blurRadius", 2.0f ); // A value of 0 indicates no blur. The bigger the radius, the more blurry.
+label4.SetProperty( TextLabel::Property::SHADOW, shadow );
+
 ~~~
 
 ~~~{.js}
@@ -240,8 +281,14 @@ label2.shadow = "{\"offset\":\"1 1\",\"color\":\"black\"}";
 label3.text = "Text with Bigger Shadow";
 label3.shadow = "{\"offset\":\"2 2\",\"color\":\"black\"}";
 
-label4.SetProperty( TextLabel::Property::TEXT, "Text with Color Shadow" );
-label3.shadow = "{\"offset\":\"1 1\",\"color\":\"red\"}";
+label4.SetProperty( TextLabel::Property::TEXT, "Text with Color Soft Shadow" );
+var shadow = {
+    "offset" : [ 1.0, 1.0 ],
+    "color" : dali.COLOR_RED;
+    "blurRadius" : 2.0
+};
+label4.shadow = shadow;
+
 ~~~