Proportional font scaling

• US 9,195,637 B2
• Filed: 11/03/2010
• Issued: 11/24/2015
• Est. Priority Date: 11/03/2010
• Status: Active Grant

• Current Assignee: Microsoft Technology Licensing LLC (Microsoft Corporation)
• Original Assignee: Microsoft Technology Licensing LLC (Microsoft Corporation)
• Inventors: Peraza, Jorge, Liu, Philip K.
• Primary Examiner(s): Baderman, Scott
• Assistant Examiner(s): Cortes, Howard
• Application Number:
  US12/939,061
• Publication Number:
  US 20120110438A1
• Time in Patent Office: 1,847 Days
• Field of Search: 715/238, 715243-244, 715/252
• US Class Current: 1/1
• CPC Class Codes: G06F 2203/04806 Zoom, i.e. interaction techniques or interactors for controlling the zooming operation
• CPC Class Codes: G06F 3/0485 Scrolling or panning
• CPC Class Codes: G06F 40/109 Font handling; Temporal or kinetic typography

Abstract

The font size of text included in web page content is proportionally scaled based on proportional container widths and/or a minimum readable font size. The proportional font scaling improves web content readability on small-screen devices while maintaining relative proportions of font sizes between text containers when the text containers are rendered at full display width.

Claims

1. A method comprising:

receiving content to be rendered, the content including first and second text containers, the first text container having a first font size and a first container width, the second text container having a second font size and a second container width, wherein the first container width is not equal to the second container width;

defining an original font ratio as a ratio of the first font size to the second font size;

generating scaled content by independently scaling the font size of each of the first and second text containers to generate scaled font sizes, such that a ratio of a first scaled font size associated with the first text container to a second scaled font size associated with the second text container is not equal to the original font ratio; and

rendering the scaled content for display such that;

when the first text container is rendered to fill a width of a display, the first text container has a first displayed font size;

when the second text container is rendered to fill the width of the display, the second text container has a second displayed font size; and

a ratio of the first displayed font size to the second displayed font size is equal to the original font ratio.

2. A method as recited in claim 1, wherein:

the content to be rendered was designed for rendering on a display having a first display width; and

the width of the display is less than the first display width.

3. A method as recited in claim 1, wherein independently scaling the font size of each of the first and second text containers comprises:

determining a minimum readable font size;

determining a normalization font size;

generating the first scaled font size as a function of the first font size, the minimum readable font size, and the normalization font size; and

generating the second scaled font size as a function of the second font size, the minimum readable font size, and the normalization font size.

4. A method as recited in claim 3, wherein determining a minimum readable font size comprises receiving a user selection, through a user interface, of a user-preferred minimum readable font size.

5. A method as recited in claim 3, wherein determining a minimum readable font size comprises identifying a predefined minimum readable font size specific to the display.

6. A method as recited in claim 3, wherein the normalization font size is a preconfigured default font size associated with a web browser application.

7. A method as recited in claim 3, wherein independently scaling the font size of each of the first and second text containers further comprises:

determining a width of the content;

generating the first scaled font size as a function of the first font size, the first container width, and the width of the content; and

generating the second scaled font size as a function of the second font size, the second container width, and the width of the content.

8. A method as recited in claim 1, wherein independently scaling the font size of each of the plurality of distinct text containers comprises:

determining a width of the content;

defining a first width ratio as a ratio of the first container width to the width of the content;

defining a second width ratio as a ratio of the second container width to the width of the content;

generating the first scaled font size as a function of the first font size and the first width ratio; and

generating the second scaled font size as a function of the second font size and the second width ratio.

9. One or more computer storage media encoded with computer-executable instructions that, when executed, configure a computer system to perform a method as recited in claim 1.

10. A web browser application at least partially stored in memory and executed on a processor to perform a method as recited in claim 1.

11. A method comprising:

identifying a web page to be rendered;

parsing the web page to identify a plurality of web page elements including a plurality of containers that include text, such that an original font ratio is a ratio of a first font size of text in a first container of the plurality of containers that include text to a second font size of text in a second container of the plurality of containers that include text, wherein a width of the first container is not equal to a width of the second container; and

generating a layout for the web page that defines a height and position of each of the plurality of web page elements, wherein generating the layout includes proportionally scaling font sizes associated with each of the plurality of containers that includes text, resulting in scaled font sizes such that a ratio of a first scaled font size of text in the first container to a second scaled font size of text in a second container is not equal to the original font ratio, wherein the font sizes are proportionally scaled based on at least one of;

relative container widths;

or

a ratio of a minimum readable font size to a normalization font size;

rendering the web page according to the layout;

displaying the first container to have a particular display width, wherein the first scaled font size is adjusted to a first display font size based on a comparison between the width of the first container and the particular display width;

subsequently displaying the second container to have the particular display width, wherein the second scaled font size is adjusted to a second display font size based on a comparison between the width of the second container and the particular display width,

wherein a ratio of the first display font size to the second display font size is equal to the original font ratio.

12. A method as recited in claim 11, wherein scaling font sizes based on relative container widths comprises:

identifying a width of the web page;

identifying a first container width for the first container;

identifying a second container width for the second container, the second container width being different from the first container width;

scaling the font size associated with the first container according to a function of the first font size, the first container width, and the width of the web page; and

scaling the font size associated with the second container according to a function of the second font size, the second container width, and the width of the web page.

13. A method as recited in claim 11, wherein proportionally scaling font sizes associated with each of the plurality of containers that includes text comprises scaling font sizes based on relative container widths and a minimum readable font size.

14. A web browser application at least partially stored in memory and executed on a processor to perform a method as recited in claim 11.

15. A system comprising:

a processor;

a memory communicatively coupled to the processor; and

a browser application at least partially stored in the memory and executable on the processor, the browser application including;

a parser for parsing tagged content to identify content elements;

a layout module for determining a height and a position for each of the content elements;

a font scaling module for generating scaled fonts associated with the content elements by proportionally scaling original fonts associated with the content elements based on relative content element widths, such that;

a proportion between original fonts of first and second content elements having different content element widths is not equal to a proportion between scaled fonts of the first and second content elements; and

a proportion between the original fonts of the first and second content elements having different content element widths is equal to a proportion between displayed fonts of the first and second content elements when the first and second content elements having the scaled fonts are rendered to have a common display width; and

a renderer for rendering the content elements according to the height and position for each of the content elements as defined by the layout module.

16. A system as recited in claim 15, wherein the fonts are also scaled in proportion to a minimum readable font size.

17. A system as recited in claim 16, wherein the fonts are scaled in proportion to a minimum readable font size using a ratio of the minimum readable font size to a normalization font size.

18. A system as recited in claim 15, wherein the common display width is a small-screen device full display width.