You do have "CSSTYLE" with Emacs

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

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.

This list will grow as changes are made to the module itself.

Emacs As A CSS Editor

The css-mode for Emacs supports CSS1 and partially CSS2. It works with Emacs 19.34 or better (as well as XEmacs).

Obtaining And Installing The CSS Mode

You can obtain the css-mode from the WWW. See the list of references. After downloading, create a directory ~/emacs/lisp/ and move the file css-mode.el to it.

A simple way to load css-mode is to put the lines below (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_css-mode_directory/" load-path))
(autoload 'css-mode "css-mode")
(setq auto-mode-alist       
  (cons '("\\.css\\'" . css-mode) auto-mode-alist))

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).

The css-mode requires font-lock.el for font lock support and cl.el for Common LISP extension to GNU Emacs LISP. Both of these are part of standard Emacs (19+) distribution.

Features Of The CSS Mode

The features are:

• Font-lock. The font-locking support works just like all other major modes.

• Indentation. The indentation support is of two types: a usual style (which is set by default) and a c-style. With the usual style, the only thing that can be customized is how many columns of indentation one wants inside @media rules. This is controlled by the cssm-indentation-level variable, which is set to 2 by default. To activate c-style, include the following line in your .emacs file:

(setq cssm-indent-function #'cssm-c-style-indenter)

• Typing. There are three features for typing assistance: short-cuts, mirror mode and completion. There are two short-cuts:
  • css-insert-comment inserts a comment and has a key-binding to "C-c C-c".

  • css-insert-url inserts an empty URL specification and has a key-binding to "C-c C-u".

Mirror mode is used for "pattern matching" certain keys. For example, if you type a "{", the matching parentheses "}" is automatically inserted. Other keys that are mirrored are " and (.

Completion lets you use C-c TAB to complete the CSS property you are currently typing. It works in the usual manner of TAB completion.

CSS1 Properties Supported By The Mode

Here is a list of all CSS1 properties supported by the mode:

font-family, font-style, font-variant, font-weight, font-size, font, background-color, background-image, background-repeat, background-attachment, background-position, color, background, word-spacing, letter-spacing, border-top-width, border-right-width, border-left-width, border-bottom-width, border-width, list-style-type, list-style-image, list-style-position, text-decoration, vertical-align, text-transform, text-align, text-indent, line-height, margin-top, margin-right, margin-bottom, margin-left, margin, padding-top, padding-right, padding-bottom, padding-left, padding, border-top, border-right, border-bottom, border-left, border, width, height, float, clear, display, list-style, white-space, border-style, border-color.

CSS2 Properties Supported By The Mode

Here is a list of all CSS2 properties supported by the mode:

azimuth, border-bottom-color, border-bottom-style, border-collapse, border-left-color, border-left-style, border-right-color, border-right-style, border-top-color, border-top-style, caption-side, cell-spacing, clip, column-span, content, cue, cue-after, cue-before, cursor, direction, elevation, font-size-adjust, left, marks, max-height, max-width, min-height, min-width, orphans, overflow, page-break-after, page-break-before, pause, pause-after, pause-before, pitch, pitch-range, play-during, position, richness, right, row-span, size, speak, speak-date, speak-header, speak-punctuation, speak-time, speech-rate, stress, table-layout, text-shadow, top, visibility, voice-family, volume, widows, z-index.

You can check for the list of keybindings using mode help by typing C-h m from within the mode. Figure 2 illustrates a sample session with the css-mode.

Figure 2: An Emacs session with the css-mode

If you do not wish to use the mode, you can turn it off (1) temporarily by the command css-leave-mirror-mode while in a CSS-mode buffer, or (2) permanently by editing the css-mode.el file and setting the variable css-mirror-mode to nil.

One of the caveats of the mode is the lack of support for colour (such as with the support for hilit19 mode).

CSS Validation

Once you have edited a CSS document, the next obvious issue is of validation. None of the above Emacs-based methods perform actual validation with respect to CSS specifications. For that, you can use the online W3C CSS Validation Service. You can also download the validator files and use it offline.

The following is a referral CGI gateway for the validator. You can enter the URL of a document (that has HTML with CSS - those created with the help of the CSS module or CSS only - those created with help of the CSS mode) that you would like to be validated:

You can also validate your CSS with a text area or by upload.

Conclusion

Help authors help CSS help authors

Separating presentation from content and structure, and using CSS for the purpose of presentation, has numerous benefits. Using Emacs for editing CSS files using either the CSS mode or the CSS module can be quite useful, if one is familiar with the CSS syntax. Validating the resulting CSS files will help you to create documents that conform to existing standards of the language.

References

CSS And Emacs

• CSS1 and CSS2 - W3C Recommendations.

• Cascading Style Sheets: Designing for the Web, By Håkon Wium Lie and Bert Bos, Addison-Wesley, 1997.

• Learning GNU Emacs, By Debra Cameron, Bill Rosenblatt and Eric Raymond, O'Reilly & Associates, Inc., 1996.

The CSS Mode

• css-mode.el - Official WWW site. The mode itself. A local copy.

The html-helper-mode And The CSS Module

• html-helper-mode - Official WWW site. The mode itself as a .tar.gz file via FTP. A local copy, which is a modified version to work with the CSS module.

• tempo.el - via FTP. A local copy.

• css.el - Official WWW site. The module itself (and a local modified copy).

Appendix : Sample .emacs File

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; File: .emacs
;; Author: Your Name
;; Description: Emacs Customizations
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; CSS mode
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

(setq load-path (cons "path_to_css-mode_directory/" load-path))
(autoload 'css-mode "css-mode")
(setq auto-mode-alist       
  (cons '("\\.css\\'" . css-mode) auto-mode-alist))

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; CSS module
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

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

View the profile on Pankaj Kamthan and the list of other Articles by Pankaj Kamthan.