Google Docs Help: Google Docs CSS Numbered Headers

If you want this result for the GDocs titles:
1. Big Title
1.1. Subsection
1.2. Another subsection
1.2.1 Interesting paragraph
1.3. Nice subsection
2. Huge title
2.1. Nifty Subsection
2.1.1. Here we are...

If you want this result for the GDocs titles:
1. Big Title
1.1. Subsection
1.2. Another subsection
1.2.1 Interesting paragraph
1.3. Nice subsection
2. Huge title
2.1. Nifty Subsection
2.1.1. Here we are

Use this CSS:
body {
  counter-reset: header1 header2 header3;

}

h1, h2, h3 {
  border-bottom: 1px solid #cccccc;

}

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

}

h1 {
  counter-reset: header2 header3;
  font-size: 30px;

}

h2:before {
  counter-increment: header2;
  content: counter(header1) "." counter(header2) ". ";

}

h2 {
  counter-reset: header3;
  font-size: 20px;

}

h3:before {
  counter-increment: header3;
  content: counter(header1) "." counter(header2) "." counter(header3)
". ";

}

h3 {
  font-size: 15px;

}

This works only on browsers supporting :before, counter-increment,
counter-reset and counter().
Firefox 2.0-3.0, Safari 3.1, Opera 9.2 work well here. :) 

 

See the result in this sample page.

Comments


Alessandro Cuttin

problems with nested headers...

well, when the headers are nested in several levels I experience some problems. In example:

4. chapter
4.1 section
4.1.1 subsection
4.1.2 subsection
4.2 section
4.0.1 subsection <=
4.0.2 subsection <=

Last edited Oct 21, 2009 2:58 AM
Report abusive comment

Wei Huang

Untitled

I also tried the sample page with Konqueror 3 & 4. It works too.
Thanks for the method. It'll be great if it is integrated in Google Docs directly without modifying css manually.

Last edited Sep 27, 2008 7:55 PM
Report abusive comment
©2009 Google