Text layout method and device and storage medium

Abstract

The embodiment of the invention provides a text layout method and device and a storage medium, and relates to the technical field of computers. In the text layout method, whether parameters of a target control are changed or not is monitored, and under the condition that it is monitored that the parameters of the target control are changed, a first text to be displayed in the target control, the width of a target icon area and a target line occupied by the target icon area in the target control are obtained; according to the width of the target icon area, generating a filling text, and splicing the filling text with the first text to obtain a second text; for the target line, performing simulation rendering on the text starting from the target line in the second text in a single-line tiling mode to judge whether the second text is cut off by the target boundary or not; if the first text is cut off, determining a text broken line position, corresponding to the target line, of the first text, and carrying out text line feed at the text broken line position, so that the target icon is avoided by the text of the target line, and the space utilization rate is improved.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a text layout method, device, and storage medium. Background Art

[0002] The construction of an application (Application, referred to as APP) is inseparable from the construction of a user interface (UserInterface, referred to as UI). In actual applications, a common layout requirement of the user interface is to display text in a display control and display a function icon at the end of the text line. In order to avoid overlap between text content and function icons, technicians usually set text margins so that the text content as a whole avoids the right space or the upper space of the display control, so as to facilitate the display of function icons in the right space or the upper space. However, this processing method will cause unnecessary blank spaces in the text layout, reduce the text displayed in the same space, and reduce the space utilization rate, which will also lead to the destruction of the integrity of the text when the text is too long. Summary of the Invention

[0003] Embodiments of the present application provide a text layout method, device, and storage medium for enabling text to accurately avoid icons in a fixed area.

[0004] In a first aspect, an embodiment of the present application provides a text layout method, the method comprising:

[0005] Monitor whether parameters of a target control change, where the target control is used to display a first text and a target icon;

[0006] When a change in a parameter of a target control is detected, obtaining the first text to be displayed in the target control, the width of a target icon area in the target control for displaying a target icon, and the target row occupied by the target icon area in the target control;

[0007] Generate fill text according to the width of the target icon area, and concatenate the fill text with the first text to obtain a second text;

[0008] For the target line, simulate rendering the text starting from the target line in the second text in a single-line tiled mode to determine whether the second text will be truncated by the target boundary;

[0009] If the second text is cut off by the target boundary during the simulated rendering, a text line break position of the first text corresponding to the target line is determined, and the text is wrapped at the text line break position.

[0010] In a second aspect, an embodiment of the present application further provides a text layout method and apparatus, the apparatus comprising:

[0011] A monitoring module, configured to monitor whether parameters of a target control change, where the target control is configured to display a first text and a target icon;

[0012] an acquisition module, configured to acquire, upon monitoring a change in a parameter of a target control, a first text to be displayed in the target control, a width of a target icon area in the target control for displaying a target icon, and a target row occupied by the target icon area in the target control;

[0013] a splicing module, configured to generate a filler text according to the width of the target icon area, and splice the filler text with the first text to obtain a second text;

[0014] a simulation module, configured to simulate rendering of the text starting from the target line in the second text in a single-line tiled mode for the target line, so as to determine whether the second text will be truncated by the target boundary;

[0015] The processing module is configured to determine a line break position of the first text corresponding to the target line if the second text is cut off by the target boundary in the simulated rendering, and perform a line break on the first text at the line break position.

[0016] In a third aspect, an embodiment of the present application further provides an electronic device comprising: a memory and a processor; wherein the memory stores executable code, and when the executable code is executed by the processor, the processor can at least implement the text layout method described in the first aspect.

[0017] In a fourth aspect, an embodiment of the present invention provides a non-transitory machine-readable storage medium, on which executable code is stored. When the executable code is executed by a processor of an electronic device, the processor can at least implement the text layout method described in the first aspect.

[0018] In a fifth aspect, an embodiment of the present invention provides a computer program product, which includes a computer program or instructions. When the computer program or instructions are executed by a processor, the processor is enabled to implement the text layout method as described in the first aspect above.

[0019] In the text layout method provided in the embodiment of the present application, filler text is generated according to the width of the target icon area, so as to simulate the actual space occupied by the target icon by filling text. The text starting from the target row in the second text is simulated and rendered in a single-line tiled mode to determine whether the second text will be cut off by the target boundary in the target row. If the second text is cut off by the target boundary in the target row in the simulated rendering, it indicates that the actual rendering length of the first text in the target row has an overlapping conflict with the target icon, and the text line break position corresponding to the first text in the target row is determined, that is, the position of avoiding the target icon, and the text is wrapped at the text line break position, so that the text of the target row avoids the target icon without setting a fixed right margin and top margin. In addition, the method provided in the embodiment of the present application only performs simulated rendering on the target row occupied by the target icon area, so that only the text of the target row avoids the target icon, and the text of the non-target row does not need to avoid the target icon. Therefore, the text display width of the non-target row is larger than the display width of the text of the target row. The text of the non-target row can be displayed in the left and right extension areas or the upper and lower extension areas corresponding to the target icon area, thereby improving space utilization, allowing more text to be displayed, and reducing the degree of damage to the integrity of the text. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] The drawings described herein are used to provide a further understanding of the present application and constitute a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:

[0021] Figure 1 A schematic diagram of a text layout scenario provided in an embodiment of the present application;

[0022] Figure 2 A flowchart of a text layout method provided in an embodiment of the present application;

[0023] Figure 3 A schematic diagram of another text layout scenario provided in an embodiment of the present application;

[0024] Figure 4 A schematic diagram of another text layout scenario provided in an embodiment of the present application;

[0025] Figure 5 A schematic diagram of another text layout scenario provided in an embodiment of the present application;

[0026] Figure 6 A schematic diagram of the structure of a text layout device provided in an embodiment of the present application;

[0027] Figure 7 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0028] To make the purpose, technical solutions, and advantages of this application more clear, the technical solutions of this application will be clearly and completely described below in conjunction with the specific embodiments of this application and the corresponding drawings. Obviously, the embodiments described are only part of the embodiments of this application, not all of them. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of this application.

[0029] Text layout refers to the arrangement and presentation of text content in an interface. It determines how text is organized, aligned, wrapped, and truncated, directly affecting the user's readability and visual experience. For user interfaces, a common layout requirement is to display text in a display control and display a function icon at the end of the text line. For example, Figure 1 As shown, the application interface can display a first display control 11, in which text can be displayed, and a favorites icon 12 can be displayed at the end of the first line of text. In order to avoid the text content from overlapping with the function icon, technicians usually set the text margin of the display control so that the text avoids the function icon. For example, Figure 1 As shown in the first display control 11 in FIG, a fixed right margin can be set for the text in the first display control 11 so that the text content as a whole avoids the right space of the first display control 11, so as to display the favorites icon 12 in the right space. Figure 1 As shown in the second display control 13 in the figure, a fixed top margin can be set for the text in the second display control 13 so that the text content as a whole avoids the upper space of the second display control 13, so as to display the favorites icon 12 in the upper space.

[0030] However, when setting a fixed right margin or top margin in a display control, if the space required for the function icon is smaller than the reserved right margin or top margin, unnecessary blank space will be generated in the text layout, and the text displayed in the same space will be reduced, resulting in low space utilization.

[0031] Furthermore, due to the low space utilization, when the text is too long, the number of lines required for the display control to display the text may increase. Display controls generally limit the number of lines for text display. When the number of lines increases, the text that exceeds the number of lines will be truncated. The truncated text cannot be displayed normally, which will destroy the integrity of the text. For example, before the avoidance function icon, the number of lines required to display the text is 4 lines, and after the avoidance function icon, the number of lines required to display the text is 5 lines. If the display control limits the number of lines to 4, the text on the 5th line will be truncated, such as Figure 1 As shown in the third display control 14 in , the truncated text is displayed as an ellipsis.

[0032] In order to solve the above technical problems, the embodiment of the present application provides a text layout method. When a change in the parameters of the target control is detected, the first text to be displayed in the target control, the width of the target icon area for displaying the target icon in the target control, and the target row occupied by the target icon area in the target control can be obtained; and fill text is generated according to the width of the target icon area, and the fill text is spliced ​​with the first text to obtain the second text. For the target row, the text starting from the target row in the second text is simulated and rendered in a single-line tiled mode to determine whether the second text will be truncated by the target boundary; if the second text is truncated by the target boundary in the simulated rendering, the text line break position corresponding to the target row of the first text is determined, and the text is wrapped at the text line break position. In this way, the text of the target row avoids the target icon without setting a fixed right margin and top margin. In addition, the method provided in the embodiment of the present application only performs simulated rendering on the target row occupied by the target icon area, so that only the text of the target row avoids the target icon, and the text of the non-target row does not need to avoid the target icon. Therefore, the text display width of the non-target row is larger than the display width of the text of the target row. The text of the non-target row can be displayed in the left and right extension areas or the upper and lower extension areas corresponding to the target icon area, thereby improving space utilization, allowing more text to be displayed, and reducing the degree of damage to the integrity of the text.

[0033] The text layout method provided in the embodiment of the present application is described in detail below with reference to the accompanying drawings.

[0034] The text layout method provided in the embodiments of the present application can be executed by an electronic device, which can be a terminal device such as a PC, a laptop, a smartphone, or a server. The server can be a physical server including an independent host, or a virtual server, or a cloud server or server cluster, which is not limited in the embodiments of the present application.

[0035] The text layout method provided in the embodiment of the present application can also be completed by end-cloud collaboration, wherein the display function is deployed on the client and the data processing function is deployed on the cloud. After the cloud assists in completing the data processing, the data processing results are returned to the client, and the client performs the actual rendering and display.

[0036] For example, Figure 2 This is a flow chart of a text layout method provided in an embodiment of the present application. Figure 1 As shown, the method may include the following steps S201-S206.

[0037] S201: Monitor whether parameters of a target control change, where the target control is used to display a first text and a target icon.

[0038] S202, when a change in a parameter of a target control is detected, obtain a first text to be displayed in the target control, a width of a target icon area in the target control for displaying a target icon, and a target row occupied by the target icon area in the target control.

[0039] S203: Generate a filler text according to the width of the target icon area, and concatenate the filler text with the first text to obtain a second text.

[0040] S204 : For the target line, simulate rendering is performed on the text starting from the target line in the second text in a single-line tiled mode to determine whether the second text will be truncated by the target boundary.

[0041] S205: If the second text is cut off by the target boundary during the simulated rendering, determine a text line break position of the first text corresponding to the target line.

[0042] S206: Wrap the text at the text line break position.

[0043] In the embodiment of the present application, the target control is a control that can display text, and supports the rendering and display of plain text and rich text. The target control also supports the setting of styles such as font, font size, color, and the setting of text layout modes such as single-line truncation, multi-line truncation, automatic line break, and the setting of sizes such as inner margin, control width, and height. In the embodiment of the present application, developers are allowed to flexibly adjust the width and height of the control to adapt to different interface requirements. In some implementations, the target control can also be described as a text (Text) control, a display control, a container, a component, etc.

[0044] The content to be displayed in the target control can be referred to as the first text, where the language type of the first text can be Chinese, English, etc. In the embodiment of the present application, the language type of the text supports dynamic switching. For example, the language type of the text in the target control can be switched from Chinese to English, and the first text to be displayed is English text. After the properties of the target control are configured, the first text will be rendered and displayed within a specified number of lines according to a preset style, where the preset style is the style set for the target control.

[0045] The target control integrates the ability to embed functional icons, such as favorites, settings, and sharing icons. The target control supports positioning functional icons anywhere in the text flow, for example, at the end of the first line, the end of the second line, or the end of multiple lines, and the size (width and height) of the area where the functional icons are located supports pre-setting and modification. For ease of description and distinction, the functional icon that needs to be displayed in the target control is called the target icon, and the display area occupied by the target icon in the target control is called the target icon area.

[0046] Developers can perform comprehensive property settings for the target control, including but not limited to the settings of style, layout, size, and function icon position, and at the same time, set a text layout method for the target control. The text layout method can monitor in real time whether the properties of the target control have changed. When the property changes of the target control are detected, the system will automatically trigger the text measurement process, calculate the latest text layout, and finally drive the rendering engine to complete the re-rendering of the text based on the latest text layout. In an embodiment of the present application, through the text layout method, the text layout can be adaptively and dynamically adjusted after the property of the target control changes, so that the text in the target line of the first text is truncated and displayed to avoid the function icon, and the text of other lines is displayed normally, thereby improving space utilization while avoiding text intrusion into the icon area.

[0047] Among them, truncated display means that the text width of the target row is the total width of the target control minus the width of the target icon area minus the basic margin. Normal display means that the text width of the non-target row is the total width of the target control minus the basic margin. Among them, width refers to the distance in the direction of text flow. For example, if the text is in conventional horizontal writing mode, the width means the extension distance in the horizontal direction. The basic margin can be 0 characters or 1 character, etc., and this application does not limit this.

[0048] The text is displayed in the target control at the display behavior granularity. The target row refers to the display row where the function icon is located. The number of rows can be one or more, and there is no limit on this. Figure 1 Taking the favorites icon 12 shown as an example, favorites icon 12 occupies one display row, meaning the number of target rows is one. The target row is specifically related to the location of the target icon. For example, if the target icon is located in the first row of the target control, the target row refers to the first row of the target control. For another example, if the target icon is located in the second row of the target control, the target row refers to the second row of the target control. For another example, if the target icon occupies multiple rows of the target control, the target row refers to one of the multiple rows occupied by the target icon. In this case, simulation rendering can be performed for each target row separately.

[0049] In an embodiment of the present application, the text layout method can be implemented by a modern UI toolkit (Jetpack Compose). Among them, Jetpack Compose is based on a declarative programming model, uses the Kotlin language and builds a user interface through the @Composable function, and responds dynamically through a state management mechanism. The developer only needs to describe the changeable state. The state described here can be related parameters that affect the layout style of the target control, such as text content, the size of the target control, the size of the target icon area, the position of the target icon area, etc. When any state changes, the text line break position will automatically update with the change of the state.

[0050] There are many scenarios in which the state changes. Exemplarily, the scenarios in which the text content of the target control changes include, but are not limited to, the following scenarios: the target control changes from the initial state to a state filled with text; after the target control is applied to the user interface, the language type of the text switches; the backend data source bound to the target control changes. Exemplarily, the scenarios in which the size of the target control changes include, but are not limited to, the following scenarios: the width of the target control is set to the target value from the initial state; the size of the window where the target control is located changes; the background permissions are dynamically adjusted; the user drags the edge of the control or directly changes the width of the control through interface operations; the electronic device rotates the screen horizontally or vertically. Exemplarily, the scenarios in which the position of the target icon area changes include, but are not limited to, the following scenarios: the electronic device rotates the screen horizontally or vertically; user configuration adjustment; visual mode switching. The embodiments of the present application are not listed one by one here.

[0051] The following describes the monitoring and response process for states involving text content and the size of the target control. For example, the remember(key1) function can be used to monitor changes in the target control's text content in real time. Furthermore, the onSizeChanged callback can be used to obtain the component width in real time to accurately detect changes in the target control's size. LaunchedEffect can then be used to establish a collaborative monitoring relationship, responding to changes in text content and component width, forming a complete dynamic monitoring chain.

[0052] Specifically, when using the remember(key1) function to monitor text content changes in real time, you can use the remember() function in combination with mutableStateOf to create an observable state object txt and input the parameter text for the remember() function. For example, the code implementation can be expressed as: var txt by remember(key1=text){mutableStateOf(text)}. When the text parameter changes, this change will be passed to the remember function through the key1 parameter, and the value of mutableStateOf will change. Among them, text represents the text content. In this way, when the text content of the target control changes, the remember(key1) function can monitor the text content change.

[0053] When using the onSizeChanged callback to obtain component width in real time, you can use the remember() function in conjunction with mutableStateOf to create an observable state object, width. For example, the code implementation can be expressed as: varwidth by remember{mutableStateOf(0)}. Furthermore, add a size change listener to the target control. For example, the code implementation can be expressed as: modifier.onSizeChanged{width = it.width}. Whenever the component width changes, the listener's onSizeChanged callback is triggered, and the width state is updated to the current component width, and the value of mutableStateOf changes. This allows accurate perception of size changes in the target control.

[0054] When the text content or the size of the target control changes, LaunchedEffect automatically starts a new coroutine scope. The coroutine performs time-consuming operations such as text measurement and hyphenation calculation in the thread pool. The coroutine is asynchronous with the UI rendering thread and does not block the UI rendering thread. Moreover, the coroutine execution results are automatically synchronized with the UI rendering thread.

[0055] The method provided in the embodiment of the present application utilizes the characteristics of the Compose declarative programming model, tracks text content and layout changes in real time through the state management mechanism, and uses the onSizeChanged callback to accurately perceive changes in container size, thereby achieving dynamic response changes and ensuring accurate rendering of text in a dynamic layout environment, with adaptability and flexibility. In addition, the LaunchedEffect mechanism not only ensures the security of asynchronous operations, but also avoids resource leakage problems caused by changes in component life cycles through the cancellation feature of the coroutine. The design of LaunchedEffect follows the one-way data flow principle of Compose, ensuring that the logic between state changes and UI updates is clear and predictable, thereby effectively preventing the occurrence of inconsistent states.

[0056] The implementation process of text measurement and hyphenation calculation is described in detail below: First, the first text to be displayed in the target control, the width of the target icon area to be displayed, and the target row corresponding to the target icon area in the target control are obtained.

[0057] Then, fill text is generated according to the width of the target icon area. The length of the fill text is greater than or equal to the width of the target icon area. Specifically, based on the style of the target control, the width of a single character under the current style is determined; based on the width of the target icon area and the width of a single character, the number of characters to be filled is determined; the fill text is generated by repeating a single character multiple times, and the number of repetitions is equal to the number of characters to be filled. For example, assuming that the width of the target icon area is 12 and the width of a single character is 3, the number of characters to be filled is 4, and the fill text is a string of 4 characters.

[0058] The purpose of generating filler text is to simulate the actual space occupied by the target icon to facilitate text layout measurement. After the filler text is generated, it is spliced ​​after the first text to form a spliced ​​composite text (hereinafter referred to as the second text). The second text is rendered, and the rendering performance of the second text can be used to determine whether the actual rendered length of the first text overlaps with the target icon.

[0059] Specifically, before simulated rendering, the text style (including font, size, weight, and other attributes) of the first text is accurately measured using the TextMeasurer, and these style parameters are fully applied to the rendering environment of the second text. Set the line breaking rules for simulated rendering: For text before the target line, use the automatic line break strategy, and automatically wrap when the text content exceeds the container width; for the target line and subsequent text, disable automatic line break and display ellipsis when overflow occurs.

[0060] During simulation rendering, for the text starting from the target line in the second text, that is, for the target line and subsequent text, a single-line tiled rendering mode is used for simulation calculation, so that the layout engine triggers a truncation judgment to determine whether the text starting from the target line in the second text will be truncated at the target boundary when displayed in a single line in the target control. If the text starting from the target line in the second text is truncated by the target boundary, it means that the actual rendering length of the first text has invaded the icon placeholder area, and the first text needs to wrap to avoid the target icon. If the text starting from the target line in the second text is not truncated by the target boundary, it means that there is no conflict in the layout space between the first text and the target icon, and the current layout state can be maintained and presented directly. Among them, the target boundary refers to the boundary of the maximum area where the target control can display text. For example, if the target control is set based on a margin of 0, the target boundary is the boundary of the target control, such as Figure 3 As shown in (a) in the figure. For another example, if the target control is set with a margin of 1 character, the target boundary is the position where the border of the target control is indented by 1 character width.

[0061] If the second text is truncated, the line break position of the first text in the target line can be determined. A line break character is inserted at this line break position, forcing the first text in the target line to wrap. This allows the first text to avoid the target icon. This embodiment of the application uses a padded text simulation algorithm and implements sub-pixel precision text layout measurement through TextMeasurer, ensuring that the measurement results are consistent with the actual rendering effect.

[0062] For example, Figure 3 As shown in (a), the first text is "salesman", the filler text is "xxxx", and the second text is "salesmanxxxx". In this example, the second text does not reach the left edge of the target icon after being tiled in a single line. In the simulated rendering, the second text is not truncated, and in the actual rendering, the first text is displayed normally. For example, Figure 3 As shown in (b), the first text is "drivinglicense," the filler text is "xxxx," and the second text is "drivinglicensexxxx." In this example, the second text, after being tiled in a single line, just reaches the target boundary. In the simulated rendering, the second text is not truncated, and in the actual rendering, the first text displays normally.

[0063] For example, Figure 4 As shown in (a), the first text is "one year driving", the filler text is "xxxx", and the second text is "one year drivingxxxx". In this example, the length of the second text in a single line exceeds the target boundary. In the simulated rendering, the second text is truncated. In the actual rendering, the first text needs to be wrapped. Figure 4 (b) and (c) in FIG. 5 give examples of first texts of different lengths, which will not be repeated here.

[0064] Determining the text line break position corresponding to the first text in the target line may include: determining the first position; and determining the text line break position corresponding to the first text in the target line according to the first position.

[0065] Specifically, the truncation position (first position) of the target line, that is, the position of the ellipsis, can be accurately located by the text measurer. Starting from the first position, the position of the nth character accumulated in reverse is the text line break position corresponding to the first text in the target line, that is, the line is broken before these n characters, and these n characters are moved to the next line. Among them, the length of n characters is greater than or equal to the width of the target icon. The embodiment of the present application does not limit the value of n. Exemplarily, the value of n can make the length of n characters equal to the width of the target icon, so that the text and the target icon just do not overlap, thereby making full use of the space. Exemplarily, the value of n can make the length of n characters equal to the width of the target icon plus the length of several characters. In this way, the space is effectively utilized, and a certain gap is made between the edge of the text and the target icon, which has a better visual effect.

[0066] For example, assuming that the target control adopts the normal text flow direction from left to right, the process of "accumulating n characters in reverse from the first position" is: taking the first position as the reference point, the character at the first position is the first character, and then traversing the characters in reverse order from right to left, measuring the adjacent left characters one by one, and after adding each character, determining whether the length of the added characters is greater than or equal to the width of the target icon area; until the nth character is added, the length of the added characters is greater than or equal to the width of the target icon area.

[0067] For example, continue to refer to Figure 4 ,like Figure 4 As shown in (a), during simulation rendering, an ellipsis is used at the position of the character "x", and the first position is the character "x". If the length of the character "x" is less than the width of the target icon, the second character "g" is added to the left. If the length of the character "xg" is less than the width of the target icon, the third character "n" is added to the left. If the length of the character "ngx" is less than the width of the target icon, the fourth character "i" is added to the left. If the length of the character "ingx" is equal to the width of the target icon, the position of the fourth character "i" can be used as the text break position corresponding to the first text in the target line.

[0068] In some implementations, after determining the text line break position, a line break character, such as "\n", can be directly inserted at the text line break position. Figure 4 As shown in (a), a line break character may be inserted before the character "i" of the first text, so that the character "ing" is moved to the next line during actual rendering.

[0069] In other implementations, after determining the text line break location, a semantic integrity check can be performed: first, a preset non-break location library is consulted to determine whether the current text line break location hits a restricted location in the non-break location library; if the current text line break location hits a restricted location, a secondary positioning is performed to update the text line break location. The restricted locations in the non-break location library include, but are not limited to, the middle of English words, the junctions of CJK characters, and Chinese punctuation marks.

[0070] During the secondary positioning, the characters can be traversed in reverse order starting from the nth character. Each time a character is traversed, it is determined whether the current character hits the limit position. If it hits the limit position, the traversal continues to the next character; if it does not hit the limit position, the current character position is used as the text break position, and a line break can be inserted before the current character.

[0071] For example, when the text language is Chinese, it can be determined whether the nth character is a Chinese punctuation mark. If the nth character is a punctuation mark, the traversal continues to the left to the n+1th character to determine whether the n+1th character is a Chinese punctuation mark; if the n+1th character is a punctuation mark, the traversal continues to the left to the n+2th character; if the n+1th character is not a punctuation mark, a line break is inserted before the n+1th character.

[0072] For example, when the text language is English, it can be determined whether the nth character is inside a semantic unit. If it is inside a semantic unit, continue to traverse the n+1th character to the left to determine whether the n+1th character is inside a semantic unit. If the n+1th character is inside a semantic unit, continue to traverse the n+2th character to the left; if the n+1th character is not inside a semantic unit, then insert a line break before the n+1th character. For example, Figure 4 As shown in (b), the nth character is "r". Breaking the line at "r" would destroy the complete English word. Instead, we can continue traversing to the left until we reach "m" and break the line before "m". This way, we can maintain the coherence of the English word without destroying any complete semantic units.

[0073] In this way, it can support the line breaking rules of different languages ​​such as Chinese and Western languages, select the line breaking position according to the language characteristics (avoiding punctuation in Chinese and breaking words in Western languages), solve the adaptation problems of long word languages ​​such as German or Chinese punctuation, improve the readability of the text, and be adaptive and flexible.

[0074] In other implementations, after determining the text line break position, validity verification can be performed. For example, it can be determined whether the cumulative number of characters n exceeds the maximum capacity of a single line of the control. In the case that the cumulative number of characters n exceeds the maximum capacity of a single line of the control, the breakpoint rollback mechanism will be automatically triggered to recalculate the effective line break position that meets the physical limitations of the control. For example, the target control can display a maximum of 10 characters in a single line. When the n obtained by the above calculation is equal to 11, the text line break position is invalid and the text line break position needs to be recalculated.

[0075] In other implementations, if the length of n characters is greater than the width of the target icon, after determining the text line break position, a hyphen may be inserted before the nth character, and then a line break may be inserted to ensure readability when the text is broken. Figure 4 As shown in (c), when the length of the character "erial" is greater than the width of the target icon, and the nth character is the character "e", a hyphen "-" and then a line break "\n" can be inserted before the character "e", thereby achieving the actual rendering effect shown in the figure.

[0076] After the hyphen and line break characters are inserted as described above, the electronic device updates the txt variable state and triggers new text rendering. The txt variable state update refers to the process of synchronously updating the content and attributes of the maintained text container object (txt variable). Specifically, it may include: 1) physical content update, that is, writing the newly inserted control characters into the text buffer; 2) metadata update, such as marking the text version number, modification timestamp, etc.; 3) dirty mark setting, notifying the rendering system that the text segment needs to be re-layout calculated. After text rendering, the text with the inserted hyphens and line breaks can be displayed.

[0077] It should be noted that when the target icon area occupies multiple lines, during simulation rendering, the target line is first locked as the first line of the target icon area, and the text break position of this line is calculated and recorded. After completing the first line detection, the target line is automatically switched to the second line of the target icon area. Based on the text break of the first line of the target icon area, the breakpoint context of the first line is inherited, and the text break position of the first line is used as the starting position for text measurement of the second line. The text measurement and line break calculation process is re-executed. This process will continue recursively until the last line of the icon area is processed, and multiple text break positions are obtained. Based on these multiple text break positions, the actual rendering is completed.

[0078] Exemplarily, the target icon area occupies the first and second rows of the target control. After obtaining the second text, firstly, for the first and subsequent texts, set to disable automatic line wrapping and display with ellipsis when overflowing, simulate rendering in a single-line tiled mode for the first and subsequent texts in the second text to determine whether the second text will be truncated by the target boundary in the first row; if the second text is truncated by the target boundary in the first row in the simulated rendering, determine the text line break position corresponding to the first text in the first row, and insert a line break character at the text line break position to wrap the text. Then, for the second and subsequent texts, set to disable automatic line wrapping and display with ellipsis when overflowing, simulate rendering in a single-line tiled mode for the second and subsequent texts in the second text to determine whether the second text will be truncated by the target boundary in the second row; if the second text is truncated by the target boundary in the second row in the simulated rendering, determine the text line break position corresponding to the first text in the second row, and insert a line break character at the text line break position to wrap the text. Exemplarily, as Figure 5 As shown in (a) in the figure, the target line is the first line. The text break position determined for the first line is the character "e", and the first line of text wraps at the character "e". Then, the target line switches to the second line, and the text starting from the second line begins with the character "e". The text measurement and line break calculation process is then executed.

[0079] Exemplarily, the target icon area occupies the second and third rows of the target control. After obtaining the second text, set the automatic line break policy for the first row, and for the second and subsequent rows of text, disable automatic line break and display with ellipsis when overflowing. For the second and subsequent rows of the second text, simulate rendering in a single-line tiled mode to determine whether the second text will be truncated by the target boundary in the second row; if the second text is truncated by the target boundary in the second row in the simulated rendering, determine the text break position corresponding to the first text in the second row, and insert a line break character at the text break position to wrap the text. At this time, the first row is automatically wrapped, and the second row is forced to break and wrap. Then, for the third and subsequent lines of text, set to disable automatic line wrapping and display with ellipsis when overflowing. For the third and subsequent lines of the second text, simulate rendering in a single-line tiled mode to determine whether the second text will be truncated by the target boundary on the third line; if the second text is truncated by the target boundary on the third line in the simulated rendering, determine the text break position corresponding to the first text on the third line, and insert a line break character at the text break position to wrap the text. For example, Figure 5 (b) in FIG. 5 shows an actual rendering effect, and the rendering process will not be described in detail here.

[0080] Since the target icon may appear in different positions such as the first row and the second row, hierarchical control can be used to adaptively insert icons in different positions; optimal space allocation can be achieved through row-level granularity control, which can realize precise text layout optimization.

[0081] In summary, the method provided in the embodiment of the present application dynamically responds to changes in container size, text content or icon area, performs efficient and accurate text layout measurement through the TextMeasurer text measurement tool, and intelligently selects the line break position to form a closed loop of "state change-dynamic measurement-intelligent line break-precise rendering". By dynamically measuring the text width and icon area, pixel-level accurate avoidance of the text end and the icon is achieved, visual overlap (such as the problem of text invading the icon area) is eliminated, and the space waste and text truncation problems caused by fixed spacing in traditional solutions are avoided, thereby achieving visual balance optimization and improving the aesthetics of the interface. Moreover, by intelligent line wrapping rather than truncation (such as TextOverflow.Ellipsis), the integrity of the text content display is improved, which is particularly suitable for multilingual dynamic text scenarios and can automatically adapt to multiple languages. The method provided in the embodiment of the present application is significantly superior to the traditional layout in the four dimensions of aesthetics, integrity, adaptability, and performance, while reducing developer costs and can be widely used in the field of mobile UI text layout.

[0082] It should be noted that the execution entities of the steps of the method provided in the above embodiment can all be the same device, or the method can be executed by different devices. For example, the execution entity of steps S201 to S202 and step S206 can be the client electronic device, and the execution entity of steps S203 to S205 can be the cloud electronic device.

[0083] In addition, in some of the processes described in the above embodiments and the accompanying drawings, multiple operations that appear in a specific order are included, but it should be clearly understood that these operations may not be performed in the order in which they appear in this document or may be performed in parallel. In addition, these processes may include more or fewer operations, and these operations may be performed in sequence or in parallel. It should be noted that descriptions such as "first" and "second" in this document are used to distinguish different messages, devices, modules, etc., and do not represent a sequential order, nor do they limit "first" and "second" to different types.

[0084] Figure 6 This is a structural diagram of a text layout device provided by another exemplary embodiment of the present application. Figure 6 As shown, the device includes: a monitoring module 61, an acquisition module 62, a splicing module 63, a simulation module 64, and a processing module 65.

[0085] The monitoring module 61 is used to monitor whether the parameters of the target control are changed, and the target control is used to display the first text and the target icon.

[0086] The acquisition module 62 is used to acquire the first text to be displayed in the target control, the width of the target icon area for displaying the target icon in the target control, and the target row occupied by the target icon area in the target control when a change in the parameters of the target control is monitored.

[0087] The splicing module 63 is configured to generate a filler text according to the width of the target icon area, and splice the filler text with the first text to obtain a second text.

[0088] The simulation module 64 is configured to simulate rendering of the text starting from the target line in the second text in a single-line tiled mode, so as to determine whether the second text will be truncated by the target boundary.

[0089] The processing module 65 is configured to determine a line break position of the first text corresponding to the target line if the second text is cut off by the target boundary during the simulated rendering, and perform a line break on the first text at the line break position.

[0090] Optionally, the parameters of the target control include at least one of the following: text content, size of the target control, position of the target icon area, and size of the target icon area.

[0091] Optionally, the simulation module 64 is specifically used to: perform simulated rendering in a single-line tiled mode according to preset simulation rules, the preset simulation rules including: for the text before the target line, use the automatic line break strategy, and automatically wrap and display when the text content exceeds the container width; for the target line and subsequent text, disable automatic line break, and display with ellipsis when overflow.

[0092] Optionally, the processing module 65 is specifically configured to: determine a first position, where the second text is cut off by the target boundary in the simulated rendering; and determine a line break position of the first text corresponding to the target line according to the first position.

[0093] Optionally, the processing module 65 is further specifically used to: start from the first position, reversely accumulate the position of the nth character as the text break position corresponding to the first text in the target line, wherein the length of n characters is greater than or equal to the width of the target icon.

[0094] Optionally, the processing module 65 is further configured to: determine whether the text line break position hits a restricted position in the non-line break position library; and update the text line break position if the text line break position hits a restricted position in the non-line break position library.

[0095] Optionally, when the target icon area occupies multiple lines of the target control, the target line is one of the multiple lines occupied by the target icon area, and the text starting from the target line is the text starting from the text break position of the line before the target line.

[0096] Optionally, the target icon area is located at the end of the first line of text in the target control.

[0097] Figure 7 This is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application. Figure 7 As shown, in practice, the electronic device includes: a memory 71 and a processor 72.

[0098] The memory 71 is used to store computer programs and may be configured to store various other data to support operations on the computing platform. Examples of such data include instructions for any application or method operating on the computing platform, data structures, contact data, phone book data, messages, images, videos, etc.

[0099] The processor 72 is coupled to the memory 71 and is used to execute the computer program in the memory 71, so as to: monitor whether the parameters of the target control change, the target control is used to display the first text and the target icon; when the parameter change of the target control is monitored, obtain the first text to be displayed in the target control, the width of the target icon area in the target control for displaying the target icon, and the target row occupied by the target icon area in the target control; generate fill text according to the width of the target icon area, and splice the fill text with the first text to obtain the second text; for the target row, simulate rendering the text starting from the target row in the second text in a single-line tiled mode to determine whether the second text will be truncated by the target boundary; if the second text is truncated by the target boundary in the simulated rendering, determine the text break position corresponding to the target row of the first text, and perform text wrap at the text break position.

[0100] Further, if Figure 7 As shown, the electronic device also includes: a communication component 73, a display 74, a power component 75, an audio component 76 and other components. Figure 7 Only some components are shown schematically, which does not mean that the electronic device only includes Figure 7 In addition, Figure 7 The components in the dotted box are optional components, not mandatory components, and the specific components depend on the product form of the working node. The working node of this embodiment can be implemented as a terminal device such as a desktop computer, laptop computer, smart phone or IOT device, or a server device such as a conventional server, cloud server or server array. If the working node of this embodiment is implemented as a terminal device such as a desktop computer, laptop computer, smart phone, etc., it can include Figure 7If the working node of this embodiment is implemented as a server device such as a conventional server, a cloud server or a server array, it may not include Figure 7 Components within the dotted box.

[0101] The above-mentioned memory can be implemented by any type of volatile or non-volatile memory device or a combination thereof, such as static random-access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic disk or optical disk.

[0102] The communication component is configured to facilitate wired or wireless communication between the device in which the communication component resides and other devices. The device in which the communication component resides can access a wireless network based on a communication standard, such as a 2G, 3G, 4G / LTE, 5G, or other mobile communication network, or a combination thereof. In an exemplary embodiment, the communication component receives broadcast signals or broadcast-related information from an external broadcast management system via a broadcast channel.

[0103] The above-mentioned display includes a screen, which may include a liquid crystal display (LCD) and a touch panel (TP). If the screen includes a touch panel, the screen may be implemented as a touch screen to receive input signals from the user. The touch panel includes one or more touch sensors to sense touch, slide, and gestures on the touch panel. The touch sensor can not only sense the boundary of the touch or slide action, but also detect the duration and pressure associated with the touch or slide operation.

[0104] The power supply assembly provides power to various components of the device in which the power supply assembly is located. The power supply assembly may include a power management system, one or more power supplies, and other components associated with generating, managing, and distributing power to the device in which the power supply assembly is located.

[0105] The above-mentioned audio component can be configured to output and / or input audio signals. For example, the audio component includes a microphone (MIC), and when the device where the audio component is located is in an operating mode, such as call mode, recording mode, and voice recognition mode, the microphone is configured to receive external audio signals. The received audio signal can be further stored in a memory or sent via a communication component. In some embodiments, the audio component also includes a speaker for outputting audio signals.

[0106] Accordingly, an embodiment of the present application also provides a computer-readable storage medium storing a computer program, which, when executed by a processor, enables the processor to implement the steps in the above method embodiment. The computer-readable storage medium includes volatile or non-volatile or a combination thereof, and may be removable or non-removable. Examples of computer-readable storage media include, but are not limited to, phase-change random access memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), flash memory or other memory technology, CD-ROM, digital versatile disc (DVD) or other optical storage, magnetic cassette, tape disk storage or other magnetic storage device or any other non-transmission medium.

[0107] Accordingly, an embodiment of the present application further provides a computer program product, which includes a computer program or instructions, and when the computer program or instructions are executed by a processor, the processor is enabled to implement the steps in the above-mentioned method embodiment. It should be understood that each process or a combination of multiple processes in the above-mentioned method flow can be implemented by a computer program or instruction. In addition, these computer programs or instructions can be applied to a processor of a general-purpose computer, a special-purpose computer, an embedded processor or other programmable data processing device, so that the processor of the general-purpose computer, the special-purpose computer, the embedded processor or other programmable data processing device can be implemented as a device for implementing the corresponding functions in the above-mentioned method embodiment.

[0108] It should also be noted that the terms "comprises," "includes," or any other variations thereof are intended to encompass non-exclusive inclusion, such that a process, method, commodity, or apparatus that includes a series of elements includes not only those elements but also other elements not explicitly listed, or includes elements inherent to such process, method, commodity, or apparatus. In the absence of further limitations, an element defined by the phrase "comprises a ..." does not exclude the presence of other identical elements in the process, method, commodity, or apparatus that includes the element.

[0109] The above are merely embodiments of the present application and are not intended to limit the present application. For those skilled in the art, the present application may have various changes and variations. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principles of the present application should all be included within the scope of the claims of the present application.

Claims

1. A text layout method, characterized in that: include: monitoring whether parameters of a target control change, where the target control is used to display a first text and a target icon; When a change in a parameter of a target control is detected, obtaining a first text to be displayed in the target control, a width of a target icon area in the target control for displaying a target icon, and a target row occupied by the target icon area in the target control; Generate a filler text according to the width of the target icon area, and concatenate the filler text with the first text to obtain a second text; For the target line, simulate rendering the text in the second text starting from the target line in a single-line tiled mode to determine whether the second text will be truncated by the target boundary; If the second text is cut off by the target boundary during the simulated rendering, a text line break position of the first text corresponding to the target line is determined, and the text is wrapped at the text line break position.

2. The method according to claim 1, characterized in that The parameters of the target control include at least one of the following: text content, size of the target control, position of the target icon area, and size of the target icon area.

3. The method according to claim 1 or 2, characterized in that The simulation rendering in a single-row tiling mode includes: In a single-line tiled mode, simulated rendering is performed according to preset simulation rules, wherein the preset simulation rules include: for the text before the target line, an automatic line break strategy is used, and the text content is automatically wrapped and displayed when it exceeds the container width; for the target line and subsequent text, automatic line break is disabled, and ellipsis is used to display overflow.

4. The method according to any one of claims 1 to 3, characterized in that Determining a line break position of the first text corresponding to the target line includes: determining a first position, where the first position is a position where the second text is truncated by the target boundary in the simulated rendering; A text line break position of the first text corresponding to the target line is determined according to the first position.

5. The method according to claim 4, characterized in that The determining, based on the first position, a text line break position of the first text corresponding to the target line includes: Starting from the first position, the position of the nth character is accumulated in reverse order as the text line break position corresponding to the first text in the target line, wherein the length of the n characters is greater than or equal to the width of the target icon.

6. The method according to claim 1, characterized in that After determining the text line break position corresponding to the target line of the first text, the method further includes: Determining whether the text line break position hits a restricted position in a non-line break position library; When the text line break position hits a restricted position in the non-line break position library, the text line break position is updated.

7. The method according to claim 1, characterized in that In the case where the target icon area occupies multiple lines of the target control, the target line is one of the multiple lines occupied by the target icon area, and the text starting from the target line is the text starting from the text break position of the line before the target line.

8. The method according to claim 1, characterized in that The target icon area is located at the end of the first line of the text line of the target control.

9. An electronic device, characterized in that: include: A memory and a processor; wherein the memory stores executable code, and when the executable code is executed by the processor, the processor executes the text layout method according to any one of claims 1 to 8.

10. A non-transitory machine-readable storage medium, characterized in that The non-transitory machine-readable storage medium stores executable code, and when the executable code is executed by a processor of an electronic device, the processor is caused to execute the text layout method according to any one of claims 1 to 8.

Images