Octavo notes

Some notes on Octavo, a rich web editor.

Feature requests and bugs go on the Octavo issues page.

Comments

⌃R is really handy for when pasting things in from external sources, which almost always have some kind of <span> formatting applied to them. Wikipedia has quite a nice template for key display. 

Cutting and pasting from one page to another (from Octavo to here) seems to work okay, except that doing so left an empty <h2> behind. Perhaps that's what caused the empty <p> elements in the Style Guide?

At some point, the status bar disappeared when creating a new page using ⇧Click and @data-octavo-reset. Apparently it doesn't get created when using the⇧Click method in conjunction with the reset.  I am also currently editing a <p>-within-a-<p>. A quick ⌃R fixes that as noted above, but this still ought not to be necessary. (Oh great, upon further editing I find that I'm now not in a <p> at all! Perhaps the double <p> was just being reported incorrectly? [POSSIBLY FIXED])

Pasting the todo list was an... interesting experience. Since the todo list comes from a test file, it created a <pre> section for it—inside an existing <p>. (All pastes should probably be done in a new <div> element or something, and could be analysed after). Then I selected each line of the <pre> and used ⌃D to wrap each of them in an <li>. Then I wrapped the <pre> in a <ul>, and did a take on <pre> and <p>. After doing the take on <pre> and <p>, the status bar did not update.

I wonder if it's possible to use Mathjax to render some LaTeX to HTML and then just copy and paste the HTML into an Octavo-enabled document?

Octavo makes it occur to me that modern web design is very little about the "semantics" of elements and that we could convert to div/span soup quite easily. Most of the stuff we care about is expressed in terms of style on boxes in the CSS box model, which happen to usually have some textual content in them (or sometimes an image).

Also, 17px Lato is freakin' brilliant. I do wonder what the fallbacks look like in other browsers that don't support WOFF though, because almost no font looks suitably proportioned on the web at 17px other than Lato.

Why WYSIWYG?

Could write a whole article about this. Many reasons, though. Example:

TODO: Use proper blockquotes here...

"The hardest part was translating a decade’s worth of posts from Typo-flavored Textile to Hakyll-flavored Markdown." — The second-order-diff Git trick

Another:

"I've been using WordPress since July, 2009. It is almost good enough. I encountered several downtimes when MySQL hung. I don't know a thing about database so I had to reboot the whole machine." — Letterpress

Convenience is really important. If you can just draw a new image right inside a document, that's a lot different to opening Spotlight, typing in "Inkscape", pressing return when it eventually comes up with a response; waiting for Inkscape to load, creating a new canvas of approximately the right size (either having to remember what dimensions to use, or actually measuring it manually in the document); drawing what you want, saving it as SVG, opening that up in a browser, copying it, returning to the original editing window, and pasting it in.

Design sketches

Here is how I imagine Octavo working:

OFF/ON modes

ON:

OFF:

EVENT:

some key combinations are bound to actions

all the other commands are bound to Menu Bar (needs a better name) stuff

need a name for elements that you type into

slot

subslot for e.g. <em>, etc.

maybe phrase...

need to make actions generic

can't just wrap caret-reset though