My presentation on "Editable Documents on the Web". 2011. by Markku Laine, http://www.tinyurl.com/mplaine

1. Editable Documents on the Web
T-111.5502 Seminar on Media Technology B P (4-8 cr)
Presentation
Markku Laine, M.Sc. (Tech.)
markku.laine@aalto.fi
November 8, 2011

2. Presentation Outline
• Evolution
• Revolution(?): The HTML5 Approach
• Research topics
• Conclusion
2

3. Evolution
3

4. 1990: The WorldWideWeb (Nexus)
Browser
• The first Web browser
• Direct manipulation of text on
screen (WYSIWYG)
• The user reading a Web page
can edit and save that page
• A true collaboration platform!
Source: The World Wide Web Consortium (W3C)
4

5. 1993: The Mosaic Browser
• The browser that popularized
the Web
• Regression: the user reading a
Web page cannot anymore edit
that page
• The collaborative nature was
lost!
– Included support for
annotations, though
Source: Wikipedia
5

6. 2000: The Internet Explorer 5.5 Browser
• The mainstream Web browser
• The user reading a Web page
can edit the entire page
– document.designMode
– element.contentEditable
Source: Wikipedia
6

7. ????: JavaScript-Based WYSIWYG
Editors
• Can be embedded into any
Web page
• http://testbed.tml.hut.fi/tutorial/
htmleditors.xformsdb
Source: XFormsDB
7

8. Revolution(?):
The HTML5 Approach
8

9. Google's "Hype Cycle" for HTML5
1st WHATWG draft 1st W3C draft
Source: Google Insights for Search
9

10. Features Related to Editing Documents
• The contentEditable attribute
• The designMode property
• Editing APIs
•  WYSIWYG editing for Web pages
– Certain elements can be restricted from being edited
•  Implemented in all major browsers
10

11. Demo
11

12. <div contenteditable="true">
12

13. HTML Element's contenteditable
Attribute
• Governs just the element on which it appears, and that
element's children
– That is, makes those elements editable
• Enables Web developers to build element-level rich text
editors
• W3C Working Draft
– http://www.w3.org/TR/html5/editing.html#contenteditable
13

14. The API calls
• element.contentEditable [= value]
• element.isContentEditable
14

15. Actions within Editing Hosts
• Move the caret
• Change the selection
• Insert text
• Break block
• Insert a line separator
• Delete
• Insert, and wrap text in, semantic elements
• Select and move non-editable elements nested inside
editing hosts
• Edit form controls nested inside editing hosts
15

16. document.designMode="on"
16

17. Document Object's designMode Property
• Governs the entire document
– That is, makes the entire document editable
• Enables Web developers to build document-level rich
text editors
• W3C Working Draft
– http://www.w3.org/TR/html5/editing.html#designMode
17

18. The API calls
• document.designMode [= value]
18

19. Editing APIs
19

20. Document Object's Editing APIs
• A set of API calls to issue commands (e.g., bold and
italic) on the editable region−that is, a document or an
element), and to query the current state of the region
• W3C Working Draft
– http://www.w3.org/TR/html5/dnd.html#editing-apis
20

21. The API calls
• document.execCommand( commandId [,... [,...]] )
• document.queryCommandEnabled( commandId )
• document.queryCommandIndeterm( commandId )
• document.queryCommandState( commandId )
• document.queryCommandSupported( commandId )
• document.queryCommandValue( commandId )
21

22. Possible values for commandId
(specified by W3C)
• bold, italic, subscript, superscript
• createLink, unlink, formatBlock
• delete, forwardDelete
• insertImage, insertHTML, insertLineBreak,
insertOrderedList, insertUnorderedList, insertParagraph,
insertText
• redo, undo, selectAll, unselect
• vendorID-customCommandID
• Anything else  do nothing
22

23. ExecCommand Demo
http://www.quirksmode.org/dom/execCommand/
23

24. Implementation Status
Source: http://caniuse.com/
24

25. Research Topics
25

26. Research Topics
• Code debugging game called Gidget (Lee and Ko, 2011)
• Collaborative, lightweight in-line editing (Rees, 2000)
• Web as an application platform (Taivalsaari and
Mikkonen, 2011 & Anttonen et al., 2011)
• Collaborative and interactive document editing (Fujimoto
and Matsuo, 2006)
26

27. Conclusion
27

28. Conclusion
• Support for in browser rich text editing has come and
gone during the history of the Web
• HTML5 provides improvements related to editing
documents in browsers
– Some compatibility problems between different browsers
• Typically used together with other HTML5 features, such
as client-side databases as well as drag-and-drop
• "This document cannot be edited"  Will this change
the way we interact with documents permanently?
28

29. References
• Rees, M.J. "User Interfaces for Lightweight In-Line
Editing of Web Pages". In AUIC, 2000.
• Taivalsaari, A. and Mikkonen, T. "The Web as an
Application Platform: The Saga Continues". In SEAA,
2011.
• Lee, M.J. and Ko, A.J. "Personifying Programming Tool
Feedback Improves Novice Programmers' Learning". In
ICER, 2011.
• Anttonen, M. et al. "Transforming the Web into a Real
Application Platform: New Technologies, Emerging
Trends and Missing Pieces". In SAC'11, 2011.
29

30. Thank You!
Questions? Comments?
markku.laine@aalto.fi
30