Layout
Like HTML, WML does not intend to convey detailed, physical page layout. This kind of text layout is delivered by desktop publishing software. It requires very detailed instructions on where text and graphics appear, the layout appears the same on all devices that support it, and the result usually has steep requirements for the viewing software.
WML layout is logical layout of text and graphics on the browser screen. This type of layout simply loosely describes the arrangement of text and graphics, allowing the browser to interpret the arrangement and produce the best physical results it can. This layout requires far less specification of items on the screen, does not appear the same on all devices, and imposes fewer demands on the browser.
This section walks you through the layout elements that WML provides. I will show you how to use the wrapping and alignment controls for paragraphs, insert manual line breaks, create tables, and display preformatted text.
Handling Wrapping and Alignment
In addition to being the principal element for delivering wrapping output to the browser, the <p> element allows you to control the layout of the text with its align and mode attributes. Both attributes require enumerated values as described in the following snippet from the DTD:
<!ENTITY % TAlign "(left|right|center)">
<!ENTITY % WrapMode "(wrap|nowrap)" >
<!ATTLIST p
align %TAlign; "left"
mode %WrapMode; #IMPLIED
xml:lang NMTOKEN #IMPLIED
%coreattrs;
>
The align attribute tells the browser to justify the lines of text within the paragraph to the left or right sides of the display, or to center the text. By default, the browser aligns paragraphs left.
The mode attribute tells the display to allow long lines to flow on to the next line or not with its wrap and nowrap values. By default, this attribute is set to wrap for the first paragraph on a card. A paragraph that does not specify its mode attribute inherits the value from the previous paragraph on the card.
When word wrapping is disabled, the browser must attempt to display all of each logical line on the same physical line of the display. When the paragraph has word wrapping enabled, the browser can insert a line break into the actual output when appropriate.
A browser can insert a line break in place of any inter-word white space. You can place the nonbreaking space ( ) entity between words to override this behavior in place of white space. Listing 5.7 shows example cards that show these paragraph styles.
Listing 5.7 Demonstrating the Various Paragraph Alignment and Wrapping Modes
The deck in Listing 5.7 is straightforward; it contains a card that demonstrates paragraph alignment and a card that demonstrates wrapping modes. The alignment demonstration card has three one-line paragraphs that show left, right, and center alignment of text. The wrapping demonstration card has one paragraph with lines that do not wrap and one with lines that do.
Both paragraphs from Listing 5.7 have lines of identical width to illustrate the difference. You can see the results of the deck in Figure 5.5.
Figure 5.5. Using the alignment and wrapping attributes of paragraphs.
To be practical, the paragraph's alignment tag becomes relatively meaningless on most long lines when wrapping is disabled. Since WML browsers frequently have very narrow displays, whenever a line is too long to fit and cannot be wrapped, it will be aligned left. You should make sure to specify wrapping whenever you specify an alignment.
When you deliver an output line that is too long for the display, whether the user has access to the content of that line that is not visible is up to the discretion of the browser. Most browsers do not have horizontal scroll controls and will simply not let you access the right-hand portion of the content. There are also browsers that will scroll the line for you in-place, a mode called Times Square scrolling after the famous band of electric lights.
You can also affect the layout of text in a paragraph with the soft hyphen entity (­). This character tells the browser that it can place a line break preceded by the hyphen character at a particular spot in a word. If the browser chooses not to insert a line break, it must remove the entity and display nothing in its place.
Line Breaks
As I discussed earlier, the browser is usually required to treat line breaks in the WML source code as white space. When the browser encounters any sequences of white space, such as the new line and carriage return characters, in the output tags, it must be replace them with a single space on the screen.
This replacement of line feeds with spaces is initially counterintuitive, but identical to the behavior that you've probably already encountered when using HTML. In order to generate line breaks in the output, WML supplies the <br> tag. The snippet from the DTD that defines it shows a very simple element:
<!ELEMENT br EMPTY>
<!ATTLIST br
%coreattrs;
>
Of course, since the display size of a WML browser is typically very limited, you won't really want to use line breaks very often. Forcing the user to use the scrolling control for the browser creates a less-usable card than one with all the information visible, but sometimes you must.
Caution
The HTML version of the line break tag and the WML version share the element name br. Unlike HTML, however, WML requires that the tag be marked as empty using the closing slash syntax:
<br/>
It is very common to forget the trailing slash character and cause parsing problems. This is a slightly different syntax than you are probably accustomed to.
You can use this very simple tag to arrange line-oriented text on the browser. Listing 5.8 shows you a simple example of displaying multiline output on a card.
Listing 5.8 Using the Line Break Element to Create a List
The card in Listing 5.8 demonstrates the line-breaking behavior that WML requires from compliant browsers. The first card delivers a single paragraph that appears to have the names of the first six planets in a list. The browser, however, collapses that paragraph to a single logical line that it will wrap whenever it runs out of display space.
Figure 5.6 shows both cards from the deck in Listing 5.8. You can see that adding the <br> tags to the second card causes the browser to display a correctly formatted list.
Figure 5.6. Rendering a list of items using the line break tag.
Tables
WML text tables give you the ability to organize output into aligned rows and columns on the display. They are similar in concept to the <table> element in HTML, but much simpler to understand and use.
A table uses the <tr> element to define rows and the <td> element to define cells of output. A table cannot be nested within another table, and neither the row nor the column element allows you to specify its size. Tables are intended to convey the logical layout of output rather than its physical positioning; the browser will take care of that.
Let's look at the definition of the outermost element from the DTD:
<!ELEMENT table (tr)+>
<!ATTLIST table
title %vdata; #IMPLIED
align CDATA #IMPLIED
columns %number; #REQUIRED
xml:lang NMTOKEN #IMPLIED
%coreattrs;
>
From the element definition, you can see that the only element allowed in a table is a table row (<tr>) and it must contain at least one of them. This element's definition shows an even simpler syntax:
<!ELEMENT tr (td)+>
<!ATTLIST tr
%coreattrs;
>
A table row is composed of one or more table cell elements, <td>, which contain the actual output to display. The table cell also has a simple definition:
<!ELEMENT td ( %text; | %layout; | img | anchor |a )*>
<!ATTLIST td
xml:lang NMTOKEN #IMPLIED
%coreattrs;
>
Table cells do the work of the table without any individual identity. They chiefly contain text and images but have no layout attributes; those are set up in the <table> element. Listing 5.9 shows the construction of a simple table.
Listing 5.9 Constructing a Simple Table
The table created by Listing 5.9 displays the first three rows of the periodic table of elements using the <table>, <tr>, and <td> elements in their most basic form. The <table> element simply specifies the number of columns to display (eight) whereas all other tags have no attributes set.
In Listing 5.9, you will notice the use of the empty cell, <td><td/>, which creates the hole in the top of the table between hydrogen and helium. An empty cell in a row cannot be ignored in the browser, nor can an empty row: <tr></tr>. This simple chart will take up most of the display on many browsers, as shown in Figure 5.7.
Figure 5.7. Using a simple table to align output.
You must control the look of the table through the attributes on the <table> element. For example, use the title attribute to specify a string for the table that the browser might display to the user or just ignore.
When using the table element, you must supply the number of columns that it will contain with the columns attribute; the browser uses this value rather than the number of <td> elements in any row to construct the table. The value of columns must be greater than zero.
Any time there are fewer cells in a row than the number of columns specified in the attribute, the browser must pad empty cells on to that row. When there are more cells in a row than indicated, the browser will place all the additional output from the extra cells in the last column, separated by a space.
In the table element, you can also specify an alignment for each column in the table. By assigning a string of alignment specifiers to the align attribute, you can control the look of the table. Like paragraphs, the browser can align output in table cells to the left, to the right, on the center, or using its default.
To denote column alignment, string the L, R, C, and D characters together without a separator. For example, in a three-column table, to align the first column to the left and the remaining columns to the right, set up the following open tag:
<table columns="3" align="LRR">
Another simplification that you might notice in the WML table is the lack of a vertical alignment specifier. When a table row contains a cell that requires more than one line, the browser can align remaining output in the rows to either the top of each cell or the bottom, at its own discretion. This situation will occur quite often when you mix text and images on the same rows of your table.
▸ See Chapter 6, "Using Images," for more details on displaying images.
WML tables lack the ability to combine cells vertically or horizontally, which would allow layouts that are more complex. Listing 5.10 shows a table that uses the extended attributes to customize its layout.
Listing 5.10 Using Optional Table Attributes
The deck in Listing 5.10 uses the title and align attributes of the <table> element to produce a table of contents that is easy to read. Although the browser pictured in Figure 5.8 does not render the value of the title attribute, it does respect the align attribute and sets up the heading numbers and text properly. You should notice the placement of empty cells to help visually align the headings and subheadings with their own types.
Figure 5.8. Laying out a table of contents.
Near the beginning of this section, I mentioned that a table chiefly delivers output to the display. In fact, looking at the DTD snippet for the <td> element, you can see that only text (#PCDATA and formatting tags), line breaks, links, and images are allowed in the body of the table. Carefully omitted are other tables and all input elements, making the table an output-only element.
▸ See Chapter 7 for more details on input elements.
The table element is clearly a tag that is well suited to this platform. It has very few frills, yet delivers powerful layout capability to the developer.
Preformatted Text
New to version 1.2 of WML is the preformatted text tag, <pre>. This tag allows you more complete control over the appearance of text when the browser displays it.
The basic premise behind the tag is that it is a peer element of the <p> tag on the card, containing both input and output elements. The element definition, although longer than some, is not very complicated, as you can see from the following DTD snippet:
<!ELEMENT pre (#PCDATA |a |br |i |b |em |strong | input | select )*>
<!ATTLIST pre
xml:space CDATA #FIXED "preserve"
%coreattrs;
>
The chief differences between the <p> and <pre> tags is that the <pre> tag directs the browser to respect white space and fewer types of child elements are permitted. In addition to respecting white space, the browser should render the text in fixed-pitch font and disable word wrapping when possible.
Of course, if you decide to use preformatted text you can create output that does not render very well on a browser. Preformatted text gives up the logical layout of text in favor of physical formatting, something that the language was not really intended to accomplish.
When you use deliver preformatted text (see Listing 5.11), you are allowed to place formatting tags such as <i> and <b> around text, indicating that the browser should display that text in a special format.
Listing 5.11 Creating Preformatted Output
The deck in Listing 5.11 uses the preformatted text tag to deliver a small diagram to the browser. If a <p> tag were used in place of the <pre> tag, most of the text would appear on the same line, conveying a completely different meaning than the one you intend.
Previously, to approximate the output of a <pre> tag, the language forced you to turn off wrapping, replace all collapsible space in your card with non-breaking space entities ( ), and replace carriage returns with break tags (<br/>). The body of the card from Listing 5.11 would be
<p mode="nowrap">
Shape<br/>
+---^---+<br/>
<b>Square</b> <b>Circle</b>
</p>
This card would likely suffer from the use of a variable-width font on the display as opposed to the fixed-width font recommended by <pre>. Variable-width fonts destroy the alignment of text between lines. The results of this approximate formatting are shown in Figure 5.9.
Figure 5.9. Delivering a text line diagram before the <pre> tag.
As you can see in Listing 5.11, you can add formatting tags to the text in the <pre> section to create effects such as bold text. When you do so, you must manually calculate the effects on the layout after the browser removes those tags from the output.
Note
At the time of this writing, there were neither simulators nor WML devices that supported version 1.2 specification. Please verify that your WML 1.2 browser behaves as described.