[dev-context] wrong css attr.

luigi scarso luigi.scarso at gmail.com
Fri Mar 2 17:28:17 CET 2012

On Fri, Mar 2, 2012 at 5:20 PM, Hans Hagen <pragma at wxs.nl> wrote:

> On 2-3-2012 11:39, luigi scarso wrote:
>> Errata
>> itemgroup[symbol="5"] { list-style-type : circ ; }
>> itemgroup[symbol="A"] { list-style-type : alpha ; }
>> itemgroup[symbol="G"] { list-style-type : upper-greek ; }
>> Corrige
>> itemgroup[symbol="5"] { list-style-type : circle ; }
>> itemgroup[symbol="A"] { list-style-type : upper-alpha ; }
>> itemgroup[symbol="G"] { list-style-type : upper-roman ; }
>> Note
>> upper-greek  doesn't exist
> hm, I is upper-roman ... is there no way to get greek?
> Hans

Not with list-style-type --- maybe list-style-image as svg ?

12.5.1 Lists: the
and 'list-style'<http://www.w3.org/TR/CSS2/generate.html#propdef-list-style>properties
 *'list-style-type'*  *Value:*  disc | circle | square | decimal |
decimal-leading-zero | lower-roman | upper-roman | lower-greek |
lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha
| none | inherit <http://www.w3.org/TR/CSS2/cascade.html#value-def-inherit>
*Initial:*  disc *Applies to:*  elements with 'display: list-item' *
Inherited:*  yes *Percentages:*  N/A *Media:*
*Computed value:*  as specified

This property specifies appearance of the list item marker if
the value 'none' or if the image pointed to by the URI cannot be
displayed. The value 'none' specifies no marker, otherwise there are three
types of marker: glyphs, numbering systems, and alphabetic systems.

Glyphs are specified with *disc*, *circle*, and *square*. Their exact
rendering depends on the user agent.

Numbering systems are specified with:
*decimal*Decimal numbers, beginning with 1. *decimal-leading-zero* Decimal
numbers padded by initial zeros (e.g., 01, 02, 03, ..., 98, 99). *
lower-roman* Lowercase roman numerals (i, ii, iii, iv, v, etc.). *
upper-roman* Uppercase roman numerals (I, II, III, IV, V, etc.).
*georgian* Traditional
Georgian numbering (an, ban, gan, ..., he, tan, in, in-an, ...).
*armenian* Traditional
uppercase Armenian numbering.

Alphabetic systems are specified with:
*lower-latin* or *lower-alpha* Lowercase ascii letters (a, b, c, ... z). *
upper-latin* or *upper-alpha* Uppercase ascii letters (A, B, C, ... Z). *
lower-greek* Lowercase classical Greek alpha, beta, gamma, ... (α, β, γ,

This specification does not define how alphabetic systems wrap at the end
of the alphabet. For instance, after 26 list items, 'lower-latin' rendering
is undefined. Therefore, for long lists, we recommend that authors specify
true numbers.

CSS 2.1 does not define how the list numbering is reset and incremented.
This is expected to be defined in the CSS List Module

For example, the following HTML document:

     <TITLE>Lowercase latin numbering</TITLE>
     <STYLE type="text/css">
          ol { list-style-type: lower-roman }
      <LI> This is the first item.
      <LI> This is the second item.
      <LI> This is the third item.

might produce something like this:

  i This is the first item.
 ii This is the second item.
iii This is the third item.

The list marker alignment (here, right justified) depends on the user
 *'list-style-image'*  *Value:*
<uri><http://www.w3.org/TR/CSS2/syndata.html#value-def-uri>| none |
inherit <http://www.w3.org/TR/CSS2/cascade.html#value-def-inherit> *Initial:
*  none *Applies to:*  elements with 'display: list-item' *Inherited:*  yes
*Percentages:*  N/A *Media:*
*Computed value:*  absolute URI or 'none'

This property sets the image that will be used as the list item marker.
When the image is available, it will replace the marker set with the

The size of the image is calculated from the following rules:

   1. If the image has a intrinsic width and height, the used width and
   height are the intrinsic width and height.
   2. Otherwise, if the image has an intrinsic ratio and either an
   intrinsic width or an intrinsic height, the used width/height is the same
   as the provided intrinsic width/height, and the used value of the missing
   dimension is calculated from the provided dimension and the ratio.
   3. Otherwise, if the image has an intrinsic ratio, the used width is 1em
   and the used height is calculated from this width and the intrinsic ratio.
   If this would produce a height larger than 1em, then the used height is
   instead set to 1em and the used width is calculated from this height and
   the intrinsic ratio.
   4. Otherwise, the image's used width is its intrinsic width if it has
   one, or else 1em. The image's used height is its intrinsic height if it has
   one, or else 1em.

 The following example sets the marker at the beginning of each list item
to be the image "ellipse.png".

ul { list-style-image: url("http://png.com/ellipse.png") }

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://www.ntg.nl/mailman/private/dev-context/attachments/20120302/505b0759/attachment.html>

More information about the dev-context mailing list