X-Git-Url: http://review.tizen.org/git/?a=blobdiff_plain;f=docs%2Fcontent%2Fshared-javascript-and-cpp-documentation%2Ftext-label.md;h=8b9d4d676805be408ed70a166796e53e7c253307;hb=fe706c2b9e0a2ce31c91317dd6749faecef6d92e;hp=13d2ab08b865b514a7030d50032a51c81d92b186;hpb=d38447a2265a4018e9afa89c79b693e3c8ec5b4c;p=platform%2Fcore%2Fuifw%2Fdali-toolkit.git 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 new mode 100755 index 13d2ab0..8b9d4d6 --- a/docs/content/shared-javascript-and-cpp-documentation/text-label.md +++ b/docs/content/shared-javascript-and-cpp-documentation/text-label.md @@ -12,6 +12,8 @@ Text labels are lightweight, non-editable and do not respond to user input. 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++ @@ -87,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. @@ -205,8 +242,7 @@ label.textColor = dali.COLOR_RED; #### 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++ @@ -216,16 +252,19 @@ stage.SetBackgroundColor( Color::BLUE ); 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} @@ -237,16 +276,19 @@ label1.text = "Plain Text"; 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; ~~~ @@ -314,27 +356,16 @@ label1.underlineHeight = 1; ![ ](../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 - enableMarkup | ENABLE_MARKUP | BOOLEAN | 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