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 cause the text to be badly rendered.
  29
  30 The table below describes the priorities when styles are applied while rendering text.
  31 |  |  |  |  |
  32 |--|--|--|--|
  33 | 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. |
  34 | Priority 2 | Style set through the control properties. | Will override the default platform style. |  |
  35 | Priority 3 | Default platform style. |  |  |
  36
  37 Current supported tags are:
  38
  39 ## \<color\>
  40
  41 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',
  42  'cyan', 'white', 'black' and 'transparent'. Web color and 32 bits hexadecimal 0xAARRGGBB formats are also supported.
  43
  44 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.
  45
  46 ~~~{.cpp}
  47 // C++
  48 field.SetProperty( TextLabel::Property::TEXT, "<color value='red'>Red Text</color>" ); // Color coded with a text constant.
  49 ~~~
  50
  51 ~~~{.js}
  52 // JavaScript
  53
  54 field.text = "<color value='red'>Red Text</color>"; // Color coded with a text constant.
  55 ~~~
  56
  57 ~~~{.cpp}
  58 // C++
  59 field.SetProperty( TextLabel::Property::TEXT, "<color value='0xFFFF0000'>Red Text</color>" ); // Color packed inside an ARGB hexadecimal value.
  60 ~~~
  61
  62 ~~~{.js}
  63 // JavaScript
  64
  65 field.text = "<color value='0xFFFF0000'>Red Text</color>"; // Color packed inside an ARGB hexadecimal value.
  66 ~~~
  67
  68 ~~~{.cpp}
  69 // C++
  70 field.SetProperty( TextLabel::Property::TEXT, "<color value='#F00'>Red Text</color>" ); // Color packed with the web color format (3 characters).
  71 ~~~
  72
  73 ~~~{.js}
  74 // JavaScript
  75
  76 field.text = "<color value='#F00'>Red Text</color>"; // Color packed with the web color format (3 characters).
  77 ~~~
  78
  79 ~~~{.cpp}
  80 // C++
  81 field.SetProperty( TextLabel::Property::TEXT, "<color value='#FF0000'>Red Text</color>" ); // Color packed with the web color format (6 characters).
  82 ~~~
  83
  84 ~~~{.js}
  85 // JavaScript
  86
  87 field.text = "<color value='#FF0000'>Red Text</color>"; // Color packed with the web color format (6 characters).
  88 ~~~
  89
  90 ## \<font\>
  91
  92 Sets the font values of the characters inside the tag.
  93
  94 Supported attributes are:
  95 - *family* The name of the font.
  96 - *size* The size of the font in points.
  97 - *weight* The weight of the font.
  98 - *width* The width of the font
  99 - *slant* The slant of the font.
 100
 101 See the [Font Selection](@ref font-selection) to have a view of the possible values for the *weight*, *width* and *slant* attributes.
 102
 103 ~~~{.cpp}
 104 // C++
 105 field.SetProperty( TextLabel::Property::TEXT, "<font family='SamsungSans' weight='bold'>Hello world</font>" );
 106 ~~~
 107
 108 ~~~{.js}
 109 // JavaScript
 110
 111 field.text = "<font family='SamsungSans' weight='bold'>Hello world</font>";
 112 ~~~
 113
 114 */