Lime - an editor for online HTML publishing

Note: the design on this page has never been implemented as an application; I wrote it in 1999 to encapsulate my ideas about what was missing from current HTML editors, which were anything but writers' tools. At the time, the closest implementation I found was XMeTaL, but that's expensive overkill for this purpose. In September 2002 the most promising tool was eWebEditPro. This design is ©1999 Peter Hilton (all rights reserved).

Introduction

The problem at hand

When a novellist submits a manuscript its content is used, not its design. In the same way, authors of web pages, technical documentation and internal corporate communications are not and should not be the designers of those documents' appearances.

Word-processors do not allow this, as they are oriented towards typography. HTML has the potential for content and design to be separated, but unfortunately, current HTML editors do not allow this. This is presumably because they are addressing a different problem - WYSIWY(NT)G editing for graphic-rich content-free web page design.

Cascading Style Sheets

The abstract to the Cascading Style Sheets, level 2: CSS2 Specification describes Cascading Style Sheets (CSS) as follows.

CSS2 is a style sheet language that allows authors and users to attach style (e.g., fonts, spacing, and aural cues) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS2 simplifies Web authoring and site maintenance.

The separation of presentation style and content is crucial in making it possible to separate the roles of document designer and document author.

The HTML 4.0 Strict DTD

There are three document type definitions (DTDs) of HTML 4.0, which define three variants of the language. According to the World Wide Web Consortium (W3C) the 'HTML 4.0 Strict DTD includes all elements and attributes that have not been deprecated or do not appear in frameset documents. [...] We recommend that authors write documents that conform to the strict DTD rather than the other DTDs defined by [the HTML 4.0] specification'. In this document I shall refer to HTML that validates to the HTML 4.0 Strict DTD as Strict HTML 4.

The Strict HTML 4/CSS platform

The combination of and Strict HTML 4 and external Cascading Style Sheets promises separation of content and presentation in HTML, because this prohibits presentation mark-up in the HTML. Ideally this would let content authors concentrate on writing without having to code valid HTML by hand.

A visual editor that met the requirements listed in this document would make HTML 4.0 Strict/CSS a usable platform for many types of document, other than web pages, particularly internal company documents, for which presenting information in a standard format is more important than flexibility of design for individual documents.

Current visual HTML editors

The current visual editors - those which do not require knowledge of the HTML element names - are typified by Microsoft FrontPage. These editors reflect a trend to try to turn HTML into an ever-richer typographical page-description language, a purpose for which it was not designed, by those people who failed to understand the concept of structural mark-up.

HTML mark-up is concerned with structure and semantics, not presentation, so any editor that hides this is fundamentally flawed. See What HTML Is... and What It Isn't for a further explanation.

The goals of Lime

Lime is intended to be a new kind of WYSIWYG HTML editor - an alternative to a word-processor that

• allows content authors to produce HTML documents without knowledge of HTML markup
• guarantees valid version 4.0 strict HTML
• allows content authors to concentrate on content, not design
• is a simple and elegant application

This is clearly not achieved by a word-processor - the current default tool, or any current WYSIWYG editor.

One editor that almost meets these goals is Softquad's XMetaL, which is designed to be a customisable XML authoring tool. A simplified customised set-up can be created, for authoring HTML 4.0 Strict/CSS, but XMetaL is a more complex and expensive product than is really necessary.

Benefits of Lime and HTML/CSS

Lime will be better than a word-processor because

1. it will be simple and easy-to-use as it will avoid the complexity associated with typographical and logout control
2. it will generate smaller files, in an open human-readable format
3. it will be a simpler action application
4. it will allow authors to concentrate exclusively on content, without being distracted by formatting
5. it will produce documents with a consistent design
6. HTML and CSS are proven, well-supported and open technologies
7. is will have an Open Source licence

Requirements Specification

These are the strict requirements for the basic concept to work.

Common application requirements

1. For user-interface consistency, Lime shall comply with the Windows Interface Guidelines For Software Design, or whatever guidelines are appropriate for the chosen platform
2. Lime shall have Find and Find/Replace facilities.
3. Lime shall have online help.
4. Lime shall have an Undo facility.
5. Lime shall implement the clipboard.
6. Lime shall implement the File menu MRU list.
7. Lime shall provide keyboard shortcuts for most options
8. Lime shall support multiple document windows.

Editing facilities

1. The content shall be editable in a view that renders the external style sheet.
2. The user interface shall indicate the currently chosen block-level element and any current inline elements.
3. The user interface shall allow block-level elements to be chosen from a fixed set of valid options.
4. The user interface shall allow DIV and SPAN elements to be entered.
5. The user interface shall allow inline elements to be chosen from a fixed set of valid options.
6. Lime shall not allow multiple consecutive spaces to be entered.
7. Lime shall not allow multiple empty paragraphs to be entered; and shall not save empty paragraphs.

Tables

1. The user shall be able to include tables in the document.
2. The user shall be able to add or remove rows and columns from a table.
3. The user shall be able to add or remove table cells from a table.
4. The user shall be able to split or merge table cells.

Lists

1. The user shall be able to include ordered or unordered lists in the document.
2. The user shall be able to include definition lists in the document.
3. The user shall be able to nest lists.

Additional requirements

1. Lime shall load all versions of HTML, and shall attempt to interpret invalid mark-up, rather than fail to load the document.
2. Lime shall always save HTML 4.0, which exludes all deprecated attributes and elements, most of which are for formatting.
3. The user shall be able to choose an external style sheet for the current document.
4. The user shall be able to edit values for all valid HEAD section elements, including custom META tags.
5. The user shall have the option to save either the contents of the BODY tag as an HTML fragment, or the complete HTML document.
6. Lime shall have a spelling checker facility.
7. Lime shall always present to the user full names for the HTML elements, as well as the tag names.

Successive versions of Lime

The priorities for successive versions of Lime are

1. basic functionality
2. style sheet support
3. outliner functionality
4. the remaining missing 'word-processor functionality'.

The extra requirements are

1. Lime should provide a document map view that shows HTML heading styles with levels.
2. Lime should include 'outliner' functionality, based on HTML heading styles.
3. The user should be able to specify classes for HTML elements from a pick list of classes defined in the current style sheet(s).
4. The user should be able to include HTML forms in the document.
5. Lime should include a facility to sort tables, as in Microsoft Word.
6. The user should be able to configure the list of valid tags.
7. Lime should include version tracking functionality, using the INS and DEL tags.
8. The user should be able to insert and edit client-side scripts in the document.

Example design

This section describes a possible design for Lime, not to serve as the design, but to illustrate what Lime might be like.

Dialogue boxes

The Find, Replace and About dialogue boxes should provide standard functionality. The Document Properties dialogue box will allow the user to specify the data used in the HTML HEAD section. The Insert Image and Insert Table dialogue boxes will allow the user to specify initial value, in order to create valid IMG and TABLE elements, respectively.

Structure Editor

The Structure Editor is a non-modal dialogue box, or inspector, that will show the document element structure as a tree control, with one node for each HTML element. The tree control selection indicates the current HTML element. The selected node will be synchronised with the cursor position in the main view. Clicking a node in the structure tree sets the document selection to that element's contents - a few emphasised words or a paragraph, for example.

Attribute Editor

The Attribute Editor is a non-modal dialogue box, or inspector, that lists attributes for the current HTML element as a list of name-value pairs, in a two-column grid control. Each attribute name cell is a type-in control that also has a pick-list. This pick-list gives a choice of the valid attributes for the current element that are not already in the element list.

The attribute value cells are just text-entry fields, except for the class attribute, whose value should have a pick list of the available classes defined for the current element in the current style sheet.

Toolbars and status bar

Toolbars shall include

1. standard buttons for common menu options
2. a pulldown list to choose the current block-level element
3. toggle buttons to show state of inline elements; turning one off removes the current span of that element; turning one on applies the element to the current selection, or the current word if there is no selection
4. a URL toolbar, as on a web browser, that displays the current file URL and allows the user to specify a document to load

The status bar should show the current HTML context.

Lists

Ordered and unordered lists will be treated as block styles, rather than deal with OL/UL and LI tags separately. Choosing one of these block styles will set the current block tag to be LI. If one of the two surrounding blocks is also an LI in a list of the same type, then the current block will be merged into that list. Otherwise, a new OL or UL list will be created with the current block as its only list item.

Definition list terms and definitions will be treated as separate block styles. Consecutive terms and definitions will form a single DL element in the same way that consecutive LI list items form either a UL or OL element.

Menus

This section lists menus and menu options, with keyboard short-cut keys and descriptions of the menu options actions'. Where no action is given, the conventional behaviour under Windows should be assumed.

File menu

Edit menu

View menu

Insert menu

Table menu

Help menu

Appendix: List of editable elements and attributes

The design implies that only the following tags will be used. For each tag, the valid attributes will be as defined in the HTML specification, for the Strict DTD.

Block-level elements

Inline elements

Core attributes

The following core attributes apply to all of the elements listed above.