How to create outlines in Google Docs

UPDATE 5/14/2012: These instructions are very outdated and do not work any more; it is no longer possible to edit HTML and CSS in Google Docs. –AF

This is a tiny victory, but it is my own.

I maintain my To Do list in Google Docs now so that I can access the latest version anywhere. Usually it’s just a bulleted list, but today I wanted to create a separate numbered list in outline style. Google Docs does allow numbered lists, but look at the slight weirdness:

Google numbered list

It’s numbered, and it’s indented hierarchically, but the numbers are all Arabic. Which annoyed me. I expect traditional changed numbering from my hierarchical outlines, yes I do.

I did some searching (naturally) but couldn’t find anything very helpful, except for the nugget that you can actually edit the HTML and CSS in a Google doc, which I did not know till now. After a little trial and error, I came up with this simple hack that will make a Google Doc numbered list look more like a regular outline.

Go to Edit –> Edit CSS in your Google Doc. Put in the following code:

ol ol {
list-style-type: lower-alpha;
}
ol ol ol {
list-style-type: lower-roman;
}

And wham, you’re done, and you’ve got a lovely outline:

If you speak CSS, you’ll see that the code is telling the document that every ordered list inside an ordered list should use lower-case letters for list items, while every ordered list within an ordered list within an ordered list should use lower-case Roman numerals for list items. You can choose your own list styles here at the W3 Schools, and of course you can go farther than three levels if you like. You’ll need to edit the CSS for every document separately, sadly.

By the way, is it a little weird that CSS calls regular old numbers “decimal” instead of “Arabic”? Probably not.

Um, I better go actually do some of those tasks now that I’ve got them to display the way I want them to . . .

11 thoughts on “How to create outlines in Google Docs

  1. I should mention that the great thing about this hack is that it’ll automatically maintain the numbering when you use Tab and Shift-Tab to move things up or down a level. Google Docs does already allow you to manually change the list style for an item by right-clicking it and choosing “Change list.” But who wants to do that every time?

    I should also mention that I only tested this in Firefox.

  2. Thanks for the tip! I just tried the code below in CSS (based on your model) and it gave me the typical outline format of I. A. 1. a. i.

    * * * code begins * * *
    ol {
    list-style-type: upper-roman;
    }
    ol ol {
    list-style-type: upper-alpha;
    }
    ol ol ol {
    list-style-type: decimal;
    }
    ol ol ol ol {
    list-style-type: lower-alpha;
    }
    ol ol ol ol ol {
    list-style-type: lower-roman;
    }

  3. Bill,
    Thanks for your outline with greater depth. I was just about to ask Amanda for that.

    I wonder why GDocs doesn’t just make this hierarchical outline the default. Oh well.

  4. Super! Thanks for sharing. It’s surprising that it takes css to make the necessary change, but it’s not surprising that Google found a neat, elegant way to expose it.

Comments are closed.