Fluid Documents

1. Fluid Annotations in an Open WorldPolle T. ZellwegerNiels Olof BouvinJock D. MackinlayHenning JehøjAarhus University, Denmark

2. 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 experience • glosses = annotations on links • help readers choose among links • Previous prototypes focused on viewing experience • supported author-created glosses (stored in document) andautomatically-generated glosses (fetched/derived from dest) • no reader-created glosses

3. Demo: Fluid Links • Opening & closing glosses • mouse rollover triggers animation • gloss text grows gradually to readable size • can also freeze gloss in view • 3 graphical techniques • Interline: moves text apart, compresses interline spacing to make room • Margin: gloss grows in nearest margin, connected by animated line • Overlay: grays following text to allow gloss text to be readable over top • Improved hypertext navigation • multi-way glosses contain links • nested glosses contain glosses

4. interline margin overlay multi-way and nested glosses

5. 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 context • generally 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

6. Open hypermedia • Extend existing apps so users can create links and other hypermedia structures between e.g. word-processing docs and spreadsheets • Microcosm, HyperDisco, Devise HM, Chimera, HOSS • Hypermedia structures stored outside documents • Create hypermedia structures on existing Web pages • proxy modifies Web pages en route to the browser • DLS, DHMProxy • Web browser controlled to modify pages inside browser • Webvise, Arakne Environment

7. Arakne Environment • Allows users to add & share hypermedia structures on existing WWW pages • Provides a general OHM architecture that supports various structures • links, 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 text anno

8. 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

9. Some challenges for Open Fluid • Animated gloss behavior in Web pages • Anchor and gloss salience in Web pages • Finding space for glosses in Web pages • Opening and closing glosses in Web pages

10. 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

11. Arakne Environment Browser Browser Original Arakne Environment • 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 Hypermedia View Hypermedia View OHP Construct HM servers Internet Explorer COM Construct Hyperstores Doc Obj Model

12. Arakne Environment Original Fluid Arakne Environment Hypermedia View Hypermedia View Browser Render Engine Animation Engine Gloss Model modifications events OHP Browser Construct HM servers Browser Internet Explorer Browser COM Construct Hyperstores Doc Obj Model

13. Arakne Environment Arakne Environment Hypermedia View Hypermedia View modifications modifications events Fluid • When reader adds gloss • s/he specifies gloss content • s/he specifies behavior andgloss, anchor appearance OHP Construct HM servers • At page load or add item RE inserts links, glosses by changing DOM RE places behavior in Gloss Model Internet Explorer Render Engine COM Animation Engine • At open, close gloss event AE animates gloss as specified RE sets gloss state in Gloss Model Construct Hyperstores Gloss Model events Doc Obj Model

14. 2. Anchor and gloss salience • Problem: • Web pages have widely varying appearances • need 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 appearance • use Cascading Style Sheets to compose easily with the original page

15. Specifying appearance & behavior <PSPEC id="daimi.5.979147242" type="PSPEC"> <PROPERTIES> <PROPERTYname="name"> <VALUESET><VALUE>warning</VALUE> </VALUESET> </PROPERTY> <PROPERTYname="anchor style" type="css"> <VALUESET> <VALUE>color: #FFFFFF; background: #CC0000;</VALUE> </VALUESET> </PROPERTY> <PROPERTYname="gloss style" type="css"> <VALUESET> <VALUE>font-size: 0.8em; border: 2px dotted;</VALUE> </VALUESET> </PROPERTY> <PROPERTYname="animation"> <VALUESET> <VALUEname=”primary”>pushdown</VALUE> <VALUEname=”gloss”>revealed</VALUE> </VALUESET> </PROPERTY> <PROPERTYname="placement"> <VALUESET><VALUE>inline</VALUE></VALUESET> </PROPERTY> <PROPERTY name="actuate"> <VALUESET> <VALUEname=”open”>Shift&MouseEnter</VALUE> <VALUEname=”close”>Shift&MouseLeave</VALUE> </VALUESET> </PROPERTY> <PROPERTYname="initial state"> <VALUESET><VALUE>closed</VALUE></VALUESET> </PROPERTY> </PROPERTIES> </PSPEC> • All OHSWG objects have PSpecs • set of properties • Open Fluid PSpecs are richer: • presentation of anchor text • presentation of gloss content • placement of gloss • activating gloss • animating gloss opening/closing • Also… • Open Fluid PSpecs cascade • Can now address glosses and contents • allows nested glosses & links in glosses } via CSS

16. 3. Finding space for glosses • Problem: • HTML provides broad & complex layout control to authors • scrolling and window resizing are common • makes prior Fluid techniques (interline, overlay, callout) harder to implement • Solution: • use simpler “push down” graphical technique • easily understood, improves on popup tool tips • does not occlude, can freeze and interact with

17. 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 line • easily readable during animation Fluid anchor gloss line 1gloss line 2gloss line 3 Open Fluid anchor gloss line 1gloss line 2gloss line 3

18. Demo: Open Fluid • Glosses as a personal information portal • CNN: glosses on existing TOC links contain links to personal pages of interest, in & out of CNN site • Glosses as typed annotations • W3C standards document • glosses have distinct anchor styles: example, note, warning • Other uses • glosses as an adjunct to open hypermedia links • explain rationale or context for reader-added links • glosses in the foreground • auto-open glosses with larger/bolder fonts or colors

21. Conclusions • Open Fluid provides fluid glosses on existing Web pages • implementation can handle complex HTML pages • gloss animations are responsive and smooth • new placement, opening styles to match Web context • OHM models can support dynamic gloss behavior • uses Arakne OHM Environment • new Render Engine handles animation, markup, state • PSpecs extended to describe appearance, behavior • Readers can add their own glosses to existing Web pages • varied anchor and gloss appearance via CSS

22. Open Fluid will be shown at the demo session tomorrow afternoon. Come by and see how readers add glosses and more examples.