On Thu, Oct 24, 2013 at 4:13 AM, Matt Wilkie <[email protected]> wrote: [...] > > illustrations! > > Some of what makes the docs hard, both to write and to read, is determining > where to put things. If this text was accompanied with an illustration little > to no extra explanation would be necessary. [...] > > (Note: I chose the word 'illustration' instead of image because, well, > most of the time I hate tutorials full of big screenshots that push the > prose too far apart, breaking reading rhythm. > I often wish for a Leo shorthand, an ascii drawing, to quickly communicate > both outline structure and body content. Too bad ascii drawing damnably > difficult to do.)
I agree examples and illustrations are a big help. I played around with creating some html/css which could display example leo tree structure just as it would appear in leo itself. Check out the result here: http://jsfiddle.net/YFsNL/ (the result is rendered in the bottom right "pane"). Not as nice as your screenshot at http://i.imgur.com/pVYjl3Q.png because mine only includes the tree structure and not the body. Also not as nice as an ascii drawing as it involves writing some html. However, since it is pure html+css, maybe something like it can be incorporated into the leo documents. Maybe even a feature which automatically transforms a leo subtree into the corresponding html. Then it would be easy to sprinkle example tree structures throughout the Leo documentation. For those that didn't click the jsfiddle link above, here is the html and css: HTML: <body> <ul> <li class="minus body">Coffee</li> <ul> <li class="leaf">Maxwell House</li> <li class="leaf">Folger's</li> <li class="minus clone">Store</li> <ul> <li class="leaf body selected">Starbuck's</li> <li class="leaf body">Elsewhere</li> </ul> </ul> <li class="plus">Tea</li> <li class="plus">Coca Cola</li> </ul> </body> CSS: ul { background-color: #ffffec; } li { background-image: url('https://raw.github.com/vivainio/leo/master/leo/Icons/box00.GIF'); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 27px; } li.selected { background-color: lightgrey; } li.plus { list-style-image: url('https://raw.github.com/vivainio/leo/master/leo/Icons/plusnode.gif'); } li.minus { list-style-image: url('https://raw.github.com/vivainio/leo/master/leo/Icons/minusnode.gif'); } li.leaf { list-style-type: none; } li.body { background-image: url('https://raw.github.com/vivainio/leo/master/leo/Icons/box01.GIF'); } li.clone { background-image: url('https://raw.github.com/vivainio/leo/master/leo/Icons/box04.GIF'); } li.clonebody { background-image: url('https://raw.github.com/vivainio/leo/master/leo/Icons/box05.GIF'); } li.dirty { background-image: url('https://raw.github.com/vivainio/leo/master/leo/Icons/box08.GIF'); } -- You received this message because you are subscribed to the Google Groups "leo-editor" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/leo-editor. For more options, visit https://groups.google.com/groups/opt_out.
