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 . . .

  1. 11 Responses to “How to create outlines in Google Docs”

  2. 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.

    By amandafrench on Dec 4, 2008

  3. Brava! Don’t you love figuring out stuff like that? CSS hacking *can* be fun!

    By Patricia Hswe on Dec 4, 2008

  4. Have you tried any online To Do list apps?

    We developed a free one called www.Manymoon.com that integrates with Google Docs (eg, you can attach a Google Doc to a To Do or project).

    By Amit on Dec 10, 2008

  5. Awesome. Thank you so much.

    By Mark Adams on Feb 2, 2009

  6. Is there anyway to enter this in permantely so you dont have to retype or paste it in every time?

    By Anonymous on Feb 4, 2009

  7. I don’t think there is any way to enter it permanently; sorry — it’s on a document-by-document basis.

    By Amanda French on Feb 4, 2009

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

    By Bill Altermatt on Mar 2, 2009

  9. These tricks are all good….

    But….

    I love this new tool I’ve found to create outlines online, share them, publish them, etc…

    It’s called CheckVist.com

    By Bruce Wagner on Oct 21, 2009

  10. 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.

    By Jeff C on Mar 7, 2010

  11. 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.

    By bronius on Mar 23, 2010

  1. 1 Trackback(s)

  2. Aug 10, 2009: links for 2009-08-10 – jimdelaney.net

Sorry, comments for this entry are closed at this time.