Portable electronic device, method, and graphical user interface for displaying structured electronic documents

• US 8,669,950 B2
• Filed: 12/29/2010
• Issued: 03/11/2014
• Est. Priority Date: 09/06/2006
• Status: Active Grant

• Current Assignee: Apple Inc.
• Original Assignee: Apple Inc.
• Inventors: Forstall, Scott, Christie, Greg, Lemay, Stephen O., Chaudhri, Imran, Williamson, Richard, Blumenberg, Chris, van Os, Marcel, Boule, Andre M. J.
• Primary Examiner(s): SHERMAN, STEPHEN G
• Application Number:
  US12/981,433
• Publication Number:
  US 20110154188A1
• Time in Patent Office: 1,168 Days
• Field of Search: 345/156, 345173-178, 178 1801- 1809, 178/18.11, 715/810, 715828-831, 715/234, 715/781, 715/700
• US Class Current: 345/173
• CPC Class Codes: G06F 3/0481 based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
• CPC Class Codes: G06F 3/04845 for image manipulation, e.g. dragging, rotation, expansion or change of colour
• CPC Class Codes: G06F 3/0488 using a touch-screen or digitiser, e.g. input of commands through traced gestures
• CPC Class Codes: G06F 3/04883 for inputting data by handwriting, e.g. gesture or text
• CPC Class Codes: H04M 1/72403 with means for local support of applications that increase the functionality

Abstract

A computer-implemented method, for use in conjunction with a portable electronic device with a touch screen display, comprises displaying at least a portion of a structured electronic document on the touch screen display, wherein the structured electronic document comprises a plurality of boxes of content, and detecting a first gesture at a location on the displayed portion of the structured electronic document. A first box in the plurality of boxes at the location of the first gesture is determined. The first box on the touch screen display is enlarged and substantially centered.

Claims

1. A portable electronic device, comprising:

a touch screen display;

one or more processors;

memory; and

one or more programs, wherein the one or more programs are stored in the memory and configured to be executed by the one or more processors, the one or more programs including instructions for;

displaying at least a portion of a web page on the touch screen display, wherein the web page comprises a plurality of boxes of content;

detecting a first gesture at a location on the displayed portion of the web page;

determining a first box in the plurality of boxes at the location of the first gesture;

enlarging and translating the web page so that the first box is substantially centered on the touch screen display;

while the first box is enlarged, detecting a second gesture on a second box other than the first box; and

,

in response to detecting the second gesture, translating the web page so that the second box is substantially centered on the touch screen display.

2. The device of claim 1, including instructions for:

prior to displaying at least a portion of the web page,

determining borders, margins, and/or paddings for the plurality of boxes that are specified in the web page; and

adjusting the borders, margins, and/or paddings for the plurality of boxes for display on the touch screen display.

3. The device of claim 1, wherein:

the web page has a document width and a document length;

the touch screen display has a display width; and

displaying at least a portion of the web page comprises scaling the document width to fit within the display width independent of the document length.

4. The device of claim 3, wherein:

the touch screen display is rectangular with a short axis and a long axis;

the display width corresponds to the short axis when the web page is seen in portrait view; and

the display width corresponds to the long axis when the web page is seen in landscape view.

5. The device of claim 1, wherein the plurality of boxes are defined by a style sheet language.

6. The device of claim 5, wherein the style sheet language is a cascading style sheet language.

7. The device of claim 1, wherein:

the web page has an associated render tree with a plurality of nodes; and

determining the first box at the location of the first gesture comprises;

traversing down the render tree to determine a first node in the plurality of nodes that corresponds to the detected location of the first gesture;

traversing up the render tree from the first node to a closest parent node that contains a logical grouping of content; and

identifying content corresponding to the closest parent node as the first box.

8. The device of claim 7, wherein the logical grouping of content comprises a paragraph, an image, a plugin object, or a table.

9. The device of claim 7, wherein the closest parent node is a replaced inline, a block, an inline block, or an inline table.

10. The device of claim 1, wherein enlarging and translating the web page comprises displaying at least a portion of the second box of the plurality of boxes of content on the touch screen display.

11. The device of claim 1, wherein enlarging comprises expanding the first box so that the width of the first box is substantially the same as the width of the touch screen display.

12. The device of claim 1, including instructions for resizing text in the enlarged first box to meet or exceed a predetermined minimum text size on the touch screen display.

13. The device of claim 12, wherein the text resizing comprises:

determining a scale factor by which the first box will be enlarged;

dividing the predetermined minimum text size on the touch screen display by the scaling factor to determine a minimum text size for text in the first box; and

if a text size for text in the first box is less than the determined minimum text size, increasing the text size for text in the first box to at least the determined minimum text size.

14. The device of claim 1, including instructions for resizing text in the web page to meet or exceed a predetermined minimum text size on the touch screen display.

15. The device of claim 14, wherein the text resizing comprises:

determining a scale factor by which the first box will be enlarged;

dividing the predetermined minimum text size on the touch screen display by the scaling factor to determine a minimum text size for text in the web page; and

if a text size for text in the web page is less than the determined minimum text size, increasing the text size for text in the web page to at least the determined minimum text size.

16. The device of claim 14, wherein the text resizing comprises:

identifying boxes containing text in the plurality of boxes;

determining a scale factor by which the first box will be enlarged;

dividing the predetermined minimum text size on the touch screen display by the scaling factor to determine a minimum text size for text in the web page; and

for each identified box containing text, if a text size for text in the identified box is less than the determined minimum text size, increasing the text size for text in the identified box to at least the determined minimum text size and adjusting the size of the identified box.

17. The device of claim 1, including instructions for:

detecting a third gesture on the enlarged second box; and

in response to detecting the third gesture, reducing in size the displayed portion of the web page.

18. The device of claim 1, including instructions for:

detecting a swipe gesture on the touch screen display; and

in response to detecting the swipe gesture, translating the displayed portion of the web page on the touch screen display.

19. The device of claim 1, including instructions for:

detecting a fifth gesture on the touch screen display,

in response to detecting the fifth gesture, rotating the displayed portion of the web page on the touch screen display by 90°

.

20. The device of claim 1, including instructions for:

detecting a change in orientation of the device,

in response to detecting the change in orientation of the device, rotating the displayed portion of the web page on the touch screen display by 90°

.

21. The device of claim 1, including instructions for:

detecting a multi-finger de-pinch gesture on the touch screen display,

in response to detecting the multi-finger de-pinch gesture, enlarging a portion of the displayed portion of the web page on the touch screen display in accordance with a position of the multi-finger de-pinch gesture and an amount of finger movement in the multi-finger de-pinch gesture.

22. A non-transitory computer readable storage medium storing one or more programs, the one or more programs comprising instructions, which when executed by a portable electronic device with a touch screen display, cause the device to:

display at least a portion of a web page on the touch screen display, wherein the web page comprises a plurality of boxes of content;

detect a first gesture at a location on the displayed portion of the web page;

determine a first box in the plurality of boxes at the location of the first gesture;

enlarge and translate the web page so that the first box is substantially centered on the touch screen display;

while the first box is enlarged, detect a second gesture on a second box other that the first box; and

,

in response to detecting the second gesture, translate the web page so that the second box is substantially centered on the touch screen display.

23. The computer readable storage medium of claim 22, including instructions which cause the device to:

prior to displaying at least a portion of a web page,

determine borders, margins, and/or paddings for the plurality of boxes that are specified in the web page; and

adjust the borders, margins, and/or paddings for the plurality of boxes for display on the touch screen display.

24. The computer readable storage medium of claim 22, wherein:

the web page has a document width and a document length;

the touch screen display has a display width; and

displaying at least a portion of the web page comprises scaling the document width to fit within the display width independent of the document length.

25. The computer readable storage medium of claim 24, wherein:

the touch screen display is rectangular with a short axis and a long axis;

the display width corresponds to the short axis when the web page is seen in portrait view; and

the display width corresponds to the long axis when the web page is seen in landscape view.

26. The computer readable storage medium of claim 22, wherein the plurality of boxes are defined by a style sheet language.

27. The computer readable storage medium of claim 26, wherein the style sheet language is a cascading style sheet language.

28. The computer readable storage medium of claim 22, wherein:

the web page has an associated render tree with a plurality of nodes; and

determining the first box at the location of the first gesture comprises;

traversing down the render tree to determine a first node in the plurality of nodes that corresponds to the detected location of the first gesture;

traversing up the render tree from the first node to a closest parent node that contains a logical grouping of content; and

identifying content corresponding to the closest parent node as the first box.

29. The computer readable storage medium of claim 28, wherein the logical grouping of content comprises a paragraph, an image, a plugin object, or a table.

30. The computer readable storage medium of claim 28, wherein the closest parent node is a replaced inline, a block, an inline block, or an inline table.

31. The computer readable storage medium of claim 22, wherein enlarging and translating the web page comprises displaying at least a portion of the second box of the plurality of boxes of content on the touch screen display.

32. The computer readable storage medium of claim 22, wherein enlarging comprises expanding the first box so that the width of the first box is substantially the same as the width of the touch screen display.

33. The computer readable storage medium of claim 22, including instructions which cause the device to resize text in the enlarged first box to meet or exceed a predetermined minimum text size on the touch screen display.

34. The computer readable storage medium of claim 33, wherein the text resizing comprises:

determining a scale factor by which the first box will be enlarged;

dividing the predetermined minimum text size on the touch screen display by the scaling factor to determine a minimum text size for text in the first box; and

if a text size for text in the first box is less than the determined minimum text size, increasing the text size for text in the first box to at least the determined minimum text size.

35. The computer readable storage medium of claim 22, including instructions which cause the device to resize text in the web page to meet or exceed a predetermined minimum text size on the touch screen display.

36. The computer readable storage medium of claim 35, wherein the text resizing comprises:

determining a scale factor by which the first box will be enlarged;

dividing the predetermined minimum text size on the touch screen display by the scaling factor to determine a minimum text size for text in the web page; and

if a text size for text in the web page is less than the determined minimum text size, increasing the text size for text in the web page to at least the determined minimum text size.

37. The computer readable storage medium of claim 35, wherein the text resizing comprises:

identifying boxes containing text in the plurality of boxes;

determining a scale factor by which the first box will be enlarged;

dividing the predetermined minimum text size on the touch screen display by the scaling factor to determine a minimum text size for text in the web page; and

for each identified box containing text, if a text size for text in the identified box is less than the determined minimum text size, increasing the text size for text in the identified box to at least the determined minimum text size and adjusting the size of the identified box.

38. The computer readable storage medium of claim 22, including instructions which cause the device to:

detect a third gesture on the enlarged second box; and

in response to detecting the third gesture, reduce in size the displayed portion of the web page.

39. The computer readable storage medium of claim 22, including instructions which cause the device to:

detect a swipe gesture on the touch screen display; and

in response to detecting the swipe gesture, translate the displayed portion of the web page on the touch screen display.

40. The computer readable storage medium of claim 22, including instructions which cause the device to:

detect a fifth gesture on the touch screen display,

in response to detecting the fifth gesture, rotate the displayed portion of the web page on the touch screen display by 90°

.

41. The computer readable storage medium of claim 22, including instructions which cause the device to:

detect a change in orientation of the device,

in response to detecting the change in orientation of the device, rotate the displayed portion of the web page on the touch screen display by 90°

.

42. The computer readable storage medium of claim 22, including instructions which cause the device to:

detect a multi-finger de-pinch gesture on the touch screen display,

in response to detecting the multi-finger de-pinch gesture, enlarge a portion of the displayed portion of the web page on the touch screen display in accordance with a position of the multi-finger de-pinch gesture and an amount of finger movement in the multi-finger de-pinch gesture.

43. A non-transitory computer readable storage medium storing one or more programs, the one or more programs comprising instructions, which when executed by a portable electronic device with a touch screen display, cause the device to:

display a user interface on the touch screen display, wherein the user interface includes;

a displayed window of an application, the displayed window being in full view on the touch screen display, and

one or more partially hidden windows of the application;

while displaying the displayed window and the one or more partially hidden windows, detect a finger gesture on the touch screen display;

in response to detecting the finger gesture on the touch screen display;

move the displayed window partially or fully off the touch screen display, and

move a first partially hidden window into full view on the touch screen display; and

in response to detecting a finger gesture on an icon, enlarge a window of the application in the center of the touch screen display.

44. The computer readable storage medium of claim 43, wherein the detected finger gesture is a swipe gesture.

45. The computer readable storage medium of claim 43, including instructions which cause the device to:

in response to detecting the finger gesture, move a second partially hidden window off the touch screen display.

46. The computer readable storage medium of claim 43, wherein the detected finger gesture is a left-to-right swipe gesture, including instructions which cause the device to:

in response to detecting the left-to-right swipe gesture;

move the displayed window partially off-screen to the right,

move the first partially hidden window into full view on the touch screen display, and

move a second partially hidden window completely off-screen.

47. The computer readable storage medium of claim 43, wherein the user interface is displayed in response to activation of an icon for initiating display of the user interface, and wherein the icon for initiating display of the user interface indicates the number of windows in the application.

48. The computer readable storage medium of claim 43, wherein the displayed window and the one or more partially hidden windows are displayed prior to detecting the gesture.

49. A portable electronic device, comprising:

a touch screen display;

one or more processors;

memory; and

one or more programs, wherein the one or more programs are stored in the memory and configured to be executed by the one or more processors, the one or more programs including instructions for;

displaying at least a portion of a web page on the touch screen display, wherein the web page comprises a plurality of boxes of content;

detecting a first gesture at a location on the displayed portion of the web page;

determining a first box in the plurality of boxes at the location of the first gesture, the first box having a first size;

enlarging and translating the web page so that the first box is substantially centered on the touch screen display at a second size greater than the first size;

while the first box is enlarged, detecting a second gesture on the enlarged first box; and

in response to detecting the second gesture, reducing in size the displayed portion of the web page.

50. The device of claim 49, wherein reducing in size the displayed portion of the web page reduces the first box to the first size.

51. The device of claim 49, wherein the second gesture and the first gesture are the same type of gesture.

52. The device of claim 49, wherein the second gesture is a tap gesture.

53. The device of claim 52, wherein the second gesture is a double tap with a single finger, a double tap with two fingers, a single tap with a single finger, or a single tap with two fingers.

54. A method, comprising:

at a portable electronic device with a touch screen display;

displaying at least a portion of a web page on the touch screen display, wherein the web page comprises a plurality of boxes of content;

detecting a first gesture at a location on the displayed portion of the web page;

determining a first box in the plurality of boxes at the location of the first gesture, the first box having a first size;

enlarging and translating the web page so that the first box is substantially centered on the touch screen display at a second size greater than the first size;

while the first box is enlarged, detecting a second gesture on the enlarged first box; and

in response to detecting the second gesture, reducing in size the displayed portion of the web page.

55. The method of claim 54, wherein reducing in size the displayed portion of the web page reduces the first box to the first size.

56. The method of claim 54, wherein the second gesture and the first gesture are the same type of gesture.

57. The method of claim 54, wherein the second gesture is a tap gesture.

58. The method of claim 57, wherein the second gesture is a double tap with a single finger, a double tap with two fingers, a single tap with a single finger, or a single tap with two fingers.

59. A non-transitory computer readable storage medium storing one or more programs, the one or more programs comprising instructions, which when executed by a portable electronic device with a touch screen display, cause the device to:

display at least a portion of a web page on the touch screen display, wherein the web page comprises a plurality of boxes of content;

detect a first gesture at a location on the displayed portion of the web page;

determine a first box in the plurality of boxes at the location of the first gesture, the first box having a first size;

enlarge and translate the web page so that the first box is substantially centered on the touch screen display at a second size greater than the first size;

while the first box is enlarged, detect a second gesture on the enlarged first box; and

in response to detecting the second gesture, reduce in size the displayed portion of the web page.

60. The computer readable storage medium of claim 59, wherein reducing in size the displayed portion of the web page reduces the first box to the first size.

61. The computer readable storage medium of claim 59, wherein the second gesture and the first gesture are the same type of gesture.

62. The computer readable storage medium of claim 59, wherein the second gesture is a tap gesture.

63. The computer readable storage medium of claim 62, wherein the second gesture is a double tap with a single finger, a double tap with two fingers, a single tap with a single finger, or a single tap with two fingers.

64. A graphical user interface on a portable electronic device with a touch screen display, a memory, and one or more processors to execute one or more programs stored in the memory, the graphical user interface comprising:

at least a portion of a web page displayed on the touch screen display, wherein the web page comprises a plurality of boxes of content;

wherein;

a first box in the plurality of boxes is determined at a location on the displayed portion of the web page where a first gesture is detected, the first box having a first size;

the web page is enlarged and translated so that the first box is substantially centered on the touch screen display at a second size greater than the first size;

the displayed portion of the web page is reduced in size in response to detection, while the first box is enlarged, of a second gesture on the enlarged first box.

65. The graphical user interface of claim 64, wherein reducing in size the displayed portion of the web page reduces the first box to the first size.

66. The graphical user interface of claim 64, wherein the second gesture and the first gesture are the same type of gesture.

67. The graphical user interface of claim 64, wherein the second gesture is a tap gesture.

68. The graphical user interface of claim 67, wherein the second gesture is a double tap with a single finger, a double tap with two fingers, a single tap with a single finger, or a single tap with two fingers.

69. A method, comprising:

at a portable electronic device with a touch screen display;

displaying a user interface on the touch screen display, wherein the user interface includes;

a displayed window of an application, the displayed window being in full view on the touch screen display, and

one or more partially hidden windows of the application;

while displaying the displayed window and the one or more partially hidden windows, detecting a finger gesture on the touch screen display;

in response to detecting the finger gesture on the touch screen display;

moving the displayed window partially or fully off the touch screen display, and

moving a first partially hidden window into full view on the touch screen display; and

in response to detecting a finger gesture on an icon, enlarge a window of the application in the center of the touch screen display.

70. The method of claim 69, wherein the detected finger gesture is a swipe gesture.

71. The method of claim 69, including:

in response to detecting the finger gesture, moving a second partially hidden window off the touch screen display.

72. The method of claim 69, wherein the detected finger gesture is a left-to-right swipe gesture, including:

in response to detecting the left-to-right swipe gesture;

moving the displayed window partially off-screen to the right,

moving the first partially hidden window into full view on the touch screen display, and

moving a second partially hidden window completely off-screen.

73. The method of claim 69, wherein the user interface is displayed in response to activation of an icon for initiating display of the user interface, and wherein the icon for initiating display of the user interface indicates the number of windows in the application.

74. The method of claim 69, wherein the displayed window and the one or more partially hidden windows are displayed prior to detecting the gesture.