A webpage display method, device and equipment

Abstract

The present disclosure relates to a webpage display method, device and equipment, the method comprising: in response to a webpage display instruction, obtaining a configuration file of a webpage to be displayed, the configuration file comprising a container defining a webpage style, the container comprising a specified type container; determining an original display area corresponding to the specified type container, determining a first sub-display area of each non-text container in the original display area, and rendering and displaying the non-text type elements carried in the first sub-display area; adjusting the width of the text container according to the text type elements carried in the text container, determining a second sub-display area of the text container in the original display area, and rendering and displaying the text type elements carried in the second sub-display area. According to the method provided in the embodiments of the present disclosure, when there are both text type elements and non-text type elements in the container defining the webpage style, the center alignment of the text type elements can be realized.

Description

TECHNICAL FIELD

[0001] The present disclosure relates to the field of webpage display, and in particular, to a webpage display method, device and equipment. BACKGROUND

[0002] In webpage element layout, multiple areas of a webpage are defined by containers, and it is desired that each text type element in each container can be displayed in the center. A conventional method is to set the property value of the text container in the css style file of the container to text-align to realize the center display of the text type element. However, in complex situations, for example, when there are both text type elements and non-text type elements in the container, the phenomenon of overlapping between the centered text type elements and the non-text type elements may occur.

[0003] To solve the above problem, the prior art usually adopts a method of nesting a sub-container in the container to wrap the text type element to realize the center display of the text type element. This method can ensure that the text type element does not exceed the range of the sub-container when centered, and thus can ensure that the phenomenon of overlapping between the centered text type elements and the non-text type elements does not occur. However, when there are many text type elements, the space in the sub-container may be insufficient, but there is still a blank space in the container, and the space in the container cannot be fully utilized. SUMMARY

[0004] The present disclosure provides a webpage display method, device and equipment to at least solve the problem of center display of text type elements in a container defining a webpage in a complex situation in the related art. The technical solutions of the present disclosure are as follows.

[0005] According to a first aspect of an embodiment of the present disclosure, a webpage display method is provided, comprising:

[0006] In response to a webpage display instruction, a configuration file of a webpage to be displayed is acquired, the configuration file comprising a container defining a webpage style, the container comprising a specified type container, the specified type container nesting a text container carrying text type elements and at least one non-text container carrying non-text type elements;

[0007] A first sub-display area of each non-text container is determined in the original display area corresponding to the specified type container, and the carried non-text type elements are rendered and displayed in the first sub-display area.

[0008] The width of the text container is adjusted according to the text type element carried in the text container, a second sub-display area of the text container is determined in the original display area, and the carried text type element is rendered and displayed in the second sub-display area, and the width of the text container is not more than the original display area and does not cover the width corresponding to the non-text type element carried by the non-text container.

[0009] In a possible implementation, the specified type container nests two non-text containers and one text container, and the text container is located between the two non-text containers.

[0010] In a possible implementation, the two non-text containers are a left non-text container and a right non-text container respectively, and the initial width of the text container is a width located in the middle of the left non-text container and the right non-text container.

[0011] In a possible implementation, the width of the left non-text container is the same as that of the right non-text container.

[0012] In a possible implementation, the method further includes:

[0013] The text container with the initial width is determined to correspond to an initial second sub-display area in the original display area.

[0014] When the text type element carried in the text container can be completely displayed in the initial second sub-display area, the carried text type element is rendered and displayed in the initial second sub-display area.

[0015] In a possible implementation, the width of the text container is adjusted according to the text type element carried in the text container, including:

[0016] When the text type element carried in the text container cannot be completely displayed in the initial second sub-display area, one of the non-text containers carrying the non-text type element with a larger occupied width is determined.

[0017] The width of the text container is expanded in the direction of the other non-text container until the text type element carried in the text container can be completely displayed in the corresponding second sub-display area and the distance between the text type element and the non-text type element carried by the other non-text container is not less than a set value, or the text type element carried in the text container cannot be completely displayed in the corresponding second sub-display area and the distance between the text type element and the non-text type element carried by the other non-text container is the set value.

[0018] In a possible implementation, when the content of the non-text type element in the other non-text container is empty, the width of the text container is extended in the direction of the other non-text container until the text type element carried in the text container can be completely displayed in the corresponding second sub-display area and the distance from the boundary of the original display area in the direction is not less than a set value, or until the text type element carried in the text container cannot be completely displayed in the corresponding second sub-display area and the distance from the boundary of the original display area in the direction is the set value.

[0019] In a possible implementation, the configuration file further includes attribute information of each container, and the attribute information includes a size of the container and a type of the container.

[0020] The width of the text container is adjusted according to the text type element carried in the text container, including:

[0021] When it is determined according to the attribute information of the container that the type of the container is a text container of a flex layout, the width of the text container is adjusted according to the text type element carried in the text container of the flex layout.

[0022] In a possible implementation, the width of the left non-text container and the width of the right non-text container are set to be not less than the larger width of the width occupied by the non-text type element carried in the left non-text container and the width occupied by the non-text type element carried in the right non-text container.

[0023] In a possible implementation, the text type element carried in the text container is rendered and displayed in the second sub-display area / the initial second sub-display area, including:

[0024] The text type element carried in the text container is rendered and displayed in the second sub-display area / the initial second sub-display area in a text centering manner.

[0025] According to a second aspect of the embodiments of the present disclosure, a web page display apparatus is provided, including:

[0026] A configuration file obtaining unit is configured to obtain a configuration file of a web page to be displayed in response to a web page display instruction, the configuration file including containers defining a style of the web page, and the containers including a specified type container, the specified type container being nested with a text container carrying text type elements and at least one non-text container carrying non-text type elements.

[0027] A non-text type element rendering unit is configured to determine an original display area corresponding to the specified type container, determine a first sub-display area of each non-text container in the original display area, and render and display the carried non-text type elements in the first sub-display area.

[0028] The text type element rendering unit is configured to adjust the width of the text container according to the text type element carried in the text container, determine a second sub-display area of the text container in the original display area, and render and display the carried text type element in the second sub-display area, wherein the width of the text container does not exceed the original display area and does not cover the width corresponding to the non-text container carrying the non-text type element.

[0029] In a possible implementation, the specified type container nests two non-text containers and one text container, and the text container is located between the two non-text containers.

[0030] In a possible implementation, the two non-text containers are a left non-text container and a right non-text container respectively, and the initial width of the text container is a width located between the left non-text container and the right non-text container.

[0031] In a possible implementation, the left non-text container and the right non-text container have the same width.

[0032] In a possible implementation, the apparatus further includes:

[0033] The initial second sub-display area determining unit is configured to determine an initial second sub-display area corresponding to the original display area for the text container with an initial width.

[0034] The text type element rendering unit is configured to render and display the carried text type element in the initial second sub-display area when it is determined that the text type element carried in the text container can be completely displayed in the initial second sub-display area.

[0035] In a possible implementation, the text type element rendering unit adjusts the width of the text container according to the text type element carried in the text container, including:

[0036] When it is determined that the text type element carried in the text container cannot be completely displayed in the initial second sub-display area, the left non-text container and the right non-text container are determined to be one non-text container with a larger occupied width of the non-text type element carried in the left non-text container and the right non-text container.

[0037] The width of the text container is expanded in the direction of the other non-text container until the text type element carried in the text container can be completely displayed in the corresponding second sub-display area and the distance between the text type element and the non-text type element carried in the other non-text container is not less than a set value, or the distance between the text type element and the non-text type element carried in the other non-text container is the set value.

[0038] In a possible implementation, when the content of the non-text type element in the other non-text container is empty, the text type element rendering unit extends the width of the text container in the direction of the other non-text container, until the text type element carried in the text container can be completely displayed in the corresponding second sub-display area and the distance from the boundary of the original display area in the direction is not less than a set value, or until the text type element carried in the text container cannot be completely displayed in the corresponding second sub-display area and the distance from the boundary of the original display area in the direction is the set value.

[0039] In a possible implementation, the configuration file further includes attribute information of each container, and the attribute information includes a size of the container and a type of the container.

[0040] The text type element rendering unit adjusts the width of the text container according to the text type element carried in the text container, including:

[0041] When the type of the container is determined to be a text container of a flexible layout flex according to the attribute information of the container, the width of the text container is adjusted according to the text type element carried in the text container of the flex.

[0042] In a possible implementation, the width of the left non-text container and the right non-text container is not less than the larger width of the width occupied by the non-text type element carried in the left non-text container and the right non-text container.

[0043] In a possible implementation, the text type element rendering unit renders and displays the carried text type element in the second sub-display area / renders and displays the carried text type element in the initial second sub-display area, including:

[0044] In the second sub-display area / initial second sub-display area, the text type element carried in the text container is rendered and displayed in a text centering manner.

[0045] According to a third aspect of the embodiments of the present disclosure, a web page display apparatus / electronic device / server is provided, including:

[0046] a processor;

[0047] a memory for storing processor-executable instructions;

[0048] The processor is configured to execute the instructions to implement the following web page display method:

[0049] In response to a web page display instruction, a configuration file of a web page to be displayed is obtained, the configuration file including containers defining a web page style, the containers including a specified type container, the specified type container being nested with a text container carrying a text type element and at least one non-text container carrying a non-text type element.

[0050] determining a first sub-display region of each non-text container in the original display region, and rendering and displaying the non-text type elements carried in the first sub-display region;

[0051] adjusting the width of the text container according to the text type elements carried in the text container, determining a second sub-display region of the text container in the original display region, and rendering and displaying the text type elements carried in the second sub-display region, the width of the text container not exceeding the original display region and not covering the width corresponding to the non-text type elements carried by the non-text container.

[0052] According to a fourth aspect of the embodiments of the present disclosure, a computer readable storage medium is provided, and the computer readable storage medium stores a computer program. When the computer program is executed by a processor, the steps of any one of the web page display methods in the first aspect are implemented.

[0053] The technical solutions provided by the embodiments of the present disclosure at least bring the following beneficial effects:

[0054] According to the method provided by the embodiments of the present disclosure, when both text type elements and non-text type elements need to be carried in the container defining the style of the web page, the text type elements can be centered without covering the non-text type elements, and when there are more text type elements, the space in the container can be fully utilized.

[0055] It should be understood that the foregoing general description and the following detailed description are only exemplary and explanatory, and cannot limit the present disclosure. BRIEF DESCRIPTION OF DRAWINGS

[0056] The accompanying drawings incorporated in the specification and forming a part of the specification illustrate the embodiments consistent with the present disclosure, and together with the specification serve to explain the principles of the present disclosure, and do not limit the present disclosure.

[0057] Figure 1 is a schematic diagram of an existing web page display method according to an exemplary embodiment;

[0058] Figure 2 is a schematic diagram of a web page display application scenario according to an exemplary embodiment;

[0059] Figure 3 is a flowchart of a web page display method according to an exemplary embodiment;

[0060] Figure 4 is a schematic diagram of case one according to an exemplary embodiment;

[0061] Figure 5is a schematic diagram of case two shown according to an exemplary embodiment;

[0062] Figure 6 is a schematic diagram of case three shown according to an exemplary embodiment;

[0063] Figure 7 is a block diagram of an apparatus shown according to an exemplary embodiment;

[0064] Figure 8 is a block diagram of an apparatus shown according to an exemplary embodiment. DETAILED DESCRIPTION

[0065] Hereinafter, part of the terms in the embodiments of the present disclosure are explained and described, so as to facilitate the understanding of the person skilled in the art.

[0066] (1) The term "client" or "user end" in the embodiments of the present disclosure refers to a program that provides local services for clients corresponding to servers. Except for some application programs that only run locally, it is generally installed on a common client and needs to run with the server to cooperate. After the development of the Internet, the commonly used user end includes web page browsers used in the World Wide Web, electronic mail clients when sending and receiving electronic mail, and client software for instant messaging, etc. For this kind of application program, there needs to be a corresponding server and service program in the network to provide corresponding services, such as database services, electronic mail services, etc. Therefore, specific communication connections need to be established between the client and the server end to ensure the normal operation of the application program.

[0067] (2) CSS: Cascading Style Sheets, a computer language used to style HTML (an application of Standard Generalized Mark-up Language) or XML (a subset of Standard Generalized Mark-up Language) files.

[0068] (3) Flex: Flexible Box, used to set how to increase or reduce the elastic items to adapt to the available space in the elastic container.

[0069] In order for the person skilled in the art to better understand the technical solutions of the present disclosure, the technical solutions in the embodiments of the present disclosure will be described clearly and completely in conjunction with the drawings.

[0070] It is to be understood that the terms "first", "second", and the like, used in the description and the claims of the present disclosure as well as the foregoing drawings of the related subject matter are used to distinguish between similar objects and are not necessarily used to describe a particular sequential or chronological order. It is to be understood that the use of such terms as "first", "second", and the like, in the description and the claims of the present disclosure as well as the foregoing drawings of the related subject matter is only made to provide clarity and ease of understanding the present disclosure and is not to be construed as a meaning of priority or order in time. Embodiments described in the following example implementations do not represent all implementations consistent with the present disclosure. Instead, they are merely examples of apparatuses and methods consistent with some aspects of the present disclosure as detailed in the appended claims.

[0071] The browser can be divided into two parts in architecture, namely, the kernel and the shell. The browser kernel refers to the core part of the browser, which can be divided into two parts: a rendering engine (layout engine or rendering engine) and a JS (JavaScript) engine. The rendering engine is mainly responsible for obtaining the content of the web page (including HTML, XML, images, etc.), sorting information (such as adding css (Cascading Style Sheets, Cascading Style Sheets)), and calculating the display method of the web page, and then outputting to the display or printer. Different browser kernels will have different interpretations of the syntax of the web page, so the rendering effect will also be different. All web browsers, email clients, and other applications that need to edit and display web content require a kernel. The JS engine is to parse the Javascript language and execute the Javascript language to realize the dynamic effect of the web page.

[0072] The web page includes elements and element content, the element content is encapsulated in a container, and the container corresponds to different display areas in the web page. When a user initiates a request to browse a web page through a browser, the browser obtains source files and script codes through the kernel, wherein the source files include css style files and web page content. Then, when loading the web page, the size information of each container and the type of the container are determined by parsing the css style file, the corresponding content elements are determined in the display area corresponding to the container when the script code is executed, and finally output to the display to display to the user.

[0073] At present, in the layout of web page elements, multiple areas of the web page are defined through containers, and it is hoped that the text type elements in each container can be displayed in the center. The conventional method is to set the property value of the text container in the css style file of the container to text-align to realize the center display of the text type elements, but this method will cause the overlapping phenomenon of the centered text type elements and the non-text type elements in the container in complex cases.

[0074] To solve the above problems, the prior art usually adopts the method of nesting a sub-container in a container to realize the centering display of the text type element, as shown in Figure 1 The container 101 is a sub-container nested in a container. Although this method can ensure that the text type element does not exceed the range of the sub-container when centered, and thus ensures that the phenomenon of overlapping between the text type element and the non-text type element after centering does not occur, the sub-container is usually arranged at the middle position of the container in order to ensure the centering display of the text type element, and as shown in Figure 1 there is a space with the same width as the non-text type element on the right side of the sub-container, which results in that part of the text type element cannot be displayed when the text type element exceeds the range of the sub-container, and part of the space in the container is not utilized, which leads to the waste of the container space.

[0075] Based on the above problems, the present disclosure proposes a web page display method, which can ensure the centering display of the text type element without covering the non-text type element when the container defining the web page style needs to carry both the text type element and the non-text type element, and can also ensure the full utilization of the space in the container when there are more text type elements.

[0076] Figure 2 is a schematic diagram of a web page display application scenario according to an example embodiment, as shown in Figure 2 The web page display application scenario includes:

[0077] The client 201 is used for a user to log in a browser, and to send a web page display instruction to obtain a configuration file of a to-be-displayed web page from a server. The browser displays non-text type elements and text type elements corresponding to the web page in the original display area of the web page by analyzing the configuration file.

[0078] The server 202 receives the web page display instruction sent by the user, and sends the configuration file of the to-be-displayed web page to the client.

[0079] Figure 3 is a flow chart of a web page display method according to an example embodiment, as shown in Figure 3 The web page display method is used for the centering display of the text type element in the container defining the web page in a complex situation, i.e., the situation that there are both text type elements and non-text type elements in the container. The method includes the following steps.

[0080] In step 301, in response to the webpage display instruction, a configuration file of a webpage to be displayed is acquired, the configuration file including a container defining a webpage style, the container including a specified type container, the specified type container being nested with a text container carrying a text type element and at least one non-text container carrying a non-text type element;

[0081] The configuration file is a CSS style file. After a user opens a webpage of a browser, a webpage display instruction is generated. The browser acquires the CSS style file of the webpage to be displayed from a server in response to the webpage display instruction.

[0082] The CSS style file defines information of multiple types of containers constituting a webpage, including a content type of an element carried by each container and content of the element, and size information of the container. The embodiment mainly solves the problem of centering display of the text type element in the specified type container.

[0083] In step 302, an original display area corresponding to the specified type container is determined, a first sub-display area of each non-text container is determined in the original display area, and the non-text type element carried is rendered and displayed in the first sub-display area.

[0084] The size information of the specified type container and the position information of the container in the page can be used to determine the original display area of the current display. It should be noted that the size and position information of the specified type container defined in the CSS style file are determined based on a standard page. However, when the page is rendered based on the size and position information defined in the CSS style file, adaptive modification needs to be made according to the size and position information of the standard page and the client display page, so as to determine the display area corresponding to the client display page. The specific process is a prior art and will not be described here.

[0085] The CSS style file defines the element type and element content in the container. The element type includes a text type and a non-text type, and the element content includes a text type element and a non-text type element. Based on these information defined in the CSS style file, it can be determined whether the loaded container is a text container or a non-text container. When a non-text container is parsed, the first sub-display area of the current display is determined based on the size information of the non-text container and the position information of the container in the page. The specific process is the same as the above process and will not be described here.

[0086] In step 303, the width of the text container is adjusted according to the text type element carried in the text container, a second sub-display area of the text container is determined in the original display area, and the text type element carried is rendered and displayed in the second sub-display area. The width of the text container is not more than the width of the original display area and does not cover the non-text type element carried by the non-text container.

[0087] In addition to the above information, the css style file further includes attribute information of each container, the attribute information including a size of the container and a type of the container, and specifically, the type of the container including a fixed-size container and a flex container. The non-text container adopts the fixed-size container, and the text container adopts the flex container. In the embodiment, for the specified type container in which the text container and the non-text container are nested, for the text container, the width of the container is dynamically adjusted during the loading process, and two conditions need to be met. One condition is that the text container does not exceed the original display area, that is, does not exceed the boundary of the left side or the right side of the original area. The other condition is that the text container does not cover the non-text type element carried by the non-text container. Specifically, the distance between the text container and the non-text type element of the non-text container on the left side or the right side is not less than a set value.

[0088] As an optional implementation, the width of the text container is adjusted according to the text type element carried in the text container.

[0089] When it is determined according to the attribute information of the container that the type of the container is the flex text container, the width of the text container is adjusted according to the text type element carried in the flex text container.

[0090] If it is determined according to the attribute information of the container that the type of the container is the fixed-size text container, the width of the text container is not adjusted.

[0091] According to the webpage display method provided by the present disclosure, when the container defining the webpage style needs to carry both the text type element and the non-text type element, the text type element can be displayed in the center without covering the non-text type element, and when there are many text type elements, the width of the flex text container can be adjusted to ensure that the space in the container is fully utilized.

[0092] The layout mode of the text container and the non-text container nested in the specified type container can be various. As an optional implementation, the specified type container nests two non-text containers and one text container, and the text container is located between the two non-text containers.

[0093] As an optional implementation, the two non-text containers are a left non-text container and a right non-text container, and the initial width of the text container is a width located in the center between the left non-text container and the right non-text container.

[0094] As an optional implementation, the width of the left non-text container and the right non-text container is the same.

[0095] The left non-text container and the right non-text container are fixed-size containers, and the width is not less than the larger of the widths occupied by the non-text type elements carried in the left non-text container and the right non-text container. The above method is used to determine the width of the left non-text container and the right non-text container, which can avoid the non-text type elements from being rendered and displayed outside the display area corresponding to the non-text container.

[0096] The middle text container is a flex container, and the width can be adjusted according to the text type elements carried in the container, which ensures that the space of the specified type container is fully utilized when there are many text types.

[0097] Before adjusting the width of the middle text container, it is also necessary to determine the initial second sub-display area corresponding to the original display area of the text container with the initial width, and to determine whether the text type elements carried in the text container can be completely displayed in the initial second sub-display area, to decide whether the width of the text container needs to be adjusted.

[0098] When the text type elements carried in the text container can be completely displayed in the initial second sub-display area, the width of the text container does not need to be adjusted, and the text type elements can be directly rendered in the initial second sub-display area.

[0099] As an optional implementation, when the text type elements carried in the text container can be completely displayed in the initial second sub-display area, the carried text type elements are rendered and displayed in the initial second sub-display area.

[0100] In this way, when there are fewer text type elements and they can be completely displayed in the initial second sub-display area, the centered display of the text type elements in the specified type container can be realized.

[0101] When the text type elements carried in the text container cannot be completely displayed in the initial second sub-display area, the width of the text container needs to be expanded, and the direction of the expansion needs to be determined according to the width occupied by the non-text type elements carried in the left non-text container and the right non-text container. As an optional implementation, when the text type elements carried in the text container cannot be completely displayed in the initial second sub-display area, one of the left non-text container and the right non-text container that carries the non-text type elements with a larger width is determined.

[0102] The width of the text container is expanded towards the other non-text container until the text type elements carried in the text container can be completely displayed in the corresponding second sub-display area and the distance between the non-text type elements carried in the other non-text container is not less than the set value. The other non-text container can be the left non-text container or the right non-text container. This method is suitable for the case where both the left and right non-text containers are not empty and the text content can be completely displayed by adjustment, or the case where both the left and right non-text containers are not empty and the text content cannot be completely displayed by adjustment but has been adjusted to the maximum width.

[0103] When the content of the non-text type elements in the other non-text container is empty, the width of the text container is expanded towards the other non-text container until the text type elements carried in the text container can be completely displayed in the corresponding second sub-display area and the distance between the non-text type elements carried in the other non-text container is not less than the set value. The other non-text container can be the left non-text container or the right non-text container. This method is suitable for the case where one side of the non-text container is empty and the text content can be completely displayed by adjustment, or the case where one side of the non-text container is empty and the text content cannot be completely displayed by adjustment but has been adjusted to the maximum width.

[0104] In the above manner, when there are many text type elements and they cannot be completely displayed in the initial second sub-display area, the width of the text container is adjusted to ensure that as many text type elements as possible are displayed without exceeding the original display area of the specified type container and without covering the non-text type elements.

[0105] As an optional implementation method, rendering and displaying the carried text type elements in the second sub-display area / initial second sub-display area includes:

[0106] The text type elements carried in the text container are rendered and displayed in the second sub-display area / initial second sub-display area in a text-centered manner.

[0107] The text type elements are rendered in a text-centered manner to ensure the centered display of the text type elements.

[0108] The following describes how to expand the width of the text container when the text type element carried in the text container cannot be completely displayed in the initial second sub-display area.

[0109] Case one, the content of the non-text type element carried in the left non-text container is not empty, and the content of the non-text type element carried in the right non-text container is empty.

[0110] As shown in Figure 4 , the figure specifies that the type container 401 is a container nested with the left non-text container 401, the middle text container 401, and the right non-text container 401, wherein the width of the left non-text container 401 is not less than the width occupied by the non-text type element carried in the container, the width of the middle text container 401 is the same as that of the left non-text container 401, and the initial width of the middle text container 401 is the width between the left non-text container 401 and the right non-text container 401.

[0111] When the text type element carried in the middle text container 401 cannot be completely displayed in the initial second sub-display area, i.e., the width of the text type element carried in the middle text container 401 exceeds the initial width of the middle text container 401, since the content of the non-text type element in the right non-text container 401 is empty, the width of the middle text container 401 is expanded to the right non-text container 401 direction until the text type element carried in the middle text container 401 can be completely displayed in the corresponding second sub-display area and the distance from the boundary of the specified type container 401 is less than a predetermined value, or the text type element carried in the middle text container 401 cannot be completely displayed in the corresponding second sub-display area and the distance from the boundary of the specified type container 401 is the predetermined value.

[0112] The predetermined value can be set according to requirements and recorded in the css style file.

[0113] Case two, the content of the non-text type element in the left non-text container is empty, and the content of the non-text type element in the right non-text container is not empty.

[0114] As shown in Figure 5As shown in the figure, the specified type container 500 is a container nested with a left non-text container 501, a middle text container 502, and a right non-text container 503. The left non-text container 501 is the left non-text container, the middle text container 502 is the middle text container, and the right non-text container 503 is the right non-text container. The width of the right non-text container 503 is not less than the width occupied by the non-text type elements contained in the container. The width of the left non-text container 501 is the same as the width of the right non-text container 503. The initial width of the middle text container 502 is the width between the left non-text container 501 and the right non-text container 503.

[0115] When the text element carried by the intermediate text container 502 cannot be fully displayed in the initial second sub-display area, that is, when the width of the text element carried by the intermediate text container 502 exceeds the initial width of the intermediate text container 502, since the content of the non-text element in the left non-text container 501 is empty, the width of the intermediate text container 502 is expanded in the direction of the left non-text container 501 until the text element carried by the intermediate text container 502 can be fully displayed in the corresponding second sub-display area and the distance from the boundary of the specified type container 500 is less than a predetermined value, or the text element carried by the intermediate text container 502 cannot be fully displayed in the corresponding second sub-display area and the distance from the boundary of the specified type container 500 is a predetermined value.

[0116] The predefined values ​​can be set according to requirements and recorded in the CSS style file.

[0117] Case 3: The contents of the non-text elements in both the left and right non-text containers are not empty, but the widths occupied by the non-text elements in the left and right non-text containers are different.

[0118] like Figure 6As shown, the designated type container 600 is a container nested with a left non-text container 601, a middle text container 602 and a right non-text container 603. The left non-text container 601 is a left non-text container, the middle text container 602 is a middle text container, and the right non-text container 603 is a right non-text container. The width of the left non-text container 601 and the right non-text container 603 is determined by the occupied width of the non-text type element carried in the container. Since the occupied width of the non-text type element carried in the left non-text container 601 is greater than the occupied width of the non-text type element carried in the right non-text container 603, the width of the left non-text container 601 and the right non-text container 603 is not less than the occupied width of the non-text type element carried in the left non-text container 601. The initial width of the middle text container 602 is the width between the left non-text container 601 and the right non-text container 603.

[0119] When the text type element carried in the middle text container 602 cannot be completely displayed in the initial second sub-display area, i.e., the width of the text type element carried in the middle text container 602 exceeds the initial width of the middle text container 602, since the occupied width of the non-text type element carried in the right non-text container 603 is smaller, the width of the middle text container 602 is expanded to the right non-text container 603 until the text type element carried in the middle text container 602 can be completely displayed in the corresponding second sub-display area and the distance between the text type element carried in the middle text container 602 and the non-text type element carried in the right non-text container 603 is not less than a set value, or the text type element carried in the middle text container 602 cannot be completely displayed in the corresponding second sub-display area and the distance between the text type element carried in the middle text container 602 and the non-text type element carried in the right non-text container 603 is the set value.

[0120] The predetermined value can be set according to requirements and recorded in the CSS style file.

[0121] Figure 7 is a block diagram of a web page display device according to an exemplary embodiment. Referring to Figure 7 The device includes a configuration file obtaining module 701, a non-text type element rendering module 702, and a text type element rendering module 703.

[0122] The configuration file obtaining module 701 is configured to obtain a configuration file of a web page to be displayed in response to a web page display instruction. The configuration file includes a container defining a web page style. The container includes a designated type container. The designated type container is nested with a text container carrying a text type element and at least one non-text container carrying a non-text type element.

[0123] The non-text type element rendering module 702 is configured to determine a primary display area corresponding to the specified type container, determine a first sub-display area of each non-text container in the primary display area, and render and display the carried non-text type elements in the first sub-display area.

[0124] The text type element rendering module 703 is configured to adjust the width of the text container according to the text type elements carried in the text container, determine a second sub-display area of the text container in the primary display area, and render and display the carried text type elements in the second sub-display area, wherein the width of the text container does not exceed the primary display area and does not cover the width of the non-text container carrying the non-text type elements.

[0125] Optionally, the specified type container nests two non-text containers and one text container, and the text container is located between the two non-text containers.

[0126] Optionally, the two non-text containers are a left non-text container and a right non-text container, and the initial width of the text container is a width located in the middle of the left non-text container and the right non-text container.

[0127] Optionally, the width of the left non-text container is the same as that of the right non-text container.

[0128] Optionally, the apparatus further comprises:

[0129] The initial second sub-display area determining module is configured to determine an initial second sub-display area of the primary display area corresponding to the text container with an initial width.

[0130] The text type element rendering module is configured to render and display the carried text type elements in the initial second sub-display area when the text type elements carried in the text container can be completely displayed in the initial second sub-display area.

[0131] Optionally, the text type element rendering module is configured to adjust the width of the text container according to the text type elements carried in the text container, comprising:

[0132] When the text type elements carried in the text container cannot be completely displayed in the initial second sub-display area, one of the non-text containers carrying the non-text type elements is determined according to the width occupied by the non-text type elements.

[0133] Expand the width of the text container towards another non-text container, so that the text type element contained within the text container can be fully displayed in the corresponding second sub-display area and the distance between it and the non-text type element contained in the other non-text container is not less than a set value, or the text type element contained within the text container cannot be fully displayed in the corresponding second sub-display area and the distance between it and the non-text type element contained in the other non-text container is a set value.

[0134] Optionally, the text type element rendering module is configured such that when the content of a non-text type element within another non-text container is empty, the width of the text container is expanded in the direction of the other non-text container until the text type element contained within the text container can be fully displayed in the corresponding second sub-display area and the distance from the boundary of the original display area in that direction is not less than a set value, or until the text type element contained within the text container is not fully displayed in the corresponding second sub-display area and the distance from the boundary of the original display area in that direction is a set value.

[0135] Optionally, the configuration file may also include attribute information for each container, including the container's size and type.

[0136] The text element rendering module adjusts the width of the text container based on the text elements it contains, including:

[0137] When the container type is determined to be a flexbox text container based on the container's property information, the width of the text container is adjusted according to the text elements it contains.

[0138] Optionally, the widths of the left and right non-text containers should be no less than the larger of the widths occupied by the non-text elements contained in the left and right non-text containers.

[0139] Optionally, the text type element rendering module is configured to render the text type element carried in the second sub-display area / render the text type element carried in the initial second sub-display area, including:

[0140] In the second sub-display area / initial second sub-display area, the text elements contained within the text container are rendered and displayed with the text centered.

[0141] Figure 8 This is a block diagram illustrating a device 800 for displaying a page according to an exemplary embodiment, comprising:

[0142] At least one processor 801 and at least one memory 802, and a bus system 809;

[0143] The memory stores program code, which, when executed by the processor, causes the processor to perform the following processes:

[0144] In response to a webpage display instruction, a configuration file for the webpage to be displayed is obtained. The configuration file includes a container that defines the style of the webpage. The container includes a container of a specified type, which is nested with a text container that carries text-type elements and at least one non-text container that carries non-text-type elements.

[0145] Determine the original display area corresponding to the specified type container, determine the first sub-display area of ​​each non-text container within the original display area, and render and display the non-text type elements carried in the first sub-display area;

[0146] The width of the text container is adjusted according to the text type elements contained within it. A second sub-display area of ​​the text container is determined within the original display area, and the text type elements contained therein are rendered and displayed in the second sub-display area. The width of the text container is such that it does not exceed the original display area and does not cover the width of the non-text type elements contained in the non-text container.

[0147] The device 800 can vary considerably depending on its configuration or performance, and may include one or more processors (central processing units, CPUs) 801 (e.g., one or more processors) and memory 802, and one or more storage media 803 (e.g., one or more mass storage devices) for storing application programs 804 or data 805. The memory 802 and storage media 803 can be temporary or persistent storage. The program stored in the storage media 803 may include one or more modules (not shown in the figure), each module including a series of instruction operations on the information processing device. Furthermore, the processor 801 may be configured to communicate with the storage media 803 and execute the series of instruction operations in the storage media 803 on the device 800.

[0148] The device 800 may also include one or more wired or wireless network interfaces 807, one or more input / output interfaces 808, and / or one or more operating systems 806, such as Windows Server, Mac OS X, Unix, Linux, FreeBSD, etc.

[0149] Optionally, the specified type container may nest two non-text containers and one text container, with the text container located between the two non-text containers.

[0150] Optionally, the two non-text containers are a left non-text container and a right non-text container, and the initial width of the text container is the width centered between the left non-text container and the right non-text container.

[0151] Optionally, the left non-text container and the right non-text container have the same width.

[0152] Optionally, the processor is further configured to:

[0153] Determine the initial second sub-display area corresponding to the original display area for the text container with the initial width;

[0154] If the text-type elements contained within the text container can be fully displayed in the initial second sub-display area, then render and display the text-type elements contained within the initial second sub-display area.

[0155] Optionally, the server can adjust the width of the text container based on the text-type elements it contains, including:

[0156] When it is determined that the text-type elements contained within the text container cannot be fully displayed in the initial second sub-display area, determine the non-text container whose width is larger between the non-text containers on the left and right sides.

[0157] Expand the width of the text container towards another non-text container, so that the text type element contained within the text container can be fully displayed in the corresponding second sub-display area and the distance between it and the non-text type element contained in the other non-text container is not less than a set value, or the text type element contained within the text container cannot be fully displayed in the corresponding second sub-display area and the distance between it and the non-text type element contained in the other non-text container is a set value.

[0158] Optionally, when the content of a non-text element within another non-text container is empty, the server expands the width of the text container in the direction of the other non-text container until the text element within the text container can be fully displayed in the corresponding second sub-display area and the distance from the boundary of the original display area in that direction is not less than a set value, or until the text element within the text container is not fully displayed in the corresponding second sub-display area and the distance from the boundary of the original display area in that direction is a set value.

[0159] Optionally, the configuration file may also include attribute information for each container, including the container's size and type.

[0160] Adjusting the width of the text container based on the text-type elements it contains includes:

[0161] When the container type is determined to be a flexbox text container based on the container's property information, the width of the text container is adjusted according to the text elements it contains.

[0162] Optionally, the widths of the left and right non-text containers should be no less than the larger of the widths occupied by the non-text elements contained in the left and right non-text containers.

[0163] Optionally, the server is used to render and display text-type elements carried in the second sub-display area / render and display text-type elements carried in the initial second sub-display area, including:

[0164] In the second sub-display area / initial second sub-display area, the text elements contained within the text container are rendered and displayed with the text centered.

[0165] This disclosure also provides a computer-readable storage medium including instructions that, when executed on a computer, cause the computer to perform the webpage display method provided in the above embodiments.

[0166] This disclosure also provides a computer program product, including a computer program, which includes program instructions. When the program instructions are executed by an electronic device, the electronic device performs the webpage display method provided in the above embodiments.

[0167] Other embodiments of this disclosure will readily occur to those skilled in the art upon consideration of the specification and practice of the invention disclosed herein. This disclosure is intended to cover any variations, uses, or adaptations of this disclosure that follow the general principles of this disclosure and include common knowledge or customary techniques in the art not disclosed herein. The specification and examples are to be considered exemplary only, and the true scope and spirit of this disclosure are indicated by the following claims.

[0168] It should be understood that this disclosure is not limited to the precise structures described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from its scope. The scope of this disclosure is limited only by the appended claims.

Claims

1. A webpage display method, characterized in that, The method includes: In response to a webpage display instruction, a configuration file for the webpage to be displayed is obtained. The configuration file includes a container that defines the style of the webpage. The container includes a container of a specified type, which is nested with a text container that carries text-type elements and at least one non-text container that carries non-text-type elements. Determine the original display area corresponding to the specified type container, determine the first sub-display area of ​​each non-text container within the original display area, and render and display the non-text type elements carried in the first sub-display area; If the initial second sub-display area corresponding to the original display area is determined using a text container with an initial width, and if the text type element carried in the text container cannot be fully displayed in the initial second sub-display area, then the non-text container with the larger width occupied by the non-text type element carried in the left and right non-text containers is determined, and the direction of text container expansion is determined to be the direction of the other non-text container; or if the content of the non-text type element in one of the left and right non-text containers is empty, then the direction of text container expansion is determined to be the direction of the non-text container with empty non-text type element content. The width of the text container is expanded in the determined direction of the text container expansion, until the text type element contained within the text container can be fully displayed in the corresponding second sub-display area and the distance between it and the non-text type element contained in the non-text container is not less than a set value, or the text type element contained within the text container cannot be fully displayed in the corresponding second sub-display area and the distance between it and the non-text type element contained in the non-text container is a set value; the specified type container nests a left non-text container, a right non-text container, and a text container, with the text container located between the two non-text containers; A second sub-display area for the text container is determined within the original display area, and the text-type elements it carries are rendered and displayed in the second sub-display area. The width of the text container is such that it does not exceed the original display area and does not cover the width of the non-text container carrying the non-text-type elements.

2. The method according to claim 1, characterized in that, The specified type container nests two non-text containers and one text container, with the text container located between the two non-text containers.

3. The method according to claim 2, characterized in that, The two non-text containers are the left non-text container and the right non-text container, respectively, and the initial width of the text container is the width centered between the left non-text container and the right non-text container.

4. The method according to claim 3, characterized in that, The left and right non-text containers have the same width.

5. The method according to claim 2, characterized in that, Also includes: Determine the initial second sub-display area corresponding to the original display area for the text container with the initial width; When it is determined that the text type element carried within the text container can be fully displayed in the initial second sub-display area, the text type element carried is rendered and displayed in the initial second sub-display area.

6. The method according to claim 4, characterized in that, The step of adjusting the width of the text container according to the text type elements contained within the text container includes: When it is determined that the text type element carried in the text container cannot be fully displayed in the initial second sub-display area, the non-text container with the larger width occupied by the non-text type element carried in the left non-text container and the right non-text container is determined. Expand the width of the text container towards another non-text container, until the text type element contained within the text container can be fully displayed in the corresponding second sub-display area and the distance between it and the non-text type element contained in the other non-text container is not less than a set value, or until the text type element contained within the text container cannot be fully displayed in the corresponding second sub-display area and the distance between it and the non-text type element contained in the other non-text container is a set value.

7. The method according to claim 6, characterized in that, When the content of the non-text element in the other non-text container is empty, the width of the text container is expanded in the direction of the other non-text container until the text element carried in the text container can be fully displayed in the corresponding second sub-display area and the distance from the boundary of the original display area in that direction is not less than a set value, or until the text element carried in the text container is not fully displayed in the corresponding second sub-display area and the distance from the boundary of the original display area in that direction is a set value.

8. The method according to claim 1, characterized in that, The configuration file also includes attribute information for each container, including the container's size and type. The step of adjusting the width of the text container according to the text type elements contained within the text container includes: When the container type is determined to be a flex text container based on the container's attribute information, the width of the text container is adjusted according to the text type elements contained within the flex text container.

9. The method according to claim 3, characterized in that, The widths of the left and right non-text containers shall be no less than the larger of the widths occupied by the non-text elements contained in the left and right non-text containers.

10. The method according to claim 1 or 5, characterized in that, The step of rendering and displaying the text-type element in the second sub-display area / rendering and displaying the text-type element in the initial second sub-display area includes: In the second sub-display area / the initial second sub-display area, the text type elements contained in the text container are rendered and displayed in a centered manner.

11. A webpage display device, characterized in that, include: The configuration file acquisition unit is configured to execute a response to a webpage display instruction to acquire a configuration file of the webpage to be displayed. The configuration file includes a container that defines the style of the webpage. The container includes a specified type container, which is nested with a text container that carries text-type elements and at least one non-text container that carries non-text-type elements. The non-text type element rendering unit is configured to perform the following: determine the original display area corresponding to the specified type container, determine the first sub-display area of ​​each non-text container within the original display area, and render and display the non-text type element carried in the first sub-display area. The text-type element rendering unit is configured to: determine the initial second sub-display area corresponding to the original display area using a text container with an initial width; when it is determined that the text-type elements carried in the text container cannot be fully displayed in the initial second sub-display area, determine the non-text container with the larger width occupied by the non-text-type elements in the left and right non-text containers, and determine the direction of text container expansion as the other non-text container direction; or when it is determined that the content of the non-text-type elements in one of the left and right non-text containers is empty, determine the direction of text container expansion as the direction of the non-text container with empty non-text-type element content. It is also configured to expand the width of the text container in a defined direction, until the text type elements contained within the text container can be fully displayed in the corresponding second sub-display area and the distance between the text type elements and the non-text type elements contained in the non-text container is not less than a set value, or the text type elements contained within the text container cannot be fully displayed in the corresponding second sub-display area and the distance between the text type elements and the non-text type elements contained in the non-text container is a set value; the specified type container nests a left non-text container, a right non-text container, and a text container, with the text container located between the two non-text containers; It is also configured to determine a second sub-display area of ​​the text container within the original display area, and render and display the text-type element carried in the second sub-display area, wherein the width of the text container is such that it does not exceed the original display area and does not cover the width of the non-text container carrying the non-text-type element.

12. The apparatus according to claim 11, characterized in that, The specified type container nests two non-text containers and one text container, with the text container located between the two non-text containers.

13. The apparatus according to claim 12, characterized in that, The two non-text containers are the left non-text container and the right non-text container, respectively, and the initial width of the text container is the width centered between the left non-text container and the right non-text container.

14. The apparatus according to claim 13, characterized in that, The left and right non-text containers have the same width.

15. The apparatus according to claim 12, characterized in that, Also includes: The initial second sub-display area determination unit is configured to determine the initial second sub-display area corresponding to the original display area for a text container with an initial width. The text type element rendering unit is configured to render and display the text type element in the initial second sub-display area when it is determined that the text type element carried in the text container can be fully displayed in the initial second sub-display area.

16. The apparatus according to claim 14, characterized in that, The text type element rendering unit adjusts the width of the text container according to the text type elements contained within it, including: When it is determined that the text type element carried in the text container cannot be fully displayed in the initial second sub-display area, the non-text container with the larger width occupied by the non-text type element carried in the left non-text container and the right non-text container is determined. Expand the width of the text container towards another non-text container, until the text type element contained within the text container can be fully displayed in the corresponding second sub-display area and the distance between it and the non-text type element contained in the other non-text container is not less than a set value, or until the text type element contained within the text container cannot be fully displayed in the corresponding second sub-display area and the distance between it and the non-text type element contained in the other non-text container is a set value.

17. The apparatus according to claim 16, characterized in that, When the content of the non-text element in the other non-text container is empty, the text element rendering unit expands the width of the text container in the direction of the other non-text container until the text element carried in the text container can be fully displayed in the corresponding second sub-display area and the distance from the boundary of the original display area in that direction is not less than a set value, or until the text element carried in the text container is not fully displayed in the corresponding second sub-display area and the distance from the boundary of the original display area in that direction is a set value.

18. The apparatus according to claim 11, characterized in that, The configuration file also includes attribute information for each container, including the container's size and type. The text type element rendering unit adjusts the width of the text container according to the text type elements contained within it, including: When the container type is determined to be a flex text container based on the container's attribute information, the width of the text container is adjusted according to the text type elements contained within the flex text container.

19. The apparatus according to claim 13, characterized in that, The widths of the left and right non-text containers shall be no less than the larger of the widths occupied by the non-text elements contained in the left and right non-text containers.

20. The apparatus according to claim 11 or 15, characterized in that, The text type element rendering unit renders and displays the text type element it carries in the second sub-display area / renders and displays the text type element it carries in the initial second sub-display area, including: In the second sub-display area / the initial second sub-display area, the text type elements contained in the text container are rendered and displayed in a centered manner.

21. A webpage display device / electronic device / server, characterized in that, include: processor; Memory used to store the processor's executable instructions; The processor is configured to execute the instructions to implement the webpage display method as described in any one of claims 1 to 10.

22. A computer-readable storage medium, characterized in that, When the instructions in the computer-readable storage medium are executed by the processor of the web page display device / electronic device / server, the web page display device / electronic device / server is enabled to perform the web page display method as described in any one of claims 1 to 10.

23. A computer program product comprising a computer program / instructions, characterized in that, When the computer program / instructions are executed by the processor, they implement the webpage display method according to any one of claims 1 to 10.

Images