Typed Parentheticals

Published: 25 Nov 2014

Progress on redframer is slow but solid with half a dozen parallel efforts going on.

One of these is work on the infrastructure of this site to demonstrate some of the UI conventions planned for redframer. This is in fact a test note for some of that work on typed parentheticals. If you read it early in its life, the parentheticals will be untyped. Later readers will see the typed versions with UI magic.

Because this is a test note, we'll pack in all the cases we want to test for.

We have supported parentheticaltext for some time.

The Original Idea

Until this point, parentheticals served as additional thoughts not central to the main post. Including them in the main post reduces the clarity of the main thread, but omitting them would lose something of value to some readers.

Parentheticals as originally implemented are very powerful and flexible. In particular, they can contain other parentheticals and images/videos. In theory, they can be reused, appearing in different posts. But the problem is the same as with an ordinary hypertext link: you don't know what it is unless you actually go there. That defeats the whole purpose of building a coherent, tight narrative that didn't include all the content of that page.

Our general approach to this problem is previews with optional inline display.

Branching

We'll say more about this later. Our goal is to give the reader one narrative thread in a post, but (in the long run) make it easy for the reader to determine a new narrative thread by deliberate decision.

In the short run, improved typed parentheticals only enhance the single, constructed thread. But our intent is to have the next text chunk be selected in collaboration with the system and user.

Different Types

The technique so far has been used to support true parentheticals, additional information for a reader who wants to take a longer loop through the post. In print, this would likely be a footnote.

But there are other types of information we might place in such a display. For instance we surely will have bibliographic references. Many readers will just want to know that we have an authority for what we say, some others will want to see the reference details, and yet some others will want to see the actual document.

A reader should be able to cheaply evaluate options, and have promiscuous possibilities.

Examples of Types

Here are various examples of types.

We are starting with these types:

Incidental. This is the most common type, being additional thoughts from the author not essential to the main thread. For the example here, I'll just reuse the previousone.
Bibliographic. We currently expect this to be a standardcitation that possibly could lead to some online display of original sources (assuming rights permit).
Annotation. In our GeoKabbalitter section, we plan to put well known text with extensive annotations. Ideally, these annotations should be able to be collectively turned inside out: the main flow being theannotations and the source text being in the parentheticals.
External. We expect this to be much like an incidental type but with ideas that have been expressedelsewhere on line.
Code. There will be some cases where the reference is to programming code. In thisexample, we'll try Trebuchet, which is supposed to be web safe.
Math. In a situation similar to the code type, we may want to reveal some mathematical concept or expression that is behind the annotated content. The example in this case uses some MathML pasted from Wikipedia. This will seem jibberish at first because we'll have to install MathJax. The examplehere has common equations but we'll be working with custom glyphs and some invented notation, designed to be more accessible.
Ontology Graph. There will be some cases where the reference is to the underlying ontology and I will want to display the ontology graph. In the thisexample short term, we can simply handle this with ordinary text with a normal image macro and the example is simply this. In the longer term will want to have that colorbox macro open an iframe with live graph info, computed somehow.

Very likely, some code, graph and math types will be siblings somehow.

This is an example of an incidental parenthetical of the type we currently support.

The Original Idea

This is a second-level parenthetical. It has all the capabilities of the parent. Below, we'll insert an image reused from another post.

Some of His Champagne Glasses

(Image) A photo of some of his work.

I am not yet sure if we can effectively use this in tedgoranson.com.

An example: say the main text is about how the Moon may have been formed. The parenthetical teasertext will indicate that a paper in Science Magazine has details on the theory we mention and has a non-technical summary online.

We'd likely reference the non-technical web page in an external type. And within that have a bibliographic type to the more technical paper.

There are many examples of this in the wild. My concerns are hardly new or unique.

in redframerwe will be linking to many external sources. We'll integrate some of them in displayed flows as appropriate, but a larger vision has us excerpting and indexing them semi-automatically.

This function and the display is inspired by what Marco Arment did with The Magazine.

Scroll down to the popup that has Louis CK in it. Actually in this example, the summary is simply the first words on the page. But elsewhere I think he leveraged some fancy code from his Instapaper app (since sold) to get a summary automatically.

In the short run, I'll be summarizing the page manually. In a slightly longer run, I think I would like to open an iFrame in our Colorbox implementation.

I expect this to evolve quite a bit over time.

For now, we will export this to the web as a conventionally formatted, manually assembled item. In the near future, I expect to do something automatic with my very capable reference manager, Bookends.

Goranson, H. T. (2006), ed Cardier, Beth. Spying on Eros. Project Syndicate.

Original is here. (Free registration required.)

(Also appeared in numerous newspapers in translation.)

(defn dfs
  "Depth first search. Short form of the method passes through all the nodes of the graph even if it's disconnected .
  (nodes-fn graph) expected to return list of all the nodes in the graph.
  (child-fn graph node) expected to return list of all the nodes linked to the given node.
  Returns hash-map where nodes are associated with a pair :idx, :leader.
  :idx stores finishing index of the node traversal (post-order counter)
  :leader first finishing index of the current DFS."
  ([graph nodes-fn child-fn]
     (second
      (reduce ;; Start DFS from each node of the graph
       (fn [[idx result passed :as args] next-node]
         (if (not (passed next-node)) ;; Don't do DFS if node is marked
           (dfs idx idx result passed graph next-node child-fn)
           args))
       [0 {} #{}] ;;Initial index, result, set of passed nodes
       (nodes-fn graph))))
  ([idx leader result passed graph node child-fn]
     (let [[idx result passed]
           (reduce (fn [[idx result passed :as args] child-node]
                     (if (not (passed child-node))
                       (dfs idx leader result passed
                            graph child-node child-fn)
                       args))
                   [idx result (conj passed node)]
                   (child-fn graph node))]
       [(inc idx)
        (assoc result node {:idx idx :leader leader})
        passed])))
 
(defn pass-two
  "Calls DFS making sure that traversal is done in the reverse :idx order."
  [graph result child-fn]
  (let [nodes-fn
        (constantly (->> result
                         ;;Sort by :idx in reverse order
                         (sort-by (comp :idx second)) reverse
                         ;;Return only nodes
                         (map first)))]
    (dfs graph nodes-fn child-fn)))
   
(defn scc
  "Finds strongly connected components of the given directed graph.
  Returns lists of nodes grouped into SCC.
  (nodes-fn graph) expected to return list of all the nodes in the graph.
  (incoming-fn graph node) expected to return all the nodes with transitions towards the given node.
  (outgoing-fn graph node) expected to return all the nodes with transitions from the given node."
  [graph nodes-fn incoming-fn outgoing-fn]
  (let [result (dfs graph nodes-fn incoming-fn)

The Lorenz Equations

\[\begin{matrix} \dot{x} & = & \sigma(y-x) \dot{y} & = & \rho x - y - xz \dot{z} & = & -\beta z + xy \end{matrix} \]

The Cauchy-Schwarz Inequality

\[ \left( \sum_{k=1}^ n a_k b_k \right)^2 \leq \left( \sum_{k=1}^ n a_k^2 \right) \left( \sum_{k=1}^ n b_k^2 \right) \]

A Cross Product Formula

\[\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \end{vmatrix} \]

The probability of getting \(k\) heads when flipping \(n\) coins is:

\[P(E) = {n \choose k} p^ k (1-p)^{ n-k} \]

An Identity of Ramanujan

\[ \frac{1}{(\sqrt{\phi \sqrt{5}}-\phi) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\ldots} } } } \]

For now we'll really cheat. This type will eventually be a computed pane, drawn by code. Our initial use case is to display the ontology graph associated with some text, being the formal representation in the machine of what it means (logically).

But for now, we'll just but a normal image in a normally formatted parenthetical. Our next step in this direction will be to have this image be an SVG (vector image).

A Random Image

(Image) A UI study for a narrative dynamics editor.

I think we will have a relatively rigid format for annotation types. The styling will be the same as most of the others but we will have some fields that link annotations one to another.

One field may be a bibliographic type.

What this Task Entails

What we are doing this in first round of improvements

The big change you will notice when things are done is the use of a sliding popup. When you hover over a link (highlighted grey text) marked by an I-beam, the I-beam changes color, a horizontal line of the same color appears below and an info panel slides out.

This panel contains two pieces of information: the type of the parenthetical that might be expanded and a sentence indicating what it is about. That way you can quickly judge whether to open it and possibly follow where it leads.

As it happens, there are also some visual niceties. We are converting to vector art where we can to accomodate retina screens, so these I-beams are vector. Each type has a color. (The colorset is from a specific movie.)

The above paragraph has some example notions. The movie I link to is Yellow Submarine. But you won't know that unless you pay the price of leaving the narrative. There is a reason this film is chosen. It is a very long story but an interesting one. I am sure some readers will find it much more compelling to follow that branch than to stick with UI discussion.

Quite separately is a collection of ideas about vector art in web pages, why they are important to the web, why the existing standard sucks and how we intend to co-opt it for calligraphic effect. But you see, all those are branches from the story of focus here.

The Sliding Info Panel

(Image) An illustration of how the slideout panels will behave.

A reminder, this note will initially not have these sliders, being the test case. Over time, our coders will add the effect.

Parenthetical Formatting

The type of parenthetical we've used until now is media-enhanced text, using the same styling as the main body of the post. We've worked to make them appear and behave just as the rest of the content. But with the introduction of new types, we get to use content-specific styles.

Some of this will get more radical in a future step. This time around, we have minimized the change in most cases, by embedding things. For example, the first edition of our external link type has an additional step that is a hassle for you and me.

In the full up version, hovering over an external link will open the slider to tell you where you might go. Supposing that you don't want to follow that link, the cost to you has been small, and presumably your engagement with the main thread will not have been unduly perturbed.

The interim version requires me to manually write a summary of the external page, followed by an ordinary link to open that page. The idea here again is that exploring branched threads should be easy and as much as possible should be displayable in-line.

We'll have to learn what makes sense to except/paraphrase for inline reading.

Another example is the ontology graph type. This will in the future be a couple computed interactive displays of meaning, one formal and another more intuitive. For now we've just put a placeholder here as an ordinary note with an embedded (ordinary) image.

Under the Hood Authoring Tools

As with most of the work we are doing, the major focus is on work in the authoring environment, to make these improvements easier to create and manage. There is some interesting work here that could be of use to other users of Tinderbox. Just drop me a line if you are interested.

Some Future Possibilities

Where our HTML enhancements will likely go.

We are making these investments because of redframer

As time goes on, our ambitions are clarifying. To make this worth doing and fun. To matter, we are taking the time to do it right and well.

One implication is that the filmsfolded work will be useful in contributing initial content. We also want to demonstrate what we can in live code.

The basic text display in redframer will be html5. We will be introducing a lot of unfamiliar and novel UI elements, but we want the main text display to look and work in an unobtrusive way.

Collapsed Big Picture

We have already mentioned key goals. As much as possible has to be displayed in-line (without you leaving the main focus). As much content as possible should be collapsed so you can focus on the area of interest while still seeing the overall structure of the thread you are following.

Branching

At the same time, we want to provide many branching points so that the reader has control over what they read, what narrative they build.

Very likely, we will stepwise convert all links to have these sliding popups. Also, we certainly will work to allow multiple branches per link.

The I-Beam as Grabbable

The I-beam is a distraction, I know. Currently, it serves to distinguish our experimental 'links' from dumb links. It also serves to show where the current flow will be split as the stretchtext appears. We currently use it between two words for visual clarity, but there is no technical reason for the two word limit.

This next step adds color, but we feel displaying that color in the unexpanded state will be distracting. No one will learn what color goes with which type anyway. Our long range plan is to use these as drag handles. One of redframer’s challenges is in giving the user two kinds of control:

what piece of information provides the gateway to new branches. In this we are simply extending on long-established notions in narrative hypertext.
what context governs the narrative dynamics, including what-comes-next. Our idea here is to allow easy drawing of boxes, literally red frames. We'll need intuitive affordances for this, and the ability to build parallel, metanarratives — what elsewhere we call folds.

This is an example of an incidental parenthetical of the type we currently support.

The Original Idea

This is a second-level parenthetical. It has all the capabilities of the parent. Below, we'll insert an image reused from another post.

Some of His Champagne Glasses

(Image) A photo of some of his work.