WO2013049162A1

WO2013049162A1 - Smooth zooming in web applications

Info

Publication number: WO2013049162A1
Application number: PCT/US2012/057280
Authority: WO
Inventors: Ryan James Fioravanti; Cedomir Segulja
Original assignee: Google Inc.
Priority date: 2011-09-26
Filing date: 2012-09-26
Publication date: 2013-04-04
Also published as: US8307279B1

Abstract

A system for smooth zooming in web applications includes a structured document defining a plurality of display elements including a scalable element defined to be located at least partially within a resizable container element when rendered. A rendering component is operable to receive the structured document as an input, execute a rendering function that calculates a display position for each of the plurality of display elements, and define rendered content based at least in part on the display position for each of the plurality of display elements. A display component is operable to output a viewable area of the rendered content, and a scaling is component operable to receive a scaling input, redefine the scalable element based at least in part on the scaling input, and selectively redefine the resizable container element based at least in part on the display position of the resizable container element with respect to the viewable area of the rendered content.

Description

SMOOTH ZOOMING IN WEB APPLICATIONS

TECHNICAL FIELD

[0001] The present invention relates in general to a graphical user interface and in particular to smooth zooming of display elements in web applications.

BACKGROUND

[0002] The Internet is a global system of interconnected computer networks. The

Internet carries various information resources and services, including the World Wide Web (WWW). The WWW is a client-server model that includes web servers that provide access to documents via Hypertext Transfer Protocol (HTTP). Documents on the web servers are identified using Uniform Resource Locators (URLs). The documents and other content provided by web servers can be accessed by clients by way of a web browser application.

[0003] The documents and other content can include web pages or web applications created using Hyper Text Markup Language (HTML) or other markup languages. Some web browsers are capable of rendering web pages or web applications in a certain way using one or more Cascading Style Sheets (CSS) referenced by the web pages or web applications.

[0004] Web browsers commonly implement a global zoom function. This function affects all of the elements on a web page simultaneously and proportionally, for example, by scaling all of the text and images on a web page by a scaling factor. One way of implementing this is to provide a menu button or command that allows the user to select a global scaling factor. Another way of implementing this, on touch screen devices, is by scaling the web page according to the relative motion of two touch points. Because the screen size of the many touch screen devices, such as mobile phones or tablet computers, is limited, global zoom functions are commonly used.

SUMMARY

[0005] Disclosed herein are embodiments of systems and methods for smooth zooming in web applications.

[0006] One aspect of the disclosed embodiments is a system for smooth zooming in web applications. The system includes a structured document defining a plurality of display elements, the plurality of display elements including a resizable container element and a scalable element defined to be located at least partially within the resizable container element when rendered; a rendering component operable to receive the structured document as an input, execute a rendering function that calculates a display position for each of the plurality of display elements, and define rendered content based at least in part on the display position for each of the plurality of display elements; a display component operable to output a viewable area of the rendered content; and a scaling component operable to receive a scaling input, redefine the scalable element based at least in part on the scaling input, and selectively redefine the resizable container element based at least in part on the display position of the resizable container element with respect to the viewable area of the rendered content.

[0007] Another aspect of the disclosed embodiments is a system for smooth zooming in web applications that includes a structured document defining a plurality of display elements, the plurality of display elements including a resizable container element having a container size attribute and a scalable element having a scaling attribute, wherein the scalable element is defined to be located at least partially within the resizable container element when rendered; a rendering component operable to receive the structured document as an input, execute a rendering function that calculates a display position for each of the plurality of display elements, and define rendered content based at least in part on the display position for each of the plurality of display elements; a display component operable to output a viewable area of the rendered content; and a scaling component operable to receive a scaling input requesting scaling of the scalable element, redefine the scaling attribute of the scalable element based at least in part on the scaling input, calculate an updated container size attribute for the resizable container element, and set the container size attribute to the updated container size attribute if the resizable container element is at least partially positioned within the viewable area of the rendered content at the updated container size.

[0008] Another aspect of the disclosed embodiments is a method for smooth zooming in web applications that includes receiving a structured document defining a plurality of display elements, the plurality of display elements including a resizable container element and a scalable element defined to be located at least partially within the resizable container element; executing a rendering function that calculates a display position for each of the plurality of display elements; producing rendered content, the rendered content based at least in part on the display position for each of the plurality of display elements; receiving a scaling input; redefining the size of the scalable element according to the scaling input; and selectively redefining the size of the resizable container element based on the display position of the resizable container element with respect to the viewable area of the rendered content.

[0009] Variations in these and other embodiments of the invention are described hereinafter. BRIEF DESCRIPTION OF THE DRAWINGS

[0010] The description herein makes reference to the accompanying drawings wherein like reference numerals refer to like parts throughout the several views, and wherein:

[0011] FIG. 1 is block diagram showing an exemplary environment for operation of a system for smooth zooming in web applications;

[0012] FIG. 2 is an illustration showing rendered content within a web browser that is displayed on the display screen of a client device;

[0013] FIGS. 3A-3C are illustrations showing resizing and scaling of a resizable container element and a scalable element;

[0014] FIG. 4 is a flow chart showing an exemplary process for smooth zooming in web applications; and

[0015] FIG. 5 is a block diagram showing an exemplary computer system in which embodiments described herein may be implemented.

DETAILED DESCRIPTION

[0016] Some web browsers, such as mobile web browsers executing on mobile devices

(e.g., a smartphone), provide a global zoom function, but do not provide a zoom function that operates on a single on-screen element (such as a picture). Resizing one or more elements of a web page (e.g., using JavaScript functions) can cause the browser to execute a rendering function, where the web browser recalculates the positions and geometries of the elements displayed within the web page to account for the updated size and/or position of the one or more resized elements. This is sometimes referred to as a "browser reflow." On some computing devices, excessive browser reflows can lead to unacceptable performance (e.g., a slower/less-smooth zooming process). The systems and methods described herein avoid unnecessary browser reflows by selectively resizing the container element(s) in which the element being scaled is located.

[0017] FIG. 1 is a diagram showing smooth zooming in web applications implemented in an exemplary environment. As shown in FIG. 1, a client 10 and a web server 12 are in

communication via a network 18. Each of client 10 and web server 12 may be a single system or multiple systems. These systems can be one or more computing devices executing software operable or programmed to perform the functionality described herein with respect to client 10 and web server 12. Network 18 can allow communication between client 10 and web server 12 in any suitable manner.

[0018] As shown in FIG. 1, client 10 can include a client application, which in one example is a web browser 20. Web browser 20 can be operable to request objects, including documents, images, data files, or any other kind of data computer-readable form, from web server 12. For example, client 10 can send a request to web server 12 in the form of a URL, and web server 12 can transmit to client 10 a web page (i.e., HTML and/or additional code defining a web page) associated with that URL, along with any content associated with the web page, in response to the request. Web browser 20 may include a rendering component 22 and a display component 24, which will be explained herein. In other examples, the client application need not be a web browser, but can be any application including a rendering component 22 and a display component 24.

[0019] In some embodiments, client 10 can be operable to receive, assemble, interpret and/or execute, and render a structured document 30. Structured document 30 can be transmitted to client 10 by web server 12 via network 18. Structured document 30 can describe, for example, a plurality of display elements that, when rendered by web browser 20, form the visible portions of a web page (as well as non-visible portions of a web page that define layout or formatting). Structured document 30 can be a Hypertext Markup Language (HTML) document that complies with the Document Object Model (DOM) specification. Structured document 30 can be assembled from multiple documents, such as by using HTML iframes. Other languages and technologies can be utilized by or form part of structured document 30, such as Extensible Markup Language (XML), Extensible Hypertext Markup Language (XHTML), Cascading Style Sheets (CSS), Java, JavaScript, and the like.

[0020] Structured document 30 can include a scaling component 32 in the form of executable code elements that are adapted to be interpreted and executed by web browser 20. Scaling component 32 can be provided in the form of JavaScript functions and CSS. Scaling component 32 can be operable to modify the appearance of portions of a web page defined by structured document 30, based on a scaling input that requests scaling of a portion of structured document 30.

[0021] As shown in FIG. 2, client 10 can be in the form of a computing device, such as a mobile phone, a tablet computer, a laptop computer, a notebook computer, and the like. Client 10 can include a display screen 11. Display screen 11 can be a touch-sensitive display screen that is operable to display images in response to a video signal and is also operable to output a touch signal that indicates a position that is touched by a user. Examples of technologies that can be employed to output the touch signal include resistive touch sensing, surface acoustic wave touch sensing, and capacitive touch sensing. Other input devices can be used in lieu of a touch sensitive display screen, such as a keyboard or a mouse.

[0022] In some embodiments, a user interface 26 of web browser 20 and a content display area 28 of web browser 20 can be displayed on display screen 11. User interface 26 can be omitted, or at times may not be visible on display screen 11. Content display area 28 can occupy some or all of display screen 11.

[0023] Structured document 30 can be accepted by rendering component 22 of web browser 20 as an input, and rendering component 22 produces rendered content 40 as an output. Rendered content 40 is the content that is displayed by web browser 20 or other application when structured document 30 is rendered. At least a portion of rendered content 40 can be displayed on display screen 11.

[0024] Rendering component 22 defines rendered content 40 by executing a rendering function. As previously noted, structured document 30 describes a plurality of display elements. The rendering function calculates a display position for each of the plurality of display elements. Based on the display positions that are calculated by the rendering function, rendering component 22 produces rendered content 40. In rendered content 40, each of the plurality of display elements is located at its respective display position. One example of a rendering function is the function by which conventional web browsers perform a "browser reflow."

[0025] Web browser 20 can support functions that allow the user to change the view of rendered content 40 with respect to content display area 28 on a global basis. These functions can include pan and zoom functions that move or zoom the entirety of rendered content 40. As a result, less than the entire rendered content 40 may be viewable at once. In some embodiments, display component 24 accepts rendered content 40, the global pan and view states of web browser 20, and the size of content display area 28 as input. Based on these inputs, display component 24 calculates a viewable area of the rendered area of rendered content 40, and outputs the viewable area of the rendered content to content display area 28, coextensive content display area 28.

[0026] The example of rendered content 40 that is shown in FIG. 2 is a web-based email program that displays multiple messages of a single conversation at one, each enclosed within its own container element 42. The body of each message can include one or more content elements 44. Container elements 42 and content elements 44 can each be a single element or a collection of elements. As an example, HTML <div> elements can be used as container elements 42. As an example, content elements 44 can be one or more text characters, raster images, vector images, video, or other elements.

[0027] Rendered content 40 can also include one or more resizable container elements

46 that each contains one or more scalable elements 48. Resizable container elements 46 can be equivalent to container elements 42, but can be resized by scaling component 32. As an example, this can be implemented by causing scaling component 32 to modify a container size attribute, such as the height and/or width attributes of all of part of resizable container elements 46, either using HTML attributes or CSS properties and functions. Scalable elements 48 are equivalent to content elements 44, but can be resized by scaling component 32. This can be implemented by causing scaling component 32 to modify a scaling attribute, such as the height and/or width of scalable elements 48, using the scale3d function of CSS in one implementation.

[0028] Scaling component 32 can be operable to receive the scaling input requesting scaling of scalable element 48. Scaling component 32 can redefine scalable element 48 based on the scaling input. As one example, scaling component 32 can modify the scaling attribute of scalable element 48 according to the scaling input in a manner that does not change the positions of other elements of the rendered content. In some embodiments, scaling component 32 redefines the resizable container element by calculating an updated container size attribute for resizable container element 46, and setting the current container size attribute to the updated container size attribute if resizable container element 46 will be at least partially positioned within the viewable area of rendered content 40 at the updated container size when rendered. As an example, this determination can be implemented using JavaScript functions that are incorporated in the structured document as part of scaling component 32, and which are able to access information from web browser 20, such as the size of rendered content 40, the size and position of the viewable area of rendered content 40, and the positions of the display elements that are represented in rendered content 40.

[0029] Container elements 42, content elements 44, resizable container elements 46, and scalable elements 48 are all examples of the display elements that can be defined by structured document 30. Definitions of any number of container elements 42, content elements 44, resizable container elements 46, and scalable elements 48 can be provided in structured document 30. Container elements 42 and content elements 44 can optionally be resizable and scalable in the same manner as described with respect to resizable container elements 46 and scalable elements 48, but are not described as such herein for the sake of clarity.

[0030] While the description above and FIG. 2 use a web-based email system as an example, container elements 42, content elements 44, resizable container elements 46, and scalable elements 48 can be implemented in other contexts. As an example, in an image gallery application (such as a web-based image gallery application), container elements 42 and resizable container element 46 could be cells in a table (visible or invisible) and content elements 44 and scalable element 48 could be images.

[0031] Operation of an example of scaling component 32 will now be explained with reference to FIGS. 3A-3C. [0032] In FIG. 3A, two container elements 42 are positioned at least partially within the viewable area of rendered content 40, as represented by content display area 28. Resizable container element 46 and scalable element 48 are positioned entirely within the viewable area of rendered content 40. Part of rendered content 40 is not viewable because rendered content 40 is located partially outside of content display area 28.

[0033] In FIG. 3B, as a result of a scaling input from a user, the size of scalable element

48 and the size of resizable container element 46 have changed with respect to rendered content 40, container elements 42, and the viewable area of rendered content 40. The size of scalable element 48 has changed as a function of the scaling input. The size of resizable container element 46 has changed in correspondence to the size of scalable element 48 such that sufficient space is provided within resizable container element 46 for scalable element 48. Thus, scalable element 48 remains located entirely within resizable container element 46.

[0034] This change in size has not been applied to rendered content 40 as a whole. The size of container elements 42 has not changed with respect to the viewable area of rendered content 40. The position of at least one of container elements 42, however, has changed. The change in size of resizable container element 46 has triggered the rendering function of rendering component 22, the positions of the display elements described by structured document 30 have changed, and, as a result, the positions of at least some of the elements of rendered content 40 have changed.

[0035] In FIG. 3C, as a result of a scaling input from a user, the size of scalable element

48 and the size of resizable container element 46 have changed such that no portions of resizable container element 46 are viewable, as resizable container element 46 is now positioned entirely outside of (and in this example surrounding) the boundary of content display area 28. As one example, this can be the case when scalable element 48 occupies the entirety of content display area 28.

[0036] Scaling component 32 does not redefine the size of resizable container element

46 when resizable container element 46 is not viewable. Rather, in response to a scaling input when resizable container element 46 is not viewable, scaling component 32 determines whether resizable container element 46 would be positioned at least partially within the viewable area of rendered content 40 if its size were changed. Scaling component 32 selectively redefines the size of resizable container element 46 based on the display position of resizable container element 46 with respect to the viewable area of rendered content 40.

[0037] As an example, scaling component 32 can selectively resize resizable container element 46 by determining whether resizable container element 46 will be located within the viewable area of rendered content 40 if resizable container element 46 is resized to completely contain scalable element 48. Scaling component 32 resizes resizable container element 46 if it will be located at least partially within the viewable area of rendered content 40, and scaling component 32 maintains the size of resizable container element 46 if it will not be located within the viewable area of rendered content 40. This determination can be made by calculating an updated position and size for resizable container element 46 and comparing the results of this calculation to the boundary of content display area 28.

[0038] If resizable container element 46 would not be positioned at least partially within the viewable area of rendered content 40 if its size were changed, the size of resizable container element 46 is not changed. Because the size of resizable container element 46 is not changed, the positions of other elements of rendered content 40 are not changed, and the rendering function is not triggered. Stated another way, the rendering function is triggered if resizable container element 46 is resized, and the rendering function is not triggered if resizable container element 46 is not resized.

[0039] As long as resizable container element 46 remains non-viewable, scalable element 48 is resized without regard to the size of resizable container element 46, and is allowed to exceed the boundaries of resizable container element 46. Scalable element 48 remains, however, located at least partially within resizable container element 46.

[0040] One example of a process for smooth zooming in applications, as shown in FIG.

4, can be implemented by client 20 using structured document 30.

[0041] In step 101, structured document 30 is received by client 10. In one example, structured document 30 is received by client 10 from web server 12 over network 18.

[0042] In step 102, rendering component 40 accepts structured document 30 as an input, and executes the rendering function, which calculates a display position for each of the plurality of display elements that are described by structured document 30. Using the results of the rendering function, in step 103, rendering component 22 produces rendered content 40 as an output.

[0043] In step 104, at least a portion of rendered content 40, i.e., a viewable area of rendered content 40, is displayed on display screen 11 in content display area 28.

[0044] In step 105, the scaling input is received from the user. The scaling input relates to scalable element 48, which forms part of rendered content 40. As one example, in

embodiments where display screen 11 is a touch sensitive display screen, the relative motion of two touch points that are sensed by display screen 11 can be used as the scaling input. As another example, a command issued by the user from a user interface device, such as a keyboard or mouse, can be used as the scaling input. This can be in the form of a key press or clicking on a menu option, such a menu option that appears in a context sensitive menu that is associated with scalable element 48.

[0045] In step 106, scalable element 48 is resized by scaling component 32 using the scaling input. Returning to the example of two touch points as a scaling input, a percentage change in the distance between the two touch points can be applied to scalable element 48 as a scaling factor, such that scalable element 48 resizes in proportion to the relative motion of the touch points. Scaling scalable element 48 does not itself trigger execution of the rendering function of rendering component 22.

[0046] In step 107, scaling component 32 calculates an updated size attribute for resizable container element 46. In step 107, the scaling component determines whether resizable container element 46, if resized according to the updated size attribute, would be viewable, i.e., disposed within the viewable portion of rendered content 40 as defined by content display area 28. If scaling component 32 determines that resizable container element 46, if resized, would not be viewable, resizable container element 46 is not resized and execution of the rendering function is not performed. Instead the process returns to step 103, where the rendered content is output by rendering component 22. If scaling component 32 determines that resizable container element 46, if resized, would be viewable, the process proceeds to step 109, where resizable container element 46 is resized by redefining the size of resizable container element 46 in structured document 30. This necessitates execution of the rendering function, and the process returns to step 102, where the rendering function is executed, causing the size of resizable container element to be changed in rendered content 40. The process continues until the user stops manipulating structured document 30.

[0047] As used herein, the term "computer" means any device of any kind that is capable of processing a signal or other information. Examples of computers include, without limitation, an application-specific integrated circuit (ASIC) a programmable logic array (PLA), a microcontroller, a digital logic controller, a digital signal processor (DSP), a desktop computer, a laptop computer, a tablet computer, and a mobile device such as a mobile telephone. A computer does not necessarily include memory or a processor. A computer may include software in the form of programmable code, micro code, and or firmware or other hardware embedded logic. A computer may include multiple processors which operate in parallel. The processing performed by a computer may be distributed among multiple separate devices, and the term computer encompasses all such devices when configured to perform in accordance with the disclosed embodiments. [0048] An example of a device that can be used as a basis for implementing the systems and functionality described herein is a conventional computer 1000, as shown in FIG. 3.

Conventional computer 1000 can be any suitable conventional computer. As an example, conventional computer 1000 can include a processor such as a central processing unit (CPU) 1010 and memory such as RAM 1020 and ROM 1030. A storage device 1040 can be provided in the form of any suitable computer readable medium, such as a hard disk drive. One or more input devices 1050, such as a keyboard and mouse, a touch screen interface, etc., allow user input to be provided to CPU 1010. A display 1060, such as a liquid crystal display (LCD) or a cathode-ray tube (CRT), allows output to be presented to the user. A communications interface 1070 is any manner of wired or wireless means of communication that is operable to send and receive data or other signals using network 18. CPU 1010, RAM 1020, ROM 1030, storage device 1040, input devices 1050, display 1060 and communications interface 1070 are all connected to one another by a bus 1080.

[0049] Client 10 and web server 12 can be implemented in the form of a single system or in the form of separate systems. Moreover, each of client 10 and web server 12 can be implemented in the form of multiple computers, processors, or other systems working in concert. As an example, the functions of web server 12 can be distributed among a plurality of conventional computers, such as computer 1000, each of which is capable of performing some or all of the functions of web server 12.

[0050] In some embodiments, components of the systems described herein can communicate with one another by networks such as network 18. The communications functions described herein can be accomplished using any kind of wired and/or wireless computing network or communications means capable of transmitting data or signals, such as a wireless and/or wired computing network allowing communication via, for example, an 802.11 ("Wi-Fi") protocol, cellular data protocol (e.g., EDGE, CDMA, TDMA, GSM, LTE), and the like. Suitable examples include the internet, which is a packet-switched network, a local area network (LAN), wide area network (WAN), virtual private network (VPN), or any other means of transferring data. A single network or multiple networks that are connected to one another can be used. It is specifically contemplated that multiple networks of varying types can be connected together and utilized to facilitate the communications contemplated by the systems and elements described in this disclosure.

[0051] While this disclosure includes certain embodiments, it is to be understood that the disclosure is not to be limited to the disclosed embodiments but, on the contrary, is intended to cover various modifications and equivalent arrangements included within the scope of the appended claims, which scope is to be accorded the broadest interpretation so as to encompass all such modifications and equivalent structures as is permitted under the law.

Claims

What is claimed is:

1. A system for smooth zooming in web applications, comprising:

a structured document defining a plurality of display elements, the plurality of display elements including a resizable container element and a scalable element defined to be located at least partially within the resizable container element when rendered;

a rendering component operable to receive the structured document as an input, execute a rendering function that calculates a display position for each of the plurality of display elements, and define rendered content based at least in part on the display position for each of the plurality of display elements;

a display component operable to output a viewable area of the rendered content; and a scaling component operable to receive a scaling input, redefine the scalable element based at least in part on the scaling input, and selectively redefine the resizable container element based at least in part on the display position of the resizable container element, with respect to the viewable area of the rendered content.

2. The system of claim 1, wherein the scaling component selectively redefines the resizable container element by determining whether the resizable container element will be located within the viewable area if the size of the resizable container element is changed so that the resizable container element completely contains the scalable element, redefining the size of the resizable container element if it will be located within the viewable area, and maintaining the size of the resizable container element if it will not be located within the viewable area.

3. The system of claim 2, wherein the rendering function is triggered if the size of the resizable container element is redefined, and the rendering function is not triggered if the size of the resizable container element is not redefined.

4. The system of claim 1 or claim 2, wherein the size of the scalable element with respect to the rendered content changes when the scaling component redefines the scalable element according to the scaling input.

5. The system of claim 1 or claim 2, wherein the size of the resizable container element with respect to the rendered content changes when the scaling component redefines the resizable container element.

6. A system for smooth zooming in web applications, comprising:

a structured document defining a plurality of display elements, the plurality of display elements including a resizable container element having a container size attribute and a scalable element having a scaling attribute, wherein the scalable element is defined to be located at least partially within the resizable container element when rendered;

a display component operable to output a viewable area of the rendered content; and a scaling component operable to receive a scaling input requesting scaling of the scalable element, redefine the scaling attribute of the scalable element based at least in part on the scaling input, calculate an updated container size attribute for the resizable container element, and set the container size attribute to the updated container size attribute if the resizable container element is at least partially positioned within the viewable area of the rendered content at the updated container size.

7. The system of claim 6, wherein redefining the scaling attribute of the scalable element according to the scaling input is operable to change the size of the scalable element with respect to the rendered content.

8. The system of claim 7, wherein modifying the scaling attribute of the scalable element according to the scaling input does not trigger the rendering function of the rendering component.

9. The system of claim 6 or claim 7, wherein setting the container size attribute to the updated container size attribute changes the size of the container with respect to the structured document.

10. The system of claim 9, wherein setting the container size attribute to the updated container size attribute triggers the rendering function of the rendering component.

11. The system of claim 6 or claim 7, wherein the structured document is an HTML document.

12. The system of claim 6 or claim 7, wherein the scaling component is executed based on scaling function code that is included as part of the structured document.

13. The system of claim 6 or claim 7, wherein the scalable element is a raster image, a vector image, or one or more text characters.

14. A method, comprising

receiving a structured document defining a plurality of display elements, the plurality of display elements including a resizable container element and a scalable element defined to be located at least partially within the resizable container element;

executing a rendering function that calculates a display position for each of the plurality of display elements;

producing rendered content, the rendered content based at least in part on the display position for each of the plurality of display elements;

outputting a viewable area of the rendered content;

receiving a scaling input;

redefining the size of the scalable element according to the scaling input; and selectively redefining the size of the resizable container element based on the display position of the resizable container element with respect to the viewable area of the rendered content.

15. The method of claim 14, wherein the step of selectively resizing the resizable container element includes determining whether the resizable container element will be located within the viewable area if resized to completely contain the scalable element, resizing the resizable container element if it will be located within the viewable area, and maintaining the size of the resizable container element if it will not be located within the viewable area.

16. The method of claim 15, wherein the rendering function is triggered if the size of the resizable container element is redefined, and the rendering function is not triggered if the size of the resizable container element is not redefined.

17. The method of claim 14 or claim 15, wherein the size of the scalable element with respect to the rendered content changes when the scaling component redefines the size of the scalable element according to the scaling input.

18. The method of claim 14 or claim 15, wherein the size of the resizable container element with respect to the rendered content changes when the scaling component redefines the size of the resizable container element.