Amaya and XML structures
Architecture
Amaya handles several XML vocabularies (XHTML, SVG, MathML, RDF [14], etc.). The first step in handling all those languages
is to parse the XML syntax. For this task, Amaya uses the Expat [15]
parser.
Figure 2 :
Document cycle through Amaya Engine
The XML parser builds a DOM tree corresponding to each XML document.
Documents may contain pieces written in different XML languages, provided
that namespaces are used for each language transition. DOM trees therefore
contain subtrees representing different kinds of structures. Amaya can handle
at the same time several documents belonging to several namespaces. For SVG,
the multi-namespace feature allows typically a single XHTML document to
include several SVG drawings and MathML expressions (including MathML within
SVG, through the foreignObject element). The multi-document
feature allows users to work simultaneously on several SVG drawings and on a
related XHTML document (Figure 2).
Wherever XML structures contain text, content is represented internally in
Unicode [16]. Amaya
can support different document encodings. However, at parsing time, every
text string is converted into UTF-16. At saving time, documents are
transcoded back to their original encoding by default, but the user may also
change encoding at that time. A single internal encoding is a great help for
editing. Users are free to copy (or move) text from one document to another,
even if documents were encoded differently and if they belong to different
namespaces. This also allows Amaya to process all pieces of text with the
same algorithms, wherever they are located in the XML structures. Users can
then search for text, replace strings, or check spelling everywhere,
including in SVG elements included in XHTML pages. This also allows the text
formatter to hyphenate words according to the current language (indicated by
the xml:lang attribute). It will then be very easy to implement
text formatting within SVG, as soon as this feature is added to the SVG
language.
Unicode contributes to a large extent to the internationalization of the
Web. It also provides a lot of internationalization features to Amaya. By
sharing Unicode with XHTML, SVG benefits from the developments that were made
to handle multiple scripts and various writing directions.
To allow users to clearly understand the structure of XML documents, Amaya
can display different views of each document. Each view is rendered
in a different window. There is a Formatted view that typically
shows the document in the same way as most Web browsers do. There is also a
Structure view which displays an indented list of elements with
their attributes, making the tree structure very clear. There is a
Source view, which just displays the XML code. Depending on the
document type, additional views may be provided, such as a Table of
Contents view for XHTML pages (it renders only Hn
elements), or a Link view gathering all hypertext links originating
in the document.
The Formatted view is of special interest. Whereas the graphical
aspect of other views is predefined, formatting in this view is controlled by
CSS style sheets. Formatting is based on the CSS box model and CSS properties
apply to these boxes. The same CSS parser, formatting, and style engine are
used for all documents, and all parts of documents, whatever their type. This
is made possible by the uniform representation of all structures within
Amaya. This is the way that SVG elements are styled. In fact, some specific
SVG properties have been added by extending the CSS parser and styling
engine, but most of the properties are shared with the XHTML and MathML
elements.
The immediate advantage of this approach is for style inheritance. As SVG
elements are part of the same DOM tree as their surrounding document, they
can inherit any CSS property from their environment, without any limitation.
This unified approach allows SVG to benefit from all the nice CSS
features.
Hypertext links are of paramount importance in the Web, and Amaya provides
a lot of features for handling them efficiently. For instance, a simple
point-and-click mechanism allows the user to create or change hyperlinks very
easily, without manipulating URIs [17]. Links are also
automatically transformed (the href attribute is updated) when
material is moved from one document to another, with a different base. Many
other services are provided to manipulate links. SVG takes advantage of these
services. All the links it uses (elements such as a and
use, for instance, or links to style sheets) are handled by the
same services, with the same interface.
Amaya accesses the Web through the Libwww [18] library
which implements the HTTP [19] 1.1 protocol. Amaya uses
that protocol to fetch all the resources it needs (Web pages, images, style
sheets). It uses the PUT method from HTTP to publish pages
remotely. There is a single implementation of HTTP, which is used for
transferring all files whatever their format. This was proven especially
interesting recently, when the WebDAV [20] extension was added to Libwww. At once, it was possible
to use WebDAV to share not only XHTML pages, but also SVG drawings.
Editing
Amaya is a WYSIWYG editor. As described earlier, Amaya displays different
views of each document. Views not only provide a way to see a document, but
they are also used to interact on the document. Any view can be edited at any
time, and changes made in one view are reflected simultaneously in all the
other views. Users can thus work on one view and see how the other views are
modified at the same time. Obviously, all editing commands are the same in
all the views, which provides a uniform user interface.
The user interface provides users a way to handle multiple XML languages
at once. In order to achieve this integration, Amaya dynamically adapts its
interface according to the languages used in documents. Users can thus edit
XHTML, MathML and SVG structures, without need of a complete knowing of
underlying technologies.
Experience has shown that many editing operations are performed directly
on the Formatted view, probably because it offers a WYSIWYG editing
mode. The editing commands provided to style text elements are also available
for SVG. Selections (mouse and key events) and commands like copy/paste,
spell-checking, search/replace, etc., work in the same way on the XHTML and
the SVG text.
Amaya provides a command to create hypertext links. The same generic
command is able to generate an XHTML anchor around a XHTML piece of text or a
SVG anchor around any SVG element.
CSS is supported in Amaya to allow web authors to define the style of
documents independently of their contents. Even if CSS is often used only for
styling text, most of its properties apply to SVG equally well, and having a
single mechanism to change the color, the font, or the size of characters,
wherever they are, makes the user interface more consistent. So painting some
text in red is done exactly in the same way as changing the color of a red
circle.
Sharing code and structures
The architecture described above clearly shows how important it is to
actually share the internal structures and the code to process different
types of data in Web tools. When introducing SVG in Amaya, a large part of
the implementation was already provided by the overall architecture. It was
the same when MathML was introduced. Obviously some specific work was needed
for each language, to implement of their own semantics, but all the features
they share with other XML languages were already implemented. This not only
saves a lot of time to the developers, but it also reduces the hardware
resources required to run the tool. Plug-ins typically duplicate a lot of
code that is already implemented in their host browser. For SVG they have
their own XML parser, their own DOM tree engine, their own implementation of
CSS, their own protocol stack. With the architecture chosen for Amaya, all
those things are implemented only once.
The specific developments that were made for SVG are detailed in the next
sections, but it is important to note how much time and effort can be saved
by sharing the implementation of the common features. Annotea [21], an annotation application that was developed on top of
Amaya, may reinforce this observation. Annotea allows a user to create and
read shared annotations associated with any Web page. Annotations are
themselves Web pages that are stored on specific servers and related to the
documents they annotate by XLink [22]. This allows users
to annotate documents without modifying them, and to attach annotations to
any part of an XML document.
As soon as SVG was implemented in Amaya, it was possible to associate
annotations to any SVG file, and even to any element within an SVG drawing,
included or not within another document. It was also possible to put SVG
drawings within annotations.
