In this paper we present Amaya, a WYSIWYG authoring tool for the Web based on a structured representation of documents. It's a Web client that acts both as an editor and as a browser. It has been designed at W3C with the primary purpose of being a testbed for experimenting and demonstrating new languages, protocls and formats for the Web. It includes a WYSIWYG editor for HTML and XML. It can publish documents remotely, through the HTTP protocol. It handles Cascading Style Sheets (CSS) and the new MathML language, for representing mathematical expressions. An experiment for including vector graphics into Web documents is also described.
The Web is growing very fast. Not only the number of users and sites increases at a pace that no other system has experienced in the past, but new applications and usages are proposed almost every day. This means that the Web technology has to evolve also very fast to meet the requirements of these new applications. That's the main reason why the W3C has been created: to lead the evolution of the Web.
As part of its mission, W3C is developing new formats and languages that allow richer documents to be represented in the Web, thus enabling new applications.
Every Web author knows about HTML and the limitations of its most common version, HTML 3.2 [Raggett 97]. The document structure specified by HTML is general enough to represent a wide variety of documents, but it is not precise enough to describe highly structured documents, as needed by some demanding applications. Graphics can be represented only in the form of raster images, as well as mathematical expressions, thus limiting the quality of technical and scientific communication. HTML 3.2. proposes a number of elements and attributes that allow authors to control the style of documents to some extent (character size, font, color, etc.), but this is too limited for high-quality display or printing.
To address these issues, W3C is developing such languages and formats as HTML, XML, CSS, MathML, etc. While these specifications are developed, some experiments are made to check implementation issues, to evaluate and demonstrate the technology, and to ensure interoperability. Two software platforms are developed by W3C for that purpose, the Jigsaw server [Jigsaw] and the Amaya client. In this paper, we focus on Amaya, the testbed client software.
The paper presents the most innovative aspects of Amaya, focusing on its architecture and its ability to cope with new document idioms. The paper is organized as follows: the next section is an overview of Amaya's main features; section 3 explains how Amaya handles the two Web document formats, HTML and XML and the structure behind these formats; the next section focuses on two particular types of structured document objects, mathematical expressions and vector graphics; section 5 presents style sheets; section 6 describes the global architecture; a conclusion terminates the paper.
A testbed client must be versatile enough to allow a wide range of experiments and demonstrations. That is the reason why Amaya has been designed as an active client--one that not only retrieves documents from the Web and presents them to the user, but also allows an author to create new documents, to edit existing ones, and to publish these documents on remote Web servers.
The Web is made of a number of documents linked together. While working on the Web, a user needs to access several documents, especially when following, creating or modifying links. For that reason, Amaya is able to work on several documents at a time, acting as a browser and as an editor simultaneously.
As the Web technology is evolving very fast, Amaya is able to change very fast, taking into account the latest proposed extensions to Web protocols and formats. Therefore, Amaya provides an extensible framework. To allow in-depth evaluation of new features Amaya is available on several platforms (Solaris, LINUX, Windows, etc.), it is extensible and easy to use, and has good performances. It has been designed as a new generation of client software that can integrate all aspects of the Web and that still remains user friendly.
Amaya has been designed with a WYSIWYG style of interface and a structured representation of documents has been chosen, to stick to the Web specifications.
Amaya implements many Web protocols and formats:
Users of the Web are not supposed to know the syntax of all Web languages. When manipulating Web documents with Amaya, users are not asked to write nor to read documents under their HTML syntax. HTML files are automatically produced by the tool, as well as the CSS, MathML or XML syntaxes. This does not mean that Amaya is simply a word processor with a HTML filter. On the contrary, it has been designed specifically to support hypertext and Web documents, with all their specificities.
The WYSIWYG paradigm, with a structured model for internal representation, has been chosen to make the design of HTML documents as easy as possible for any Web user. Documents are presented to the user with the aspect they have when displayed by the most popular browsers and the user interacts with the editor on the basis of this external representation. Simultaneously, the editor maintains an internal representation that follows the HTML or XML rules and constraints, as stated in the DTD.
In some cases, the structure of a Web document may be complex, with a number of nested elements of several types. That complexity may lead to ambiguity, as different structures may look very similar when displayed in their formatted representation. As a help to the user in such situations, Amaya can display the actual structure of the document being edited. This is called the structure view (see Fig. 1) and it is displayed in a separate window that the user can see at the same time as the formatted view.
Fig. 1: Amaya user interface
The structure view presents the document's hierarchical structure as an indented list and it displays the type and attributes of every element. This view is not a static representation. The user can act on it. S/he can select any element there; s/he can modify the document exactly in the same way as in the formatted view. Moreover, all editing commands are executed in both views simultaneously, whatever the view chosen to issue the command.
The principle of showing the same document in different windows simultaneously is not restricted to the structure view. An alternate view (see Fig. 1) is also available. It shows the document as if it would be displayed on a dumb terminal. Like the structure view, the alternate view may be used for editing, as well as the other views. It's not simply a preview that allows authors to check the document from a different viewpoint; it's a dynamic representation, where the user can make any change.
The concept of a view is used to show various aspects of a document, like hypertext links, headings (a table of contents), etc. All these views may be used to navigate in large documents: clicking on any element in any view automatically scrolls the document in all other views to show the same part.
In HTML or XML, various attributes can be associated with a number of elements and the allowed attributes depend on the element type. This is stated by the DTD. To help users choose the right attributes, a specific menu offers at any time all attributes that can be associated with the selected element(s), and only those attributes. Attributes are also displayed in the structure view and can be edited directly there.
Links are first class citizens in Web pages. Therefore a particular attention has been paid to their manipulation. Most often, the user does not have to type URLs to edit links. Instead, the browsing function of Amaya is used to load multiple documents. Links are then created or modified simply by clicking on the target document or anchor that is displayed on the screen. Thus, the user can see the actual target of a link and avoid any mistake when setting links.
Amaya is not simply a structured editor. It is a complete web authoring environment. When working with Amaya you are on the web and you can access any web resource. You can browse the web and find the information you need while writing a document. You can copy and paste from any document, directly on the formatted representation and the whole structure of the copied part is preserved. You can create links pointing at any place and you can check these links immediately. All these actions can be performed in a single consistent environment, as the editing and browsing functions are integrated seamlessly in a single tool.
Access to the web is not restricted to browsing: the document you edit can also be published on remote servers where you are allowed to write. Publishing on the web is as simple as saving a document to a local file. Just type an URL instead of a file name when saving a document and Amaya does the rest. Nevertheless, you need to have the appropriate access right to publish on remote servers. Included objects such as pictures can also be saved and all URLs are updated accordingly if the document has moved from its original location.
Transferring documents and other resources to and from remote servers is done by the libwww. Access to these servers is done by means of HTTP methods: GET to load remote documents, POST/GET to send forms, and PUT to publish documents.
HTML has been designed as a markup language that represents the structure of documents. As HTML aims at representing a large variety of documents, it specifies very general element types that can be used in various contexts, such as paragraphs, headings, lists, etc. and it does not impose a strong constraints in their structure. As a consequence, the main structure of HTML documents is very simple. Some parts of an HTML document, such as tables, however, may have more complex structures.
Amaya processes HTML files in a specific way. Because it is based on the WYSIWYG paradigm, it allows the user to act on the formatted document for altering the HTML source. Thus, the HTML source is treated as a data structure definition. When parsing the HTML source, Amaya builds an internal representation of the document structure which is basically a tree. This internal structure is then used for formatting and editing.
Amaya considers HTML as an SGML [Goldfarb 1990] application. The editor always follows the HTML DTD when manipulating the document structure and it performs only valid operations, i.e. operations allowed by the DTD. This leads to well structured documents and allows to further process documents safely.
One of the drawbacks of HTML is that it is not extensible: it offers only a limited set of tags. For certain applications, which require a high level representation, HTML is not powerful and flexible enough. For instance, mathematicians cannot represent equations; only pictures of equations can be exchanged using HTML. A structured form would be much more appropriate. Obviously, HTML cannot be extended indefinitely to include all tags needed by all applications. For this reason, XML (eXtensible Markup Language) [Bray et al. 98] has been proposed as an alternative to HTML.
XML allows users to define their own tags and attribute, but at the same time it is more demanding: XML documents must be properly structured and coded.
An XML document or object is represented in Amaya in the same way as an HTML document, as a tree that must follow the model defined by a DTD.
In Amaya, most commands issued by the user are the same as those proposed by usual word processors but they are interpreted by the editor in terms of the internal document structure. Specific structure manipulation commands are thus avoided, as well as context sensitive menus.
Many HTML documents on the Web do not match the HTML DTD. Thus the HTML parser has been designed in such a way that Amaya never rejects these documents. When it parses a document that is not structurally correct, it tries to transform the structure of the document. Sometimes, this structure is so bizarre that Amaya is not able to automatically generate the fully HTML conformant structure. In that case, the parser nevertheless loads the document, but if the user attempts to modify it, the editor performs only valid operations. Thus the document structure is improved and, even if it is not guaranteed to be always correct, it is not worse than before when it is saved, and the user is not prevented from working on any document.
A user can manipulate text in the same way as s/he were using a word processor. At any time, the user can select any part of that text and assign it a HTML type (H1, LI, EM, etc.), by means of the Types menu or some shortcut buttons. Such a command transforms the selected part into an element of the chosen type. If some other elements need to be created or transformed to keep the document HTML conformant, these transformations are also performed. This allows the author to type in the contents first and provide structure afterwards, but the opposite is also possible, as the type of an element can also be chosen before creating its contents.
In Amaya, this is the only way to manipulate the document structure. The user does not enter or edit tags. Only the editor directly acts on the document structure, and when it makes a change, it checks the change against the DTD to make sure that the structure remains correct. Furthermore, a user can select a passage that has a given structure and ask for a completely different structure. For such complex transformations, the editor cannot rely only on the DTD, as some semantics is involved. The problem is solved by a transformation language [Bonhomme and Roisin 97]. This language is used to define complex structure transformations and allows to define structure patterns and the corresponding transformed structures. For instance, with that language, Amaya can easily transform a list of items into a table and vice versa.
Two XML applications are implemented in Amaya for handling mathematical expressions and vector graphics. Amaya's XML parser is used for both applications. It can also be used for other XML objects embedded in Web documents, as it has been designed as a multi-DTD parser.
MathML [Ion et al. 98] was released as a W3C Recommendation in April 1998. MathML is a markup language for describing mathematics. It provides a much needed solution to including mathematical expressions in Web pages.
MathML is intended to facilitate the use and re-use of mathematical and scientific content on the Web. MathML can be used to encode both mathematical notation, for high-quality visual display, and mathematical content, for more semantic applications like scientific software, or voice synthesis.With adequate style sheet support, it allows browsers to natively render mathematical expressions.
Amaya now includes an implementation of MathML which allows users to browse and edit web pages containing mathematical expressions. Like the rest of the document, these expressions are manipulated through a WYSIWYG interface, and the author can see and edit equations through different views (see Fig. 2).
Fig. 2: MathML in Amaya
Web authors have currently two ways to include graphics in their Web pages. They can either use an image format or a vector graphics format. Image formats such as PNG [Alder et al. 96], JPEG or GIF are well suited to photographs and paintings, but when it comes to vector graphics, they pose some problems:
Some vector graphics formats (CGM for instance) may be used on the Web, but they are only available through plug-ins, which also pose some problems:
For those reasons, it seems appropriate to look at other ways to embed structured graphics in Web documents. Graphics considered here are schematic 2D drawings for which there is a strong need on the Web. Standards for 3D virtual reality (VRML) and for complex technical drawings (CGM) already exist and are well recognized, but there is a lack in the domain of simple drawings that many authors use to illustrate or explain a point in a report. Most word processors offer tools for drawing such graphics, but there is no common format that provides for interoperability on the Web.
An experiment has been done in Amaya to explore the advantages of integrating seamlessly vector graphics in Web documents and to design a new format for 2D graphics (Fig. 3). For this experiment, MathML has been taken as an example, as the problems of integrating drawings and mathematical expressions in documents have much in common.
Fig. 3: Vector graphics in Amaya
The experiment has been carried out in several phases:
A web page is not only ruled by the HTML specification. It can also include stylistic stuff that conforms the CSS (Cascading Style Sheets) specification. For CSS, the same approach has been taken as for HTML: the user does not write CSS syntax directly. S/he interacts on a formatted document and sees immediately the result of his/her commands on the formatted document and in other views. Amaya is in charge of producing the actual CSS syntax.
As the same result may be achieved by associating some style declarations at several locations in an HTML document, the formatted view is not enough. Other means should be provided for avoiding any ambiguity. Like for HTML or XML, the structure view fulfills this need. It clearly shows where style rules are located: as Style attributes associated with HTML elements, as Style elements in the heading of a document, or as a link to a style sheet.
CSS rules may be used not only for text elements (for instance for HTML), but also for XML applications. In Amaya, this has been experimented for mathematical expressions and for structured graphics. For instance you can define a particular color or font for a given type of element (e. g. square root in MathML or circle in graphics) and create a CSS rule that is applied every time this type of element is encountered or created.
Amaya's internal design reflects its testbed role. The software architecture allows easy extensions. Several APIs and mechanisms are available to change and extend its functionality with as less modifications as possible within the source code.
To allow its handling of documents in a structured way, Amaya has been designed as an application on top of the Thot tool kit (Fig. 4). Thot is a set of libraries that implement document manipulation functions. It is based on a structured document model that clearly separates content, structure, and presentation.
Fig. 4: Amaya architecture
All editing and formatting functions in Thot rely on the document logical structure. In any application that uses Thot, a document is represented internally as a tree, called the Abstract Tree, that assembles typed elements, such as headings, paragraphs, lists, highlighted phrases, etc. These elements may have attributes which provide more information about the element's role in the document structure.
The logical structure of a document is constrained by certain rules which are expressed in a DTD. These rules specify the available element types and attributes, they indicate how these elements may be assembled to make a valid structure, and they state what attributes can be associated with each element type.
The document image displayed in different views is defined by a presentation schema. A presentation schema specifies the views to be proposed to the user and it indicates in presentation rules how the elements and attributes defined in the corresponding structure schema should be displayed in these views.
Using the abstract tree and the presentation schema, Thot formats the document for each view, it produces an intermediate structure, the Box Tree, that is then used to display the views on the screen.
Amaya uses several presentation schemas, which specify different layouts and styles for HTML documents: one for color screens, one for printers, etc. These schemas define the default presentation to be applied to HTML documents, when no particular style information is associated. When CSS is used, these presentation schemas are dynamically extended with presentation rules that correspond to the CSS rules included in or referred from the document.
DTDs are used only to specify the internal logical structure of documents, but not their external syntax. The same structure can be conveyed by different syntaxes, and when the document is saved several syntaxes can be used. Thot provides a specific mechanism for defining the syntax to be used when saving an Abstract tree. In Amaya, this mechanism is used to save documents in HTML, XML or plain ASCII.
Thot has its own language, called A, to define applications, i.e. a user interface and specific commands (basic editing commands are provided by the Thot libraries). With an application schema, written in this language, a developer specifies the menu bar that appears at the top of each view, the contents of the corresponding pull-down menus and the functions that are called by these menus. An application schema also allows developers to extend or modify the basic editing functions provided by Thot.
Amaya is a Thot application described in language A. It uses the basic editing functions provided by Thot, to which it adds some particular commands that are specific to the web and the HTML, math or graphic structures.
The main Thot library provides developers with an API that allows them to handle all objects that make a document and its environment. There are functions for creating, modifying, deleting, opening, accessing, finding, moving, etc. such things as documents, logical structures, elements, attributes, links, views, etc.
All document manipulation functions are based on DTDs and presentation
schemas. As an example, an application program needs only to call two
functions (NewTree and InsertTree) to create a new
subtree in the document structure. Function NewTree receives as a
parameter the type of the element that must become the root of the new tree,
and according to the DTD, it creates all the required elements in the subtree.
Function InsertTree uses the DTD to check whether the tree can be
inserted at the required place in the document structure and it uses the
presentation schema to redisplay only what is needed in all open views. The
developer cares only about the document logical structure and all the rest is
performed by Thot. This makes the development of applications very simple.
Thot also provides a library of graphical user interface functions that, along with language A, makes the development of a user interface also very simple.
A number of standard editing functions are provided by Thot, but these functions may need to be modified, extended or replaced by the application in some cases. For that reason, application schemas allow developers to specify some specific functions (that they have to write) that must be called before, after or instead of the standard functions. They can specify different functions that are performed according to the element type or attribute concerned. This allows to change the behavior of the standard editing functions without making any change within the Thot code itself.
As an example, activating an element by double-clicking it with the mouse is a standard Thot function, but in Amaya, when an anchor (a link) is clicked, a specific function must be performed to get and display the referred document. Language A allows a developer to declare that, when an element of type anchor is clicked, a specific function must be called instead of the standard Thot function. That function, written by the developer, uses the Thot API to access the HREF attribute associated with the clicked anchor, then it uses libwww to get the corresponding document from a remote server, and again the Thot API to display that document.
Amaya inherits a lot of functions from the Thot library, such as text editing, formatting, basic structure manipulations, user dialogue, picture display, etc. More specific functions are implemented by the following software componentswhich constitute the Amaya application:
HEAD of a HTML file or in a STYLE attribute, and
generates the corresponding presentation rules for Thot.
This architecture allows Amaya to be extended in many ways and most extensions can be made very simply, often without programming. Due to the Thot library and its API, most basic editing functions are available and can be reused very easily. Due to the available declarative languages (DTDs, presentation schemas, A), many changes to the software can be made simply by changing some declarations.
We have presented an authoring environment specifically designed to implement and test the latest Web specifications. It is based on a highly structured representation of documents, which allows it not only to handle HTML pages, but also complex XML structures such as MathML or vector graphics.
To a large extent, its flexibility comes from the editing kernel on top of which it is built, that clearly separates generic structure manipulation and formatting functions from specific manipulations related with particular applications.
The Web evolves towards a clearer separation between document presentation and structure and a higher level of information structuring. That is the purpose of such languages as CSS, XSL, and XML. These languages are still evolving and Amaya will take these evolutions into account.
The Web is opening up to new applications and more and more end users. This requires flexible and extensible tools, for instance tools that can meet the specific needs of people with disabilities or that can handle the large variety of languages spoken in the world. W3C is currently working in these directions with the Web Accessibility Initiative (WAI) and the Internationalization activity (I18N). Obviously Amaya is concerned by these aspects and it will integrate new accessiblity and internationalization features in the future.
Amaya is freely available both as a precompiled package for various platforms,
including Windows, Linux and other Unix versions, and in the form of source
code. The URL to download Amaya is http://www.w3.org/Amaya/
[Alder et al. 96] PNG (Portable Network Graphics) Specification.
http://www.w3.org/TR/REC-png, W3C, October 1996.
[Bonhomme and Roisin 97] S. Bonhomme and C. Roisin, Interactively Structuring HTML Documents. Computer Network and ISDN Systems, Vol. 28, N. 7-11, pp. 1075-1084, May 1996.
[Bray et al. 98] T. Bray, J. Paoli and C. M. Sperberg-McQueen,
Extensible Markup Language (XML) 1.0.
http://www.w3.org/TR/REC-xml, W3C, February, 1998.
[Goldfarb 1990] C. F. Goldfarb, The SGML Handbook, Clarendon Press, Oxford, 1990.
[Guetari 97] R. Guetari, Amaya Plug-in API. Sixth International World Wide Web Conference, Santa Clara, USA, April, 1997.
[Ion et al. 98] P. Ion, R. Miner, S. Buswell, S. Devitt, A. Diaz, N.
Poppelier, B. Smith, N. Soiffer, R. Sutor et S. Watt, Mathematical Markup
Language (MathML) 1.0 Specification.
http://www.w3.org/TR/REC-MathML/, W3C, April, 1998.
[ISO 8879ISO] (International Organization for Standardization). ISO 8879:1986(E). Information processing -- Text and Office Systems -- Standard Generalized Markup Language (SGML). First edition -- 1986-10-15. [Geneva]: International Organization for Standardization, 1986.
[Jigsaw] W3C. Jigsaw Overview.
http://www.w3.org/Jigsaw/, W3C
[libww] W3C. Libwww - the W3C Sample Code Library.
http://www.w3.org/Library, W3C
[Lie and Bos, 1996] H. W. Lie and B. Bos, Cascading Style Sheets, Level 2
CSS2 Specification. http://www.w3.org/TR/REC-CSS2/, W3C, May,
1998.
[Quint and Vatton 98] V. Quint and I. Vatton, An Introduction to Amaya. World Wide Web Journal, Vol. 2, N. 2, pp 39-46, 1997.
[Raggett 97] D. Ragget, HTML 3.2 Reference Specification.
http://www.w3.org/TR/REC-html32, W3C, January, 1997.
[Raggett et al. 98] D. Ragget, A. Le Hors and I. Jacobs, HTML 4.0
Specification. http://www.w3.org/TR/REC-html40/, W3C, April,
1998