To display a TextLabel the TEXT property must be set using a UTF-8 string.
+Note *CR+LF* new line characters are replaced by a *LF* one.
+
~~~{.cpp}
// C++
By default TextLabel will automatically select a suitable font from the platform. However, a different font could be selected. See the [Font Selection](@ref font-selection) section for more details.
+### Mark-up Style
+
+Mark-up tags can be used to change the style of the text. See the [Mark-up Style](@ref markup-style) section for more details.
+
### Text Alignment
Wrapping can be enabled using the MULTI_LINE property:
| ![ ](../assets/img/text-controls/LatinEnd.png) ![ ](LatinEnd.png) | ![ ](../assets/img/text-controls/ArabicEnd.png) ![ ](ArabicEnd.png) |
+
+The text's alignment 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 as the system default language.
+
+~~~{.cpp}
+// C++
+
+label.SetProperty( TextLabel::Property::MATCH_SYSTEM_LANGUAGE_DIRECTION, true );
+~~~
+
+~~~{.js}
+// JavaScript
+
+label.matchSystemLanguageDirection = true;
+~~~
+
+| | |
+|--|--|
+| Current system language direction left-to-right | |
+| END alignment and MATCH_SYSTEM_LANGUAGE_DIRECTION set to TRUE. | END alignment and MATCH_SYSTEM_LANGUAGE_DIRECTION set to FALSE (default). |
+| ![ ](HelloWorld-System-END.png) | ![ ](HelloWorld-Default-END.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.
#### Drop Shadow
-To add a drop-shadow to the text, simply set the SHADOW_OFFSET property with non-zero values.
-The color can also be selected using the SHADOW_COLOR property.
+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++
label1.SetProperty( TextLabel::Property::TEXT, "Plain Text" );
label2.SetProperty( TextLabel::Property::TEXT, "Text with Shadow" );
-label2.SetProperty( TextLabel::Property::SHADOW_OFFSET, Vector2( 1.0f, 1.0f ) );
-label2.SetProperty( TextLabel::Property::SHADOW_COLOR, Color::BLACK );
+label2.SetProperty( TextLabel::Property::SHADOW, "{\"offset\":\"1 1\",\"color\":\"black\"}" );
label3.SetProperty( TextLabel::Property::TEXT, "Text with Bigger Shadow" );
-label3.SetProperty( TextLabel::Property::SHADOW_OFFSET, Vector2( 2.0f, 2.0f ) );
-label3.SetProperty( TextLabel::Property::SHADOW_COLOR, Color::BLACK );
+label3.SetProperty( TextLabel::Property::SHADOW, "{\"offset\":\"2 2\",\"color\":\"black\"}" );
+
+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 );
-label4.SetProperty( TextLabel::Property::TEXT, "Text with Color Shadow" );
-label4.SetProperty( TextLabel::Property::SHADOW_OFFSET, Vector2( 1.0f, 1.0f ) );
-label4.SetProperty( TextLabel::Property::SHADOW_COLOR, Color::RED );
~~~
~~~{.js}
label2.text = "Text with Shadow";
-label2.shadowOffset = [1, 1];
-label2.shadowColor = dali.COLOR_BLACK;
+label2.shadow = "{\"offset\":\"1 1\",\"color\":\"black\"}";
label3.text = "Text with Bigger Shadow";
-label3.shadowOffset = [2, 2];
-label3.shadowColor = dali.COLOR_BLACK;
+label3.shadow = "{\"offset\":\"2 2\",\"color\":\"black\"}";
+
+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;
-label4.SetProperty( TextLabel::Property::TEXT, "Text with Color Shadow" );
-label3.shadowOffset = [1, 1];
-label3.shadowColor = dali.COLOR_RED;
~~~
![ ](../assets/img/text-controls/TextWith1pxUnderline.png)
![ ](TextWith1pxUnderline.png)
-### Text Label Properties
+### Auto Scrolling
+
+![ ](../assets/img/text-controls/AutoScroll.gif)
+![ ](AutoScroll.gif)
- Name (JavaScript) | Name (C++) | Type | Writable | Animatable
----------------------|---------------------|--------------|--------------|-----------
- renderingBackend | RENDERING_BACKEND | INTEGER | O | X
- text | TEXT | STRING | O | X
- fontFamily | FONT_FAMILY | STRING | O | X
- fontStyle | FONT_STYLE | STRING | O | X
- pointSize | POINT_SIZE | FLOAT | O | X
- multiLine | MULTI_LINE | BOOLEAN | O | X
- horizontalAlignment | HORIZONTAL_ALIGNMENT| STRING | O | X
- verticalAlignment | VERTICAL_ALIGNMENT | STRING | O | X
- textColor | TEXT_COLOR | VECTOR4 | O | X
- shadowOffset | SHADOW_OFFSET | VECTOR2 | O | X
- shadowColor | SHADOW_COLOR | VECTOR4 | O | X
- underlineEnabled | UNDERLINE_ENABLED | BOOLEAN | O | X
- underlineColor | UNDERLINE_COLOR | VECTOR4 | O | X
- underlineHeight | UNDERLINE_HEIGHT | FLOAT | O | X
+The \link text-auto-scrolling Auto text scrolling \endlink section details how to scroll text automatically.
+### Text Label Properties
+The properties used by TextLabel are listed [here](@ref TextLabelProperties)
@class TextLabel