Merge "If the height is small even if scrolling is enabled, it should be elide."...

[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) |
 
 
 | ![ ](../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.
 
 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
 
 
 #### 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++
 
 ~~~{.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\"}" );
 
 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}
 ~~~
 
 ~~~{.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\"}";
 
 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;
+

 ~~~
 
 
 ~~~