Web page zoom feature

Methods and apparatus, including computer program products, related to a cross-browser compliant web page zoom feature. A method includes receiving a web page with machine-readable instructions and a zoom factor for the web page; processing a document object model representation of the web page in accordance with the machine-readable instructions; and displaying the web page in a web browser according to the document object model representation. In that method, the processing includes modifying parameters pertaining to content in accordance with the zoom factor, if one or more scalable content parameters exist in the document object model representation, and modifying parameters pertaining to layout in accordance with the zoom factor, if one or more scalable layout parameters exist in the document object model representation.

BACKGROUND

The present disclosure relates to data processing by digital computer, and more particularly to a web page zoom feature.

A web page is typically used to deliver content to users of the World Wide Web (the “web”). From a user's perspective, a program referred to as a web browser is typically used to access a web page. Examples of web browsers include Microsoft Corporation's Internet Explorer and Netscape Communications Corporation's Netscape Browser.

As part of the functions performed by a web browser, a web browser interprets code in a web page to determine how the web page should be displayed to a user. For example, a web page can include code that indicates the word “Hello” should be displayed, and formatting for the word should be bold. Following that example, a web browser can interpret the code, and display the world “Hello” as bold text.

Because a web page can include code that indicates how content in the web page should be displayed and a web browser can determine how to display the content in the web page, a combination of a web page and a web browser tends to govern how content is displayed to a user. Consequently, if a web page includes code that indicates content of a web page (e.g., text) should be, for example, displayed at a small size, and a user is sight impaired, a web browser can display content that the user is incapable of reading.

SUMMARY OF THE INVENTION

The present disclosure provides methods and apparatus, including computer program products, that implement techniques for a web page zoom feature.

In one general aspect of the invention, a method of displaying a document includes receiving input that includes a web page with machine-readable instructions, and a zoom factor for the web page; processing a document object model representation of the web page in accordance with the machine-readable instructions; and displaying the web page in a web browser according to the document object model representation. In that method, the processing includes modifying parameters pertaining to content in accordance with the zoom factor, if one or more scalable content parameters exist in the document object model representation, and modifying parameters pertaining to layout in accordance with the zoom factor, if one or more scalable layout parameters exist in the document object model representation.

Embodiments of the invention can include one or more of the following features. The document object model representation can be accessible through a document object model that complies with a World Wide Web Consortium (W3C) Document Object Model standard. The machine-readable instructions can be cross-browser compliant such that the machine-readable instructions are supported by multiple web browsers. The cross-browser compliant instructions can include JavaScript code.

Processing the document object model representation can include traversing the document object model representation. The web page can include code for presenting a user interface through which a user can select a zoom level corresponding to the zoom factor.

In another aspect of the invention, a computer program, tangibly stored on a computer readable medium, includes instructions that are operable to cause a data processing apparatus to process a document object model (DOM) representation of the web page. The instructions operable to process the DOM representation include instructions operable to modify parameters pertaining to content in accordance with a zoom factor, if one or more scalable content parameters exist in the DOM representation, such that a modified DOM representation is displayed to a user, and modify parameters pertaining to layout in accordance with the zoom factor, if one or more scalable layout parameters exist in the DOM representation, such that a modified DOM representation is displayed to a user.

Embodiments of the invention can include one or more of the following features. The computer program can include instructions that are cross-browser compliant such that the machine-readable instructions are supported by multiple web browsers. The instructions to modify the parameters pertaining to content can modify parameters pertaining to fonts and images, and the instructions to modify the parameters pertaining to layout can modify parameters pertaining to margins, borders, padding, and position of objects. The instructions to modify the parameters pertaining to content and layout can include instructions to scale proportionally the parameters pertaining to content and layout.

The computer program can further include instructions to cause the data processing apparatus to embed in the web page the instructions to process a DOM. The computer program can further include instructions to cause the data processing apparatus to receive a selected zoom factor for a web page.

In another aspect of the invention, a computer program for providing a web page zoom feature includes cross-browser compliant code for instructing a web browser to include, in a web page, a user interface for selecting a zoom level corresponding to a zoom factor and, proportionately scale padding, borders, margins, position of objects, images, and text of the web page in accordance with a selected zoom factor.

Embodiments of the invention can include one or more of the following features. The computer program can further include a second computer program for embedding the cross-browser compliant code into the web page.

In another aspect of the invention, a first web page includes content; first instructions specifying a layout for the content; second instructions operable to process a document object model (DOM) representation of the first web page, where the second instructions can include processing instructions to modify parameters pertaining to content and layout in accordance with a zoom factor; and third instructions operable to display within the first web page a mechanism a user can invoke to execute the second instructions. In that web page, parameters pertaining to content are modified, if one or more scalable content parameters exist in the DOM representation, such that a modified DOM representation is displayed to a user. Also, parameters pertaining to layout are modified in accordance with the zoom factor, if one or more scalable layout parameters exist in the DOM representation, such that a modified DOM representation is displayed to a user.

Embodiments of the invention can include one or more of the following features. The second instructions can be cross-browser compliant such that the second instructions are supported by multiple web browsers.

In another aspect of the invention, a tool is operable to generate a web page, insert code operable to scale parameters pertaining to content and layout of the web page, and insert a mechanism that can be invoked by a user to execute the code operable to scale parameters pertaining to content and layout of the web page.

Embodiments of the invention can include one or more of the following features. The code operable to scale parameters pertaining to content and layout of the web page can be cross-browser compliant such that the code is supported by multiple web browsers.

Embodiments of the invention can be implemented to realize one or more of the following advantages. A web page can include a zoom feature to resize content, layout, or both, of a web page. Resizing a web page does not necessarily involve resizing a window (e.g., a web browser window) in which the web page is drawn. Likewise, resizing a web browser does not necessarily involve resizing a web page displayed within the web browser. For example, in some implementations a web page can be resized and the web browser in which the web page is drawn can stay the same size. As another example, in some implementations, resizing a web browser can resize a web page displayed within the web browser such that the web page is proportionately resized in relation to the resizing of the web browser.

In some implementations, a web page can be resized by controls included in the web page. Resizing a web page can include enlarging (e.g., scaling up) or reducing (e.g., scaling down) the size of the web page. This can be advantageous for a user who is sight-impaired, and who can enlarge the web page to better view content in the web page. Because a web browser can interpret a scaled page, the web browser can add horizontal and vertical scrollbars as need, allowing a user to view content in the web page that is enlarged beyond the original viewable portion of a web page.

Because a zoom feature can be embedded in a web page rather than a browser, a specific browser or modified browser need not be employed to use the zoom feature. For example, a user can use a zoom feature of a web page at a private computer at their home or at a public computer at a library, and the user need not modify a browser or download a special browser to use the zoom feature. Also, a user can use a zoom feature of a web page to enlarge or reduce a web page at a computer with restricted user-access rights as, for example, the ability to modify a web browser at a public library might be restricted to public users.

A zoom feature can be implemented in a web page using machine-readable code that is embedded by someone other than an end-user of a web browser (e.g., a web page software engineer that designed the web page). Thus, a user need not be highly computer literate to use the zoom feature (e.g., the user need not write their own code or modify code to zoom a web page).

A zoom feature can be cross-browser compliant such that the zoom feature can be used in multiple web browsers without requiring modifications for browser-specific implementations. For example, a cross-browser compliant zoom feature can be used in Internet Explorer and Netscape Browser web browsers without requiring modifications for each type of browser.

A zoom feature can advantageously modify multiple parameters pertaining to a web page such that web content is displayed as proportionally resized (e.g., scaled), with little or no distortion. For example, a combination of text size, image size, padding size, border size, and margin size can be proportionately modified such that web content is displayed as proportionately resized, rather than simply modifying, for example, text, which may result in displaying distorted web content to a user. Displaying web content as proportionately resized can also be advantageous for users because resizing is not limited to, for example, resized text, as images can also be resized.

The implementation can be easily modified to support new definitions of the World Wide Web Consortium (W3C) DOM standard as the standard evolves. Since some implementations can adhere to the W3C DOM standard, or other standards, and be browser independent, those implementations might work in new browsers that will be developed in the future.

One implementation of the invention provides all of the above advantages.

Details of one or more implementations of the disclosure are set forth in the accompanying drawings and in the description below. Further features, aspects, and advantages will become apparent from the description, the drawings, and the claims.

DETAILED DESCRIPTION

Overview

A web page can include a zoom feature that resizes a web page, including content and layout of a web page. A web page generally includes machine-readable code that describes content and layout of the content. Web pages can be drafted in different types of machine-readable code, including, but not limited to, HyperText Markup Language (HTML). Web pages can include programs. For example, a web page can include programs written in JavaScript. Examples of content in a web page include text and images. Examples of layout in a web page include padding (e.g., padding between content), margins (e.g., margins used around borders), borders (e.g., a border defining a rectangular shape around a rectangular image), and position of objects (e.g., relative position of content, such as a table cell, within a web page). Resizing a web page can include enlarging a web page, reducing the size of a web page, or both, such that a web page is “zoomed in,” “zoomed out,” or both.

Throughout this description, resizing (e.g., scaling) a web page is not necessarily limited to resizing all of a web page or resizing all parameters pertaining to a web page. For example, one of several “frames” of a web page can be resized and the remainder of the frames can stay in their original size. As another example, only images and text can be resized and layout of a web page need not be resized.

Displays of a Web Page

FIGS. 1A and 1Bshow displays of a web page in a web browser105in accordance with one embodiment of the invention. The exemplary web page shown inFIGS. 1A and 1Binclude three icons110,115,120that provide a user interface for resizing the content and layout of the web page according to three fixed sizes, denoted as “s” (for small), “m” (for medium), and “L” (for large). The three icons110,115,120that provide a user interface are part of a web page, rather than being part of the web browser. If a user were to use a mouse-driven interface to click one of the three icons110,115,120, the content and layout of the representation of the web page that is displayed to the user would be resized.

To resize the content and layout of a web page representation displayed to a user, the web page (e.g., a web page written in HTML code) includes JavaScript code that includes instructions that can cause a resizing by the browser105. In operation, the content and layout of the representation is modified as follows. A user can click one of the three icons110,115,120to select a zoom factor (e.g., a predetermined zoom factor associated with each icon) that is received as input to JavaScript code. That JavaScript code includes instructions that can traverse what is referred to as a document object model (DOM) representation of the web page and modify the representation of the web page. A DOM can be a browser- and platform-independent application programming interface for interacting with a representation of the web page generated by a computer. An example DOM can support a World Wide Web Consortium (W3C) DOM standard, which is browser independent (e.g., JavaScript code can interact with a DOM and cause similar affects to a web page regardless of a type of web browser (e.g., a Mozilla-based or Internet Explorer web browser) that interprets JavaScript code). The DOM is an interface for a DOM representation that is generated by a web browser. As part of traversing the DOM, the code modifies parameters pertaining to content and layout of a DOM representation according to the selected zoom factor. The modified DOM representation can be displayed in the browser105. Because, in the example, the DOM representation is modified, the web page need not be modified (e.g., HTML code need not be modified); however, other implementations can modify the web page (instead of, or in addition to, an object model representation of the web page) when a web page is to be resized.

The content and layout of the web page displayed inFIG. 1Ais enlarged inFIG. 1Bas an example of how a modified representation of a web page can appear to a user. The content that is enlarged includes an image125and text130. In some implementations, content other than images and text can be enlarged. For example, a Macromedia, Incorporated Flash object or a streaming video plug-in could be enlarged. The properties of the web page pertaining to layout that are enlarged include borders, padding, margins. For example, around a table element135, a border140, padding145, and margin150are enlarged. In addition, the position of content can be scaled. The content and layout properties of the web page are enlarged proportionately according to a fixed zoom factor that corresponds to one of the user interface icons110,115,120for resizing of a web page.

Changes to layout properties of the DOM representation can be implemented in JavaScript by changing inline style sheet parameters. Parameters of a style sheet tend to follow a box-styled representation of elements. In such a representation, an element of a DOM representation corresponds to an element in a web page and the term “box” is used to refer to the box of an element that is formed by a box-shaped border that can be around an element; box-shaped padding that can be between an element and a border; and a box-shaped margin that can be around a border and forms a space between elements. In an example box-styled representation of elements, margins, borders, and padding can be the names of parameters for elements in a DOM representation that correspond to layout properties for margins, borders, and padding. Changing the values for those parameters on an element-by-element basis does result in a proportionately resized DOM representation of a web page. In some implementations, inline style sheet parameters need not be changed to change the properties of a web page that correspond to margins, borders, and padding of elements. For example, a combination of HTML attribute values could be changed. For example, a combination of different parameters (e.g., HTML attribute values) could pertain to borders and those parameters could be changed to cause a resizing of borders. Thus, “parameter” is not necessarily limited to a style sheet parameter and can more broadly refer to a measurement of a property or attribute for any machine-readable language. Also, parameter as used in this description need not be limited to an actual parameter (e.g., a value 5), and includes a formal parameter (e.g., ‘x’). In some implementations, a web page need not be resized proportionately. Style sheet parameters that are changed can be parameters that are from an embedded or external style sheet.

Although inFIGS. 1A and 1B, icons are used to receive a selection of a zoom factor, other forms of user interfaces can be embedded in a web page. For example, a text field can be used to receive a zoom factor (e.g., as a percentage, such as 200%) as input. As another example, a slider with a control corresponding to a gradually changing zoom factor could be a user interface. In some implementations, the zoom factor need not be selected through a web page that is resized. For example, the first time a web site is accessed, a user can register with the web site and select a zoom factor to be used on accesses to web pages available through the web site. Then, in subsequent visits to the web site, registration information could be used to determine a zoom factor to embed in a web page that is sent to a user, and that zoom factor can be used.

Although many properties of a web page corresponding to image size, text size, borders, padding, and margins, as displayed inFIG. 1Aare proportionately resized inFIG. 1B, in some implementations, fewer or more properties can be proportionately resized. For example, image and text size can be enlarged, and layout properties, such as padding and margins, might not be enlarged.

In the example embodiment, the use of JavaScript code to cause the resizing of the web page is advantageous as JavaScript is supported by many types of browsers such that the web page zoom feature can be cross-browser compliant. However, in other implementations, other programming languages can be used and those languages might not be cross-browser compliant.

System to Generate and Distribute Web Pages

FIG. 2illustrates a system that can be used to generate and distribute web pages in accordance with one embodiment of the invention. The system includes a first computer205that is used to generate web pages, such as an example web page210that includes code implementing a zoom feature. To generate web pages, the computer205includes a web page editing program that generates web pages and has a What You See Is What You Get (WYSIWYG) interface. The program used for editing web pages need not be limited to a WYSIWYG interface. For example, a WYSIWYG interface might be substituted with, or be used in addition to, a text-editing interface.

The web page210that is generated by the computer205includes the zoom feature as a section of embedded code212, along with the web page code214that describes components of the web page other than the zoom feature. When a web page is to be persisted, there is an option in the program to include the zoom feature in the persisted web page. When the option is chosen, the program on the computer205automatically embeds the zoom feature into the web page without making web page-specific modifications. In this fashion, the zoom feature is generic in the sense that it can be embedded into any web page, without requiring special considerations for specific web pages. For example, journalists that generate web pages can generate various web pages for different news stories, using different layouts and combinations of web page elements, and can embed the generic code for a zoom feature in the various web pages.

Web pages that are generated on the first computer205can be persisted on a web server215. The web server215acts as a distribution point from which web pages can be accessed, over the network220, by user computers225,230,235. The web server215could be one of many web servers used for a web site, or could be the only web server used for a web site. The web pages that can be served from the web server215need not be limited to web pages generated by the first computer205, or web pages that have a zoom feature. For example, many different computers could be used to generate web pages for the web server215, and those web pages can include a mix of web pages that do and do not include a zoom feature.

The network220from which web pages are accessed could be any type of network, including, as examples, a large, public network, such as the Internet, or a small, private intranet.

Web pages that are accessed by the user computers225,230,235can be displayed on their respective web browsers240,245,250. Displaying web pages on the web browsers225,230,235can include a display of a user interface control for a zoom feature, such as the example user interface control for a zoom feature discussed with reference toFIGS. 1A and 1B. The user computers225,230,235can be different types of computers, include different operating systems, and have different user-access restrictions. For example, the first user computer225could be a home computer with unlimited user access that includes an operating system based on Microsoft Corporation's Windows platform and the second user computer230could be a computer at a public university that prohibits public users from installing software. Because the zoom feature is embedded in a web page such that the zoom feature need not require a specific browser or modifications to a browser, each of the browsers240,245,250, on the user computers225,230,235can support the zoom feature.

The web browsers240,245,250that are used by the user computers225,230,235can include a mix of different platforms of browsers and different versions of browsers. For example, the first browser240could be an Internet Explorer web browser, the second web browser245could be a Netscape Browser web browser, and the third web browser250could be a Mozilla-based Firefox web browser. Following the example, if the user computers225,230,235request a same web page that has a cross-browser compliant zoom feature, the web browsers240,245,250could support the zoom feature, and the web page need not include browser-specific code to ensure the zoom feature is supported by the web browsers240,245,250.

Although the embedded code used for the zoom feature discussed with reference toFIG. 2is generic such that it can be included in any web page with no web-page specific modifications, some implementations can vary. For example, the zoom feature might be coded for a specific web page. In other implementations an editor with a user interface need not be used to embed a zoom feature. For example, a search engine could provide an option for users to have a zoom feature embedded in web pages served as search results.

Process of Displaying a Web Page

FIG. 3is a flowchart of a process of displaying a web page in accordance with one embodiment of the invention. The web page that is displayed includes a zoom feature and can be resized in accordance with a zoom factor. The process of displaying a web page according to the flowchart can be performed by a web browser that can interpret web pages and cross-browser compliant machine-readable code (e.g., JavaScript). For example, the process could be performed by an Internet Explorer web browser.

At305, the web page and the zoom factor are received as input. The web page and the zoom factor can be received together as a single input, or the web page and the zoom factor could be received separately. For example, the web page could include the zoom factor as a default zoom factor to be used, or the web page could be received and a user can select a zoom factor to use for the web page from a user interface control in the web page. The web page and the zoom factor can be received as input at a web browser. For example, the web page could be received after a request for the web page is made by a user typing in a uniform resource locator (URL) for a web site that hosts the web page.

In the processes that will be described with reference to310through325, a document object model (DOM) representation of a web page can be manipulated. A DOM is an application programming interface for manipulating a DOM representation of a web page. A DOM could be a standards-defined interface such as a DOM that supports the World Wide Web Consortium (W3C) DOM standard that is supported by multiple types of browsers. Because different browsers can support a similar DOM interface, DOM representations can be manipulated using cross-browser compliant code.

At310, a determination is made as to whether a DOM representation of the received web page includes parameters pertaining to content (e.g., scalable content parameters, such as text size and image size). Parameters pertaining to content could include, for example, parameters pertaining to images, text, or both.

If the DOM representation includes parameters pertaining to content, those parameters are modified in accordance with the zoom factor, at315. Modifying the parameters in accordance with the zoom factor can include, for example, multiplying the size of an image by the zoom factor to calculate a new image size, which may be enlarged from or made smaller than a previous image size. Modifying the parameters includes replacing the values of one or more parameters in the DOM representation. For example, when resizing an image, a parameter pertaining to the height of an image and a parameter pertaining to the width of the image can be modified.

If the DOM representation does not include parameters pertaining to content, or parameters pertaining to content have been modified in accordance with the zoom factor, a determination is made as to whether the DOM representation includes parameters pertaining to layout, at320. Those parameters pertaining to layout (e.g., scalable layout parameters, such as border size and padding size) are modified in accordance with the zoom factor at325. Parameters pertaining to layout can include borders, margins, and padding. Although borders, margins, and padding are style parameters for a DOM representation in accordance with a W3C DOM standard, the parameters pertaining to layout can include any combination of implemented parameters of a DOM representation that provide a similar effect. Thus, the parameters pertaining to borders, margins, and padding can be broader than the borders, margins, and padding style parameters according to a W3C DOM standard. Also, although these three layout properties are discussed, all of the properties need not be modified and any combination of other properties could be modified, including to, or instead of, those properties.

At330, the web page is displayed. Displaying the web page could include refreshing the web page to reflect changes that have been made to the DOM representation of the web page.

Although the sub-processes performed from310to325are shown as being performed by traversing a DOM representation of the web page to determine if there are parameters pertaining to content prior to determining whether there are parameters pertaining to layout, the order need not be followed. Additionally, a determination as to whether parameters pertaining to content for multiple elements need not be made prior to determining if parameters pertaining to layout are available for other elements. For example, the DOM representation can be traversed on an element-by-element basis, in which case, a determination can be made for parameters pertaining to content and layout for one element separately from determinations for another element.

A web page is not necessarily limited to a single file. For example, from a perspective of a viewer of a web page, a web page can include multiple files, including, HTML files, image files, and files for other types of content. Consequently, referring to “a web page” can include referring to multiple HTML pages. For example, a web page including frames may include a first HTML page that includes references to other HTML pages that should be frames, and the other HTML pages that are frames.

The processes and logic flows described in this specification can be performed by one or more programmable processors executing one or more computer programs to perform functions by operating on input data and generating output. The processes and logic flows can also be performed by, and apparatus of the invention can be implemented as, special purpose logic circuitry, e.g., an FPGA (field programmable gate array) or an ASIC (application-specific integrated circuit).

The invention has been described in terms of particular embodiments, but other embodiments can be implemented and are within the scope of the following claims. For example, operations can be performed in a different order and still achieve desirable results. As one example, the process depicted inFIG. 3does not require the particular order shown, or sequential order, to achieve desirable results (e.g., the operations described with reference to310and315can be performed after the operations described with reference to320and325). In certain implementations, multitasking and parallel processing may be preferable.

In some implementations, other properties of a web page, in addition to, or instead of, the size of content and layout could be changed. As examples, the color of links could be modified in relation to surrounding text to distinguish links, or the color of text could be modified to avoid the use of certain colors to increase the readability of text for persons with color perception difficulties.

A zoom feature can be implemented in different types of environments. For example, a software tool that is used to generate web pages can include the zoom feature in a preview browser. Following that example, the preview browser can use the zoom feature to resize a web page in response to a resizing of the preview browser. Consequently, if a user resizes a preview browser, the web page can be resized automatically, to reflect a resizing of the preview browser. To implement an example preview browser, a user interface for selecting a zoom factor need not be shown. For example, a zoom factor can be calculated based on the window size of the preview browser and a program can receive a calculated zoom factor as input for processing a document object model of a web page, where the processing results in a resized web page.