WAP Service Developer's Guide for Nokia Series 40
Version 1.0
Copyright © 2002. Nokia Corporation. All rights reserved.
14
4 WML ELEMENTS FOR THE NOKIA USER INTERFACE
This chapter is a guide for using WML 1.3 in designing services for Series 40 phones.
It is an overview of general graphical user interface elements, that is, the WML
elements that are critical from the point of view of rendering and the WML
capabilities supported by the browser. All the elements introduced here are
supported in every Series 40 Nokia phone introduced in this document. However, this
chapter does not include all possible WML elements and attributes. WAP service
developers should especially pay attention to sections 4.2 Table and 4.3 Images
when optimising their existing services.
The WML elements are shortly described and demonstrated with the use of
screenshots. The code examples include only the essential part in using the
elements. i.e. they are not valid WML documents in itself.
4.1 Text formatting
The contents of a WML card are displayed in the card view. The card is a container of
text, images, tables, and input elements. The order of elements in a card is
significant, as they appear on the screen in the same order.
4.1.1 Paragraph and content alignment
The paragraph element, <p>, enables word wrapping and content alignment. A
paragraph always starts on a new line. Normal static text information is always
wrapped on a display, unless word wrapping is set off in browser settings.
Insignificant white space is ignored. If more than one white space separates the
constituents of a text, these white spaces are ignored unless the <pre> element is
used. See section 4.1.4 for more information on the pre element.
Content inside a paragraph can be aligned to the left, centre, or right by option; left
alignment is displayed by default. Alignment is determined in paragraph attributes
(for example, <p align="right">). Word wrapping can be set to wrap or
nowrap by using the mode attribute in paragraph.
Example 4-1 Alignment <align>
<p align="center">
Align "center"
</p>
<p align="right">
Align "right"
</p>
<p align="right">
<img alt="8310" src="file://…/7210.wbmp" align="top"
hspace="0" vspace="0"/>
</p>