Writing by Peter Hilton

Lime - an editor for online HTML publishing

A design for Lime, an HTML logical mark-up editor.

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

Edinburgh: near the city centre 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

Edinburgh: looking North from the castle 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

Edinburgh: looking East down the Royal Mile 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. Edinburgh: a doorway 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. Edinburgh, Scotland 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

Edinburgh: Marion and Lisa 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

Menu item Shortcut Action
NewN
Open...O
CloseW
SaveS
Save As...
Document Properties Open the Document Properties dialogue box
(MRU list)
Exit

Edit menu

Menu item Shortcut Action
UndoZ
CutX
CopyC
PasteV
Clear
Select AllA
Find...F Opens the Find dialogue box
Find NextG
Replace...H Opens the Replace dialogue box

View menu

Menu item Shortcut Action
Toolbar Toggles display of the toolbar
Structure Editor Toggles display of the Structure Editor
Attribute Editor Toggles display of the Attribute Editor
Zoom In] Enlarges typefaces, images and all relative spacing
Zoom Out[ Shrinks typefaces, images and all relative spacing
Normal Zoom= Sets typefaces, images and spacing to their default sizes
Use Style Sheet Toggles whether the display is rendered according to the document's style sheet

Insert menu

Menu item Shortcut Action
Line BreakShift Enter Inserts an HTML BR element at the current cursor location
ListL Inserts a list at the cursor location, or a nested list if the current paragraph is a list item
Image... Opens the Insert Image dialogue box, to allow the user to define a new image to insert at the current cursor location
File... Opens a file selector, to allow the user to choose a file to insert at the current cursor location

Table menu

Menu item Shortcut Action
Insert Table...T Opens the Insert Table dialogue box, to allow the user to define a new table to insert at the current cursor location
Delete Table Deletes the current table
Split Table Splits the current table into two tables, making the current row the first row of the second table
Insert Row/Column/Cell Inserts a row, column or cell at the cursor location, according to the current selection
Delete Rows/Columns/Cells Deletes a row, column or cell at the cursor location, according to the current selection
Merge Cells Merges the currently selected cells, to form a single table cell
Split Cell Splits the current cell into two adjacent cells
Select Row Selects the current row
Select Column Selects the current column
Select Table Selects the current table

Help menu

Menu item Shortcut Action
Help Contents Displays the contents page of the online help
Lime Web Site Launches the Lime web site
About Lime Displays the About dialogue box

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

Tag nameDescription
ADDRESS contact information for the author
BLOCKQUOTE long quotation
H1 heading
H2 heading
H3 heading
H4 heading
H5 heading
H6 heading
HR horizontal rule
P paragraph

Inline elements

Tag nameDescription
A anchor
ABBR abbreviated form (e.g., WWW, HTTP, etc.)
ACRONYM acronym
B bold text style
BDO I18N bi-directional text over-ride
BIG large text style
BR forced line break
CITE citation
CODE computer code fragment
DFN instance definition
EM emphasis
KBD text to be entered by the user
I italic text style
Q short inline quotation
SAMP sample program output, scripts, etc.
SMALL small text style
STRONG strong emphasis
SUB subscript
SUP superscript
TT teletype or monospaced text style
VAR instance of a variable or program argument

Core attributes

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

Attribute nameDescriptionNotes
id document-wide unique id --
class space separated list of classes
dir direction for weak/neutral text (but not HR or BR)
lang space separated list of classes (but not HR or BR)
style associated style info
title advisory title/amplification