Dynamically Zoom-able Elements
DONG Wenyu, China Mobile
WANG Xiaozhen, RAN Songnan, UC Web
ZHANG Hongfei, BAIDU
This document proposes a means to enable web page developers to designate specific element(s) which can be zoomed on screen according to users’ orders. That is, when a user performs specific actions on the element(s) like continuous pressing or double clicking, the browser can display the element(s) on a large scale on the top level, while the overall page is still displayed with original size. This means balances details in focused area as well as overall layout of the whole page, applicable for scenarios like geo-navigation, jewelry presentation, etc…
There are some cases where users need to amplify the appearance of a focus areas while being able to see the overall layout of the whole page.
As shown in the following figures, the dynamic zooming-in capability can be used to
- display details of a static picture, or
- display the inputted text in real-time
Fig 1-1 zoom-in while displaying a picture
Fig 1-2 zoom-in while inputting
1.2 Existing approaches
There have been solutions to zoom-in/out the web pages.
Browsers amplify the whole page and all elements will be zoomed-in on the same scale.
This capability is supported by most browsers like Chrome, IE.
But the limitation is obvious. The zoomed-in page might be larger than the screen, so users have to scroll left-to-right and/or up-to-down to see the complete page.
Developers use CSS to select specific elements, and endow them the ability to dynamically zoom-in/out. The following statement will enable the element #zoomdemo to display 300% larger.
When users require to zoom-in a specific area to a larger scale, only elements that fit in the destination scope is displayed, while the rest of page will be discarded since it will be out of the page on the desired scale.
For nowadays geo-navigation application, when users zoom-in a portion of the map, the selected portion will fill the whole screen, and the rest part will be invisible at all.
1.3 Suggested solution
The suggested solution is that we shall:
- let element-level dynamic zooming-in become a standard, native capability of browsers, and
- introduce new attributes into HTML.
This is because:
- The requirements are becoming popular, esp. on small-screen devices;
- Simplify the development;
- Every element can be amplified as users’ selection, contrast to existing CSS-based approach by which only those elements that are designated and programmed by developers can have the capability to zoom-in. Sometimes it is hard to anticipate which area(s) should have the zooming-in capability in developing period.
New attributes need to be introduced into specific elements.
- New attribute: localzoom. localzoom = enabled / disabled. ‘Disabled’ is by default.
- Element scope. It is suggested that container elements, like < BODY>、< DIV>、< IFRAME>, should have this attribute
- Inheritance. Unless explicitly specified, inner elements inherit the value of ‘localzoom’ from outer elements.
- Zooming-in scope. It is the user who decide the scope of zooming-in. browsers shall provide mechanisms by which to ease the users’ operation (inputting/selecting etc) procedure. For example, when a user presses an area continually for a period of time, the browser can display a dashed-lined rectangle/circle which is enlarging steadily to indicate the desired zooming-in scope. When the user is satisfied with the scope, he/she can release the pressing finger.
- Zooming-in style. It is up to browsers’ decision, including scale, location, timing, auto wrapping, etc…
- Triggering condition. It is up to browsers’ decision. For example, long time pressing continually, or double/triple clicking.
-3-. Use cases
3.1 Zooming–in for a single element
The following statement can zoom-in the < input> area on the top level, while the whole page still displayed.
< form action=……> …… < DIV localzoom=“enabled”> < input name=“AccountID” type=“text” > < /DIV> …… < /form>
3.2 Zooming–in for a set of elements
The following statement can enable all elements within with the dynamic zooming-in capability.
Note: this does not mean that all elements in the will necessarily display at an amplified scale at the same time. On the contrary, only elements selected by the user will do so. The dynamical zooming-in scope is decided by the user when he/she is performing specific actions like pressing continually and acknowledge the browser’s hint (like dashed-lined rectangles).
< form action=…… localzoom=“enabled”> …… < input name=“AccountID” type=“text” > …… < /form>