HTML Transcoding Approach for Small Screen Devices

HEESOOK SHIN, SOOSUN CHO, DONGWOO LEE, EUNJEONG CHOI, DONGWON HANComputer Software Laboratory ETRI

161 Gajung-Dong Yuseong-Gu DaejeonKOREA

Abstract: - In this paper, we propose a web page transcoding technique for hand-held devices with small screens. This technique gives the devices successful display of original web pages designed for desktop computers. Our approach is based on the observation that most web pages are composed of apparently separated blocks with similar contents, and that the visual separation is caused by structural tags. We apply block-grouping algorithm to extract certain blocks with similar appearance by using minimum content units and semi-semantic information of page layout, and those information are extracted by structural tag analysis algorithm. Also we employ an index generation mechanism and a block arrangement mechanism to create the web pages with suitably shapes and efficient interface. Some contents blocks can be represented to the VoiceXML according to their arrangement and contents type. We designed the transcoding system and implemented the prototype, and we also verified the performance of our approach by analyzing the transcoded results of real web pages.

Key-Words: - HTML, transcoding, small screen devices, web contents, VoiceXML

1 IntroductionBecause most existing web pages in wired Internet are manufactured for desktop computers, it causes the problem that web pages cannot be expressed properly in the hand-held devices with small screen. In order to solve this problem, many researches have been gone and achieved automatic or non-automatic transcoding functions in web server, client terminal, or middle transcoding server such as proxy. However, most existing approaches have used text level summary, partial extraction/elision or page partition method for mobile devices with low computing power. Therefore, in the case of current web pages that include much information in complex structures, these transcoding methods have little effect on small screen devices.

In this paper, we propose a transcoding approach that converts original HTML pages into content-lossless HTML pages which can be properly displayed in small screen and give high quality of views for complex structured web pages. Additionally we describe a method of applying VoiceXML for efficient presentation of existing web pages as an auditory interface.

The rest of this paper is organized as follows. In section 2, we present related studies, and describe our new approach in minute detail in section 3. A

system design and implementation are given in section 4, followed by experimental results in section 5. In section 6, we describe a design of the transcoding system using VoiceXML, and conclude with a summary and future works in section 7.

2 Related StudiesWe categorize types of devices that try to connect mobile web [1].

First is a Notebook series. It has more than 800*600 resolutions, and can express the web pages in wired Internet without any transcoding approach.

Second type is a Cellular Phone series. Because of limited capacity of expression such as 20 text lines and 90*60 resolutions, transcoded pages are presented with the markup languages of WML, HDML, cHTML, etc. Because most transcoded results consist of summary or partial data of text type, many parts of original web pages need to be modified. Therefore manual transcoding approaches are more useful for this kind of terminal than automatic ones.

Third type is a Hand-Held series such as Palm-Size PC, Hand-Held PC, PDA, etc. This kind of terminal has a HTTP/HTML browser and has 320*240 resolutions in 3-5 inches screen generally.

Lately, according to the tendency that screen size and resolution have increased, many terminals support even 640*480 resolutions. But, an absolute restriction exists in the screen size for the reason of 'Mobility' that is the biggest characteristic of mobile terminals. Also, the growth of desktop PC's display performance causes relative differences of capability of presentation still, when the web pages in wired Internet are presented in mobile devices. Our research has focused on automatic transcoding methods for hand-held devices that have a browser supporting HTML/HTTP.

For those hand-held devices, existing related researches can be classified as follows depending on the occurring location of transcoding process.

First is a Web server side transcoding. It supplies transcoding tools to accompany simple manual processes. (IBM)WebSphere Transcoding Publisher[12] is a representative transcoding system, and this uses an annotation based transcoding approach[5]. An advantage of server side transcoding approaches is to achieve a correct conversion, but amount of web pages offered by transcoding service is so limited in comparison with bulky quantity of existing web pages.Second is a Client side transcoding. Transcoding

mechanism (SmartView[8], Pad++[6], etc.) is run in client devices that receive original web pages from web servers. It has an advantage of a customizing, but it also has an inefficient use of network resources and a requirement of high computing power of client terminals. Third is a Proxy side transcoding. It can offer

transcoded pages to many kinds of terminals from most existing web pages automatically [10][11]. Digestor[2] and WebAlchemist[3] represent the proxy based automatic transcoding system. And there are other researches such as Top Gun Wingman[7] and WebExpress[9], which achieve transcoding functions in proxy and in client browser together.

Above existing transcoding approaches are based on summary, partial extraction/elision or page partition/indexing page creation method. Therefore, they used not to transfer exactly current complicated web pages as well as not to reflect intention of the designer of original web pages.

Although WebAlchemist[3] uses the semi-semantic information with several heuristic transcoding algorithms which were proposed by Digestor[2] to get better quality of transcoded

pages for complex web pages, it still has a limitation because its basic idea is based on partial extraction and page division.

3 HTML Page Transcoding Technique

Most web pages use visually separated expression in order to represent the difference of contents and disambiguate the meaning of contents, like Fig. l [4].

Fig.1 Visually Separated Expression of Web Page

We can extract semi-semantic information of page layout by analyzing structural tags that motivate such visual separation. This supplements imprecise conversion that appears in existing syntactic transcoding approaches [3].

Through this process, we can define a minimum unit of contents as Component (in Fig.1) and make group, Component Block by name, depending on the client's screen size. At this point, each Component Block has similarities on the presentation and the arrangement. This process is achieved by two algorithms - Layout-Forming Tag Analysis Algorithm and Component Grouping Algorithm. In case of Fig.2 example, it gives Components from (1) to (16) and the semi-semantic information of layout for each Component in Fig.3. It extracts Component Blocks such as (1-3), (4-7), (8), (9-14) and so on, and then the extracted Component Blocks are classified into INDEX or BODY type according to characteristics of contents which are included in each Block. And each Block is expressed in an indexing format or is reallocated in <BODY> element, like Fig 2.

Through these processes, we can obtain an efficient browsing without left-right scrolling and more natural expression and an easy awareness for complex web pages.

Component Component Block

Our transcoding technique can be summarized with following 5 characteristics.

Web page Analysis based on visual separation

Definition of minimum unit for transcoding

Using semi-semantic information of page layout

Grouping and rearrangement of Component

Re-expression specific blocks in indexing format

Fig.2 Before(top) and After(bottom) of Transcoding

Fig.3 HTML code and Structural Information of Fig.2

3.1 Layout-Forming Tag Analysis AlgorithmIn this algorithm, tags such as <TABLE>, <TR>, <TD>, <IMG> are analyzed mainly, and a specific <TD> element is defined as the Component that is used as a minimum unit of contents during our transcoding process. Through this analytical process, we can extract semi-semantic structural information by using several parameters in Table 1. Fig.4 represents Layout-Forming Tag Analysis Algorithm.

Table 1. Parameters of Structural InformationParameter Description

CompNum

Component IDGeneral Component has (sequence num, 0, 0).Inclusive Component, which includes <TABLE> tag, has (0,first figure of first child’s CompNum, first figure of last child’s CompNum).

RowNum Row number in total layoutColNum Column number in total layout

TableDepth Number of ancestor <TABLE>tagWidth Re-calculated width value using pixel unit

Repeat {extract next tag node;If (the tag == <TABLE>) {

If (TableDepth > threshold) {define Width of all elements inside <TABLE>;

}Else { increase TableDepth;define Width of <TABLE> element;

}}Else if (the tag == <TR>) {

increase RowNum; define Width of <TR> element;

}Else if (the tag == <TD>) { increase ColNum;define CompNum according to whether

it has <TABLE> tag or not;define Width of <TD> element;

}Else if (the tag == <IMG>) {convert image format; set NewWidth of image;if(<MAP> is used) modify COORDS of <AREA>;

}Else if (other tags) process for other tags;}Until (end-of-tags of HTML)

Fig.4 Layout-Forming Tag Analysis Algorithm

3.2 Component-Grouping AlgorithmThis algorithm creates Component Blocks by grouping some Components according to the total sum of Component’s width and the Component type. All tags included in Component Block are wrapped by single <TABLE>tag and inserted as a sibling node of ancestor <TABLE> of the Component Block. If

early width value of Component is below MAX_WIDTH, the grouping process is done continually. But, if Component's width exceeds MAX_WIDTH, the width of image, text line, etc. is adjusted forcibly, because the Component has only data values without any interior structures. Fig.5 expresses Component Grouping Algorithm.

Repeat {extract next Component node;If(Component type == INDEX) {

insert into INDEX Component Block;}Else {

If(Component width <= MAX_WIDTH) {If (Component has sibling nodes) {

grouping the sibling nodes; } make table block with Component nodes;

re-arrange Component Block;}//example case is (7) <TD> in Fig.3If (Component is last <TD>& parent <TABLE> of Component is nested table& first ancestor <TD> of Component is inclusive

Component) {make table block for each three groups of child nodes;

// 1.nested table group including current Component// (ex. nested Table block in Fig.3)// 2.3.two other tag groups except above group// (ex. Other tags I, II in Fig.3)make table block with first ancestor <TD>;

} }}Until(end-of-Component node)

Fig.5 Component-Grouping Algorithm

3.3 Classification of Component Block and Index GenerationComponent Block is classified into INDEX or BODY type according to patterns of including contents. INDEX Block is re-expressed by creating script file and <SELECT> element on the top portion of new HTML, and BODY Block is reallocated inside <BODY> element.

This classification process is achieved through measurements and comparisons with the parameters of comparing pattern such as below Table 2. And this process is done during Component Grouping step and Component Block Classification step.

Table 2. Parameters for Comparing Pattern Parameter Expected Pattern

TextLength Similarly repeated pattern, Limited short length

ImageWidth Similarly repeated pattern, Limited narrow width.

LinkNumberAlmost text contents have link information, Similarity of position of linked document and file name.

RowNum Small number, Special block that is arranged on the top portion of original web page.

ColNumMaximum or minimum number,Special block that is arranged left or right side in original web page.

4 System Design and ImplementationIn this section, we introduce the structure of transcoding system such as following Fig.6.

The HTML page transcoding system proposed in this paper is composed of four stages - PreProcess stage, Analysis stage, Transcoding stage and Generation stage according to its action process.

Component BlockExtractor

Component BlockExtractor

Client ProfileAnalyzer

Client ProfileAnalyzerPreProcessorPreProcessor

Image ConverterImage ConverterTable Layout Structure Analyzer

Table Layout Structure Analyzer

Customized HTMLGenerator

Customized HTMLGenerator

Customized HTML

Pre- ProcessStage

AnalysisStage

TranscodingStage

Generation Stage

Component BlockCategorizer

Component BlockCategorizer

Index Generator

Index Generator

J ava ScriptGenerator

J ava ScriptGenerator

Rare HTML Client ProfileFig.6 Module Diagram of Transcoding System

First, in PreProcess stage, original HTML pages are refined in suitable format and input-output protocols are controlled depending on the places where transcoding processes are achieved. The Client Profile Analyzer extracts client profile information from HTTP Header, and PreProcessor reformats rare HTML. It has been implemented with reference to W3C HTML Tidy’s open source [13].

Secondly, in Analysis stage, the Table Layout Structure Analyzer takes the DOM Tree of HTML document from PreProcessor and defines Component and extracts semi-semantic information of structure in[from] the given page by using the 3.1's Layout-Forming Tags Analysis Algorithm. At this time, according to client performance, the Image Converter acts together.

Thirdly, in Transcoding stage, Component Block is extracted and classified by using the 3.2's Components Grouping Algorithm and 3.3’s method of Classification of Component Block.

Lastly, the modules in Generation stage create image or text indexes by using information from Component Block that is classified in before step and generate a script file and additional tags to express new indexes. Customized HTML Generator makes new HTML pages that profit to a client’s mobile device by putting together all objects created and transcoded through before modules.

5 Experimental ResultImplementation and test of the system were focused on realization of algorithm and performance estimation. We have experimented 20 web sites that are presented in NetRating.com in ranking order, and Table 3 displays classification and analysis about test results of transcoded web pages by our system.

Table 3. Analysis of Experimental ResultsParamemter Percentage

Occurrence rate of right-left scroll

0% (the number of observed pages /the total number of pages)

Preservation rate of content

91% (the number of observed Component / the total number of

Component)Error rate of structural tag

8% (the number of observed table block / the total number of table block)

Error rate of rendering

5% (the number of observed page / the total number of page)

The preservation rate of content expresses the ratio of difference between contents of a original page and those of a converted page, and its comparison standard is based on the existence and nonexistence of contents in Component unit level. The errors of structural tag appear in case that the structural and visual expression of <TABLE> tag isn't appropriate, and they are confirmed through the examination of interior <TR> and <TD> tag’s values and their attributes. The error rate of rendering is calculated by the number of times of script error and times of object rendering error. As a result, our system acted suitably for web pages that have a structural composition and gave more appropriate transcoded results from complex web page having much information. Fig.7 and Fig.8 show original web page and transcoded results of yahoo.com.

Fig.8 Transcoded Results of Yahoo.com

Fig.7 Original Web Page of Yahoo.com

6 Extended Issue: Auditory InterfaceIn several research fields, methods to access the existent HTML web pages through voice interface are being studied, and conversion from HTML to VoiceXML is suggested as one of them [14]. We introduce another transcoding method that offers hearable contents for selected web pages with fixed form. By using this technique and previous method of web contents transcoding for small screen, we can offer hearable contents and suitable viewing and convenient interface for small screen devices.The transcoding system is composed following

modules from (1) to (3), and the structural drawing is designed like Fig.9

(1) Modules that extract hyper-linked objects that can be targets for conversion to VoiceXML(2) Module that extract one representative content block in target HTML(3) Module that create VoiceXML file

Fig.9 Block Diagram of Selected HTML to VoiceXML Converter

The transcoding processes are divided into two steps.

In first step, objects with hyper link are extracted for conversion to VoiceXML. The module (1) takes HTML element tree as input parameter and searches the object with regular form, and then inserts the mark that indicates possibility of conversion to VoiceXML.

In second step, one representative content block is extracted and new VoiceXML files are created with the content block. Fig.10 shows example of transcoding system operation.

Fig.10 Example of the Transcoding System Operation

7 ConclusionWe defined the minimum analysis unit and extracted the semi-semantic information to transcode and express current complex web pages more correctly. We also used the reallocation of block units and the generation of index in order to give convenient interfaces in small screen devices. These methods can offer an efficient navigation and a full recognition of web documents in comparison with existing ways such as text level summary, partial extraction/elision and page partition. To

gain those transcoding benefits, we proposed and described Layout-Forming Tag Analysis Algorithm, Component Grouping Algorithm, Component Block Classification method and Index Generation method in this paper. We have designed and implemented our transcoding system and verified the performance through the analysis of transcoded results, and we have obtained good results on complicated web pages specially.

We also described the design of the transcoding system with the auditory interface to offer web documents that support visual and auditory expressions at the same time by VoiceXML for certain Components.

In the future we are going to design a smart system that generates web pages with a multimodal interface according to the performance and characteristic of user’s devices. And our future works will also include the study of suitable techniques for real time automatic transcoding system.

References:[1] C.G.Park, Y.C.Lee, Trend of Mobile Devices,

ETRI weekly technology trend, 2001, vol.1027.[2] T.Bickmore, A.Girgensohn and J.W.Sullivan, Web

Page Filtering and Re-Authoring for Mobile Users, The Computer Journal, vol.42, no.6, 1999, pp.534-546.

[3] Y.H.Whang, C.H.Jung, J.H.Kim and S.K.Chung, WebAlchemist: A Web Trtanscoding System for Mobile Web Access in Handheld Devices, SPIE ITCOM 2001, Aug. 2001.

[4] Y.D.Yang and H.J.Zhang, HTML Page Analysis Based on Visual Clues, IEEE ICDAR 2001, Sept. 2001, pp.859-864.

[5] M.Hori, G.Kondoh, K.Ono, S.Hirose and S.Singhal, Annotation-Based Web Content Transcoding, 9th World Wide Web Conference.

[6] B.Bederson and J.Hollan, Pad++: A zooming graphical interface for exploring alternate interface physics, ACM User Interface Software and Technology, 1994, pp.17-26.

[7] E.Brewer, A.Fox, I.Goldberg, D.Lee and A.Polito, Experience with Top Gun Wingman: A proxy-based graphical web browser for the 3Com PalmPilot, IFIP Middleware’98, pp.407-424.

[8] N.Milic-Frayling and R.Sommerer, SmartView: Flexible Viewing of Web Page Contents, World Wide Web Conference 2002, 2002.

[9] B.C.Housel, G.Samaras and D.B.Lindquist, WebExpress: A client/intercept based system for optimizing Web browsing in a wireless

environment, Mobile Networks and Applications, vol.3, 1998, pp.419-431.

[10] B.Zenel, A general purpose proxy filitering mechanism applied to the mobile environment, Wireless Networks Journal, vol.5, 1999, pp.391-409,.

[11] A.Joshi, On proxy agents, mobility, and web access, Mobile Networks and Applications Journal, vol.5, 2000, pp.233-241.

[12] IBM. WebSphere Transcoding Publisher,http://www-3.ibm.com/software/webservers/transcoding/index.html

[13] W3C. HTML Tidy,http://www.w3c.org/People/Raggett/tidy/

[14] W3C. VoiceXML, http://www.w3.org/TR/2001/WD-voicexml20-20011023/

[15] H.I.Choi and T.G.Jang, Design and Implementation of a HTML to VoiceXML Converter, Korea Information Science Society Journal, vol.7, 2001, pp.559-568.