X-Git-Url: http://review.tizen.org/git/?a=blobdiff_plain;f=docs%2Fcontent%2Fshared-javascript-and-cpp-documentation%2Ftext-label.md;h=9b463e40c62502e8d434edd0689c6d3798e8094f;hb=2accb5b436636636fc78cfc0f1b5838381b8c1cd;hp=1b63a42d6859fca6fdb14ade688e7effe30fdcbd;hpb=1b336183abff212ad9e88725bb349492afee10c2;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 1b63a42..9b463e4 --- 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++ @@ -33,7 +35,7 @@ dali.stage.add( label ); ~~~ The label must also be added to the stage, or to an actor which is on the stage. -The position of the label on-screen is dependent on the parent-origin and anchor-point properties. +The position of the label on-screen is dependent on the parentOrigin and anchorPoint properties. | | | |--|--| @@ -43,6 +45,10 @@ The position of the label on-screen is dependent on the parent-origin and anchor 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: @@ -83,6 +89,30 @@ 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 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. @@ -201,8 +231,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++ @@ -212,16 +241,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} @@ -233,16 +265,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; ~~~ @@ -310,26 +345,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 +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