X-Git-Url: http://review.tizen.org/git/?a=blobdiff_plain;f=docs%2Fcontent%2Fshared-javascript-and-cpp-documentation%2Ffont-selection.md;h=d2bda2de2d99ba3a60f8742ec47a15161ef9dc97;hb=5af1500ee4cbc72412934b8b7c7dc4ec0c206405;hp=348bf1bf66ba89732e9befb972282c0e5121fdc6;hpb=1b336183abff212ad9e88725bb349492afee10c2;p=platform%2Fcore%2Fuifw%2Fdali-toolkit.git 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..d2bda2d 100644 --- 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* @@ -70,7 +70,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 +91,22 @@ 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 +116,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 +125,61 @@ 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. + */