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 CSS2 proposal . We focused on providing as many features as possible while offering an easy-to-use and learn interface. To make learning easy we choose a "learn by example" approach suitable for users not experienced with style sheets.

This document contains the following sections:

1. Section "Presentation" gives a short overview of the CSS.
2. Section "Interface" details the CSS specific areas of the Amaya interface.
3. Section "Current State" presents the CSS functionalities that are currently implemented.
4. Section "What's lacking" explains the main points to be improved or added.

Presentation

CSS defines a syntax to describe presentation associated with elements as a set of properties (like colors, fonts, etc.). Associated to properties, a selector restricts the application of these rules to a set of elements 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 are applied when more than one selector match a given element. While this is relatively simple for someone accustomed to handling structured documents, experience has shown that a new user may have difficulties modeling 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 while allowing specific presentation. It also allows the use of an user defined set of rules to accommodate 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 style sheets referenced by the document. It is possible to manipulate rules in one style sheet but also to move them from one style sheet 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.

User interface

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 last two entries, 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 style. 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.
• Style sheets entries give access to external and User's preference CSS style sheets:
  • The entry Link allows one to link a new CSS style sheet to the current document. One can directly click on the target style sheet if it is already displayed in a Amaya window. In other case the user should click in the current document to get a dialogue form and type the target style sheet URI. This command adds a link element into the document head.
  • The entry Open allows one to open one of the external CSS style sheets applied to the current document.
  • The entry Disable allows one to remove effects of one of the external CSS style sheets to the current document. This command doesn't affect the CSS link in the document.
  • The entry Enable allows one to re-apply effects of one of the external CSS style sheets to the current document. This command doesn't affect the CSS link in the document.
  • The entry Remove allows one to remove one of the external CSS style sheets. This command acts as the Disable command but in addition to that the element link which attaches the external CSS style sheet is removed.

  The commands Open, Disable and Enable can be applied to the User's preference style sheet, but the commands Link and Remove concern only linked CSS style sheets. The following figure shows the list of CSS style sheets proposed for the command Open. If no CSS style sheet is currently applied to a document, a dialog box explains that there is "No CSS file available".

  

• By default Amaya prints documents with CSS. The @media is interpreted to select what style rules are applied by the printing process and what style rules are used on the screen only. Nevertheless the user can ask the Amaya printing to ignore all CSS style sheets.

Current State

Here, we focus on what is currently supported from the CSS2 proposal:

• Parsing:
  • all the basic:
    • grouping selectors in one rule
    • grouping properties in one rule
    • comments
  • classes and pseudoclasses
  • context sensitive selector
  • standard units
• Cascading order should be fine but prorities and specificities are not managed yet..
• CSS properties: Everything should be parsed correctly, but the back-end may lack support for some attributes (see CSSStatus file for more details).
  • Text: text-align, text-decoration and text-indent.
  • Fonts: Times, Helvetica and Courier are available, with various character style and a set of predefined size (from 6 to 60 points).
  • Border, padding box properties are not supported in this version.
• The attribute MEDIA attached to CSS links is not interpreted.
• Page rules are not interpreted too.

There is support for user's preference which can be provided in

$(HOME)/.amaya/amaya.css (Unix) or Amaya\users\username\amaya.css (Windows).

What's lacking

First, considering the current draft compliance, the main issues for full CSS2 support are:

• The CSS2 formatting model for border and padding is not yet implemented.
• Pseudo elements are difficult to handle.
• The current implementation is a bit restrictive on fonts.
• Page properties are not managed yet.