

Cascading Style Sheet support in Amaya
This document describes the current state of the Cascading Style Sheet support in Amaya. The
implementation is based on the CSS1 proposal . We
focussed on providing as many features as possible and offering an easy to use
and learn interface. Considering the second point we choosed a "learn by
example" approach suitable for users not experienced with style sheets.
This document contains the following sections:
-
Section "Presentation" gives a short overview of the CSS.
-
Section "Interface" details the CSS specific areas of the
Amaya interface.
-
Section "Current State" presents the CSS functionnalities
that are currently implemented.
-
Section "What's lacking" explains the main points to be
improved or added.
-
Section "What's next" is for future plans.
CSS defines a syntax to describe presentation associated with elements as a
set of properties (like colors, fonts, etc.). Associated to properties, a
selector restrict the application of these rules to a set of element depending
on their type (like H1, or LI), their context (like an EM in a H3) or classes
applied to an element. A set of rules defines which properties should be
applied when more than one selector match a given element. While this is
relatively simple for someone used to handle structured documents, the
experience has shown that a new user may have difficulties to modelize a
document as a structured entity. This might be a problem when trying to
introduce the CSS to a large audience.
Thus, the challenge is to build a tool simple enough so that inexperienced
people can use styles when creating HTML pages with Amaya, while retaining all
the possibilities of CSS. The interface was also designed to not hide the
underlying complexity of the document structure (Structure View) and of the
CSS language (CSS rules may be shown), in order to shorten the learning curve
to structured presentation design.
One of the strongest features of CSS is the cascading model. Presentation
rules can be fetched from different remote files, tied to the document or
associated to one specific element in a page. This allows sharing and reuse of
sets of rules whilst allowing specific presentation. It allows also the use of
an user defined set of rules to accomodate his preferences. We tried to give a
complete and simple view of the cascading model, showing separately specific
presentation (Structure View), document specific rules (Structure View and CSS
dialog box) and all the set of rules associated to the external files
referenced by the document. It is possible to manipulate rules in one file but
also to move them from one file to another, allowing a user to take
presentation rules from a remote server and apply them selectively to his own
pages, in the purpose of building a pool of presentation rules.
We first present the Style interface as provided by the current version of
Amaya:
The Amaya menu bar contains a Style menu containing all the
actions related to presentation and style manipulation. Entries in that menu
are ordered from the most specific to the most generic operations, except the
two last ones, which are not related to CSS, but to HTML (Information
type and Character element).
-
Three entries call dialog boxes that associate presentation with the currently
selected elements:
-
Character Style allows one to select font attributes (size,
style, family and underline)
-
Colors allows one to choose the foreground and background
colors from a palette.
-
Format allows one to set alignment, indentation,
justification and linespacing.
-
Background Image allows one to insert a background image and
to select the repeat mode.
All modifications made with these dialog boxes can be viewed immediately in
the WYSIWYG view and the Structure view.
-
Two entries are related to classes:
-
Create Rule uses the style of the selected element to define
a new class with the same. A list of the existing classes is proposed, the
type of the current element being the default. This is the first step toward
defining CSS rules. Presentation is moved from the selected element to the
document header, defining a new CSS rule. All elements of the new class take
the new style.
-
Apply class uses one of the existing classes and applies it
to the selected elements. These elements are then displayed with the style
associated with class chosen.
-
The Style sheet item gives access to the CSS dialog box:

-
The two CSS selectors allow to select CSS files from which rules can be
manipulated. In each, the currently selected file is highlighted.
-
The two rule selectors show the rules extracted from the selected CSS files.
Only one rule can be selected for both selector, which is the current rule.
All rules are grouped by their selector and only the list of selectors is
shown here.
-
The text area at the bottom shows the CSS syntax of the current rule (the one
selected from the above selectors), allowing the user to see the CSS syntax.
This is an editable field allowing the user to modify the current rule.
-
Between the two Rule Selectors there is a column of 5 buttons.
-
pushing the
button merges the current rule (as shown in the text area) to the second
file. Changes are immediately reflected in the WYSIWYG View.
-
pushing the
button copies the current rule to the second file.The difference with the
previous button is that all rules using the same selector initially present in
the file are first removed.
-
pushing the
button deletes the current rule.
-
the buttons
and
have the same effect as the first two buttons but they act on the first file.
-
The five buttons at the bottom are used for operations at the CSS file level.
-
Save initiates the operation of saving all modified CSS
files.
-
Save as saves one of the CSS to a local file.
-
Reload is a coarse grained Undo. It reloads all the modified
CSS files referenced by the document.
-
New adds an external CSS file to the list of the external
style sheet referenced by the document. It is also possible to browse the
content of a file without attaching it to the document. Amaya keeps an history
of the CSS files encountered. This history is saved from session to session,
and allows to grab quickly one of the CSS lastly referenced, to browse its
rules or to attach it to the current document.
-
Remove supresses a reference to an external CSS file.
-
Cancel closes the CSS dialog box.
There are some additionnal dialogs needed for saving CSS files or selecting
them from the history.
Here, we focus on what is currently supported from the CSS1 proposal:
-
Parsing:
-
all the basic:
-
grouping selectors in one rule
-
grouping properties in one rule
-
comments (in external CSS files only)
-
classes and pseudoclasses
-
context sensitive selector
-
standard units
-
Cascading order should be fine.
-
CSS properties: Everything should be parsed correctly, but the back-end may
lack support for some attributes
-
Font: all should be supported to some extend, except the generic "font" used
to group properties.
-
Color: a list of approximately 500 predefined color names is here. Parsing of
#RGB is available too. But the set of colors available is limited. The
notation rgb(r,g,b) is not yet supported.
-
Text: text-align, text-decoration and text-indent.
-
Fonts: Times, Helvetica and Courrier are available, with various character
style and a set of prefefined size (from 6 to 60 points).
-
Box Properties: not supported in this version. However, a bit of support is
provided for margin-xxxx properties but not well tested.
-
Magnification is here, perfect for "Users Preference" style.
There is support for users preferences which can be provided in
$(HOME)/.amaya.css .
First, considering the current draft compliance, the main issues for full CSS1
support are:
Considering the user interface, one of the main problems style sheet writers
will be faced to is the reverse problem induced by the inheritance
complexity:
Beginner's question: How do I produce xxx kind of input ?
CSS Writer's question: Why did it produce xxx kind of input ?
Suppose that a part of a document doesn't have the expected look, why ?
Considering the underneath complexity of the cascading order, when referencing
multiples external CSS, one can easily understand that debugging CSS in
real-use might be difficult. One nice feature would be to show graphically all
the rules applying to an element or a zone, where they came from, and which
rules they superceded.
Irène Vatton
Webmaster
$Date: 1998/02/06 17:27:27 $