You do have "CSSTYLE" with Emacs

You are here: irt.org | Articles | GNU Emacs | You do have "CSSTYLE" with Emacs [ previous next ]

Published on: Sunday 14th February 1999 By: Pankaj Kamthan

• Introduction
• Separating Presentation From Content And Structure
  • Advantages Of CSS
    • Author Viewpoint
    • User Viewpoint
• The Emacs Editor
  • Advantages Of The Emacs Editor
• Emacs As An HTML Editor With CSS Support
  • Obtaining And Installing The CSS Module
  • Features Of The CSS Module
  • Keybindings For The CSS Module
• Emacs As A CSS Editor
  • Obtaining And Installing The CSS Mode
  • Features Of The CSS Mode
    • CSS1 Properties Supported By The Mode
    • CSS2 Properties Supported By The Mode
• CSS Validation
• Conclusion
• References
• Appendix : Sample .emacs File

Introduction

In order to facilitate editing CSS files, HTML editors with CSS-support and special-purpose CSS editors have been developed. However, traditional text-editors such as Emacs can also be configured to CSS editing. As we will see, this approach has various advantages.

In this article, we describe CSS editing with Emacs supported by two modes. We will also briefly discuss the issue of CSS validation. We assume that the reader has an introductory knowledge of CSS and a basic experience with Emacs. Please see the list of references for introductions to both CSS and Emacs. There are various implementations of Emacs, of which GNU Emacs is the most widely used. Unless stated otherwise, by Emacs we mean GNU Emacs.

Separating Presentation From Content And Structure

HTML has become a universal data format for publishing information. It has been designed to focus on structure rather than appearance of the document content. Therefore, support for presentation in HTML is limited. The use of methods to "dodge" the limitations of HTML for presentational purposes undermine the benefits of HTML. The primary reason for the development of CSS is to provide authors a mechanism to control document presentation, while keeping HTML simple as it was meant to be.

A style sheet is a set of stylistic rules that describe how documents are presented to users. Cascading Style Sheets (CSS) is a mechanism for adding style (e.g., fonts, colours, spacing) to HTML documents. Cascading Style Sheets, Level 1 (CSS1) became a W3C Recommendation in December 1996. It describes the CSS language as well as a simple visual formatting model. CSS2 became a W3C Recommendation in May 1998. It builds on CSS1 and adds support for media-specific (e.g., printers) style sheets, downloadable fonts, element positioning and tables.

Advantages Of CSS

We can outline the advantages of CSS from the author's and the user's viewpoint:

Author Viewpoint

• Controllability. The author has finer and more predictable control over presentational aspects - color, typography, and element placement - that look "good" on any monitor at any resolution.

• Simplicity. Use of CSS leads to simpler and cleaner markup as there is no longer a need for HTML-workarounds (such as use of one-pixel transparent GIFs, converting text to images, using tables for formatting, using invisible text for spacing).

• Efficiency. The author doesn't need to be concerned as to how the content can be presented during the creation process. This results in efficiency as he/she can focus on content and structure and use style sheets for presentation.

• Flexibility. By use of CSS, authors can accomodate multiple views.

• Reusability. External style sheets can be (re)used by more than one HTML document.

• Manageability. By changing the content in one style sheet, the author can change the presentation of a large set of documents that incorporate that style sheet.

• Compatibility. Users with older browsers can still see the documents.

User Viewpoint

• Accessibility. With the use of CSS, the author does not have to resort to proprietary HTML extensions (e.g., <FONT>) to create desired presentation, or document pages with text in images (which limits their use by a text-based browser). This improves accessibility on part of the user. Presentation of pages based Aural Style Sheets (ACSS) makes pages accessible to users with visual disabilities.

• Controllability. With proper use of JavaScript and CSS, the user can be given a choice of how he/she would like the document to be rendered in the browser. For example, a visually impaired person can make the fonts larger for ease of reading.

• Speed. The need, for example, for graphics with text and overuse of tables to format a page, reduces with CSS. This increases the download speed.

• Searchability. CSS reduces the requirement of using of text in images (which hampers indexing of documents by robots). This improves searchability on part of users.

• Printing. Use of CSS can improve printing of the document.

The Emacs Editor

Basic editing in Emacs is simple. In general, the alphanumeric keys on the keyboard, when pressed, insert the corresponding character into the current buffer. Editing commands are invoked by holding down combinations of the C-, M-, SPC and RET keys (denoting CONTROL, META (ESC), SPACE and RETURN (ENTER) key characters, respectively) while pressing an alphanumeric key. Almost every command in Emacs is a little LISP program that acts upon your text files. To extend Emacs, you simply modify the existing programs or add your own.

Advantages Of The Emacs Editor

There are various advantages of using Emacs over currently available CSS editors:

• Availability. Presently, HTML editors with CSS-support and special-purpose CSS editors are mostly available only for Windows 95/98 environment. There is little or no support for other operating systems. Emacs, however, is widely available for a spectrum of operating systems, including Windows 95/98, Macintosh, Linux, and various flavours of UNIX.

• Environment flexibility. Most CSS editors work under a windows environment only. Emacs has options for both windows- and character-based terminals.

• Content flexibility. During the phase of editing a CSS file, you do not need to open another editor if you decide to edit a file of a different type, say C. On the other hand, most CSS editors do not support non-CSS editing and HTML editors with CSS-support do not support non-HTML editing

• Interface with other applications. With the use of appropriate modes, Emacs can function as a WWW browser (with restricted functionalities, however), e-mail client, Usenet newsreader, FTP client, and so on. A WWW browser can be configured to spawn Emacs as the default editor, and vice versa, a keystroke in Emacs can launch a browser and instruct it to preview your document during the course of editing.

• Cost. Many of professional CSS editors are either commercial or shareware. Emacs, on the other hand, is freely available under the GNU Public License (GPL).

There are two ways to go about using Emacs as a CSS editor:

1. Add CSS support by a module to an existing (major) mode.

2. Develop a (major) mode that supports CSS.

We now discuss one of each type.

Emacs As An HTML Editor With CSS Support

CSS was designed to work with HTML. It is then natural that authors may want to use HTML and CSS in conjunction with each other. With the use of the major mode html-helper-mode, Emacs can be used as a powerful HTML editor. The CSS module described here, extends html-helper-mode by providing a set of keybindings and a menu while in the mode. The module adds support for a limited set of CSS1 elements (most of which are Microsoft Internet Explorer-specific).

Obtaining And Installing The CSS Module

To use the CSS module, you will first have to download and install the html-helper-mode, as it is not part of Emacs distribution by default. See the list of references.

A simple way to load html-helper-mode is to put the following lines (after configuring the path) to your .emacs file on your system. A sample .emacs file has been provided in Appendix I.

(setq load-path (cons "path_to_html-helper-mode_directory/" load-path))
(autoload 'html-helper-mode "html-helper-mode" "Yay HTML" t)
(setq auto-mode-alist (cons '("\\.html$" . html-helper-mode) auto-mode-alist))

Detailed discussion of the html-helper-mode is beyond the scope of this article. You can find a comprehensive treatment of that in the article HTML Editing with Emacs.

The css module can be obtained from sites mentioned in the list of references. After downloading the file, create a directory ~/emacs/lisp/ and move the file css.el to it. Add the following lines (after configuring the path) to your .emacs file on your system.

(setq load-path (cons "path_to_css-module_directory/" load-path))
(add-hook 'html-helper-load-hook
  (function (lambda () (load "css.el"))))

A sample .emacs file has been provided in Appendix I. The module should be ready to use once you load up an HTML file. It should be called after html-helper-mode loads. You can speed-up the loading of css.el files by byte compiling it (using M-x byte-compile-file on the Emacs command line or from the pull-down menu).

Features Of The CSS Module

The features are:

• Support for the Class attribute, the Span element, Inlining Style, for creating a link to an External Style Sheet.

• Support for the Embedded Style Sheet including opening and closing of the element; comments to hide the information from browsers without CSS support; inclusion of anchor link colors (customizable); a prompt for user input to create the first element with the opening and closing parentheses; and a blank comment section after the closing brace.

• Support for Font, Text, Margin, Color and Background attributes. Font, text, margin and background attributes are those supported for CSS1 in Microsoft Internet Explorer 3.0. The padding, width and height attributes are those supported for CSS1 in Netscape Communicator 4.0.

Figure 1 illustrates a sample session with the CSS module.

Figure 1: An Emacs session with html-helper-mode and the CSS module.

Keybindings For The Css Module

We describe below the keybindings for all the CSS properties that are supported by the CSS module. [user input] is the value that the user enters when prompted for each item.