Fluid Annotations

in an Open World

Polle T. ZellwegerNiels Olof BouvinJock D. Mackinlay

Henning Jehøj

Aarhus University, Denmark

Fluid Documents

Fluid Documents use animated typographical changes to show annotations in context

Previous applications:hypertext, spreadsheets, eBooks, avant-garde fiction,

reading instruction

Fluid Links use fluid annotations to smooth the hypertext browsing experienceglosses = annotations on linkshelp readers choose among links

Previous prototypes focused on viewing experiencesupported author-created glosses (stored in document) and

automatically-generated glosses (fetched/derived from dest)

no reader-created glosses

Demo: Fluid Links

Opening & closing glossesmouse rollover triggers animationgloss text grows gradually to readable sizecan also freeze gloss in view

3 graphical techniquesInterline: moves text apart,

compresses interline spacing to make roomMargin: gloss grows in nearest margin,

connected by animated lineOverlay: grays following text to allow gloss text

to be readable over top

Improved hypertext navigationmulti-way glosses contain linksnested glosses contain glosses

interline margin

overlay multi-way and nested glosses

Value of Fluid Documents

Allow readers to shift their attention smoothly and quickly from the primary material to glosses and back again

Allow readers to view glosses with maximal contextgenerally no occlusion

Animation helps readers easily process the page alterations required to display the gloss

Fluid links glosses blur the boundary between source and destination

Open hypermedia

Extend existing apps so users can create links and other hypermedia structures between e.g. word-processing docs and spreadsheetsMicrocosm, HyperDisco, Devise HM, Chimera, HOSS

Hypermedia structures stored outside documents

Create hypermedia structures on existing Web pagesproxy modifies Web pages en route to the browser

DLS, DHMProxyWeb browser controlled to modify pages inside browser

Webvise, Arakne Environment

Arakne Environment

Allows users to add & share hypermedia structures on existing WWW pages

Provides a general OHM architecture that supports various structureslinks, annotations, guided tours, ...

Supports simple annotations original: some anchor text

prefix: some anno anchor text

postfix: some anchor anno text

replace: some anno text

popup: some anchor textanno

Goals of Open Fluid

Combine capabilities of Fluid Documents and Arakne Environment:

Support fluid glosses on existing WWW pages

Explore flexibility of current open hypermedia models and architectures to handle dynamic gloss behavior

Allow readers to add their own fluid glosses

Some challenges for Open Fluid

1. Animated gloss behavior in Web pages

2. Anchor and gloss salience in Web pages

3. Finding space for glosses in Web pages

4. Opening and closing glosses in Web pages

1. Animated gloss behavior

Problem: animated typographical changes require a

closer relationship between the OHM environment and the browser than previously tried

Solution: new IE plug-in architecture for Arakne

Environment

Arakne Environment

Internet Explorer

Doc Obj Model

Arakne Environment

Hypermedia View

COM

ConstructHM servers

ConstructHyperstores

Browser

Original

Hypermedia View

Browser

Browser class communicates with IE’s DOM to insert links & simple annos at page load when reader adds new item

IE handles link traversal & popup annos itself, as usual

OHP

Arakne Environment

Hypermedia ViewHypermedia View

Arakne Environment

Internet Explorer

Doc Obj Model

Browser

Browser

BrowserCOM

ConstructHM servers

ConstructHyperstores

Browser

Original

modifications events

Render Engine

Gloss Model

Animation Engine

Fluid

OHP

Internet Explorer

Doc Obj Model

Render Engine

Gloss Model

Animation Engine

When reader adds glosss/he specifies gloss contents/he specifies behavior and

gloss, anchor appearance

ConstructHM servers

ConstructHyperstores

COM

modifications

At page load or add itemRE inserts links, glosses by changing DOMRE places behavior in Gloss Model

events

At open, close gloss eventAE animates gloss as specifiedRE sets gloss state in Gloss Model

Arakne EnvironmentFluid

modifications events

Arakne Environment

Hypermedia ViewHypermedia View

OHP

2. Anchor and gloss salience

Problem:Web pages have widely varying appearancesneed to be able to show and distinguish among

the presence of original link anchors, OHM link anchors, gloss anchors, gloss content

may want anchors, glosses to be distinct or blend in

Solution:provide wide control of anchor and gloss

appearanceuse Cascading Style Sheets to compose easily

with the original page

Specifying appearance & behavior

All OHSWG objects have PSpecsset of properties

Open Fluid PSpecs are richer:presentation of anchor textpresentation of gloss contentplacement of glossactivating glossanimating gloss opening/closing

Also…Open Fluid PSpecs cascadeCan now address glosses and contents

allows nested glosses & links in glosses

<PSPEC id="daimi.5.979147242" type="PSPEC"> <PROPERTIES> <PROPERTY name="name"> <VALUESET> <VALUE>warning</VALUE> </VALUESET> </PROPERTY> <PROPERTY name="anchor style" type="css"> <VALUESET><VALUE>color: #FFFFFF; background: #CC0000;</VALUE> </VALUESET> </PROPERTY> <PROPERTY name="gloss style" type="css"> <VALUESET><VALUE>font-size: 0.8em; border: 2px dotted;</VALUE> </VALUESET> </PROPERTY> <PROPERTY name="animation"> <VALUESET><VALUE name=”primary”>pushdown</VALUE><VALUE name=”gloss”>revealed</VALUE> </VALUESET> </PROPERTY> <PROPERTY name="placement"> <VALUESET> <VALUE>inline</VALUE> </VALUESET> </PROPERTY> <PROPERTY name="actuate"> <VALUESET> <VALUE name=”open”>Shift&MouseEnter</VALUE> <VALUE name=”close”>Shift&MouseLeave</VALUE> </VALUESET> </PROPERTY> <PROPERTY name="initial state"> <VALUESET> <VALUE>closed</VALUE> </VALUESET> </PROPERTY> </PROPERTIES></PSPEC>

} via CSS

3. Finding space for glosses

Problem:HTML provides broad & complex layout

control to authorsscrolling and window resizing are commonmakes prior Fluid techniques (interline,

overlay, callout) harder to implement

Solution:use simpler “push down” graphical

techniqueeasily understood, improves on popup

tool tipsdoes not occlude, can freeze and

interact with

4. Opening and closing glosses

Problem:Fluid “font zoom” animation

increases font size of gloss gradually to desired size

interacts poorly with auto-line wrap in HTML

Solution:new “revealed” animation grows

line by lineeasily readable during animation

Open Fluid anchorgloss line 1

gloss line 2gloss line 3

Fluid anchor

gloss line 1gloss line 2gloss line 3

Demo: Open Fluid

Glosses as a personal information portalCNN: glosses on existing TOC links contain links to personal

pages of interest, in & out of CNN site

Glosses as typed annotationsW3C standards document

glosses have distinct anchor styles: example, note, warning

Other usesglosses as an adjunct to open hypermedia links

explain rationale or context for reader-added links

glosses in the foregroundauto-open glosses with larger/bolder fonts or

colors

Conclusions

Open Fluid provides fluid glosses on existing Web pagesimplementation can handle complex HTML pagesgloss animations are responsive and smoothnew placement, opening styles to match Web context

OHM models can support dynamic gloss behavioruses Arakne OHM Environmentnew Render Engine handles animation, markup, statePSpecs extended to describe appearance, behavior

Readers can add their own glosses to existing Web pagesvaried anchor and gloss appearance via CSS

Open Fluid will be shown at the demo session tomorrow afternoon.

Come by and see how readers add glosses and more examples.