docs/content/shared-javascript-and-cpp-documentation/markup-style.md

   1 <!--
   2 /**-->
   3
   4 # Mark-up Style {#markup-style}
   5
   6 Mark-up tags can be used within the text to set styles.
   7
   8 By default the text controls don't process the mark-up string. To enable the mark-up string processing the property *ENABLE_MARKUP* must be set to *true*.
   9
  10 ~~~{.cpp}
  11 // C++
  12
  13 TextField field = TextField::New();
  14 field.SetProperty( TextField::Property::ENABLE_MARKUP, true );
  15
  16 Stage::GetCurrent().Add( field );
  17 ~~~
  18
  19 ~~~{.js}
  20 // JavaScript
  21
  22 var field = new dali.TextField();
  23 field.enableMarkup = true;
  24
  25 dali.stage.add( field );
  26 ~~~
  27
  28 Note the mark-up processor doesn't check the correctness of the mark-up string. This may
  29 cause the text to be badly rendered.
  30
  31 The table below describes the priorities when styles are applied while rendering text.
  32 |  |  |  |  |
  33 |--|--|--|--|
  34 | Priority 1 | Style set by markup string. | Will override the style set through the control properties. | i.e The \<color\> tag will override the *TEXT_COLOR* property. |
  35 | Priority 2 | Style set through the control properties. | Will override the default platform style. |  |
  36 | Priority 3 | Default platform style. |  |  |
  37
  38 Font size has slightly different priorities - the size provided by the platform is a logical
  39 size, and can be mapped to physical point sizes using style sheets. There is a default set of
  40 sizes defined for DALi, and these can be overridden by application specific stylesheets. Thus
  41 the priorities are:
  42
  43 |  |  |  |
  44 |--|--|--|
  45 | Priority 1 | Size set by markup string. | Will override the style set through the stylesheets. |
  46 | Priority 2 | Physical Size set by application style sheet | |
  47 | Priority 2 | Logical Size set by application style sheet | Mapping from platform logical to physical |
  48 | Priority 3 | Logical Size set by DALi style sheet | Mapping from platform logical to physical |
  49
  50 See [Font Selection](@ref font-selection) for more details.
  51
  52 Current supported tags are:
  53
  54 ## \<color\>
  55
  56 Sets the color of the characters inside the tag. The *color* tag has a *value* attribute used to set the color. Possible values are: 'red', 'green', 'blue', 'yellow', 'magenta',
  57  'cyan', 'white', 'black' and 'transparent'. Web color and 32 bits hexadecimal 0xAARRGGBB formats are also supported.
  58
  59 Examples below are equivalent, render the text in red. Second example codes the color in 0xAARRGGBB, third and fourth in web color with 3 and 6 characters.
  60
  61 ~~~{.cpp}
  62 // C++
  63 field.SetProperty( TextLabel::Property::TEXT, "<color value='red'>Red Text</color>" ); // Color coded with a text constant.
  64 ~~~
  65
  66 ~~~{.js}
  67 // JavaScript
  68
  69 field.text = "<color value='red'>Red Text</color>"; // Color coded with a text constant.
  70 ~~~
  71
  72 ~~~{.cpp}
  73 // C++
  74 field.SetProperty( TextLabel::Property::TEXT, "<color value='0xFFFF0000'>Red Text</color>" ); // Color packed inside an ARGB hexadecimal value.
  75 ~~~
  76
  77 ~~~{.js}
  78 // JavaScript
  79
  80 field.text = "<color value='0xFFFF0000'>Red Text</color>"; // Color packed inside an ARGB hexadecimal value.
  81 ~~~
  82
  83 ~~~{.cpp}
  84 // C++
  85 field.SetProperty( TextLabel::Property::TEXT, "<color value='#F00'>Red Text</color>" ); // Color packed with the web color format (3 characters).
  86 ~~~
  87
  88 ~~~{.js}
  89 // JavaScript
  90
  91 field.text = "<color value='#F00'>Red Text</color>"; // Color packed with the web color format (3 characters).
  92 ~~~
  93
  94 ~~~{.cpp}
  95 // C++
  96 field.SetProperty( TextLabel::Property::TEXT, "<color value='#FF0000'>Red Text</color>" ); // Color packed with the web color format (6 characters).
  97 ~~~
  98
  99 ~~~{.js}
 100 // JavaScript
 101
 102 field.text = "<color value='#FF0000'>Red Text</color>"; // Color packed with the web color format (6 characters).
 103 ~~~
 104
 105 ## \<font\>
 106
 107 Sets the font values of the characters inside the tag.
 108
 109 Supported attributes are:
 110 - *family* The name of the font.
 111 - *size* The size of the font in points.
 112 - *weight* The weight of the font.
 113 - *width* The width of the font
 114 - *slant* The slant of the font.
 115
 116 See the [Font Selection](@ref font-selection) to have a view of the possible values for the *weight*, *width* and *slant* attributes.
 117
 118 ~~~{.cpp}
 119 // C++
 120 field.SetProperty( TextLabel::Property::TEXT, "<font family='SamsungSans' weight='bold'>Hello world</font>" );
 121 ~~~
 122
 123 ~~~{.js}
 124 // JavaScript
 125
 126 field.text = "<font family='SamsungSans' weight='bold'>Hello world</font>";
 127 ~~~
 128
 129 ## XHTML ENTITIES
 130
 131 Single characters can be embedded into text using character entity references. These references have a numeric value as well as a named value.
 132 You can use either one of them.
 133
 134 XHTML ENTITIES Format:
 135 - Named reference : "&entity_name;" (i.e. an ampersand, the entity name, and then a semi-colon).
 136 - Numeric reference:
 137 - a. Decimal reference : "&#decimal_code;" (i.e. an ampersand, a hash symbol (which signals that a number reference is coming), the character's number, and then a semi colon)
 138 - b. Hex reference     : "&#xhex-code;" (i.e. an ampersand, a hash symbol (which signals that a number reference is coming), x which indicates the character's number is in hex, and then a semi colon)
 139
 140
 141 ~~~{.cpp}
 142 // C++
 143 field.SetProperty( TextLabel::Property::TEXT, "Named Entity: &amp;  Numeric Entity: Decimal Entity: &#9827;  Hex Entity: &#x2660;" );
 144 ~~~
 145
 146 ![ ](XHTML_entity.png)
 147
 148 ## SPECIAL CHARACTERS HANDLING IN MARKUP
 149
 150 Three special characters are supported :
 151 - < : Less Than. It means beginning of tag.
 152 - > : Greater Than. It means end of tag.
 153 - & : Ampersand. It means beginning of XHTML Entity.
 154
 155 > "&" usage in markup style changed from Tizen 4.0.
 156 "To display special character needs as regular, prepend it with two backslashes in the string."
 157
 158 Below are some examples
 159
 160 ~~~{.cpp}
 161 // C++ ( Wrong usage to print text "Testing of < special character" )
 162 field.SetProperty( TextLabel::Property::TEXT, "Testing of < special character" );
 163 ~~~
 164
 165 ![ ](SpecialCharacter1.png)
 166
 167 ~~~{.cpp}
 168 // C++ ( Wrong usage to print text "Testing of & special character" )
 169 field.SetProperty( TextLabel::Property::TEXT, "Testing of & special character" );
 170 ~~~
 171
 172 ![ ](SpecialCharacter1.png)
 173
 174 ~~~{.cpp}
 175 // C++ ( Correct usage to print text "Testing of & < > special characters" )
 176 field.SetProperty( TextLabel::Property::TEXT, "Testing of \\& \\< \\> special characters" );
 177 ~~~
 178
 179 ![ ](SpecialCharacters.png)
 180
 181 */