Images as Horizontal Rules and List Item Bullets

This is about properties I think would be good
to have in CSS.  I put it in more or less the 
same format as a W3C tech report.

Images as Horizontal Rules and List Item Bullets

Abstract

This document suggests refinements to CSS (a style sheet specification
designed for web documents) to specify images for use as horizontal rules
and list item bullets.

Introduction

Often images are used as horizontal rules and list item bullets on the
world wide web. At this time, this is usually done by using either line
breaks or definition lists combined with the IMG HTML element. However,
this does not translate well under text-only situations, nor does it really
fit well with the scheme of content-based markup.

In the HTML 3.0 [1] proposal draft, the SRC attribute was added to the <LI>
and <HR> elements for these reasons. However, this was not widely
implemented, nor did it provide a means of specifying the pixel height and
width of the image, which has proved useful in reducing the time necessary
to format the text of an HTML document.

Also, since these attributes modify how an element looks, rather than what
it is, many have commented that they should be part of a style sheet
mechanism, such as the CSS [2] (Cascading Style Sheet) specification. CSS
already contains properties for list elements, but does not provide a means
of specifying the pixel height and width of the image. It is the purpose of
this document to specify a means of designating images to be used as
bullets and horizontal lines within a style sheet by extending CSS.

CSS Properties for Lists

CSS already includes a property for modifying list items: list-style. It
also has the height and width properties to modify block elements. Adding a
pseudo-class "image" would designate that the bullet image is to be
modified by the height and width properties, not the list text.

UL { list-style: URL(http://png.com/ellipse.png) disc }
UL.image {
        width: 15px;
        height: 10px;
        color: blue;
         }

The above would specify that the image (ellipse.png) would be 10 pixels
wide by 15 pixels high, and if images aren't available, a blue disc should
be used instead.

CSS Properties for Horizontal Rules

Horizontal rules are a bit different, as there is no property that
specifies a foreground image as list-style does for lists. Thus, the author
suggests the "rule-style" property for this element. This of course opens
up the possibilities for other types of lines, but for now we'll just add
"noshade," which is analogous to the noshade attribute of the HR element in
HTML 3.2 [3]. An example:

HR { rule-style: URL(http://line.com/niceline.png
        width: 15px;
        height: 10px;
        color: blue;
        }

References

[1]"HyperText Markup Language Specification Version 3.0" by Dave Raggett,
March 1995. http://www.w3.org/pub/WWW/MarkUp/html3/CoverPage.html

[2]"Cascading style sheets" by H
version of this document can be downloaded from
http://www.w3.org/pub/WWW/TR/WD-css1.html

[3]"Introducing HTML 3.2" by Dave Raggett & Dan Connolly, May 96
http://www.w3.org/pub/WWW/MarkUp/Wilbur/
kon Lie & Bert Bos, May 1996. The latest

Received on Tuesday, 18 June 1996 19:22:05 UTC