×
Namespaces

Variants
Actions
(Difference between revisions)

How to dynamically change font size in Web Runtime widgets

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Automated change of category from Web Runtime (WRT) to Symbian Web Runtime)
hamishwillee (Talk | contribs)
m (Hamishwillee - Tidy wiki text)
 
(3 intermediate revisions by one user not shown)
Line 1: Line 1:
{{ReviewerApproved}}
+
[[Category:Code Examples]][[Category:Symbian Web Runtime]][[Category:How To]][[Category:Usability]]
'''Bold text'''[[Category:Code Examples]][[Category:Symbian Web Runtime]][[Category:How To]][[Category:Usability]]
+
{{Abstract|This article explains how to implement dynamic font sizes in a Symbian Web Runtime widget.}}
This article explains '''how to implement dynamic font sizes in a Web Runtime widget'''.
+
 
 +
{{ArticleMetaData <!-- v1.1 -->
 +
|sourcecode= [[Media:FontSizeChangerWidget.zip]]
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|id= <!-- Article Id (Knowledge base articles only) -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20090614
 +
|author= [[User:Jappit]]
 +
}}
  
 
[[Image:Wrt_dynamic_fontsizes.png]]
 
[[Image:Wrt_dynamic_fontsizes.png]]
Line 7: Line 30:
 
==Description==
 
==Description==
 
This approach is useful in situations where '''the user wants to change the widget's font size''' according to its own preferences and needs. Sample scenarios include:
 
This approach is useful in situations where '''the user wants to change the widget's font size''' according to its own preferences and needs. Sample scenarios include:
* '''visually impaired users''', who can't read small texts
+
* visually impaired users, who can't read small texts
* '''users in mobility''' that want to easily read the widget's contents, may want to increase the font size
+
* users in mobility that want to easily read the widget's contents, may want to increase the font size
* '''users that want to display more information''' at once, so decreasing the overall font size
+
* users that want to display more information at once, so decreasing the overall font size
  
This article presents '''three different approaches''' allowing the user to dynamically choose and set his preferred font size. Approaches '''can be used singularly, or be combined to obtain more complex results'''.
+
This article presents three different approaches allowing the user to dynamically choose and set his preferred font size. Approaches can be used singularly, or be combined to obtain more complex results.
  
 
==Widget's base HTML code==
 
==Widget's base HTML code==
The '''sample widget''' used to show the different techniques contains the following '''HTML code''':
+
The sample widget used to show the different techniques contains the following HTML code:
 
<code html4strict>
 
<code html4strict>
 
<html>
 
<html>
Line 31: Line 54:
 
==Techniques for dynamic font size change==
 
==Techniques for dynamic font size change==
 
===Changing the base font size===
 
===Changing the base font size===
The first presented technique consists in changing the base font size of a widget. Typically, this means '''changing the font size of the body element'''.
+
The first presented technique consists in changing the base font size of a widget. Typically, this means changing the font size of the body element.
In order for this technique to correctly work, '''all font sizes must be expressed in relative units of measure''', so using '''em or percentages values'''. If absolute units of measures (e.g.: '''pt or px''') are used for some elements, the font size of these elements will not be changed using this technique.
+
In order for this technique to correctly work, all font sizes must be expressed in relative units of measure, so using em or percentages values. If absolute units of measures (e.g.: '''pt or px''') are used for some elements, the font size of these elements will not be changed using this technique.
 
====CSS code====
 
====CSS code====
The following '''CSS style sheet is applied to the HTML code''' seen above:
+
The following CSS style sheet is applied to the HTML code seen above:
 
<code css>
 
<code css>
 
h1 {
 
h1 {
Line 97: Line 120:
 
}
 
}
 
</code>
 
</code>
* '''Style sheet for Medium font size (fontsize_1.css)'''
+
* Style sheet for Medium font size (fontsize_1.css)
 
<code css>
 
<code css>
 
h1 {
 
h1 {
Line 114: Line 137:
 
}
 
}
 
</code>
 
</code>
* '''Style sheet for Large font size (fontsize_2.css)'''
+
* Style sheet for Large font size (fontsize_2.css)
 
<code css>
 
<code css>
 
h1 {
 
h1 {
Line 132: Line 155:
 
</code>
 
</code>
 
====The HTML code====
 
====The HTML code====
First, the '''3 style sheets need to be added to the widget's HTML code''', and this is done with the following HTML snippet:
+
First, the 3 style sheets need to be added to the widget's HTML code, and this is done with the following HTML snippet:
 
<code html4strict>
 
<code html4strict>
 
<html>
 
<html>
Line 146: Line 169:
 
</html>
 
</html>
 
</code>
 
</code>
Then, '''user interaction''' must be added to the widget, to allow the user to switch the active style sheet.
+
Then, user interaction must be added to the widget, to allow the user to switch the active style sheet.
 
<code html4strict>
 
<code html4strict>
 
<h2>Select one of these buttons to switch the active stylesheet:</h2>
 
<h2>Select one of these buttons to switch the active stylesheet:</h2>
Line 166: Line 189:
 
}
 
}
 
</code>
 
</code>
So, the '''2nd and 3rd style sheets are disabled''', leaving the first one ('''fontsize_0.css''') as the initially active style sheet.
+
So, the 2nd and 3rd style sheets are disabled, leaving the first one ('''fontsize_0.css''') as the initially active style sheet.
 +
 
 
=====Changing the active style sheet=====
 
=====Changing the active style sheet=====
In order to change the active style sheet, the '''switchStyleSheet()''' function was defined in the widget's HTML code. This function can be implemented as follows:
+
In order to change the active style sheet, the {{Icode|switchStyleSheet()}} function was defined in the widget's HTML code. This function can be implemented as follows:
 
<code javascript>
 
<code javascript>
 
function switchStyleSheet(sizeIndex)
 
function switchStyleSheet(sizeIndex)
Line 178: Line 202:
 
}
 
}
 
</code>
 
</code>
The '''switchStyleSheet()''' function just enable the specified style sheet, disabling all the other ones.
+
The {{Icode|switchStyleSheet()}} function just enable the specified style sheet, disabling all the other ones.
 +
 
 
====Result====
 
====Result====
This approach offers a '''greater level of control on font sizes''' than the previous presented technique, since it '''allows to explicitly set the font size of each element''' in each style sheet included in the widget. For this reason, '''font sizes proportions are not automatically maintained''', since it's up to the widget's designer/developer to define the font sizes in each different style sheet.
+
This approach offers a greater level of control on font sizes than the previous presented technique, since it allows to explicitly set the font size of each element in each style sheet included in the widget. For this reason, '''font sizes proportions are not automatically maintained''', since it's up to the widget's designer/developer to define the font sizes in each different style sheet.
 +
 
 
===Changing the font size of specific elements via JavaScript===
 
===Changing the font size of specific elements via JavaScript===
The previous techniques showed how to change the font size of whole widgets. This technique shows '''how to change font size of specific elements''', by using JavaScript.
+
The previous techniques showed how to change the font size of whole widgets. This technique shows how to change font size of specific elements, by using JavaScript.
 +
 
 
====CSS code====
 
====CSS code====
 
Let's take back the CSS code of the first presented approach:
 
Let's take back the CSS code of the first presented approach:
Line 202: Line 229:
 
</code>
 
</code>
 
====The JavaScript code====
 
====The JavaScript code====
Now, let's say that the '''user needs to modify the font size of the input fields''', leaving all the other sizes untouched. This can be done by the following JavaScript function:
+
Now, let's say that the user needs to modify the font size of the input fields, leaving all the other sizes untouched. This can be done by the following JavaScript function:
 
<code javascript>
 
<code javascript>
 
function setJSFontSize(sizeIndex)
 
function setJSFontSize(sizeIndex)
Line 229: Line 256:
 
}
 
}
 
</code>
 
</code>
The '''setJSFontSize()''' takes all the '''input''' nodes in the widget's DOM structure, and then '''applies the desired font size only to these elements'''.
+
The {{Icode|setJSFontSize()}} takes all the '''input''' nodes in the widget's DOM structure, and then applies the desired font size only to these elements.
 
====Adding user interaction====
 
====Adding user interaction====
'''3 buttons''' are added in order to allow user interaction:
+
3 buttons are added in order to allow user interaction:
 
<code html4strict>
 
<code html4strict>
 
<h2>Select one of these buttons to change buttons' font size via JavaScript:</h2>
 
<h2>Select one of these buttons to change buttons' font size via JavaScript:</h2>
Line 241: Line 268:
 
<input type="submit" onclick="setJSFontSize(2)" value="Large" />
 
<input type="submit" onclick="setJSFontSize(2)" value="Large" />
 
</code>
 
</code>
 +
 
====Result====
 
====Result====
This approach offers the '''greatest level of control over the font sizes''' of single HTML elements, but it is also '''more complex to implement and maintain''', since it uses JavaScript code to explicitly set the specific font sizes. So, it is preferable to use this approach only when really needed, preferring the 2 previous techniques in all the other scenarios
+
This approach offers the '''greatest level of control over the font sizes''' of single HTML elements, but it is also more complex to implement and maintain, since it uses JavaScript code to explicitly set the specific font sizes. So, it is preferable to use this approach only when really needed, preferring the 2 previous techniques in all the other scenarios
  
 
==Download==
 
==Download==
 
A sample widget, that shows all the techniques presented in this article, can be downloaded from this link: [[Media:FontSizeChangerWidget.zip]]
 
A sample widget, that shows all the techniques presented in this article, can be downloaded from this link: [[Media:FontSizeChangerWidget.zip]]

Latest revision as of 07:59, 10 February 2012

This article explains how to implement dynamic font sizes in a Symbian Web Runtime widget.

Article Metadata
Code ExampleArticle
Created: jappit (14 Jun 2009)
Last edited: hamishwillee (10 Feb 2012)

Wrt dynamic fontsizes.png

Contents

[edit] Description

This approach is useful in situations where the user wants to change the widget's font size according to its own preferences and needs. Sample scenarios include:

  • visually impaired users, who can't read small texts
  • users in mobility that want to easily read the widget's contents, may want to increase the font size
  • users that want to display more information at once, so decreasing the overall font size

This article presents three different approaches allowing the user to dynamically choose and set his preferred font size. Approaches can be used singularly, or be combined to obtain more complex results.

[edit] Widget's base HTML code

The sample widget used to show the different techniques contains the following HTML code:

<html>
[...]
 
<body>
<h1>Page heading</h1>
<div>
<p>This <strong>Web Runtime widget</strong>
explains how to dynamically change <em>font size</em>.</p>
</div>
</body>
</html>

[edit] Techniques for dynamic font size change

[edit] Changing the base font size

The first presented technique consists in changing the base font size of a widget. Typically, this means changing the font size of the body element. In order for this technique to correctly work, all font sizes must be expressed in relative units of measure, so using em or percentages values. If absolute units of measures (e.g.: pt or px) are used for some elements, the font size of these elements will not be changed using this technique.

[edit] CSS code

The following CSS style sheet is applied to the HTML code seen above:

h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
 
p {
font-size: 1em;
}
 
input {
font-size: 0.8em;
}

So, the CSS contains all font-sizes specified using relative units of measure.

[edit] The JavaScript code

In order to change the base font size of this widget, it's enough to change the font size of the body element. Since this has to be done dynamically, the following setBaseFontSize() JavaScript function is defined:

function setBaseFontSize(sizeIndex)
{
document.body.style.fontSize = (100 + sizeIndex * 50) + '%';
}

[edit] Adding user interaction

In order to allow the users to change the font size, 3 buttons are added to the widget's user interface, so adding this HTML snippet to widget's code:

[...]
 
<h2>Select one of these buttons to modify base stylesheet:</h2>
 
<input type="submit" onclick="setBaseFontSize(0)" value="Small" />
 
<input type="submit" onclick="setBaseFontSize(1)" value="Medium" />
 
<input type="submit" onclick="setBaseFontSize(2)" value="Large" />

[edit] Result

This technique allow to easily change all the font sizes expressed by using relative unit of measures, by simply changing the body element's font size. With this approach, proportions among font sizes of different elements are always maintained, since relative units are used.

[edit] Switching the active style sheet

This technique works by using multiple style sheets, one for each different set of font-sizes, and allows the user to dynamically switch the currently active style sheet. This approach does not need font sizes to be expressed using relative unit of measures, even if it is always good practice to use them.

[edit] CSS code

Since this approach works by using multiple style sheets, let's build 3 different CSS files, that will be dynamically switched.

  • Style sheet for Small font size (fontsize_0.css)
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
 
p {
font-size: 1em;
}
 
input {
font-size: 0.8em;
}
  • Style sheet for Medium font size (fontsize_1.css)
h1 {
font-size: 3em;
}
h2 {
font-size: 2em;
}
 
p {
font-size: 1.5em;
}
 
input {
font-size: 1em;
}
  • Style sheet for Large font size (fontsize_2.css)
h1 {
font-size: 4em;
}
h2 {
font-size: 3em;
}
 
p {
font-size: 2em;
}
 
input {
font-size: 1.5em;
}

[edit] The HTML code

First, the 3 style sheets need to be added to the widget's HTML code, and this is done with the following HTML snippet:

<html>
<head>
[...]
 
<link rel="stylesheet" href="fontsize_0.css" type="text/css">
<link rel="stylesheet" href="fontsize_1.css" type="text/css">
<link rel="stylesheet" href="fontsize_2.css" type="text/css">
</head>
 
[...]
</html>

Then, user interaction must be added to the widget, to allow the user to switch the active style sheet.

			<h2>Select one of these buttons to switch the active stylesheet:</h2>
 
<input type="submit" onclick="switchStyleSheet(0)" value="Small" />
 
<input type="submit" onclick="switchStyleSheet(1)" value="Medium" />
 
<input type="submit" onclick="switchStyleSheet(2)" value="Large" />

[edit] The JavaScript code

[edit] Enabling the default style sheet

Since multiple style sheets are defined within this widget, the first thing the widgets need to do is to choose a default one, and to disable all the others. This is typically done in the widget's onload event, and can be performed with the following JavaScript code:

function init()
{
document.styleSheets[1].disabled = true;
document.styleSheets[2].disabled = true;
}

So, the 2nd and 3rd style sheets are disabled, leaving the first one (fontsize_0.css) as the initially active style sheet.

[edit] Changing the active style sheet

In order to change the active style sheet, the switchStyleSheet() function was defined in the widget's HTML code. This function can be implemented as follows:

function switchStyleSheet(sizeIndex)
{
for(var i = 0; i < 3; i++)
{
document.styleSheets[i].disabled = (sizeIndex != i);
}
}

The switchStyleSheet() function just enable the specified style sheet, disabling all the other ones.

[edit] Result

This approach offers a greater level of control on font sizes than the previous presented technique, since it allows to explicitly set the font size of each element in each style sheet included in the widget. For this reason, font sizes proportions are not automatically maintained, since it's up to the widget's designer/developer to define the font sizes in each different style sheet.

[edit] Changing the font size of specific elements via JavaScript

The previous techniques showed how to change the font size of whole widgets. This technique shows how to change font size of specific elements, by using JavaScript.

[edit] CSS code

Let's take back the CSS code of the first presented approach:

h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
 
p {
font-size: 1em;
}
 
input {
font-size: 0.8em;
}

[edit] The JavaScript code

Now, let's say that the user needs to modify the font size of the input fields, leaving all the other sizes untouched. This can be done by the following JavaScript function:

function setJSFontSize(sizeIndex)
{
var inputs = document.getElementsByTagName('input');
 
var fontSize;
 
switch(sizeIndex)
{
case 0:
fontSize = '1em';
break;
case 1:
fontSize = '1.5em';
break;
case 2:
fontSize = '2em';
break;
}
 
for(var i = 0; i < inputs.length; i++)
{
inputs[i].style.fontSize = fontSize;
}
}

The setJSFontSize() takes all the input nodes in the widget's DOM structure, and then applies the desired font size only to these elements.

[edit] Adding user interaction

3 buttons are added in order to allow user interaction:

			<h2>Select one of these buttons to change buttons' font size via JavaScript:</h2>
 
<input type="submit" onclick="setJSFontSize(0)" value="Small" />
 
<input type="submit" onclick="setJSFontSize(1)" value="Medium" />
 
<input type="submit" onclick="setJSFontSize(2)" value="Large" />

[edit] Result

This approach offers the greatest level of control over the font sizes of single HTML elements, but it is also more complex to implement and maintain, since it uses JavaScript code to explicitly set the specific font sizes. So, it is preferable to use this approach only when really needed, preferring the 2 previous techniques in all the other scenarios

[edit] Download

A sample widget, that shows all the techniques presented in this article, can be downloaded from this link: Media:FontSizeChangerWidget.zip

This page was last modified on 10 February 2012, at 07:59.
166 page views in the last 30 days.
×