Last update: Wed, Apr 18, 2012 at 9:39 AM.
List of all the rules
    • There are two kinds of rules.
    • The first kind are related to outline structure. They say how much to indent per level, how much space to put between outline levels, whether or not to put a permalink after each paragraph.
    • The second kind apply CSS style properties to levels of the structure. Any CSS property can appear in these rules.
    • The defaults listed here can be overridden by the templates for nodetypes. For example, in blogpost nodes, icons are turned off, even though they default on for outlines. The best way to find out how the defaults are set for any given nodetype is to try it out, and then use rules to tweak up the display so it looks the way you want it to.
    • Some rules allow you to enter a CSS length specification, for example, em, px, %.
    • These are explained in a doc on the W3C site.
    • We refer to them here as a "length spec."
      • A boolean value. If true, the headlines are expanded, if false they are not expanded.
      • Default is false.
      • Example. The first-level heads are expanded. The second-level heads are not.
      • A url. It points to an image that is used as the icon to expand outline items.
      • Default is a right-pointing blue wedge.
      • Example. Sets the icon for expanding to a white plus-sign inside a black circle.
      • A url. It points to an image that is used as the icon to collapse outline items.
      • Default is a down-pointing blue wedge.
      • Example. Sets the icon for collapsing to a white minus-sign inside a black circle.
      • A boolean. If true, icons are displayed next to headlines that have subs.
      • If icons are turned off and a headline has subs, you can click on the text of the headline to expand/collapse.
      • Default, true.
      • Example. Icons are turned off.
      • A length spec. It adds the amount of space specified after the list.
      • Default is 0. If list-space is not specified, no space is added after the list.
      • It sets the padding-bottom property of a div containing the list
      • Example. list-space is set to 30px.
      • A length spec. It adds the amount of space specified to the left of the list.
      • Default is 0, though as explained in the Defaults section above, most nodetype templates define it as a non-zero value.
      • Example. outline-indent is set to 40px.
      • A length spec. It adds the amount of space specified after the outline item.
      • Default is 0.
      • Example. Adds 25px after each second-level head.
      • A length spec. It adds the amount of space specified before the outline item.
      • Default is 0.
      • This rule was added on 9/1/12.
      • Example. Adds 25px before each first-level head.
      • A boolean. If true, we add a paragraph-level permalink at the end of each item.
      • Default is false.
      • Example. Each of the first-level heads has a permalink.
    • You can set any CSS property at any level of an outline using rules. So there's large variety of things you can do.
    • This example sets font-weight, font-family, font-size and line-height.
    • This is the intersection between CSS and outline structure. It's a way of broadcasting CSS properties across a document based on its structure.
    • I learned CSS through this project, so I'm sure that I'm missing tricks that others who know CSS better (many people) will be able to get rules to do new things. I can already see some possibilities for improvement. If you have ideas please post a note on the world-outline mail list.
    • 4/18/12 by DW