Character rendering size calculation method and device, storage medium and electronic equipment

Abstract

The embodiment of the invention provides a character rendering size calculation method and device, a storage medium and electronic equipment, and the method comprises the steps: obtaining to-be-rendered text content; the text content comprises a plurality of to-be-rendered characters; each character to be rendered is configured with a rendering aspect ratio; the rendering aspect ratio of each to-be-rendered character represents the ratio between the character width and the character height of each to-be-rendered character after rendering; rendering a reference character in the current page environment; determining the rendering size of each to-be-rendered character in the current page environment according to the rendering aspect ratio corresponding to the reference character, the rendering size of the reference character in the current page environment and the rendering aspect ratio corresponding to each to-be-rendered character; the sum of the rendering sizes of all the to-be-rendered characters in the current page environment is determined as the actual rendering size of the text content, and through the method and device, the problems that in the related technology, due to the fact that a browser executes backflow and redrawing, computing resource consumption is large, and the page is stuck are solved.

Description

Technical Field

[0001] The embodiments of the present application relate to the technical field of Internet software development, and more specifically, to a method, device, storage medium and electronic device for calculating text rendering size. Background Art

[0002] In modern Web development, dynamically obtaining the size of elements in the Document Object Model (DOM) is a common requirement, especially when implementing responsive layouts, dynamically adjusting interfaces, or performing complex page animations. Currently, there are two main technologies for obtaining the size information of DOM nodes: one is to use the Window.getComputedStyle() method, and the other is to use the Element.getBoundingClientRect() method.

[0003] The Window.getComputedStyle() method provides the ability to access the applied style of an element. It returns a ComputedStyle object that contains all CSS property values. However, when this method is called to obtain the size attributes such as width and height of a specific element, the browser will trigger layout calculation, i.e. reflow, to ensure that the style and layout of the element are up to date. If the size of the element needs to be obtained immediately afterwards, the browser needs to further trigger repainting to redraw the element on the screen.

[0004] The Element.getBoundingClientRect() method directly returns the size and position information of an element relative to the viewport. Although this method can provide more accurate size data, it also requires the browser to complete reflow and repaint operations to ensure that the returned size is the latest.

[0005] The problem with the above two methods is that when a web application frequently dynamically adds text DOM nodes and immediately obtains their size, each call forces the browser to perform a reflow and redraw, which consumes a lot of computing resources, especially when there are a large number of elements or the page is complex. This not only leads to a decrease in page performance, but also causes obvious freezes, seriously affecting the user experience. Summary of the invention

[0006] The embodiments of the present application provide a method, device, storage medium and electronic device for calculating text rendering size, so as to at least solve the problems in the related art of large consumption of computing resources and page jamming caused by browser reflow and redrawing.

[0007] According to one aspect of an embodiment of the present application, a method for calculating a text rendering size is provided, comprising: obtaining text content to be rendered; the text content comprises a plurality of characters to be rendered; each of the plurality of characters to be rendered is configured with a rendering aspect ratio; the rendering aspect ratio of each character to be rendered represents the ratio between the character width and the character height after rendering of each character to be rendered; rendering a reference character in a current page environment; the reference character is configured with a specified rendering aspect ratio; determining the rendering size of each character to be rendered in the current page environment according to the rendering aspect ratio corresponding to the reference character, the rendering size of the reference character in the current page environment, and the rendering aspect ratio corresponding to each character to be rendered; and determining the sum of the rendering sizes of each character to be rendered in the current page environment as the actual rendering size of the text content.

[0008] According to another aspect of an embodiment of the present application, a device for calculating text rendering size is provided, comprising: a text input module, used to obtain text content to be rendered; the text content comprises a plurality of characters to be rendered; each of the plurality of characters to be rendered is configured with a rendering aspect ratio; the rendering aspect ratio of each character to be rendered represents the ratio between the character width and the character height after rendering of each character to be rendered; a reference module, used to render a reference character in a current page environment; the reference character is configured with a specified rendering aspect ratio; a character rendering size calculation module, used to determine the rendering size of each character to be rendered in the current page environment according to the rendering aspect ratio corresponding to the reference character, the rendering size of the reference character in the current page environment and the rendering aspect ratio corresponding to each character to be rendered; and a text rendering size calculation module, used to determine the sum of the rendering sizes of each character to be rendered in the current page environment as the actual rendering size of the text content.

[0009] According to another aspect of the embodiments of the present application, a computer-readable storage medium is provided, in which a computer program is stored, wherein the computer program is configured to execute the above-mentioned text rendering size calculation method when running.

[0010] According to another aspect of an embodiment of the present application, an electronic device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the method for calculating the text rendering size through the computer program.

[0011] According to another aspect of the embodiments of the present application, a computer program product is provided, including a computer program, which, when executed by a processor, implements the steps in any of the above-mentioned text rendering size calculation method embodiments.

[0012] Through the embodiments of the present application, a reference character is rendered in the current page environment, and the rendering size of each character to be rendered in the current page environment is determined according to the rendering aspect ratio corresponding to the reference character, the rendering size of the reference character in the current page environment, and the rendering aspect ratio corresponding to each character to be rendered in the text content to be rendered. By pre-calculating the rendering size of each character to be rendered, when text DOM nodes are frequently and dynamically added and their sizes are obtained, there is no need to trigger the browser's rearrangement and redrawing during actual rendering, thereby reducing browser consumption and reducing page freezes. BRIEF DESCRIPTION OF THE DRAWINGS

[0013] Figure 1 It is a hardware structure block diagram of an optional method for calculating text rendering size in an embodiment of the present application;

[0014] Figure 2 is a flowchart of an optional method for calculating text rendering size according to an embodiment of the present application;

[0015] Figure 3 is a schematic diagram of actual rendering size of each character to be rendered in an optional text content according to an embodiment of the present application;

[0016] Figure 4 is a schematic diagram of an optional classification of each character to be rendered in text content according to an embodiment of the present application;

[0017] Figure 5 is a structural block diagram of an optional device for calculating text rendering size according to an embodiment of the present application;

[0018] Figure 6 It is a structural block diagram of an optional electronic device according to an embodiment of the present application. DETAILED DESCRIPTION

[0019] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work should fall within the scope of protection of the present application.

[0020] It should be noted that the terms "first", "second", etc. in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable where appropriate, so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device comprising a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0021] According to one aspect of an embodiment of the present application, a method for calculating a text rendering size is provided. Optionally, in this embodiment, the method for calculating a text rendering size can be applied to Figure 1 In the hardware environment composed of the terminal device 102 and the server 104 shown in FIG. Figure 1 As shown, the server 104 is connected to the terminal device 102 via a network, and can be used to provide services (such as application services, etc.) for the terminal or a client installed on the terminal. A database can be set on the server or independently of the server to provide data storage services for the server 104. Cloud computing and / or edge computing services can be configured on the server or independently of the server to provide data computing services for the server 104.

[0022] The above network may include but is not limited to at least one of the following: wired network, wireless network. The above wired network may include but is not limited to at least one of the following: wide area network, metropolitan area network, local area network, and the above wireless network may include but is not limited to at least one of the following: WIFI, Bluetooth. The terminal device 102 may not be limited to a PC, a mobile phone, a tablet computer, a car computer, etc.

[0023] The method for calculating the text rendering size of the embodiment of the present application can be executed by the terminal device 102, or can be executed by the server 104 and the terminal device 102 together. Taking the method for calculating the text rendering size of the embodiment executed by the terminal device 102 as an example, Figure 2 is a flowchart of an optional method for calculating text rendering size according to an embodiment of the present application, such as Figure 2 As shown, the process of the method may include the following steps:

[0024] Step S202, obtaining text content to be rendered; the text content includes multiple characters to be rendered; each of the multiple characters to be rendered is configured with a rendering aspect ratio; the rendering aspect ratio of each character to be rendered represents the ratio between the character width and the character height of each character to be rendered after rendering.

[0025] The text content to be rendered refers to a set of words or characters that need to be displayed on the screen through a web page, application program, etc.

[0026] The character to be rendered is the smallest unit that constitutes the text content to be rendered. The character to be rendered can include various phonetic characters, letters, numbers, punctuation marks, symbols, text patterns (emoticons), spaces, etc. For example, a Chinese character, an English letter, a number, or a punctuation mark can be regarded as a character.

[0027] The rendering aspect ratio refers to the ratio of the width to the height of each character when it is rendered on a web page. For example, an "i" may be very thin and long when rendered, with a ratio of width to height close to 1:5, while an "m" may be wider, with a ratio close to 1:2. Each rendered character has the same rendering aspect ratio under different fonts, which means that no matter which font is used, the ratio of the width to the height of the same character (such as "i") remains unchanged, but the actual size (the specific values ​​of the width and height) will change with the font size setting.

[0028] It should be noted that all text stored in the computer (including various types of phonetic characters, letters, numbers, punctuation marks, symbols, text patterns (emoticons), spaces, etc.) correspond to a unique Unicode code point, and each character is configured with a corresponding rendering logic (that is, the text rendering aspect ratio of the text in different fonts). Usually, a dictionary or database is pre-built to store the rendering aspect ratio corresponding to the characters marked by each Unicode code point.

[0029] Optionally, the terminal device obtains text content to be rendered, extracts each independent character to be rendered from the text content, and determines a rendering aspect ratio corresponding to each character to be rendered from a pre-built dictionary or database according to the Unicode code corresponding to each character to be rendered.

[0030] Step S204, rendering a reference character in the current page environment; the reference character is configured with a specified rendering aspect ratio.

[0031] Among them, the current page environment refers to the specific environmental conditions of the web page that the user is currently browsing, which includes but is not limited to the current font settings (such as font type, font size), font size, page layout (such as the position and size of elements), CSS style, etc.

[0032] A reference character is a reference character used to determine the actual rendering size of other characters in the current page environment. It has a specified rendering aspect ratio, which can be arbitrary. The selection of the reference character is not fixed, as long as its rendering aspect ratio is clear, easy to calculate, and can be normally rendered in the current page environment. The reference character can be used as a reference for calculating the actual rendering size of each character to be rendered in the current page environment. For example, for the convenience of calculation and explanation, the character "基" with a rendering aspect ratio of 1:1 and a font size of 12px is used as the reference character. Finally, the width and height of the reference character in the current page environment are both 12px. In this way, the corresponding relationship between the rendering aspect ratio (1:1) of the reference character and the actual rendering size (such as 12px × 12px) can be obtained.

[0033] Optionally, the terminal device determines a reference character based on the specified rendering aspect ratio, renders the reference character in the current page environment, and obtains the rendering size (including the rendering width and rendering height) of the reference character in the current page environment.

[0034] Step S206: Determine the rendering size of each character to be rendered in the current page environment according to the rendering aspect ratio corresponding to the reference character, the rendering size of the reference character in the current page environment, and the rendering aspect ratio corresponding to each character to be rendered.

[0035] Among them, the rendering size of each character to be rendered in the current page environment refers to the space size occupied by the character to be rendered when it is actually displayed in the current page environment, usually including two dimensions: width and height. The rendering size of each character to be rendered in the current page environment is jointly determined by the font, font size, page layout, CSS style, and browser rendering engine of the text in the current page environment.

[0036] Optionally, the terminal device looks up the corresponding rendering logic according to the Unicode encoding of each character to be rendered, so as to determine the rendering aspect ratio corresponding to each character to be rendered. Using the rendering aspect ratio of the reference character, the rendering size of the reference character in the current page environment, and the rendering aspect ratio corresponding to each character to be rendered, through proportional conversion, the rendering size of each character to be rendered in the current page environment is calculated.

[0037] In some embodiments, the following two techniques can be used to obtain the rendering size of the reference character in the current page environment: One is to use the Window.getComputedStyle() method, and the other is to use the Element.getBoundingClientRect() method.

[0038] In some embodiments, the calculation can be performed using the following formula: actual width of the character to be rendered = rendering width of the reference character * rendering aspect ratio of the character to be rendered / rendering aspect ratio of the reference character; the actual height of the character to be rendered can be obtained similarly.

[0039] Step S208: determining the sum of the rendering sizes of each character to be rendered in the current page environment as the actual rendering size of the text content.

[0040] The actual rendering size is the sum of the space occupied by all characters after rendering each character in the text on the browser page according to its corresponding rendering logic (i.e., rendering aspect ratio) in the current page environment. The actual rendering size of the text content usually also includes two dimensions, width and height, which reflects the overall size of the text when it is actually displayed on the browser page.

[0041] Optionally, the terminal device adds up the rendering widths of all characters to be rendered in the text content to obtain the overall rendering width of the text content. If the overall rendering width is less than or equal to the page width, the rendering height of the text content is determined as the rendering height of each character to be rendered; if the overall rendering width is greater than the page width, the number of lines occupied by the text content in the current page environment is determined, and the rendering height of the text content is determined based on the number of lines and the height of each line.

[0042] For example, Figure 3 FIG. 4 is a schematic diagram of the actual rendering size of each character to be rendered in the text content in an embodiment. Figure 3 As shown, assume that the text content to be rendered is: I am the test plan, where "I am the test plan" is the English expression of "I am a test plan". First, each character to be rendered in the text content to be rendered is classified based on its Unicode encoding. In this example, "I", "I", "Is", "Test", "Test", "Square", and "An" are all Chinese, Japanese, and Korean characters, and they are marked as CJK (Chinese, Japanese, and Korean) characters. It is assumed that CJK characters have the same rendering aspect ratio (such as 1:1) under the same font and font size. In this example, each letter and space in "I am the test plan" belongs to Latin characters, so English is marked as Latin characters, where there are multiple rendering aspect ratios corresponding to Latin characters, and each rendering aspect ratio corresponds to multiple characters. For example, the rendering aspect ratio corresponding to "I", "t", "l", and space is 1:5, the rendering aspect ratio corresponding to "a", "h", "e", "s", "p", and "n" is 1:3, and the rendering aspect ratio corresponding to "m" is 1:2.

[0043] Secondly, render a reference character onto the page. For example, select the character "基" (base), and set its font size to: 12px, with a rendering aspect ratio of 1:1. Use the Element.getBoundingClientRect() or

[0044] the Window.getComputedStyle() method to obtain the rendering size of this reference character in the current page environment. The final obtained result shows that both the width and height of the character "基" are 12px.

[0045] Then, using JavaScript, iterate through each character in the text content to be rendered "我是测试方案,I am the testplan" to obtain its Unicode encoding. Determine that the rendering aspect ratio corresponding to "我是测试方案," is 1:1. Since the rendering aspect ratio of the reference character (1:1) is the same as that of each character in the text content to be rendered, and the rendering size of the reference character in the current page environment is 12px × 12px, therefore, the rendering size of each character in "我是测试方案," in the current page environment is also 12px × 12px, that is, the width and height of "我", "是", "测", "试", "方", "案", "," at a font size of 12px are both 12px. Determine the multiple rendering aspect ratios corresponding to "I am the test plan", as well as the multiple characters corresponding to each rendering aspect ratio. Based on the correspondence between the rendering aspect ratio of the reference character (1:1) and its actual size (12px × 12px) in the current page environment, on the basis that the rendering aspect ratios of "I", "t", "l", and the space have been determined to be 1:5, through the proportional conversion relationship, it can be determined that the actual rendering height of "I", "t", "l", and the space is 12px, and the actual rendering width is 2.4px. According to the rounding principle, the actual rendering width is approximately equal to 2px. Similarly, the rendering aspect ratios of "a", "h", "e", "s", "p", and "n" are 1:3, the corresponding actual rendering height is 12px, and the actual rendering width is 4px. The rendering aspect ratio of "m" is 1:2, the corresponding actual rendering height is 12px, and the actual rendering width is 6px.

[0046] Finally, add up the rendering widths of the characters in the text content to be rendered. The total width obtained will be (12px * 7 characters) + (2px * 9 characters) + (4px * 8 characters) + (6px * 1 character) = 140px. If the text is displayed in a single line, then the height of the text content to be rendered will remain 12px.

[0047] Through the above steps S202 to S206, a reference character is rendered in the current page environment, and the rendering size of each character to be rendered in the current page environment is determined according to the rendering aspect ratio corresponding to the reference character, the rendering size of the reference character in the current page environment, and the rendering aspect ratio corresponding to each character to be rendered in the text content to be rendered. By pre-calculating the rendering size of each character to be rendered, when text DOM nodes are frequently and dynamically added and their sizes are obtained, there is no need to trigger the browser's reflow and redrawing during actual rendering, thereby reducing browser consumption and reducing page freezes.

[0048] In an exemplary embodiment, rendering a reference character in a current page environment includes:

[0049] Get the preset base character, create an invisible base element in the current page environment, and render the base character into the base element; the base character in the current page environment is invisible.

[0050] The base element refers to a base DOM element, which is an invisible element created in the current page environment for rendering base characters. The base element is used as a reference to determine the rendering size of other characters to be rendered in the current page environment by measuring the rendering size (such as width and height) of the base character in the current page environment.

[0051] Optionally, the terminal device creates a reference element (such as or ) and set its style to invisible, then add the preset base character as text content to the created base element.

[0052] It should be noted that although the reference element itself is invisible, its content (i.e., the reference character) will still be rendered by the browser and occupy the corresponding space. Therefore, the size of the space occupied by the reference character can be measured to obtain the rendering size of the reference character.

[0053] Through this embodiment, by creating an invisible reference element to render the reference characters, it is possible to avoid directly displaying unnecessary characters on the current page, thereby reducing the visual complexity of the page, and the use of an invisible reference element can ensure that the measured rendering size of the reference character is not affected by other elements or styles of the page, thereby ensuring that the measured rendering size of the reference character in the current page environment is more accurate.

[0054] In an exemplary embodiment, determining the rendering size of each character to be rendered in the current page environment according to the rendering aspect ratio corresponding to the reference character, the rendering size of the reference character in the current page environment, and the rendering aspect ratio corresponding to each character to be rendered includes:

[0055] 1. Classifying characters to be rendered in text content with the same rendering aspect ratio into a character category to obtain multiple character categories; each character category in the multiple character categories corresponds to a rendering aspect ratio; each character category includes characters to be rendered with a rendering aspect ratio corresponding to each character category.

[0056] Each character class corresponds to a specific rendering aspect ratio. For example, some characters may have the same width and height ratio when rendered due to their shape or design, and these characters will be classified into the same character class. For example, the rendering aspect ratio of Chinese, Japanese, and Korean characters is 1:1, so Chinese, Japanese, and Korean characters can be classified into a character class that corresponds to a rendering aspect ratio of 1:1.

[0057] Optionally, the terminal device identifies characters to be rendered in the text content, obtains a rendering aspect ratio of each character to be rendered, and classifies characters to be rendered with the same rendering aspect ratio into the same character category to obtain multiple character categories.

[0058] For example, Figure 4 Schematic diagram for classifying each character to be rendered in the text content in an embodiment. Assume the text content to be rendered is: 我是测试方案,I am the test plan, where "I am the test plan” is the English expression of "我是测试方案”. First, classify each character to be rendered in the text content to be rendered based on its Unicode encoding. In this example, "我”, "是”, "测”, "试”, "方”, "案”, ",” all belong to CJK unified ideographs. Assume they have the same rendering aspect ratio (such as 1:1) in the same font and font size. Therefore, they are classified into one category and marked as character category A. In this example, each letter and space in "I am the test plan” belongs to Latin characters. Among them, the rendering aspect ratios of "I”, "t”, "l”, and the space are 1:5. Therefore, they are classified into one category and marked as character category B. The rendering aspect ratios of "a”, "h”, "e”, "s”, "p” and "n” are 1:3. Therefore, they are classified into one category and marked as character category C. The rendering aspect ratio of "m” is 1:2. Therefore, it is classified into one category and marked as character category D.

[0059] II. Determine the rendering size of each character in each character category in the current page environment according to the rendering aspect ratio of the reference character, the rendering size of the reference character in the current page environment, and the rendering aspect ratio of the characters in each character category.

[0060] Optionally, for each character category, the terminal device uses the rendering aspect ratio of the reference character, the actual size of the reference character in the current page environment, and the rendering aspect ratio of the current character category to calculate the rendering size of each character in the current category in the current page environment.

[0061] For example, determine the rendering aspect ratio of the reference character (such as 1:1) and the actual size (such as both the width and height are 12px). For character category A, the rendering height (or width) of the characters in character category A can be calculated through the following formula:

[0062] The actual width of the character to be rendered = the rendering width of the reference character * the rendering aspect ratio of the character to be rendered / the rendering aspect ratio of the reference character; the actual height of the character to be rendered can be obtained in the same way.

[0063] Through this embodiment, the characters to be rendered are classified, which can avoid the need to measure the size and perform rendering calculations on each character to be rendered separately, and instead apply a unified size and rendering logic to characters of the same category. This approach significantly reduces the workload of repeated calculations, thereby improving rendering performance. In addition, since characters of the same category share the same rendering aspect ratio, the number of rearrangements and redraws triggered by size changes can be effectively reduced during frequent DOM operations (such as adding, deleting, or modifying nodes), which not only reduces the browser's resource consumption, but also significantly reduces page freezes, thereby improving the user experience.

[0064] In an exemplary embodiment, determining the rendering size of each character in each character category in the current page environment according to the rendering aspect ratio corresponding to the reference character, the rendering size of the reference character in the current page environment, and the rendering aspect ratio corresponding to the characters of each character category includes:

[0065] Taking each character category as the current character category, perform the following calculation operations to obtain the rendering size of each character in each character category in the current page environment: adjust the rendering size of the benchmark character in the current page environment based on the proportional relationship between the rendering aspect ratio corresponding to the benchmark character and the rendering aspect ratio corresponding to the character of the current character category, and determine the adjusted rendering size as the rendering size of each character in the current character category in the current page environment.

[0066] The ratio between the rendering aspect ratio corresponding to the reference character and the rendering aspect ratio corresponding to the character of the current character category refers to the mathematical relationship between the rendering aspect ratio of the reference character and the rendering aspect ratio of the character of the current character category. This ratio is usually used to determine how to adjust the size of other characters in the same character category according to the size of the reference character.

[0067] Optionally, the terminal device calculates the ratio between the rendering aspect ratio of the benchmark character and the rendering aspect ratio of the current character category, and based on the ratio, scales the rendering size of the benchmark character in the current page environment, and determines the scaled size as the rendering size of each character in the current character category in the current page environment.

[0068] For example, after determining the rendering aspect ratio (e.g., 1:1) and actual size (e.g., width and height are both 12px) of the reference character, for a character category D with a rendering aspect ratio of 1:2, the rendering size corresponding to each character in character category D is 12px×6px.

[0069] Through this embodiment, by pre-calculating and storing the rendering size of the benchmark characters and quickly adjusting the sizes of other characters according to the proportional relationship, the amount of calculation during real-time rendering can be significantly reduced, and the overall rendering efficiency can be improved. Especially when processing large amounts of text or complex layouts, it can reduce rendering delays and improve page response speed.

[0070] In an exemplary embodiment, before classifying the characters to be rendered having the same rendering aspect ratio among the multiple characters to be rendered into one character category to obtain the multiple character categories, the method further includes:

[0071] Determine an identifier corresponding to each character to be rendered in the text content; the identifier corresponding to each character to be rendered is used to identify the rendering aspect ratio corresponding to each character to be rendered; and determine the rendering aspect ratio corresponding to each character to be rendered according to the identifier corresponding to each character to be rendered.

[0072] Among them, each character to be rendered has a unique character identifier, which can be the Unicode encoding of the character itself, or a custom string (for example, generated based on a certain attribute or classification of the character). In an embodiment of the present application, the identifier corresponding to each character to be rendered refers to a rendering aspect ratio identifier associated with the character identifier, indicating the aspect ratio that the character should adopt when rendering. The identifier corresponding to each character to be rendered can be a numerical value (indicating a ratio) or a reference to an object containing ratio information.

[0073] Optionally, the terminal device pre-establishes a data structure (such as a dictionary or hash table) for storing the mapping of character identifiers to rendering aspect ratios. For each character category (such as letters, numbers, punctuation marks, etc.), the terminal device pre-determines a suitable rendering aspect ratio based on the visual characteristics and rendering requirements of the page, associates it with the corresponding character identifier, and writes the association relationship into the pre-established data structure. When classifying the characters to be rendered according to the rendering aspect ratio, the terminal device reads the text content, splits it into individual characters, determines its character identifier for each character (for example, using the Unicode encoding of the character), and searches for the corresponding rendering aspect ratio in the mapping based on its character identifier.

[0074] Through this embodiment, a unique identifier is assigned to each character, and the rendering aspect ratio is determined based on these identifiers, avoiding complex size measurement and calculation for each character, and using the predefined mapping relationship between the identifier and the aspect ratio to quickly determine the rendering size of each character. This not only reduces the amount of calculation, but also reduces the possibility of error, thereby improving the efficiency and accuracy of the overall rendering.

[0075] In an exemplary embodiment, determining the sum of the rendering sizes of each character to be rendered in the current page environment as the actual rendering size of the text content includes:

[0076] The total character size of the characters included in each character category is determined based on the number of characters included in each character category and the rendering size of each character in each character category in the current page environment; the sum of the total character sizes of the characters included in each character category is determined as the actual rendering size of the text content.

[0077] The total character size of a character category includes the total character width and character height in the character category. Since characters in the same character category have the same rendering aspect ratio, the rendering size of each character in each character category in the current page environment is the same. In other words, the character width in each character category is the same.

[0078] Optionally, the terminal device determines the product of the number of characters included in the current character category and the rendering width of each character in the current character category in the current page environment as the total character width of the current character category, and determines the height of each character included in the current character category as the character height of the current character category. The terminal device determines the sum of the total character widths of the characters included in each character category as the actual rendering width of the text content, and determines the character height of the characters included in each character category as the actual rendering height of the text content.

[0079] Through this embodiment, the total character width is determined by calculating the product of the number of characters in each character category and the rendering width, so that the actual rendering width of the text content in different character categories can be accurately calculated; and the actual rendering height of the text content is determined by the character height in each character category, so that the text content can be ensured not to be truncated or incompletely displayed in the vertical direction.

[0080] In an exemplary embodiment, after determining the sum of the rendering sizes of each character to be rendered in the current page environment as the actual rendering size of the text content, the method further includes:

[0081] In the current page environment, render the text content according to its actual rendering size.

[0082] Optionally, the terminal device determines the page area (such as a div element in the page) where the text content should be rendered based on the page layout and design requirements, and sets the width, height, and possible margin, padding and other style attributes of the rendering area based on the actual rendering size of the text content. If the text content is too long and exceeds the width of the rendering area, the terminal device segments the text content displayed on the current page, such as by line breaks or paging. The terminal device uses page rendering technology (such as HTML DOM operations, Canvas API, SVG, etc.) to draw the text content into the specified rendering area, and applies font, color, thickness and other styles to the text content based on design requirements.

[0083] By calculating the actual rendering size of the text content through this embodiment, the layout and arrangement of page elements can be controlled more accurately, avoiding problems such as text overflow or disordered layout.

[0084] It should be noted that, for the aforementioned method embodiments, for the sake of simplicity, they are all expressed as a series of action combinations, but those skilled in the art should be aware that the present application is not limited by the described order of actions, because according to the present application, certain steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in the specification are all preferred embodiments, and the actions and modules involved are not necessarily required by the present application.

[0085] Through the description of the above implementation methods, those skilled in the art can clearly understand that the method according to the above embodiment can be implemented by means of software plus a necessary general hardware server, and of course it can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of the present application is essentially or the part that contributes to the prior art can be embodied in the form of a software product, which is stored in a storage medium (such as ROM (Read-Only Memory) / RAM (Random Access Memory), a disk, or an optical disk), and includes a number of instructions for a terminal device (which can be a mobile phone, a computer, a server, or a network device, etc.) to execute the methods of each embodiment of the present application.

[0086] According to another aspect of the embodiments of the present application, a device for calculating text rendering size is also provided, which is used to implement the method for calculating text rendering size provided in the above embodiments, which has been described and will not be repeated. As used below, the term "module" can implement a combination of software and / or hardware for a predetermined function. Although the devices described in the following embodiments are preferably implemented in software, the implementation of hardware, or a combination of software and hardware, is also possible and conceivable.

[0087] Figure 5 is a structural block diagram of an optional text rendering size calculation device according to an embodiment of the present application, such as Figure 5 As shown, the device may include:

[0088] The text input module 501 is used to obtain text content to be rendered; the text content includes a plurality of characters to be rendered; each of the plurality of characters to be rendered is configured with a rendering aspect ratio; the rendering aspect ratio of each character to be rendered represents the ratio between the character width and the character height after each character to be rendered;

[0089] Referring to module 502, it is used to render a reference character in the current page environment; the reference character is configured with a specified rendering aspect ratio;

[0090] The character rendering size calculation module 503 is used to determine the rendering size of each character to be rendered in the current page environment according to the rendering aspect ratio corresponding to the reference character, the rendering size of the reference character in the current page environment, and the rendering aspect ratio corresponding to each character to be rendered;

[0091] The text rendering size calculation module 504 is used to determine the sum of the rendering sizes of each character to be rendered in the current page environment as the actual rendering size of the text content.

[0092] In an exemplary embodiment, the reference module 502 is further used to obtain a preset reference character, create an invisible reference element in the current page environment, and render the reference character into the reference element; the reference character in the current page environment is invisible.

[0093] In an exemplary embodiment, the character rendering size calculation module 503 is also used to classify the characters to be rendered with the same rendering aspect ratio in the text content into a character category to obtain multiple character categories; each character category in the multiple character categories corresponds to a rendering aspect ratio; each character category includes characters to be rendered with a rendering aspect ratio corresponding to each character category; based on the rendering aspect ratio corresponding to the benchmark character, the rendering size of the benchmark character in the current page environment, and the rendering aspect ratio corresponding to the characters of each character category, the rendering size of each character in each character category in the current page environment is determined.

[0094] In an exemplary embodiment, the character rendering size calculation module 503 is also used to take each character category as the current character category and perform the following calculation operations to obtain the rendering size of each character in each character category in the current page environment: according to the proportional relationship between the rendering aspect ratio corresponding to the benchmark character and the rendering aspect ratio corresponding to the character of the current character category, the rendering size of the benchmark character in the current page environment is adjusted, and the adjusted rendering size is determined as the rendering size of each character in the current character category in the current page environment.

[0095] In an exemplary embodiment, the character rendering size calculation module 503 is further used to determine an identifier corresponding to each character to be rendered in the text content; the identifier corresponding to each character to be rendered is used to identify the rendering aspect ratio corresponding to each character to be rendered; and the rendering aspect ratio corresponding to each character to be rendered is determined according to the identifier corresponding to each character to be rendered.

[0096] In an exemplary embodiment, the rendering size of each character in each character category is the same in the current page environment; the text rendering size calculation module 504 is further used to determine the total character size of the characters included in each character category based on the number of characters included in each character category and the rendering size of each character in each character category in the current page environment; and the sum of the total character sizes of the characters included in each character category is determined as the actual rendering size of the text content.

[0097] In an exemplary embodiment, the text rendering size calculation module 504 is further configured to render the text content in the current page environment according to the actual rendering size of the text content.

[0098] It should be noted that the examples and application scenarios implemented by the above modules and corresponding steps are the same, but are not limited to the contents disclosed in the above embodiments. It should be noted that the above modules as part of the device can be run in Figure 1 In the hardware environment shown, it can be implemented by software or by hardware, wherein the hardware environment includes a network environment.

[0099] According to another aspect of the embodiment of the present application, a storage medium is further provided. Optionally, in this embodiment, the storage medium can be used to execute the program code of any of the above-mentioned text rendering size calculation methods in the embodiment of the present application.

[0100] Optionally, in this embodiment, the storage medium may be located on at least one network device among a plurality of network devices in the network shown in the above embodiment.

[0101] Optionally, in this embodiment, the storage medium is configured to store a program code for executing any of the above-mentioned methods for calculating the text rendering size.

[0102] Optionally, the specific examples in this embodiment may refer to the examples described in the above embodiments, which will not be described in detail in this embodiment.

[0103] Optionally, in this embodiment, the storage medium may include, but is not limited to, various media that can store program codes, such as a USB flash drive, a ROM, a RAM, a mobile hard disk, a magnetic disk, or an optical disk.

[0104] According to another aspect of the embodiment of the present application, an electronic device for implementing the above-mentioned text rendering size calculation method is also provided. The electronic device may be a smart device, a server, a terminal, or a combination thereof.

[0105] Figure 6 is a structural block diagram of an optional electronic device according to an embodiment of the present application, such as Figure 6 As shown, it includes a processor 602, a communication interface 604, a memory 606 and a communication bus 608, wherein the processor 602, the communication interface 604 and the memory 606 communicate with each other through the communication bus 608, wherein,

[0106] Memory 606, used to store computer programs;

[0107] The processor 602 is used to implement the program code of any of the above-mentioned text rendering size calculation methods when executing the computer program stored in the memory 606.

[0108] Optionally, the communication bus may be a PCI (Peripheral Component Interconnect) bus, or an EISA (Extended Industry Standard Architecture) bus, etc. The communication bus may be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 6 The communication interface is used for communication between the above electronic device and other devices.

[0109] The memory may include RAM, or may include non-volatile memory, such as at least one disk memory. Optionally, the memory may also be at least one storage device located away from the aforementioned processor.

[0110] As an example, the memory 606 may include but is not limited to the modules in the computing device for the text rendering size. In addition, it may also include but is not limited to other module units in the computing device for the text rendering size, which will not be described in detail in this example.

[0111] The above-mentioned processor can be a general-purpose processor, which can include but not be limited to: CPU (Central Processing Unit), NP (Network Processor), etc.; it can also be DSP (Digital Signal Processing), ASIC (Application Specific Integrated Circuit), FPGA (Field-Programmable Gate Array) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components.

[0112] Optionally, the specific examples in this embodiment may refer to the examples described in the above embodiments, and this embodiment will not be described in detail here.

[0113] It can be understood by those skilled in the art that Figure 6 The structure shown is for illustration only. The device for implementing the above text rendering size calculation method may be a terminal device, which may be a smart phone (such as an Android phone, an iOS phone, etc.), a tablet computer, a PDA, a mobile Internet device (Mobile Internet Devices, MID), a PAD, and other terminal devices. Figure 6 The structure of the electronic device is not limited. Figure 6 More or fewer components (such as network interfaces, display devices, etc.) shown in, or having Figure 6 Different configurations shown.

[0114] An embodiment of the present application further provides a computer program product, which includes a computer program. When the computer program is executed by a processor, the steps in any of the above method embodiments are implemented.

[0115] An embodiment of the present application further provides another computer program product, including a non-volatile computer-readable storage medium, wherein the non-volatile computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps in any of the above method embodiments are implemented.

[0116] The embodiments of the present application also provide a computer program, which includes computer instructions, which are stored in a computer-readable storage medium; a processor of a computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device executes the steps in any one of the above method embodiments.

[0117] A person of ordinary skill in the art can understand that all or part of the steps in the various methods of the above embodiments can be completed by instructing the hardware related to the terminal device through a program, and the program can be stored in a computer-readable storage medium, which can include: a flash drive, ROM, RAM, a magnetic disk or an optical disk, etc.

[0118] The serial numbers of the above-mentioned embodiments of the present application are for description only and do not represent the advantages or disadvantages of the embodiments.

[0119] If the integrated units in the above embodiments are implemented in the form of software functional units and sold or used as independent products, they can be stored in the above computer-readable storage medium. Based on this understanding, the technical solution of the present application, or the part that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product, which is stored in a storage medium and includes several instructions for enabling one or more computer devices (which may be personal computers, servers, or network devices, etc.) to execute all or part of the steps of the methods described in the various embodiments of the present application.

[0120] In the above embodiments of the present application, the description of each embodiment has its own emphasis. For parts that are not described in detail in a certain embodiment, please refer to the relevant description of other embodiments.

[0121] In the several embodiments provided in the present application, it should be understood that the disclosed client can be implemented in other ways. Among them, the device embodiments described above are only schematic. For example, the division of the units is only a logical function division. There may be other division methods in actual implementation. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of units or modules, which can be electrical or other forms.

[0122] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution provided in this embodiment.

[0123] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, each unit may exist physically separately, or at least two units may be integrated into one unit. The above integrated unit may be implemented in the form of hardware or in the form of software functional units.

[0124] The above is only a preferred implementation of the present application. It should be pointed out that for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the principles of the present application. These improvements and modifications should also be regarded as the scope of protection of the present application.

Claims

1. A method for calculating text rendering size, characterized in that: include: Get the text content to be rendered; The text content includes a plurality of characters to be rendered; Each of the plurality of characters to be rendered is configured with a rendering aspect ratio; the rendering aspect ratio of each character to be rendered represents a ratio between a character width and a character height after rendering of each character to be rendered; Renders a base character in the current page context; The base character is configured with a specified rendering aspect ratio; Determine the rendering size of each to-be-rendered character in the current page environment according to the rendering aspect ratio corresponding to the reference character, the rendering size of the reference character in the current page environment, and the rendering aspect ratio corresponding to each to-be-rendered character; The sum of the rendering sizes of each character to be rendered in the current page environment is determined as the actual rendering size of the text content.

2. The method according to claim 1, characterized in that The rendering of a base character in the current page environment includes: A preset reference character is obtained, and an invisible reference element is created in the current page environment, and the reference character is rendered into the reference element; the reference character in the current page environment is invisible.

3. The method according to claim 1, characterized in that The step of determining the rendering size of each character to be rendered in the current page environment according to the rendering aspect ratio corresponding to the reference character, the rendering size of the reference character in the current page environment, and the rendering aspect ratio corresponding to each character to be rendered comprises: Classifying the characters to be rendered in the text content having the same rendering aspect ratio into a character category to obtain a plurality of character categories; each character category in the plurality of character categories corresponds to a rendering aspect ratio; each character category includes the characters to be rendered having the rendering aspect ratio corresponding to the character category; The rendering size of each character in each character category in the current page environment is determined according to the rendering aspect ratio corresponding to the reference character, the rendering size of the reference character in the current page environment, and the rendering aspect ratio corresponding to the characters of each character category.

4. The method according to claim 3, characterized in that The step of determining the rendering size of each character in each character category in the current page environment according to the rendering aspect ratio corresponding to the reference character, the rendering size of the reference character in the current page environment, and the rendering aspect ratio corresponding to the characters in each character category comprises: Taking each character category as the current character category, the following calculation operation is performed to obtain the rendering size of each character in each character category in the current page environment: According to the proportional relationship between the rendering aspect ratio corresponding to the benchmark character and the rendering aspect ratio corresponding to the characters of the current character category, the rendering size of the benchmark character in the current page environment is adjusted, and the adjusted rendering size is determined as the rendering size of each character in the current character category in the current page environment.

5. The method according to claim 3, characterized in that: Before classifying the characters to be rendered having the same rendering aspect ratio among the multiple characters to be rendered into one character category to obtain multiple character categories, the method further includes: Determine an identifier corresponding to each character to be rendered in the text content; the identifier corresponding to each character to be rendered is used to identify a rendering aspect ratio corresponding to each character to be rendered; According to the identifier corresponding to each to-be-rendered character, a rendering aspect ratio corresponding to each to-be-rendered character is determined.

6. The method according to claim 3, characterized in that The rendering size of each character in each character category in the current page environment is the same; and the sum of the rendering sizes of each character to be rendered in the current page environment is determined as the actual rendering size of the text content, including: Determining the total character size of the characters included in each character category according to the number of characters included in each character category and the rendering size of each character in each character category in the current page environment; The sum of the total character sizes of the characters included in each character category is determined as the actual rendering size of the text content.

7. The method according to any one of claims 1 to 6, characterized in that: After determining the sum of the rendering sizes of each character to be rendered in the current page environment as the actual rendering size of the text content, the method further includes: In the current page environment, the text content is rendered according to an actual rendering size of the text content.

8. A device for calculating text rendering size, characterized in that: include: Text input module, used to obtain the text content to be rendered; The text content includes a plurality of characters to be rendered; Each of the plurality of characters to be rendered is configured with a rendering aspect ratio; the rendering aspect ratio of each character to be rendered represents a ratio between a character width and a character height after rendering of each character to be rendered; The reference module is used to render a reference character in the current page environment; The base character is configured with a specified rendering aspect ratio; a character rendering size calculation module, configured to determine the rendering size of each to-be-rendered character in the current page environment according to the rendering aspect ratio corresponding to the reference character, the rendering size of the reference character in the current page environment, and the rendering aspect ratio corresponding to each to-be-rendered character; The text rendering size calculation module is used to determine the sum of the rendering sizes of each character to be rendered in the current page environment as the actual rendering size of the text content.

9. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, wherein the computer program implements the steps of any one of the methods of claims 1 to 7 when executed by a processor.

10. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 7 are implemented.

Images