NO318991B1 - Presentation of HTML content on a small terminal screen - Google Patents

Description

Technical area

The invention generally relates to the technical area of graphical user interfaces. More specifically, the invention relates to a method, a device and a computer program for presenting an HTML document that was designed for presentation on a large desktop model screen, on a small format screen on a client terminal, such as a mobile phone, a PDA or a palmtop computer.

Background for the invention

One of the basic design principles of the World Wide Web is interoperability. The World Wide Web Consortium (W3C) develops the web's language and protocols with the stated goal of allowing software and hardware of various kinds to access the web. Still, most websites are designed for desktop computers with large color screens.

Mobile wireless communication devices, such as mobile phones, PDAs or palmtop computers, typically have much smaller screens. There is obviously a need to provide a practical, intelligible, efficient and user-friendly solution for presenting web pages with general markup language content (eng.: markup language content), such as HTML documents (Hypertext Markup Language) , on such mobile devices.

Related Background Techniques

The difficulties in displaying web content efficiently on a small mobile device, such as a mobile phone, have contributed to the development of WAP (Wireless Application Protocol), which was intended to fill the gap between the mobile world and the Internet. However, the use of WAP technology requires the applications to be written in WML (Wireless Markup Language). Therefore, only a limited amount of information and services is available via WAP.

From a number of previously known web browsers it is known to use zooming to view pages written e.g. in HTML on a screen. In this way, a small part of the page can be enlarged so that it fills the screen, and so that the details of the page are displayed. US published patent application 2002/0030699 Al describes a mobile phone which is provided with a small touch screen. A web page obtained from the Internet is first displayed in its entirety on the screen. When the user touches a certain area of the screen, this area is displayed in an enlarged manner using an "auto-zoom" function. Zooming can be an appropriate way to get an overview of complex web pages, and is also able to enlarge certain areas of the page. However, the content becomes difficult to read when the page is zoomed out. In addition, horizontal scrolling will be necessary to make the information readable when a text with a fixed width format that is wider than the screen is to be displayed. Zooming is thus insufficient to provide an appropriate presentation of web pages on small display screens.

Handspring Blazer 2.0 is a previously known web browser for use with palmtop communication devices. Using this browser, an HTML document can be adapted to the width of the screen of a mobile client terminal and then presented on the screen. However, the conversion is performed by a server in the network, not locally in the client terminal. Furthermore, Blazer 2.0 does not support the style set approach used in the present invention. Moreover, tests carried out by the applicant have shown that the Blazer solution apparently does not present the content of tables in an expedient manner, necessitating horizontal scrolling to make the content readable on a small screen. Blazer 2.0 also leaves a significant amount of white space among the information presented, resulting in more vertical scrolling being required.

Summary of the Invention

One purpose of the present invention is to provide a method, a device and a computer program which overcomes the above-mentioned disadvantages of the previously known solutions.

A particular purpose of the invention is to provide a method, a device and a computer program which allows an HTML document, intended for presentation on a large desktop model screen, to be presented on a screen on a client terminal with a small screen, such as the screen on a mobile phone.

More specifically, an aim of the present invention is to provide such a method, a device and a computer program which minimizes the need for scrolling by the user of the terminal.

Even more specifically, it is an aim of the present invention to provide such a method, a device and a computer program which eliminates the need for horizontal scrolling, and which minimizes the need for vertical scrolling by the user of the terminal.

The above objectives and further benefits are achieved by means of the features set out in the attached set of requirements.

In accordance with the invention, content reformatting is provided to overcome the problem of presenting an HTML document on a small screen size. Instead of presenting table content in columns and rows, tables are reformatted into a narrow, one-dimensional structure better suited for smaller screens. This is accomplished by transforming tables into block-level elements.

The invention also provides additional advantageous features such as image blocking/reduction and space character transformation.

Brief description of the drawings

The invention will be described in more detail with reference to the drawings, where

Fig. 1 is a block diagram illustrating a system in which a mobile terminal operates using a method according to the invention, Fig. 2 is a flowchart illustrating an embodiment of the method in accordance with the invention, Fig. 3 shows an example of a web page displayed on a large screen and the corresponding reformatted page displayed on a small screen on a mobile terminal.

Detailed description of the invention

Fig. 1 is a block diagram illustrating a system 100 in which a mobile client terminal 140, such as a mobile phone, operates using a method in accordance with the invention.

An HTML document 130 is provided by a server 110 through the network 120 to the mobile client terminal 140. The mobile terminal 140 comprises a screen 180 of small size, which is basically not suitable for presenting a general HTML content that was designed for a large display screen.

A small screen size can be defined in terms of the number of pixels present in the screen, especially the number of horizontal pixels in the screen. As an example, a screen with less than 300 pixels horizontally can be considered a small screen.

The HTML document 130 is obtained by a wireless communication device 160, such as a GSM, GPRS-UMTS, CDMA or PCS module, and is passed on to a formatting device 150.

The HTML document 130 generally consists of three parts: content, structure and style. The content is the actual characters and images to be displayed. The structure describes the role of the content, for example that a certain character string is a heading. The style describes how the content should be presented, e.g. which fonts and colors are to be used. The style is written in a style sheet (eng.: a style sheet) or using presentation elements (e.g. FONT and CENTER in HTML).

In accordance with the invention, the mobile terminal 140, when it receives an HTML document via the communication device 160, will apply a browser style set 170 to the document, possibly to override the document's own style in the process. By doing this, the mobile terminal enforces fonts, colors and other style aspects to optimize display on the small screen 180. The style set language that is preferably used is CSS (Cascading Style Sheets), advantageously with some extensions. However, in principle any style set language can be used to achieve this effect. Using this technique, the browser enforces a certain format, font size and possibly certain colors that are optimized for the screen 180.

The formatting device 150 is controlled by a processing device and a memory. A computer program is stored in memory. The computer program is arranged to, when executed by the processing device, carry out the method in accordance with the invention as described below, with particular reference to fig. 2. In one embodiment, the memory also includes an application program, and more precisely a browser program that supports style set interpretation. The interpretation of the style set, carried out by the browser program, causes the processing device to carry out the method in accordance with the invention.

As a result, the HTML content is displayed in an intelligible, efficient and user-friendly way on the small-sized screen 180.

Fig. 2 is a flowchart illustrating a method for presenting an HTML document on a small-sized screen on a mobile client terminal, in accordance with the present invention.

The method starts at reference numeral 200, and comprises the initial step 210 of reformatting the HTML document by enforcing at least one style set 170 on the client side, thus adapting the width of the reformatted document to the width of the screen, and the subsequent step 240 of presenting the reformatted document on the screen.

The initial reformatting step is a process comprising a number of sub-steps.

In the first substep 212, table cells in the HTML document are linearized into block level elements. A block-level element is an element that has a line break before and after it (like normal paragraphs).

The HTML language is a simple, declarative markup language (Eng.: markup language) where the tags describe the logical roles for the content (paragraphs, headings, etc.), rather than how the content is presented (fonts, colors, etc.). When tables were introduced in HTML 3.2, they were intended to represent simple rows and columns of numbers and text within documents - in the same way that tables have been used in traditional documents. However, authors soon discovered that tables could be used (or abused) to wrap around documents, thereby achieving visual layout. E.g. the page can consist of a menu on the left, an advertising banner at the top, and a sidebar on the right. This type of page layout can be achieved by HTML table formatting. Pages that use tables for layout purposes are often set to a fixed width, typically around 600 pixels. This width is perfect for a desktop model PC, but not on smaller web devices. Most often, the organization of the content as a table is just a purely visual effect to achieve a layout of

.lattice type.

In accordance with the invention, the table is reorganized into block level elements. All table cells in a row are combined to form a block-level element. That is, each row is converted into a block-level element, and all block-level elements formed from a table are presented on top of each other. In the second substep 214, positioned elements in the HTML document are transformed into block level elements.

Typically, positioned elements are taken out of the text flow and displayed above other content. When converting in accordance with the invention, positioned elements are converted into block-level elements and presented in the order in which they appear in the source document.

Images account for a large part of the data transfer on the web, and they usually take up considerable screen space. Optimizing the handling of images is important for web devices with small screens, such as mobile terminals. In accordance with the invention, images are selectively blocked and filtered to optimize performance. 1 in accordance with the invention, images are handled differently, based on their size: "Very large images" (eng.: "huge images"), i.e. images that are far too large to fit the screen, are ignored, and are thus not downloaded/displayed .

"Tiny images", i.e. very small images, usually play an ornamental role in table layouts. They can thus ignore,s and are not downloaded/displayed.

"Special size images", i.e. images with a special, predetermined format, often represent commercial advertisements, they can thus be ignored, and will not be downloaded/displayed.

"Large images" (images that are slightly wider than the screen size) are scaled down to fit the screen size.

Other images are displayed normally.

The size of images is often specifically shown in the HTML markup. Consider this example: <IMG SRC = "foo.png" WIDTH= "20" HEIGHT "30"

In the above example, the image labeled "foo.png" has a size of 20 pixels horizontally and 30 pixels vertically. By providing the WIDTH/HEIGHT attributes in the markup, the browser is able to determine the size of the image before the actual image is downloaded. In this way, the speed of document reproduction can be improved.

The browser can also process the element based on the WIDTH/HEIGHT attributes. When using CSS, e.g. The style set describes how the element should be presented for certain attribute values:

IMG[WIDTH= "20"] {display: none}

The above style set expresses that IMG elements with a width that has a value of "20" should not be displayed.

When the attributes are not present in the markup, this type of processing is not possible. Consider this example: <IMG SRO "foo.png">

The size cannot be determined until the image is downloaded.

1 in accordance with the invention, a feature is added which allows the elements to be processed even if the attributes have not been specified in the marking. When the image is downloaded and the size has been determined, width and height are exposed as pseudo-attributes that can be processed similarly to normal attributes. Consider this example:

IMG[$WIDTH= "20"] {display.none}

In the above example, the "$" character indicates that the following attribute name is a pseudo-attribute that is not present in the markup, but is presented as if it had appeared in the markup.

The main advantage of this particular feature is to allow path In sets to handle elements in the same way when the author has included attributes, as when the author has not included attributes.

To provide a measure of the size of an image, the width of an image pointed to in the HTML document is further determined in the third substep 216 in accordance with FIG. 2. If the width is specified as an attribute in the HTML document, this value is used for the width in the subsequent substeps. If the width is not specified, the 218 width value is determined as a pseudo-attribute. as described above.

In the fourth sub-step 220, the size of the image is considered to determine whether the image should be ignored or included in the reformatted document.

This fourth substep 220 advantageously involves three conditions. If at least one of these conditions is met, the result of substep 220 is that the image is ignored 222, and the process continues at the sixth substep 228. If none of the conditions are met, the process continues at the fifth substep 224.

The first condition in substep 220 is to determine whether the image is to be considered "very large". Preferably, this entails testing whether the width of the image is greater than a first, predetermined width limit, which is in the range of 2-4 times the width of the screen. Particularly preferred is the first limit three times the width of the screen. If the width of the image exceeds this limit size, the image is considered a very large image, and the image is ignored 222. The process then continues at the sixth substep 228.

Alternatively, an image can be considered a very large image if the height of the image exceeds a first, predetermined height limit.

Alternatively, an image can be considered a very large image if both the height of the image exceeds the first, predetermined height limit and the width of the image exceeds the first, predetermined height limit.

As a further alternative, an image may be considered a very large image if another parameter associated with the size of the image exceeds a predetermined limit.

The second condition in substep 220 involves determining whether the image is to be considered "small". Very small images typically play an ornamental role in table layouts, such as borders, and they can usually be ignored without loss of essential information. More specifically, this second condition entails testing whether the width of the image is less than a second predetermined width limit, typically in the range of 1-30 pixels, and particularly preferably 15 pixels, and also whether the height of the image is less than a second predetermined height limit, typically in the range 1-36 pixels, and particularly preferably 18 pixels. If the size of the image is within both of these criteria, the image is considered a small image, and the image is ignored 222. The process then continues at the sixth substep 228.

The third condition in sub-step 220 involves determining whether the image is considered a "special size image". An image that exactly fits a certain predetermined set of width and height is likely to be recognized as a commercial advertisement, and such images can usually be ignored without loss of essential information. If both the width and height of the image match predetermined values, the 222 image is ignored. The process then continues at the sixth substep 228.

9 advantageous sets of matching width and height values for special size images are given in Table 1 below. These values correspond to ad image dimensions recommended by "the Internet Architecture Board" - IAB.

Table 1. Set of matching widths and heights for special size images

In the fifth substep 224, the size of the image is considered to determine whether the image should be considered a "large" image. A large image, as opposed to a very large image, should be scaled down in the reformatted document, rather than being ignored. This is performed by comparing the width of the image to a third predetermined limit, which is in the range of 0.5-3 times the width of the screen. Preferably, the third predetermined limit is equal to the width of the screen, meaning that all images that are not considered tiny or very large, and which also exceed the width of the screen, are considered "large". Images that are considered large in this way are scaled down 226 to fit the screen width, advantageously leaving room for a border on each side. In the sixth substep 228 of the reformatting step 210, subsequent line breaks in the HTML document are ignored, so as to reduce the vertical size of the reformatted document. Line breaks in HTML can be generated with the BR element, and it is common to add trailing BR elements to push other elements apart vertically. This may look good on a desktop model screen, but valuable vertical space can be saved by ignoring trailing line breaks in accordance with this feature of the invention.

In the seventh substep 230 of the reformatting step 210, non-breaking whitespace characters in the HTML document are converted to normal whitespace characters, thereby reducing the horizontal size of the reformatted document. Non-breaking space characters (denoted "nbsp;" in HTML) are used to indicate a space between strings that is unsuitable for a line break. However, on a small screen, the browser is more often forced to break lines, and the non-breaking space character cannot be recognized. 1 addition, as part of the seventh sub-step 230, additional empty spaces can be advantageously ignored as well.

When the seventh substep 230 and thus the formatting step 210 is completed, the reformatted document is displayed on the mobile client terminal one (step 240).

The method according to the invention advantageously provides the additional feature of imposing a fixed font type and a fixed font size for all text in the HTML document, in particular a font type and size that is particularly clear and distinct when displayed on the small size screen 180 .

The method according to the invention advantageously provides the additional feature of centering the images displayed on the small size screen 180. -

The method according to the invention can advantageously provide the additional feature of zooming a page in and out.

For a person skilled in the field, it will be an ordinary task, based on the presented description of the invention, to implement the method in accordance with the invention as a computer program. Such a computer program comprises instructions which carry out the method in accordance with the invention when the instructions are executed by a processing device in the mobile client terminal.

In particular, the computer program may be incorporated on a computer-readable medium, such as a magnetic disk or a CD-ROM. Alternatively, it may be contained in a memory, such as a read-only memory or a volatile memory, or it may be incorporated on a propagated signal, e.g. during transmission between computers or network elements in a digital communications network such as the Internet.

Fig. 3 shows a simplified example of a web page 300 displayed on a large screen and the corresponding reformatted page 350 displayed on a small screen on a mobile terminal, in accordance with the invention. The original page 300 will be represented by an original HTML document, and the reformatted page 350 will be represented by the reformatted document which is the result of the method in accordance with the invention.

The width of the reformatted page 350 is adapted to fit the width of the small screen of the mobile terminal. Although not shown in the figure, it will be understood that the height of the reformatted page significantly exceeds the height of the screen. Vertical scrolling is thus necessary, while horizontal scrolling is unnecessary.

Now suppose that the method in accordance with the preferred embodiment of the invention, as illustrated in fig. 2, is used on page 350. The following description will illustrate a specific example of application of the invention.

It will be appreciated that only some of the elements of the original page 300 are mentioned in this simplified description, which is presented by way of example to explain the principles of the invention.

In the first substep 212, the tables 306, 308 will be linearized into block level elements 356, 358. As can be seen from the reformatted page 350, this results in a compact, readable layout.

Positioned elements present in the original HTML document, such as the text and link section 310, will be reshaped into a block-level element and displayed as specified at 360.1 addition, certain fonts and link styles in the text and link section 310 will be changed to a simple, uniform font and style.

Also assume that size parameters for the image 302 are available in the original HTML document. The third substep 216 will then continue to the fourth substep 220.

The size of the image 302 does not meet any of the conditions "very large", "tiny" or "special size", and thus the method continues at the fifth sub-step 224.

In the fifth substep 224, the image 302 is recognized as a large image. The image will thus be scaled down to substantially the width of the screen, as shown at 352 in the reformatted page of FIG. 3.

The image 304, which is in reality an ornamental image element without any substantial information content, is recognized as a small image in the fourth sub-step 216. Accordingly, the image 304 is ignored, and it is not displayed in the reformatted page 350.

The white space 312 is recognized as not containing any relevant information, and is thus also ignored in the reformatted page 350.

The resulting reformatted page 350 has a compact, readable layout that eliminates horizontal scrolling and minimizes the need for vertical scrolling. The invention thus involves the technical advantage of enabling standard WWW content to be efficiently displayed on a terminal which can be significantly reduced in size. Although the functional characteristics of the original WWW page, such as hyperlinks, are maintained in the reformatted page, the format of the original WWW document is considerably compressed. It will of course be understood that the invention is not limited to the specific details described above, which are given by way of example only.

E.g. illustrates fig. 2 a specific embodiment of the method in accordance with the invention. It will be obvious that all the details of the illustrated steps and sub-steps are not essential for the purpose of the invention to be achieved.

Those skilled in the art will further appreciate that the various steps and substeps need not necessarily be performed in the order illustrated. Depending on the particular implementation, certain substeps can switch places, and some can even be executed concurrently.

The first substep 212 of linearizing tables to block level elements is the most essential substep of the reformatting step 210. If other substeps are included, however, the first substep 212 need not be the first substep to be performed in the reformatting step.

Likewise, the second sub-step 214 of converting positioned elements may as well be performed at another stage in the process, e.g. as the last step just before the display step 240.

As another example of an obvious modification, each of the sixth substep 228 - ignoring line breaks, and the seventh substep 230 - reshaping non-breaking spaces - could easily be performed at an earlier stage, such as following the second substep 214 of convert positioned elements.

The image blocking and filtering substeps 216, 220, and 224 may also be freely rearranged or modified as those skilled in the art choose.

Although the invention is particularly relevant for use with mobile phones and hand-held communication devices such as PDAs, those skilled in the art will of course realize that numerous other applications also exist, such as display terminals for use in cars, aircraft and vessels.

It is thus obvious to those skilled in the art that various modifications and changes are possible within the scope of the invention as set forth in the appended set of claims.

Claims (16)

1. Method for presenting an HTML document (130) on a screen (180) of a small screen client terminal (140), comprising the steps of reformatting the HTML document, and presenting (240) the reformatted document on the screen (180), characterized in that the step of reformatting the HTML document is performed by enforcing at least one style set (170) on the client side, thus adapting the width of the reformatted document to the width of the screen (180), and that the reformatting step (210) further includes converting (212) table cells in the HTML document to block level elements. 2. The method of claim 1, wherein the step (210) of reformatting the HTML document comprises ignoring (220, 222) images whose width exceeds a first, predetermined size, thus omitting images that are very large compared to the size of the screen. 3. Method according to claim 1 or 2, wherein the step (210) of reformatting the HTML document comprises ignoring (220, 222) images whose size is smaller than a second, predetermined size, thus omitting images likely to represent ornamental graphics. 4. Method according to one of claims 1-3, wherein the step (210) of reformatting the HTML document includes ignoring (220, 222) images whose width and height are equal to one of a predetermined set of widths and heights, thus omitting images likely to represent commercial advertisements. 5. Method according to one of claims 1-4, wherein the step (210) of reformatting the HTML document includes scaling down (224, 226) images whose size exceeds a third, predetermined size, thus reducing images that are large compared to the size of the screen. 6. Method according to one of claims 2-5, where the size of the image is determined (216, 218) as a pseudo-attribute if a parameter for the size is not present as an attribute in the HTML document. 7. Method according to one of claims 1-6, wherein the step (210) of reformatting the HTML document further includes to convert (214) positioned elements in the HTML document to block level elements. 8. Method according to one of claims L-7, wherein the step (210) of reformatting the HTML document further comprises to ignore (228) subsequent line breaks, thus reducing the vertical size of the reformatted document. 9. Method according to one of claims 1-8, wherein the step (210) of reformatting the HTML document further includes converting (230) non-breaking space characters to normal space characters, thus reducing the horizontal size of the reformatted document. 10. Method in accordance with one of the preceding claims, further comprising the feature of zooming a page in and out. 11.. Client terminal (140) arranged to present an HTML content on a screen (180) of small size, comprising - a communication device (160) and - a formatting device (150). said formatting device includes a processing device and a memory device, - where the formatting device (150) is arranged to carry out a method in accordance with one of claims 1-10 to present the HTML content on the screen (180) with a small size. 12. Computer program, comprising instructions which, when interpreted by an application program executed by a processing device, perform a method in accordance with one of claims 1-10. 13. A computer program according to claim 12, wherein the instructions are style set instructions, and wherein the application program is a browser program that supports style set interpretation. 14. Computer program according to claim 13, implemented as a client-side style set. 15. Computer program in accordance with claim 13, further comprising the browser program. 16. Computer program according to one of claims 12-15, incorporated on a computer-readable medium, or in a memory, or on a propagated signal.