A text adaptation method for large-screen TVs based on the Hippy cross-end development engine

Abstract

The invention discloses a TV large-screen end text adaptation method based on a Hippy cross-end development engine, belonging to the technical field of telecommunication networks; an HTTP request is initiated to a server through the Hippy cross-end development engine to obtain page resources, and a rendering tree is generated based on the page resources; a JS file initiates a request to a data server to obtain page resources, and matches the layout information therein with a corresponding DOM node; the Hippy cross-end development engine calculates the actual length of a text box according to the character size defined in a basic CSS file and returns the actual length to the JS file; the JS file dynamically sets the width of the DOM node by operating a DOM node to modify a style attribute; the solution solves the problem that when the length of the title text content is not confirmed, the page can adaptively display all the title text content and reach a suitable interval with the time text, 100% restores the UI design drawing, improves the page aesthetics, and improves the user experience.

Description

Technical Field

[0001] The present invention belongs to the technical field of telecommunication networks, and in particular to a text adaptation method for a large-screen TV based on a Hippy cross-end development engine. Background Art

[0002] On large-screen TVs, in order to ensure the neatness and beauty of text content, avoiding text overflow is an important consideration in design. In the prior art, the width of the text box can be first determined by the specific size and resolution of the large TV screen. Through CSS styles, a fixed width or maximum width is set for the text box to prevent the text from exceeding the edge of the screen. For single-line text, the overflow: hidden property can be used to hide the overflowed part, and ellipsis can be added through text-overflow: ellipsis to indicate that the content is truncated. For multi-line text, display: -webkit-box; -webkit-box-orient: vertical; and -webkit-line-clamp: 3; and other properties can be used to limit the number of lines displayed. At the same time, the prior art takes into account that users of large-screen TVs have a long viewing distance, and can appropriately increase the font size and line spacing to improve the readability of the text.

[0003] In actual situations, when the title and time are on the same line, the title text is in front and the time text is in the back. Because the length of the title is uncertain, the accurate title text box width cannot be set. If the maximum screen width is set, the time text will not be able to be displayed at the same time. If the maximum width is not set, the title text will be too long to be displayed or the title text will be too short and the distance between it and the event text will be too short to be displayed beautifully, affecting the overall UI presentation effect and greatly affecting the user's viewing experience.

[0004] like Figure 4 As shown in the figure, because the width of the two text boxes before and after each occupies 50% of the screen width, when the title text is very short, the title text will be very far away from the time text, affecting the UI restoration and user experience. Figure 5 As shown, because the width of the front and back text boxes each occupies 50% of the screen width, the title text is too long and exceeds 50% of the screen width, which exceeds the actual set title text box width. The title text cannot be fully displayed, and adding scrolling also affects the aesthetics and user experience, resulting in an embarrassing scene where the first half of the line of text is filled and the second half is empty. Summary of the invention

[0005] The purpose of the present invention is to address the problem that the current existing text box adaptation method cannot set the accurate title text box width when the title length is uncertain. A TV large-screen text adaptation method based on the Hippy cross-end development engine is proposed. The present invention parses HTML documents and CSS files, and then constructs a rendering tree, matches the layout information therein with the corresponding DOM node, obtains the actual length of the text DOM node, and dynamically sets the text box width, so that the text box finally shows the actual width and has a suitable spacing with other text boxes in the same line.

[0006] In order to solve the above technical problems, the present invention provides a TV large-screen terminal text adaptation method based on the Hippy cross-terminal development engine, comprising the following steps:

[0007] S1. Hippy cross-end development engine initiates HTTP request to the server to obtain page resources;

[0008] S2. Generate a rendering tree based on page resources;

[0009] S3 and JS files initiate requests to the data server to obtain page resources and match the layout information with the corresponding DOM nodes;

[0010] S4. Hippy cross-end development engine calculates the actual length of the text box according to the character size defined in the basic CSS file and returns the actual length to the JS file;

[0011] S5. The JS file dynamically sets the width of the DOM node by operating the DOM node and modifying the style attribute.

[0012] Preferably, the page resources include HTML documents, CSS files and HTML texts.

[0013] Preferably, the S2 specifically includes:

[0014] Sa. Parse the HTML document, build the DOM tree, and convert each HTML element into a DOM node;

[0015] Sb, parse the CSS file and build the CSSOM tree;

[0016] Sc. Merge the DOM tree and the CSSOM tree to generate a rendering tree.

[0017] Preferably, in the Sc, the basic style of the CSS file is applied to the corresponding DOM node according to CSS rules.

[0018] Preferably, the CSSOM tree represents the structure of CSS rules; the DOM tree represents all elements on the page and their hierarchical relationships.

[0019] Preferably, the rendering tree includes nodes to be displayed and style information of these nodes.

[0020] Preferably, according to the structure of the rendering tree, the relevant attributes of each node adapted to the screen are calculated to generate layout information; the generated layout information is drawn onto the screen using the drawing sub-engine of the browser inside the engine through GPU acceleration.

[0021] Preferably, the relevant attributes include size and position on the screen.

[0022] Preferably, the S3 includes starting to execute the JS code after the rendering tree is constructed, the JS code requests the interface to obtain layout information, and sets the data to the corresponding DOM node, so that the DOM tree is reconstructed.

[0023] Compared with the prior art, the present invention has the following beneficial effects:

[0024] 1. This solution parses HTML documents and CSS files to build a rendering tree, matches the layout information with the corresponding DOM nodes, obtains the actual length of the text DOM node, and dynamically sets the text box width, so that the text box finally shows the actual width and has a suitable spacing with other text boxes in the same line.

[0025] 2. This solution solves the problem that the length of the title text is uncertain. The page can adaptively display the entire title text content and achieve a suitable interval with the time text, 100% restore the UI design drawing, improve the page appearance, and improve the user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0026] Figure 1 It is a schematic diagram of the overall system of the present invention;

[0027] Figure 2 It is a schematic diagram of the algorithm in the text box width adaptation process of the present invention;

[0028] Figure 3 A schematic diagram of a character length calculation algorithm of the present invention;

[0029] Figure 4 Displays a hint for an existing text box Figure 1 ;

[0030] Figure 5 Displays a hint for an existing text box Figure 2 ;

[0031] Figure 6 This is a schematic diagram of the effect achieved after applying this technology Figure 1 ;

[0032] Figure 7 This is a schematic diagram of the effect achieved after applying this technology Figure 2 . DETAILED DESCRIPTION

[0033] Example 1: Figure 1 - Figure 7 As shown in the figure, the text adaptation method for a large-screen TV based on the Hippy cross-end development engine includes the following steps:

[0034] S1. Hippy cross-end development engine initiates HTTP request to the server to obtain page resources, including HTML documents, CSS files and HTML text.

[0035] Obtaining page resources specifically includes:

[0036] Sa, parse the HTML document, build the DOM tree, convert each HTML element into a DOM node, and the DOM tree represents all the elements on the page and their hierarchical relationships;

[0037] Sb, parse the CSS file and build a CSSOM tree, which represents the structure of CSS rules;

[0038] Sc, merge the DOM tree and the CSSOM tree to generate a rendering tree, in which the basic style of the CSS file is applied to the corresponding DOM node according to the CSS rules.

[0039] S2. Generate a rendering tree based on the page resources. The rendering tree includes nodes that need to be displayed and style information of these nodes.

[0040] S3, JS file initiates a request to the data server to obtain page resources and match the layout information with the corresponding DOM node. After the rendering tree is built, the JS code starts to execute. The JS code requests the interface to obtain layout information and sets this data to the corresponding DOM node, causing the DOM tree to be rebuilt.

[0041] It should be noted that, according to the structure of the rendering tree, the relevant attributes of each node adapted to the screen, such as the size and position on the screen, are calculated to generate layout information; the generated layout information is used by the drawing sub-engine of the browser inside the engine to draw pixels onto the screen through GPU acceleration.

[0042] This solution parses the HTML document and CSS file, and then builds a rendering tree, matches the layout information with the corresponding DOM node, obtains the actual length of the text DOM node, and dynamically sets the text box width, so that the text box finally shows the actual width and has a suitable spacing with other text boxes in the same line.

[0043] S4. The Hippy cross-end development engine calculates the actual length of the text box according to the character size defined in the basic CSS file and returns the actual length to the JS file.

[0044] S5. The JS file dynamically sets the width of the DOM node by operating the DOM node and modifying the style attribute.

[0045] This solution solves the problem that the length of the title text content is uncertain. The page can adaptively display the entire title text content and achieve a suitable interval with the time text. It 100% restores the UI design drawing, improves the page appearance, and improves the user experience.

[0046] Example 2: Figure 1 - Figure 7 As shown in the figure, the text adaptation method for large-screen TV based on the Hippy cross-end development engine includes:

[0047] The Hippy cross-end development engine initiates an HTTP request to the server to obtain page resources: HTML documents, CSS files, JS files, and starts to synchronously process each document and the internal logic of the file. First, the HTML document is parsed, the DOM tree is built, and each HTML element is converted into a DOM node. At the same time, the CSS file is parsed and the CSSOM tree is built. The CSSOM tree represents the structure of the CSS rules. Finally, the DOM tree and the CSSOM tree are merged to generate a rendering tree. In this process, some basic styles of the CSS file are applied to the corresponding DOM nodes according to the CSS rules. According to the structure of the rendering tree, the size, position and other attributes of each node on the screen are calculated to generate layout information. The generated layout information is drawn to the screen using the drawing sub-engine of the browser inside the engine through GPU acceleration.

[0048] JS initiates a request to the data server to obtain page data and sets the text data to the corresponding DOM node. After the DOM node is set, the DOM tree changes and recalculates the layout, rebuilds the new DOM tree, and notifies the Hippy cross-end development engine to calculate the number of text content characters in the DOM node while building the DOM tree. Then, according to the text character size set in the CSS file, it finally calculates how wide the text box should actually be displayed, and finally sends the actual width back to the front end. JS directly sets the style by manipulating the DOM node to modify the style attribute, such as Figure 2 shown.

[0049] The character length is calculated as follows Figure 3 As shown in the figure, Chinese characters occupy 2 characters, and numbers and English letters occupy 1 character. The width that the actual text box should occupy is calculated by multiplying the set single character width by the total character length.

[0050] By manipulating the style attribute of the DOM node through JS, the amount of calculation for DOM tree rendering can be reduced and re-rendering of the CSSOM tree can be avoided, so that the DOM node can be partially refreshed, the page can be refreshed seamlessly, and finally the text content can be fully displayed with appropriate spacing from other text content in the same line.

[0051] The technical difficulty of the present invention lies in whether the front end can accurately and quickly obtain the length of the text content after the Hippy cross-end development engine renders the page DOM elements. If the time cannot be grasped, it will cause a flashing text jitter phenomenon on the page. The core point of this technology is to determine that the page must accurately obtain the title text content length after the Hippy cross-end development engine finishes rendering the DOM elements, and can return the corresponding length in time. The core protection point is: accurate and adaptive title text width, complete display of text content. The secondary protection point is: high standard restoration of the design drawing, and improving the user experience with perfect display of the text content.

[0052] Example 3: Figure 1 - Figure 7 As shown in the figure, the text adaptation method for large-screen TV based on the Hippy cross-end development engine includes:

[0053] First, the browser initiates a network request through the Hippy cross-end development engine to obtain various resources that make up the web page, including JavaScript files (JS files), CSS style files (CSS files), and HTML text.

[0054] After these resources are downloaded, the browser begins to parse the HTML text and build a document object model (DOM tree), which represents all the elements on the page and their hierarchical relationships.

[0055] At the same time, the browser will also parse the CSS file and build a CSS object model (CSSOM tree), which contains all the CSS style rules.

[0056] Next, the browser merges the DOM tree and the CSSOM tree to generate a rendering tree. The rendering tree only contains the nodes that need to be displayed and the style information of these nodes, which is the basis of page layout and rendering.

[0057] After the rendering tree is built, the JavaScript code starts to execute. The JS code requests an interface to obtain text data and sets the data to the corresponding DOM node. This operation will cause the DOM tree to be rebuilt.

[0058] After rebuilding the DOM tree, the browser notifies the Hippy cross-end development engine to calculate the actual length of the text box based on the character size defined in the base CSS file and returns this length to JavaScript.

[0059] After receiving the actual length of the text box, JavaScript dynamically sets the width of the DOM node by manipulating the style attribute of the DOM node. This process may cause a partial refresh of the page.

[0060] Finally, if Figure 6 , Figure 7 As shown, the page completes the display of the text content and ensures that there is an appropriate interval between the text content and other text content in the same line, thus achieving a good visual effect and page layout.

Claims

1. A text adaptation method for large-screen TVs based on the Hippy cross-end development engine, characterized in that: The steps include: S1. Hippy cross-end development engine initiates HTTP request to the server to obtain page resources; S2. Generate a rendering tree based on page resources; S3 and JS files initiate requests to the data server to obtain page resources and match the layout information therein with the corresponding DOM nodes; S4. Hippy cross-end development engine calculates the actual length of the text box according to the character size defined in the basic CSS file and returns the actual length to the JS file; S5. The JS file dynamically sets the width of the DOM node by operating the DOM node and modifying the style attribute.

2. The TV large-screen end text adaptation method based on the Hippy cross-end development engine according to claim 1 is characterized in that: The page resources include HTML documents, CSS files and HTML text.

3. The TV large-screen end text adaptation method based on the Hippy cross-end development engine according to claim 1 is characterized in that: The S2 specifically includes: Sa. Parse the HTML document, build the DOM tree, and convert each HTML element into a DOM node; Sb, parse the CSS file and build the CSSOM tree; Sc. Merge the DOM tree and the CSSOM tree to generate a rendering tree.

4. The TV large-screen terminal text adaptation method based on the Hippy cross-terminal development engine according to claim 3 is characterized in that: In the Sc, the basic style of the CSS file is applied to the corresponding DOM node according to the CSS rules.

5. The TV large-screen terminal text adaptation method based on the Hippy cross-terminal development engine according to claim 3 is characterized in that: The CSSOM tree represents the structure of CSS rules; the DOM tree represents all elements on a page and their hierarchical relationships.

6. The TV large-screen terminal text adaptation method based on the Hippy cross-terminal development engine according to claim 1 is characterized in that: The rendering tree includes nodes to be displayed and style information of these nodes.

7. The TV large-screen terminal text adaptation method based on the Hippy cross-terminal development engine according to claim 1 is characterized in that: According to the structure of the rendering tree, the relevant attributes of each node and the screen adaptation are calculated to generate layout information; the generated layout information is used by the drawing sub-engine of the browser inside the engine to draw pixels onto the screen through GPU acceleration.

8. The TV large-screen terminal text adaptation method based on the Hippy cross-terminal development engine according to claim 7 is characterized in that: The relevant properties include size and position on the screen.

9. The TV large-screen terminal text adaptation method based on the Hippy cross-terminal development engine according to claim 1 is characterized in that: The S3 includes that after the rendering tree is constructed, the JS code starts to execute, the JS code requests the interface to obtain layout information, and sets the data to the corresponding DOM node, so that the DOM tree is rebuilt.

Images