Birch-outline: any difference rendering without the `P` elements? rendering as a linear list (vs nested) list?


I’m refactoring the birch-outline Webpage Example so it works with a virtual scrolling list for performance reasons. I have some questions about how the example builds a UL from a Taskpaper outline:

  • Is there a reason for having each LI wrap a P element?
    • Will rendering only the LI have any non-obvious effects?
    • (Assuming the corresponding CSS is also changed.)
  • Is there any difference between rendering Taskpaper outlines as linear lists vs. nested lists?
    • My guess: indents will have to be manually inserted. (As the browser indents nested lists for you.)
    • But maybe some themes will break… Anything else?

Feel free to play around with what I’m building:


First know that that example was put together very quickly. I wouldn’t say anything about the HTML structure is particularly right or wrong … modify as you see fit for your given goals.

This makes styling easier. (I think) It allows you to style a parent item without giving it’s children the same style.

I think it depends on your goal… if your goal is to export a final HTML document then I think structured makes more logical sense. But if you are writing an editor then I think a flat list with manual indents can be easier to keep updated (that’s the model that I use in TaskPaper for Mac, though it’s not HTML based).

If you use a flat list it will limit your styling options since you couldn’t do any styles based on contentment. With that said TaskPaper for Mac also doesn’t support item containment styles.


The example was easy to read and showed me exactly what parts of the API I needed (and how to use them).

I successfully modified the example to render a flat list. It’s even easier to read because it’s shorter and doesn’t involve recursion. A little more CSS is needed for the indentation, however.

(BTW what’s the practical maximum indentation level for a TaskPaper file? I find I don’t use more than about two or three levels, myself)

Later, I hooked up the flat list to clusterize.js for dramatic speed improvements!

@jessegrosjean: I’d be happy to clean up and contribute my (CoffeeScript) example code if you’re interested.


It really depends on how you use your TaskPaper file … I don’t think there’s any particular maximum. It used to be that you would have to see all the indentation (in TaskPaper 2) even when you focused into a project. But in TaskPaper 3 when you focus into a project you just see that projects indentation … so there’s no much cost to indenting projects as long as you edit them in focused mode.

I would say my own lists don’t go much beyond 7 levels. But I’m sure there’s someone out there who creates really deep hiearchies!

If you want to share it I think best to release in your own repo and then link to it from the TaskPaper extensions wiki. I don’t want to build up to many official examples right now.