CODEWITHSUNDEEP
htmlcss
cletus
cletus

Reputation: 625007

Report section style list numbering in CSS?

Now I know about the "normal" CSS list styles (roman, latin, etc) and certainly in years past they were somewhat inflexible in not allowing things like:

(a)

or

a)

only

a.

Now I believe that you can get an effect like the above with the :before and :after pseudo-elements. Is that correct? And whats the browser compatibility like if you can?

My main question however is that I want to have report style numbering:

  1. Introduction 1.1 Objectives 1.2 Assumptions 1.3 Limitations 1.3.1 ...
  2. New Section ...

and so on.

Can CSS do this and, if so, whats the browser compatibility like?

Upvotes: 7

Views: 3332

Answers (4)

Kağan Kayal
Kağan Kayal

Reputation: 2453

Here is my complete version of the pure css solution which goes all the way to level h6. Tested with IE9 and Firefox 28.

body {
  counter-reset:level1Header;
}
h1 {
  counter-reset:level2Header;
}
h2 {
  counter-reset:level3Header;
}
h3 {
  counter-reset:level4Header;
}
h4 {
  counter-reset:level5Header;
}
h5 {
  counter-reset:level6Header;
}

h1:before {
  counter-increment:level1Header;
  content:counter(level1Header) ". ";
}

h2:before {
  counter-increment:level2Header;
  content:counter(level1Header) "." counter(level2Header) " ";
}

h3:before {
  counter-increment:level3Header;
  content:counter(level1Header) "." counter(level2Header) "." counter(level3Header) " ";
}

h4:before {
  counter-increment:level4Header;
  content:counter(level1Header) "." counter(level2Header) "." counter(level3Header) "." counter(level4Header) " ";
}

h5:before {
  counter-increment:level5Header;
  content:counter(level1Header) "." counter(level2Header) "." counter(level3Header) "." counter(level4Header) "." counter(level5Header) " ";
}

h6:before {
  counter-increment:level6Header;
  content:counter(level1Header) "." counter(level2Header) "." counter(level3Header) "." counter(level4Header) "." counter(level5Header) "." counter(level6Header) " ";
}

Upvotes: 0

AmbroseChapel
AmbroseChapel

Reputation: 12087

Here's the W3C specification for CSS2's automatic numbering and incrementing, with an example of 1.1, 1.2, 1.3 type numbering.

http://www.w3.org/TR/CSS2/generate.html#counters

I can't help you with the support question.

Upvotes: 3

Eugene Yokota
Eugene Yokota

Reputation: 95604

See Generated content, automatic numbering, and lists.

This example shows a way to number chapters and sections with "Chapter 1", "1.1", "1.2", etc.

H1:before {
    content: "Chapter " counter(chapter) ". ";
    counter-increment: chapter;  /* Add 1 to chapter */
    counter-reset: section;      /* Set section to 0 */
}
H2:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}

Edit: quirksmode.org has a better table of css supports on browsers. Almost all browsers, except pre IE8b2 IEs. So yes, totally useless.

Upvotes: 7

Ozh
Ozh

Reputation: 729

A simple markup example would be:

<ol>
    <li>level one</li>
    <ol start="10"> 
        <li>level two</li>
        <li>level two</li>
        <ol start="110">
            <li>level three</li>
        </ol> 
        <li>level two
    </ol> 
    <li>level one</li>
</ol>

The result of this is:

   1.  level one
        10. level two
        11. level two
             110. level three
        12. level two 
   2. level one

Browser support is fairly wide: MSIE6 complies. This is HTML 4.0

Upvotes: 0

Related Questions