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

Daniel Prieler — Mon, 20 Jul 2009 11:25:47 +0000

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

)

all counters on one level

all counters wrapped in a separate div

sub-counters wrapped in a sub-div

only h2-counters wrappwed

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;
}

Auto numbering your google docs headings / headlines

Auto numbering your google docs headings / headlines

Daniel Prieler — Fri, 03 Apr 2009 08:48:45 +0000

Google-docs-writer is great for collaborating, but it lacks of many features.
At least i created a small bookmarklet to add numbering to all headlines in your document.

The numbering is done in the style of:

1. headline
1.1. subheadline 1
1.2. subheadline 2
…

How to use / install

Just drag the link below to your bookmarks-bar, open your google document and press the “gDocs: headline numbering” button.
gDocs: headline numbering

Source

(function(){
 
var doc = window.frames['wys_frame'].document;
var elements = doc.getElementsByTagName('*');
var numbers = [0,0,0,0,0,0,0];
for (var i in elements) {
    var e = elements[i];
    if (!e || !e.tagName || !e.tagName.match(/^H([1-6])$/)) {
        continue;
    }
 
    var eLevel = RegExp.$1;
    var txt = '';
 
    numbers[eLevel]++;
    for (var l = 1; l<=6; l++) {
        if (l <= eLevel) {
            txt += numbers[l]+'.';
        } else {
            numbers[l] = 0;
        }
    }
 
    e.textContent = txt+' '+e.textContent.replace(/^[0-9\.\s]+/, '');
}
 
})();

Updates

because of changes in google-docs i modified how the document is accessed