Fix the text visual shader which makes text lighter while containing emoji

[platform/core/uifw/dali-toolkit.git] / docs / content / shared-javascript-and-cpp-documentation / font-selection.md

diff --git a/docs/content/shared-javascript-and-cpp-documentation/font-selection.md b/docs/content/shared-javascript-and-cpp-documentation/font-selection.md
index 348bf1b..f7855fe 100644 (file)
--- a/docs/content/shared-javascript-and-cpp-documentation/font-selection.md
+++ b/docs/content/shared-javascript-and-cpp-documentation/font-selection.md
@@ -14,34 +14,34 @@ Alternatively a font may be requested using either or all of FONT_FAMILY, FONT_S
 - FONT_STYLE
   Is a json formatted string with the font's style. Possible *key, value* pairs are:
   + *width* Modifies the space between glyphs. Possible values are:
-    - *ultra-condensed*
-    - *extra-condensed*
+    - *ultraCondensed*
+    - *extraCondensed*
     - *condensed*
-    - *semi-condensed*
+    - *semiCondensed*
     - *normal*
-    - *semi-expanded*
+    - *semiExpanded*
     - *expanded*
-    - *extra-expanded*
-    - *ultra-expanded*
+    - *extraExpanded*
+    - *ultraExpanded*
   + *weight* Modifies the thickness or darkness of the glyphs. Possible values are:
     - *thin*
-    - *ultra-light*
-    - *extra-light*
+    - *ultraLight*
+    - *extraLight*
     - *light*
-    - *demi-light*
-    - *semi-light*
+    - *demiLight*
+    - *semiLight*
     - *book*
     - *normal*
     - *regular*
     - *medium*
-    - *demi-bold*
-    - *semi-bold*
+    - *demiBold*
+    - *semiBold*
     - *bold*
-    - *ultra-bold*
-    - *extra-bold*
+    - *ultraBold*
+    - *extraBold*
     - *black*
     - *heavy*
-    - *extra-black*
+    - *extraBlack*
   + *slant* Whether to use italics. Usually *italic* is a different font whilst the *oblique* has been generated by slanting the *normal* one. Possible values are:
     - *normal*
     - *roman* Same as *normal*
@@ -54,7 +54,9 @@ Alternatively a font may be requested using either or all of FONT_FAMILY, FONT_S
 // C++
 
 label.SetProperty( TextLabel::Property::FONT_FAMILY, "FreeSerif" );
-label.SetProperty( TextLabel::Property::FONT_STYLE,  "{\"weight\":\"bold\",\"slant\":\"italic\"}" );
+label.SetProperty( TextLabel::Property::FONT_STYLE,
+                   Property::Map().Add( "weight", "bold" )
+                                  .Add( "slant", "italic" ) );
 label.SetProperty( TextLabel::Property::POINT_SIZE,  12.0f );
 ~~~
 
@@ -62,7 +64,10 @@ label.SetProperty( TextLabel::Property::POINT_SIZE,  12.0f );
 // JavaScript
 
 label.fontFamily = "FreeSerif";
-label.fontStyle = "{\"weight\":\"bold\",\"slant\":\"italic\"}";
+label.fontStyle = {
+                    "weight" : "bold",
+                    "slant"  : "italic"
+                  };
 label.pointSize = 12;
 ~~~
 
@@ -70,7 +75,11 @@ However the text control will fall-back to using the default font, if the reques
 
 ### Font Styles
 
-Setting a font size programmatically is not ideal for applications which support multiple screen resolutions etc.
+Setting a font size programmatically is not ideal for applications which support multiple
+screen resolutions and platforms which support multiple logical font sizes.  Also, any
+changes to the platform font settings will override any sizes that have been programmatically
+set.
+
 A more flexible approach is to prepare various JSON stylesheets, and request a different style for each platform:
 
 ~~~{.cpp}
@@ -87,16 +96,26 @@ To change the font for standard text controls, this JSON syntax can be used:
   {
     "textlabel":
     {
-      "font-family":"FreeSerif",
-      "font-style":"{\"weight\":\"bold\",\"slant\":\"italic\"}",
-      "point-size":8
+      "fontFamily":"FreeSerif",
+      "fontStyle":
+      {
+        "weight":"bold",
+        "slant":"italic"
+      },
+      "pointSize":8
     }
   }
 }
 ~~~
 
-However the same point-size is unlikely to be suitable for all text controls in an application.
-To set custom sizes simply set a "style name" for each case, and then provide a style override in JSON:
+However the same pointSize is unlikely to be suitable for all text controls in an application.
+To define custom styles for existing controls, simply set a style name for each case, and
+then provide a style override in JSON.
+
+To provide flexibility for the end user, the platform offers a mechanism to alter the logical
+font size between 0 and 4 inclusive. This logical size is mapped to a physical size using the
+stylesheets, by appending FontSizeN to the style name. These sections ("textlabelFontSizeN")
+in the style sheet are applied after the base section ("textlabel"), so take precedence.
 
 ~~~{.cpp}
   // C++
@@ -106,7 +125,7 @@ To set custom sizes simply set a "style name" for each case, and then provide a
 ~~~{.js}
   // JavaScript
 
-  label.styleName = "custom"';
+  label.styleName = "customLabel"';
 ~~~
 
 ~~~{.json}
@@ -115,19 +134,69 @@ To set custom sizes simply set a "style name" for each case, and then provide a
   {
     "textlabel":
     {
-      "font-family":"FreeSerif",
-      "font-style":"{\"weight\":\"bold\",\"slant\":\"italic\"}",
-      "point-size":8
+      "fontFamily":"FreeSerif",
+      "fontStyle":
+      {
+        "weight":"bold",
+        "slant":"italic"
+      },
+    },
+
+    "textlabelFontSize0":
+    {
+      "pointSize":8
+    },
+    "textlabelFontSize1":
+    {
+      "pointSize":10
+    },
+    "textlabelFontSize2":
+    {
+      "pointSize":15
+    },
+    "textlabelFontSize3":
+    {
+      "pointSize":19
+    },
+    "textlabelFontSize4":
+    {
+      "pointSize":25
     },
 
-    "custom":
+    "customLabel":
+    {
+      "fontFamily":"TimesNewRoman",
+      "fontStyle":
+      {
+        "weight":"regular",
+        "slant":"regular"
+      },
+    },
+    "customLabelFontSize0":
+    {
+      "pointSize":10
+    },
+    "customLabelFontSize1":
+    {
+      "pointSize":12
+    },
+    "customLabelFontSize2":
+    {
+      "pointSize":15
+    },
+    "customLabelFontSize3":
     {
-      "point-size":10
+      "pointSize":20
+    },
+    "customLabelFontSize4":
+    {
+      "pointSize":28
     }
   }
 }
 ~~~
 
-In the example above, standard text labels will have point-size 8, and "custom" labels will have point-size 10.
+In the example above, at platform logical text size 0, standard text labels will have pointSize 8, and custom labels will have pointSize 10.
+
 
 */