Jui-Chieh Hsu, William Johnston, John McCarthy
Information and Computing Sciences Division
Lawrence Berkeley Laboratory
Berkeley CA 94720
Two logical structures can be easily extracted from HTML documents: the hierarchical structure of multi-level subsections, and the network structure of inter-document links. HTTP client software such as Mosaic enable users to browse documents and to navigate through hyperlinks from one document to another. However, HTTP client software does not currently let users view, manipulate, and exploit the logical structures of subsections and multi-level inter-document links on screen. To overcome these limitations and demonstrate how logical structures can be used, we have designed and implemented extensions to the X-Mosaic client. Our prototype active outlining feature lets users flexibly change the level of detail presented in each level of an HTML document. Our prototype inter-document link feature generates a visible representation of the linking structure for any document or component subsection. Users can expand and collapse linking information and/or display full text of linked documents, in an approach similar to that of active outlining. These new capabilities allow HTML documents to be viewed from a wide range of perspectives, from a high level overview to an in-depth exploration of resources.
In less than two years, the World-Wide Web (WWW) has emerged as an international highway system for internet cyber-travelers, and WWW client software such as Mosaic, Lynx, Cello, and WinWeb have become the model-T vehicles that are attracting millions of new users to the internet highways. Although these programs have made it possible for inexperienced users to easily browse HTML documents and traverse hyperlinks, they do not yet provide facilities that make it easy to discern the forests as well as the trees, or better yet to let users see both the forest and selected trees simultaneously. This paper describes two prototype mechanisms that let users flexibly view and browse different levels of detail in a single document or multiple linked documents, using an "active outline" paradigm similar to what is already provided by outlining programs such as More, Acta, and In-Control or word-processing programs like Microsoft Word.
Active outlining is a capability that lets users directly expand or collapse the levels of detail within a document or any subsection of that document. Using such a capability, one can expand selected sections and subsections while collapsing others -- in order to see details within an over-all context. For example, consider the following simple outline:
A. Topic A (level 1) 1. Topic 1 (level 2) 2. Topic 2 (level 2) a. Topic a (level 3) b. Topic b (level 3) 3. Topic 3 (level 2) B. Topic A ( level 1) 1. Topic 1 (level 2) a. Topic a (level 3) b. Topic b (level 3) 2. Topic 2 (level 2) a. Topic a (level 3) C. Topic A (level 1)
An active outline capability would let us collapse the above example to show different levels of detail. The fully expanded version has 3 levels, but we could display just level 1:
A. Topic A (level 1) B. Topic A (level 1) C. Topic A (level 1)
Or we could choose to display only level 2 for all topics:
A. Topic A (level 1) 1. Topic 1 (level 2) 2. Topic 2 (level 2) 3. Topic 3 (level 2) B. Topic A (level 1) 1. Topic 1 (level 2) 2. Topic 2 (level 2) C. Topic A (level 1)
HTML documents can have a similar hierarchical structure or outline via "heading" tags[1]. Headings are used to divide a document into smaller subsections or to partition lists into sets of similar items. Readers can get a general picture of the content by glancing over these structures (the headings). In Mosaic and other WWW client software, rendering headings of different levels using different fonts, sizes and appearances achieves this goal to some degree. Users may easily scroll down document and glance through the different levels of headings to produce a rough picture of this partitioning structure in mind. However, more advanced functionalities are desirable, such as indentation of subsections and optional hiding of more detailed levels. It would also be desirable to give individual users flexible control over such options.
The logical structure formed by hyperlinks that span over the web can also be considered as a logical tree. In WWW client software like Mosaic, users navigate this network structure by clicking a mouse and following links to connected documents, one level at a time. There are currently no mechanisms that let users get a pictorial view of the network link structure. Visualization tools would provide a more concrete picture, and relieve users from the burden of remembering such structures.
In the existing HTML documents over the web, many lengthy articles include an outline table of contents at the top. However, this method requires explicit labor of the authors, and its static nature prevents further exploration into the structure. It does not permit viewing details of one section in the context of higher level headings for adjacent subsections nor does it let the user decide which sections to expand or collapse. The active outlining prototype we have designed and implemented operates on standard HTML documents that contain headings (H1, H2, H3, etc.) for different levels of detail.
The example Mosaic window in figure 1 shows an HTML document in the original Mosaic implementation, while figure 2 shows the same document in our prototype modified Mosaic browser that provides outlining capability (Click on the figure to bring up the full size picture).
Fig. 1: Standard Mosaic Document Display
Fig. 2: Active Outlining Display of the same document
Our prototype active outlining version of X-Mosaic provides three mechanisms through which users can control the levels of detail shown in any outline that contains headings: a cascading submenu, an iconbar, and a symbol preceding each heading in the display itself. Fig. 3 shows all three of these mechanisms. The function of each item in the submenu and the meaning of each symbol are described at the right hand side of Fig. 3. The items in the iconbar are not listed, since they provide same functionality as submenu items. To directly control outlines through the symbols, one uses the left button to select a given heading, and the middle button to perform actions. An action click on a triangle pointing right opens subheadings underneath it by one level; conversely, an action click on a triangle pointing down closes all the subheadings below it. That is, the triangles act as toggles to expand or collapse any selected subheading.
Fig.3: Active Outline Menu, Symbols, and Icon Bar
Figures 4 and 5 illustrate how users can flexibly expand or collapse different topics. In figure 4, the hotel and airline topics have been collapsed and all text is suppressed. Figure 5 shows headings and optionally expanded section texts.
Fig. 4: Selective Expansion of Outline Topics
Fig. 5: Selective Expansion of Topics and Texts
The other element of HTML documents that can be readily pictured in active outline form are the linkages to other HTML documents. Sometimes the entire purpose of an HTML document is to link to other documents -- the first is a kind of outline table of contents. In such cases, the anchor links are the most valuable information of the document.
Using methods similar to document outlining, our modified Mosaic browser enables users to visualize the structure formed by these inter-document links recursively to any specified depth, including the outlines within each connected document.
The figures below illustrate how active outlining can be used to explicate the hypertext structure of related documents. Figures 6, 7, and 8 show how a user would have to proceed to reach the item "Education Accounts" using a standard WWW client browser such as Mosaic. Figure 9 shows how our prototype augmentation to X-Mosaic displays the linking structure outline of the first document. Note how the document in figure 9 provides an immediate overview of contents in the subsequent documents. At the same time, it provides immediate access to item "Education Accounts" (of course here we have temporary omitted the overhead in bringing up the outlines at the first place). This is particularly useful when users want to explore all (or most) of the resources linked to a given document. Instead of navigating through the hyperspace article by article, one may accomplish the task in a single step and visualize the results in a single display window.
Fig 6: Standard Mosaic Link Display
Fig. 7: Display for Linked Document (step 2)
Fig. 8: Second Level Linked Document
Fig. 9: Outline Display for Three Level Liking Structure
Just as for document heading levels, active outlining also can be used to selectively hide and expand different levels of linked documents. Figure 10 shows how we can set different levels of expansion for individual links. Figure 11 shows how the function "insert doc" brings the entire document pointed to by the selected link into the current document.
Fig. 10: Selective Expansion of Individual Links
Fig. 11: Insertion of Linked Document
The purpose of this project was to create a prototype to demonstrate the feasibility and utility of adding an active outlining capability to WWW client software such as Mosaic. The first author was able to do this during the course of a ten week summer project at Lawrence Berkeley Laboratory, where he was a summer intern supervised by the other two authors. In order to accomplish this goal in such a short period of time, we began with the standard X-Mosaic source code distributed by NCSA. In order to minimize changes to the original code, we explored several approaches before reaching a final solution. The solution we finally decided on was to implement an independent module which is only activated when outlining mode is enabled. This module performs the necessary tasks to modify the output that is displayed in the Mosaic window.
n order to understand our implementation, some understanding of the internals of X-Mosaic is essential. Whenever a HTML document is brought into X-Mosaic, it is sent to the parser, and a linked-list of tags is generated. This list is later sent to a formatting module, where each tag is formatted for output according to their properties. Finally, the list of formatted items is displayed on the screen. All the jobs described here are actually done within the HTML widget, which is the graphical component that handles the main display. The question is: at which stage do we insert the new module to handle outlining capabilities? It would certainly be nice if we could build a new outlining widget which will replace the HTML widget when needed to render the outlines. The obvious drawback with this scheme is that it requires too much coding. Therefore, a simpler module is inserted after the parser to do the necessary work.
The new module intercepts the list generated from parser, and builds up an internal data structure to store information concerning document outlines and linking structures. Whenever outlining mode is turned off, the module stays inactive and passes the original list to the next stage of operation. However, when outlining mode is set, the module drops the original list, and builds its own list based on the information stored in its own data structure and the user configurations obtained from the user interface modules. The generated list is in nature similar to the original list, but with unneeded portions removed and additional information appended. The list is then passed along the pipeline to the the standard Mosaic display module. The advantage of using this approach is that it keeps the modification to minimum, since functionalities of the existing modules remain the same and do not need to be changed.
Many problems arise when implementing a project using existing code over which we do not have total control. Many tricks are used to bypass this limitation. For instance, there is no good way to indent headings because the inserted module does not deal with output directly. The only method to tell the existing code to indent part of the text is to use tags defined in HTML. However, formatting the output is not the intention of the HTML, and no current HTML tag can be found to do the work. The trick is to use the LI (list) tag, which in X-Mosaic will be indented automatically. Similarly, we have no control over the document area to receive user inputs, and the symbols we described in section 2 are internally implemented as image anchors with special marks. The added module must intercept anchor callbacks to filter these symbols out.
Another current limitation is in handling exceptions. Many HTML documents on the web do not follow strict HTML standards. Most such documents can be displayed on Mosaic nevertheless because Mosaic is very well written in terms of tolerating variations in styles. However, this aspect causes problem for our prototype module, because it is not "mature" and "smart" enough to accommodate all the possible mutations of HTML. In some extreme cases, the new module may truncate tags or interleave them.
Certainly there are still a vast quantity of other possible enhancements to web clients, including more things that can be done with respect to outlining HTML documents. For instance, the linking structure outlining capability described above is very useful, but it could be even more valuable if the exploded result that it generates could be saved for future use. Simply saving the newly generated document in pure HTML format will not suffice. Instead, we need to store the entire outlining data structure. Another obstacle in saving generated outlines is that documents on the web may be changed, and the outlines must reflect these changes when retrieved. Therefore, more consideration must be taken before any such implementation. Other possible future work could include porting these capabilities to Mac and MS-Windows Mosaic, as well as to other web browsers.
Jui-Chieh Hsureceived the B.S. degree in computer science from Binghamton University, Binghamton, NY, in 1994. He is currently a MEng student at Cornell University, Ithaca, NY. Jui-Chieh has been with the Information and Computing Science Division at Lawrence Berkeley Laboratory during the summer of 1994 as a summer student intern. His research interests include geometrical modeling, user interface design, and robotics. Jui-Chieh is a member of Upsilon Pi Epsilon.
Willaim E. Johnstonhas been with the Lawrence Berkeley Laboratory since 1975. He is the group leader of the Imaging and Distributed Computing Group at LBL, and is the principal investigator for the DOE research project - "High Speed Distributed Computing" and DARPA research project - Distributed Mass Storage Systems in High Speed Wide Area Networks." His research interests include gigabit network system, image processing, scientific visualization, and distributed system for supercomputing.
John L. McCarthyis a Computer Scientist at the Lawrence Berkeley Laboratory. He has helped design and develop information systems for public opinion surveys, census tabulations, materials properties, epidemiology records, and most recently, molecular biology. Throughout his career, his major interests have included data definition, metadata management, and user interface design. He came to LBL in 1980 and has been a member of LBL's Genome Computing Group since 1990. Since 1991 he has been Principle Investigator three plant genome database projects sponsored by the US Department of Agriculture.
Contact Author: Jui-Chieh Hsu (juihsu@cs.cornell.edu)