CSS Counter Test / Auto numbering your google docs headlines with CSS

In the firstplace I did the numbering of the google-docs headlines with css. But the numbering in the google-docs always got messed up after some time, which was caused by:
a) The behaviour of google-docs: It sometimes wraps the headlines in an extra div (which i consider as a bug)
b) Browser limitations of css numbering, if the numbered elements are not all on the same dom level (because of the extra google-docs div)

Test-Case

I wrote up some test-cases with diffeerent order of h1/h2/div elements.
As you can see (at least in firefox 3 and google chrome), the numbering does not count up for sub-headlines
(Note: For my post here in wordpress i changed <h1> to <div class="head1">)

all counters on one level

h1
h2
h2
h1
h2
h2

all counters wrapped in a separate div

h1
h2
h2
h1
h2
h2

sub-counters wrapped in a sub-div

h1
h2
h2
h2
h2
h1
h2
h2

h2
h2

only h2-counters wrappwed

h1
h2
h2
h1
h2
h2

My current solution

If the numbering gets messed up i start firebug and remove the surrounding div of the wrong headline. Maybe i will create a bookmarklet for this task when i get too annoyed at working with google-docs again :)

css-Stylesheet

And here’s my last stylesheet, which i add to all my google-docs.

You can preview a published document here

* {
 line-height: 160%;
 font-size: 10pt;
}
 
/** HEADLINES **/
h1 {
 font-size: 20pt;
 counter-increment: counter-h1;
 counter-reset: counter-h2;
}
h2 {
 font-size: 17pt;
 counter-increment: counter-h2;
 counter-reset: counter-h3;
}
h3 {
 font-size: 14pt;
 counter-increment: counter-h3;
 counter-reset: counter-h4;
}
h4 {
 font-size: 11pt;
 font-weight: bold;
 counter-increment: counter-h4;
 counter-reset: counter-h5;
}
h5 {
 font-size: 11pt;
 font-weight: bold;
 counter-increment: counter-h5;
 counter-reset: counter-h6;
}
h6 {
 font-size: 11pt;
 font-weight: bold;
 counter-increment: counter-h6;
}
h1:before {
 content: counter(counter-h1) ". ";
 color: #777;
}
h2:before {
 content: counter(counter-h1) "." counter(counter-h2) ". ";
 color: #777;
}
h3:before {
 content: counter(counter-h1) "." counter(counter-h2) "." counter(counter-h3) ". ";
 color: #777;
}
h4:before {
 content: counter(counter-h1) "." counter(counter-h2) "." counter(counter-h3) "." counter(counter-h4) ". ";
 color: #777;
}
h5:before {
 content: counter(counter-h1) "." counter(counter-h2) "." counter(counter-h3) "." counter(counter-h4) "." counter(counter-h5) ". ";
 color: #777;
}
h6:before {
 content: counter(counter-h1) "." counter(counter-h2) "." counter(counter-h3) "." counter(counter-h4) "." counter(counter-h5) "." counter(counter-h6) ". ";
 color: #777;
}
 
/** TEXT **/
p {
 padding: 5pt 0 10pt 0;
 text-align: justify;
}
li {
 text-align: justify;
 padding-bottom: 5pt;
}
li p {
 padding: 5pt 0;
}
li p:first-child {
 padding-top: 0;
}
li p:last-child {
 padding-bottom: 0;
}

Related posts:

  1. Auto numbering your google docs headings / headlines

Tags: ,

Uncategorized Comments 12 Jul 20th, 2009

12 Responses to “CSS Counter Test / Auto numbering your google docs headlines with CSS”

  1. Sutch Says:
    November 18th, 2009 at 03:01

    This CSS and the auto numbering JavaScript code are excellent solutions to missing Google Docs functionality. Which do you prefer to use for your documents, and do you use the CSS in conjunction with GDoc’s TOC feature?

  2. Daniel Prieler Says:
    November 29th, 2009 at 17:11

    thanks sutch,

    since this blog-post i exclusively started using the css numbering solution. it does work like a charm in all my recent team-written-documents.
    but i haven’t had time to test the css rules with the google toc features, but if i have some additions to the css, i will post them here. :)

  3. Laurie Says:
    February 3rd, 2010 at 21:57

    Is there any way to make the headings in google docs non-bold?

    I have changed my css to include font-style:normal but that doesn’t work. Any ideas?

    Thanks

  4. Daniel Prieler Says:
    February 4th, 2010 at 00:21

    hi laurie,

    the correct css style would be
    font-weight: normal;

  5. Tony Wood Says:
    February 27th, 2010 at 13:06

    Thanks for the CSS works really well.

  6. เสื้อผ้าคนอ้วน Says:
    June 16th, 2010 at 14:41

    This editorialwas a brilliant read. I Learnt alot from it. Thanks for sharing.

  7. Louboutin shoes Says:
    June 16th, 2010 at 16:25

    Hello everyone thanks for

    good information.

  8. Dallas SEM Says:
    October 19th, 2010 at 18:12

    Thanks for this amazing information! I will definitely have to try this in my blog!

    Thanks!

  9. Juan Pelchat Says:
    January 19th, 2011 at 20:28

    I am very thankful to this topic because it really gives great information -~:

  10. Danko Says:
    May 2nd, 2011 at 18:35

    This is a great tutorial. In Google Docs, I don’t see any CSS options. Am I missing something?

  11. Daniel Prieler Says:
    May 3rd, 2011 at 10:05

    @danko:
    sorry, but google has deactivated the css support in google docs over a year ago. all the google bulletin boards just say, we should just wait…

  12. Nevyn Says:
    June 25th, 2011 at 01:50

    It’s now 2011 and I was looking for ways of doing this and kept coming across css solutions…. Still waiting Google…. Surely this can’t be that hard. And if it is… perhaps give people a way of implementing solutions like this?