Web pages are documents typically presented by browsers. They can contain a variety of visual elements, such as text, images, and video or animation sequences.
This summary is provided to introduce a selection of concepts in a simplified form that are further described below in the Detailed Description. This summary is not intended to identify key factors or essential features of the claimed subject matter, nor is it intended to be used to limit the scope of the claimed subject matter.
A facility for modifying a web page for display is described. The facility identifies within the web page one or more text blocks. The facility causes to be injected into the webpage immediately beneath the identified text blocks one or more visually homogenous panels.
The inventors have recognized that many web pages can end up being displayed by browsers in ways that make their text difficult to read. This can occur, for example, where text is displayed on top of a background whose color is too similar to that of the text; where text is displayed over a visually complex image whose elements are difficult to distinguish from the text; where text is displayed over a video or animation sequence whose visual content changes over time; etc. These difficulties can be more acute for users with visual impairments, or at times when bright sunlight or a high level of ambient light from another source land on the display device.
In response, the inventors have conceived and reduced to practice a software and/or hardware facility for ensuring contrast for text within a web page (“the facility”).
In some examples, the facility inserts a visually homogenous layer—sometimes called a “panel”—into the web page behind text in the web page. The inserted layer obscures any background visual elements within the web page over which the text would otherwise have been displayed, providing a contrasting background against which to read the text, while at the same time preserving the visibility of those background elements in portions of the web page not containing text.
In some examples, the facility bases the area and placement of the inserted layer on the area and placement of a corresponding block of text, such as by establishing an inserted layer having the same area and placement as a rectangle bounding the block of text, such as a rectangle tightly bounding the block of text.
In some examples, the colors of both the text and the inserted layer are set externally to the definition of the web page, such as by setting at the operating system level a high-contrast mode foreground color (used for the text, overriding any color specified for the text by the web page) and a high-contrast mode background color (used for the inserted layer). In some such examples, the high-contrast mode foreground and background colors have preset defaults that can be changed by the user.
In some examples, the facility displays the text in a color specified for it by the web page, and selects a color for the inserted layer intended to contrast well with the text color.
In some examples, the operation of the facility can be toggled on and off by the user, such as by switching on and off a high-contrast mode of the operating system, switching on and off a high-contrast mode of the browser, or interacting with a particular text block within the browser, such as by hovering the mouse cursor over the text block, touching the text block, gazing at the text block, etc.
In some examples, the designer of a web page can direct the operation of the facility with respect to the web page, such as by employing one or more special styles associated with the facility. For example, in some examples, the web page's designer can: disable layer insertion for certain text blocks; set inserted layer and/or text color; set inserted layer opacity level, allowing background elements behind it to show through to different extents; specify a padding distance for the inserted layer—a margin or other minimum distance by which the inserted layer extends beyond the text; specify that the inserted layer have rounded corners of a particular radius; etc.
By performing in some or all of the ways described above, the facility ensures the readability of text in a web page while modifying the web page to a minimum extent, largely preserving its visual presentation and design.
In various examples, as discussed above, aspects of the layer inserted by the facility at 204 are controlled, for example, by system or browser settings, by attribute values or other directives included in the web page, etc. As one example, a sample style definition used by certain web page to control aspects of the layer inserted by the facility is shown below in Table 1.
In Table 1 above, rows 1 and 6 specify that a ms-high-contrast media feature used to control the facility is being defined. The ms-high-contrast media feature is further described by the Microsoft Developers Network at msdn.microsoft.com/en-us/library/windows/apps/hh465764.aspx. In row 2, the definition specifies twenty pixels of padding. Alternatively, the margins can be specified in the same way using this property. In row 3, the definition specifies that the corners of each panel are to be rounded at a radius of ten pixels. In row 4, the definition specifies that the panels are to have an opacity level of 75%. And in row 5, the definition specifies that the panels are to have the color magenta.
In some examples, the facility selects a color for the inserted layer based on the color determined for the text block at 202, such as by selecting a color known to provide good contrast with the color determined for the text block.
Returning to
In some examples (not shown), the facility merges panels that are adjacent vertically or horizontally to eliminate gaps between them, such as by merging adjacent panels that are less than a threshold distance apart.
Those skilled in the art will appreciate that the acts shown in
In
In some examples, the facility provides computing system for modifying a web page for display, the computing system comprising: a processor; and a memory having contents that, when executed by the processor: identify within the web page one or more text blocks, and without regard to any background elements of the web page that may occur beneath the identified text blocks in the web page, cause to be injected into the webpage immediately beneath the identified text blocks one or more visually homogenous panels.
In some examples, the facility provides one or more memories collectively containing a web page data structure, the web page data structure comprising: one or more text blocks; and a directive specifying an aspect of injecting one or more visually homogenous panels into the web page behind one or more of the text blocks during composition of the web page.
In some examples, the facility provides one or more memories collectively having contents configured to cause a computing system to: receive information specifying a web page, the received information specifying inclusion of one or more text blocks into the specified web page; construct the web page specified by the received information; and before the constructed web page is displayed, incorporate into the constructed web page one or more visually homogenous panels, the incorporated panels being below the text blocks in Z-order, the incorporated panels being above content of the web page specified by the received information to be below the text blocks in Z-order, the incorporated panels placed such that, for each character of any of each of the text blocks, one of the incorporated panel extends behind the character.
In some examples, the facility provides a method in a computing system, comprising: receiving information specifying a web page, the received information specifying inclusion of one or more text blocks into the specified web page; constructing the web page specified by the received information; and before the constructed web page is displayed, incorporating into the constructed web page one or more visually homogenous panels, the incorporated panels being below the text blocks in Z-order, the incorporated panels being above content of the web page specified by the received information to be below the text blocks in Z-order, the incorporated panels placed such that, for each character of any of each of the text blocks, one of the incorporated panel extends behind the character.
It will be appreciated by those skilled in the art that the above-described facility may be straightforwardly adapted or extended in various ways. While the foregoing description makes reference to particular examples, the scope of the invention is defined solely by the claims that follow and the elements recited therein.