Methods and systems for adjusting webpage layout

• US 9,886,519 B2
• Filed: 12/19/2012
• Issued: 02/06/2018
• Est. Priority Date: 12/29/2011
• Status: Active Grant

• Current Assignee: Alibaba Group Holding Ltd.
• Original Assignee: Uc Mobile Co., Ltd. (Alibaba Group Holding Ltd.), Guangzhou Ucweb Computer Technology Company, Ltd.
• Inventors: Liang, Jie
• Primary Examiner(s): Hong, Stephen
• Assistant Examiner(s): Vaughn, Gregory
• Application Number:
  US14/130,463
• Publication Number:
  US 20140298156A1
• Time in Patent Office: 1,875 Days
• Field of Search: 715200, 715234, 715238, 715273
• CPC Class Codes: G06F 16/9577 Optimising the visualization of content, e.g. distillation of HTML documents
• CPC Class Codes: G06F 16/986 Document structures and storage, e.g. HTML extensions
• CPC Class Codes: G06F 40/103 Formatting, i.e. changing of presentation of documents automatic justification G06F40/189; automatic line break hyphenation G06F40/191
• CPC Class Codes: G06F 40/189 Automatic justification

Abstract

A method and system for adjusting webpage layout are disclosed. The method includes calculating a width for displaying an image on a webpage; determining whether the image is inserted in a segment of text of the webpage; and adjusting the size of the image display based on a mobile terminal'"'"'s screen width and the width for displaying the image, if the image is inserted in the segment of text of the webpage. The disclosed methods and systems adjust the images on a webpage based on the width of the image and the screen width of a mobile terminal. As such, an adjusted webpage can be viewed by scrolling up and down the display screen. In addition, a user'"'"'s online experience may be further improved by adjusting the images on the webpage to be left justified and aligned with the text on the page. A user does not need to scroll horizontally (e.g., from left to right) to read the webpage including the images.

Claims

1. A method for adjusting webpage layout, comprising:

calculating a width for displaying an image on a webpage;

determining whether the image is inserted in a segment of text of the webpage, including checking whether a parent node of the image includes a label representing a paragraph of text;

adjusting a size of the image display based on a mobile terminal'"'"'s screen width and the width for displaying the image, if the image is inserted in the segment of text of the webpage, including;

setting a width of the image display to the mobile terminal'"'"'s screen width subtracting a fixed number of pixels, and setting a height of the image display based on the width of the image display; and

adding a label to the image display to force the image display to be left justified, while ignoring label attributes including at least one of text-align, indent, and margin.

2. The method according to claim 1, further comprising:

determining whether the image display needs to be adjusted;

determining whether the width for displaying the image is different from a default value; and

determining whether the screen width of the mobile terminal has changed.

3. The method according to claim 1, wherein determining whether the image is inserted in a segment of text of the webpage further comprises:

determining whether the image includes an attribute that is needed for actively displaying the image.

4. The method according to claim 1, wherein determining whether the image is inserted in a segment of text of the webpage further comprises:

determining whether at least two brother nodes of the image are nodes representing other contents.

5. The method according to claim 1, further comprising:

adjusting the size of the image display based on whether a width of the image display is in a pre-determined range.

6. The method according to claim 5, further comprising:

using the pre-determined range to filter out small images or images with large website logos or advertisements;

wherein the pre-determined range is from 120 pixels to 950 pixels.

7. The method according to claim 6, further comprising:

when the mobile terminal changes from a vertical display to a horizontal display, increasing a lower limit of the pre-determined range.

8. The method according to claim 1, wherein the fixed number of pixels is 20.

9. The method according to claim 1, further comprising:

determining that the image on the website is properly centered, followed by adding the label to the image display to force the image display to be left justified.

10. A system for adjusting webpage layout, comprising one or more processors, memory, and one or more program units stored in the memory and to be executed by the one or more processors, the one or more program units comprising:

a calculation unit configured to calculate a width for displaying an image on a webpage;

a first determination unit configured to determine whether the image is inserted in a segment of text of the webpage by checking whether a parent node of the image includes a label representing a paragraph of text;

a size adjustment unit configured to adjust a size of the image display based on a mobile terminal'"'"'s screen width and the width for displaying the image, if the image is inserted in the segment of text of the webpage, wherein the size adjustment unit includes;

a width adjustment module configured to set a width of the image display to the mobile terminal'"'"'s screen width subtracting a fixed number of pixels; and

a height adjustment module configured to set a height of the image display based on the width of the image display; and

a label addition unit configured to add a label to the image display to force the image display to be left justified, while ignoring label attributes including at least one of text-align, indent, and margin.

11. The system according to claim 10, the one or more program units further comprising:

a webpage adjustment confirmation unit configured to determine whether the image display needs to be adjusted;

wherein the first determination unit is further configured to determine whether the width for displaying the image is different from a default value, or whether the screen width of the mobile terminal has changed.

12. The system according to claim 10, wherein the first determination unit is further configured to determine whether the image includes an attribute that is needed for actively displaying the image before determining whether the image is inserted in a segment of text of the webpage.

13. The system according to claim 11, wherein the first determination unit is further configured to determine whether at least two brother nodes of the image are nodes representing other contents.

14. The system according to claim 10, the one or more program units further comprising:

a second determination unit configured to determine whether a width of the image display is in a pre-determined range, and based on the pre-determined range, to filter out small images and images with large website logos or advertisements.

15. The system according to claim 10, wherein:

the label addition unit is further configured to determine that the image on the website is properly centered, then to add the label to the image display to force the image display to be left justified.

16. A mobile terminal including a system for adjusting webpage layout, the system comprising one or more processors, memory, and one or more program units stored in the memory and to be executed by the one or more processors, the one or more program units comprising:

a webpage adjustment confirmation unit configured to determine whether an image display needs to be adjusted;

a calculation unit configured to calculate a width for displaying the image on a webpage;

a first determination unit configured to determine whether the image is inserted in a segment of text of the webpage by checking whether a parent node of the image includes a label representing a paragraph of text;

a size adjustment unit configured to adjust a size of the image display based on a mobile terminal'"'"'s screen width and the width for displaying the image if the image is inserted in a segment of text of the webpage, wherein the size adjustment unit includes;

a width adjustment module configured to set a width of the image display to the mobile terminal'"'"'s screen width subtracting a fixed number of pixels; and

a height adjustment module configured to set a height of the image display based on the width of the image display; and

a label addition unit configured to add a label to the image display to force the image display to be left justified, while ignoring label attributes including at least one of text-align, indent, and margin.

17. A non-transient computer medium containing program instructions for causing a computer to perform a method for adjusting webpage layout, the method comprising:

calculating a width for displaying an image on a webpage;

determining whether the width for displaying the image is different from a default value;

determining whether the screen width of the mobile terminal has changed;

determining whether the image is inserted in a segment of text of the webpage, including checking whether a parent node of the image includes a label representing a paragraph of text;

adjusting a size of the image display based on a mobile terminal'"'"'s screen width and the width for displaying the image, if the image is inserted in the segment of text of the webpage, including;

setting a width of the image display to the mobile terminal'"'"'s screen width subtracting a fixed number of pixels, and setting a height of the image display based on the width of the image display; and

adding a label to the image display to force the image display to be left justified, while ignoring label attributes including at least one of text-align, indent, and margin.