Display method and device, equipment and storage medium

Abstract

The invention provides a display method and device, equipment and a storage medium, relates to the technical field of computers, and is used for solving the technical problem that the rendering effect is poor due to the fact that a to-be-rendered text is rendered by multiple rendering styles. The method comprises the following steps: displaying an editing interface of a page editing application; in response to an operation of inputting a text on the editing interface by a user, displaying a target text input by the user on a first display level according to a preset basic style; in response to an operation of selecting the first text style by the user, displaying a first style element corresponding to the first text style on a second display level; in response to an operation of selecting a second text style by the user, displaying a second style element corresponding to the second text style on a third display level under the condition that the second text style and the first text style conform to a preset conflict relationship or the second text style is a preset conflict style; the first text style and the second text style are different advanced styles.

Description

Technical Field

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

[0002] With the development of Internet technology, users have higher and higher requirements for front-end pages. As the carrier of page information and one of the most important components of information transmission, people are no longer satisfied with basic single colors and need to set various styles for text. For example, set text gradient color style, text shadow style and text strikethrough style for text.

[0003] However, when using cascading style sheets (CSS) to style text, rendering conflicts may occur between different styles, resulting in poor text display. For example, when rendering text stroke styles, as the stroke element gradually becomes thicker, the font will gradually become thinner, presenting a display effect where the text itself is covered by the stroke. Summary of the invention

[0004] The present application provides a display method, apparatus, device and storage medium for solving the technical problem of poor rendering effect caused by rendering text to be rendered in multiple rendering styles.

[0005] In a first aspect, the present application provides a display method, which is applied to an electronic device, and the electronic device is used to run a page editing application based on a cascading style sheet CSS. The cascading style sheet CSS includes a plurality of predefined basic styles and advanced styles, and there is no conflict relationship between the advanced style and the basic style. The method includes: displaying an editing interface of the page editing application. In response to a user inputting text on the editing interface, displaying the target text input by the user at a first display level according to a preset basic style. In response to a user selecting a first text style, displaying a first style element corresponding to the first text style at a second display level. In response to a user selecting a second text style, if the second text style meets a preset conflict relationship with the first text style, or if the second text style is a preset conflict style, displaying a second style element corresponding to the second text style at a third display level; the first text style and the second text style are different advanced styles.

[0006] In this way, the CSS styles are divided into basic styles and advanced styles, and there is no conflict relationship between the advanced styles and the basic styles. In the case of the editing interface of the CSS page editing application, the style elements corresponding to the basic style are displayed at the first display level, and the first style elements are displayed at the second display level. Subsequently, when the second text style meets the preset conflict relationship with the first text style, or the second text style is a preset conflict style, the second style element corresponding to the second text style is displayed at the third display level. In this way, the advanced styles that display the conflict are displayed in layers to avoid display conflicts between advanced styles at the same level. The display effect of the style elements presented in the editing interface meets the user's expectations, ensuring the development efficiency and experience of page developers.

[0007] In a possible implementation, the above “in response to the user selecting the first text style, displaying the first style element corresponding to the first text style at the second display level” includes: determining the level heights of the first display level and the second display level according to the first text style, wherein the level heights are used to indicate the stacking order between different display levels. Displaying the first style element at the second display level according to the level heights of the first display level and the second display level, the second display level being located above or below the first display level.

[0008] In a possible implementation, the above-mentioned "displaying the second style element corresponding to the second text style at the third display level" includes: determining the level heights of the first display level, the second display level, and the third display level according to the first text style and the second text style. The level height is used to indicate the stacking order between different display levels. According to the level heights of the first display level, the second display level, and the third display level, the second style element is displayed at the third display level, and the third display level is located above the first display level, below the first display level, above the second display level, or below the second display level.

[0009] In a possible implementation, in response to a user inputting text on an editing interface, the target text input by the user is displayed before the first display level according to a preset basic style. The method also includes: in response to a user starting text editing, generating an initial text editing container, and displaying a text editing control corresponding to the initial text editing container. The text editing container is used to configure the data to be rendered corresponding to the target text, and the data to be rendered is used for rendering by a browser of an electronic device to obtain the data to be displayed of the target text. Among them, the initial text editing container includes a first container, a second container, and a third container, and the first container is the parent container of the second container and the third container. The first container carries the preset basic style of the text. The second container is used to support the user's operation of inputting text. The third container is used to carry the preset advanced style of the text.

[0010] In a possible implementation, the above “in response to the user inputting text on the editing interface, displaying the target text input by the user on the first display level” includes: in response to the user inputting text on the editing interface, switching the initial text editing container to an editable state. Using the second container to obtain the target text input by the user, and displaying the target text on the first display level according to the basic style carried in the first container.

[0011] In a possible implementation, the above “in response to the user selecting the first text style, displaying the first style element corresponding to the first text style at the second display level” includes: configuring the first text style to a third container. And / or,

[0012] The above-mentioned “displaying the second style element corresponding to the second text style at the third display level” includes: generating a fourth container in parallel with the third container in the text editing container, and configuring the second text style to the fourth container. And / or,

[0013] The preset basic style includes at least one of font color, font size and font style, and the preset advanced style is text gradient style, text strikethrough style, text shadow style or text stroke style.

[0014] In a possible implementation, when the first text style is a text gradient style, the second text style is a text strikethrough style, the second display level is located above the first display level, and the third display level is located above the second display level. When the first text style is a text shadow style, the second text style is a text stroke style, the first display level is located above the third display level, and the second display level is located above the first display level.

[0015] In a second aspect, the present application provides a text rendering device, which is applied to an electronic device, and the electronic device is used to run a page editing application based on a cascading style sheet CSS. The cascading style sheet CSS includes a plurality of predefined basic styles and advanced styles. There is no conflict relationship between the advanced style and the basic style. The device includes: a display unit.

[0016] The display unit is used to display the editing interface of the page editing application.

[0017] The display unit is further used to respond to the user inputting text on the editing interface and display the target text input by the user at the first display level according to a preset basic style.

[0018] The display unit is further configured to display a first style element corresponding to the first text style at a second display level in response to a user selecting the first text style.

[0019] The display unit is also used to respond to the user's operation of selecting the second text style, and when the second text style and the first text style meet a preset conflict relationship, or the second text style is a preset conflict style, display the second style element corresponding to the second text style at the third display level.

[0020] In a possible implementation, the display unit is specifically configured to: determine the level heights of the first display level and the second display level according to the first text style, wherein the level heights are used to indicate the stacking order between different display levels. Display the first style element in the second display level according to the level heights of the first display level and the second display level, wherein the second display level is located above or below the first display level.

[0021] In a possible implementation, the display unit is specifically used to: determine the level heights of the first display level, the second display level, and the third display level according to the first text style and the second text style. The level height is used to indicate the stacking order between different display levels. According to the level heights of the first display level, the second display level, and the third display level, the second style element is displayed in the third display level, and the third display level is located above the first display level, below the first display level, above the second display level, or below the second display level.

[0022] In a possible implementation, the text rendering device further includes: a generation unit. The generation unit is used to generate an initial text editing container in response to a user's operation of starting text editing. The display unit is also used to: display a text editing control corresponding to the initial text editing container. The text editing container is used to configure the data to be rendered corresponding to the target text, and the data to be rendered is used for rendering by the browser of the electronic device to obtain the data to be displayed of the target text. Among them, the initial text editing container includes a first container, a second container and a third container, and the first container is the parent container of the second container and the third container. The first container carries the preset basic style of the text. The second container is used to support the user's operation of inputting text. The third container is used to carry the preset advanced style of the text.

[0023] In a possible implementation, the display unit is specifically configured to: in response to a user inputting text on the editing interface, switch the initial text editing container to an editable state, obtain the target text input by the user using the second container, and display the target text at the first display level according to the basic style carried in the first container.

[0024] In a possible implementation, the display unit is specifically configured to: configure the first text style to the third container. And / or,

[0025] In response to the user selecting the second text style, a fourth container is generated in the text editing container in parallel with the third container, and the second text style is configured in the fourth container. And / or,

[0026] The preset basic style includes at least one of font color, font size and font style, and the preset advanced style is text gradient style, text strikethrough style, text shadow style or text stroke style.

[0027] In a possible implementation, when the first text style is a text gradient style, the second text style is a text strikethrough style, the second display level is located above the first display level, and the third display level is located above the second display level. When the first text style is a text shadow style, the second text style is a text stroke style, the first display level is located above the third display level, and the second display level is located above the first display level.

[0028] In a third aspect, the present application provides an electronic device, the electronic device comprising a processor and a memory. The memory stores instructions executable by the processor. When the processor is configured to execute the instructions, the electronic device implements the display method of the first aspect.

[0029] In a fourth aspect, the present application provides a computer program product. When the computer program product is executed in an electronic device, the electronic device executes the method related to the first aspect to implement the display method of the first aspect.

[0030] In a fifth aspect, the present application provides a readable storage medium, the readable storage medium comprising: software instructions. When the software instructions are executed in an electronic device, the electronic device implements the display method of the first aspect.

[0031] The beneficial effects of the second to fifth aspects mentioned above can be referred to the first aspect and will not be elaborated on again. BRIEF DESCRIPTION OF THE DRAWINGS

[0032] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.

[0033] Figure 1 A schematic diagram of a display interface of an electronic device provided in an embodiment of the present application;

[0034] Figure 2 A schematic diagram of the composition of an electronic device provided in an embodiment of the present application;

[0035] Figure 3 A flow chart of a display method provided in an embodiment of the present application;

[0036] Figure 4 A schematic diagram of an initial page of an editing page provided in an embodiment of the present application;

[0037] Figure 5 A schematic diagram of an editing page of a display method provided in an embodiment of the present application;

[0038] Figure 6 A schematic diagram of a text editing container provided in an embodiment of the present application;

[0039] Figure 7 A schematic diagram of a layered display effect of a display method provided in an embodiment of the present application;

[0040] Figure 8 A schematic diagram of a text stroke and text shadow same-level display effect provided in an embodiment of the present application;

[0041] Fig. 9 A schematic diagram of a text stroke and text shadow layered display effect provided in an embodiment of the present application;

[0042] Fig.10 A display effect diagram of a display level with multiple rendering styles provided in an embodiment of the present application;

[0043] Fig.11 A schematic diagram of the composition of a text rendering device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0044] In order to enable ordinary persons in the art to better understand the technical 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 accompanying drawings.

[0045] 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. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present application. On the contrary, they are merely examples of devices and methods consistent with some aspects of the present application as detailed in the attached claims.

[0046] In addition, in the description of the embodiments of the present application, unless otherwise specified, " / " means or, for example, A / B can mean A or B. "And / or" in this article is only a description of the association relationship of associated objects, indicating that there can be three relationships, for example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone. In addition, in the description of the embodiments of the present application, "multiple" means two or more than two.

[0047] As described in the background technology, there are display conflicts between some text styles. In particular, when a page developer uses a page editing application to edit text elements in a page, the page developer sets various text styles for the input text based on the display requirements of the text elements (i.e., the expected display effect). However, due to the display conflicts between the text styles, the preview effect of the page editing application for the text style is inconsistent with the effect expected by the page developer. This will affect the development efficiency and experience of the page developer.

[0048] In view of this, an embodiment of the present application provides a display method, which is applied to an electronic device, and the electronic device is used to run a page editing application based on a cascading style sheet CSS, wherein the cascading style sheet CSS includes a plurality of predefined basic styles and advanced styles, and there is no conflict relationship between the advanced style and the basic style. The method includes: displaying an editing interface of the page editing application. In response to the operation of a user inputting text on the editing interface, displaying the target text input by the user at a first display level according to a preset basic style. In response to the operation of the user selecting a first text style, displaying a first style element corresponding to the first text style at a second display level. In response to the operation of the user selecting a second text style, when the second text style and the first text style meet a preset conflict relationship, or when the second text style is a preset conflict style, displaying a second style element corresponding to the second text style at a third display level; the first text style and the second text style are different advanced styles.

[0049] In this way, the CSS styles are divided into basic styles and advanced styles, and there is no conflict relationship between the advanced styles and the basic styles. In the case of the editing interface of the CSS page editing application, the style elements corresponding to the basic style are displayed at the first display level, and the first style elements are displayed at the second display level. Subsequently, when the second text style meets the preset conflict relationship with the first text style, or the second text style is a preset conflict style, the second style element corresponding to the second text style is displayed at the third display level. In this way, the advanced styles that display the conflict are displayed in layers to avoid display conflicts between advanced styles at the same level. The display effect of the style elements presented in the editing interface meets the user's expectations, ensuring the development efficiency and experience of page developers.

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

[0051] The display method provided in the embodiment of the present application can be applied to Figure 1 The electronic device 100 is shown. Figure 1 In the embodiment, the electronic device 100 is installed with a browser application and a page editing application. The browser application and the page editing application can implement the display method provided in the embodiment of the present application.

[0052] Optionally, a browser application is installed on the electronic device 100, and a user (such as a page developer) can open the webpage version of the CSS page editing application through the browser application. For example, the website corresponding to the page editing application is opened in the browser application to enter the homepage of the CSS page editing application.

[0053] Alternatively, the CSS page editing application is installed as an independent application on the electronic device 100. In this way, the CSS page editing application can be directly opened without relying on the browser application.

[0054] The above-mentioned page editing application provides users with visual page editing services. Users can use this application to design pages that meet their needs. The pages here include but are not limited to hypertext markup language (HTML) pages, extensible markup language (XML) pages, etc. Among them, whether it is a web page editing application or an independent application, an application interface, such as an editing interface, is provided for displaying various information and a user interaction interface. The electronic device 100 is a device with a display system, and the display system provides both rendering capabilities and display capabilities.

[0055] In an embodiment of the present application, the electronic device 100 is mainly used to display an editing interface of a page editing application. In response to a user inputting text on the editing interface, the target text input by the user is displayed at a first display level according to a preset basic style. In response to a user selecting a first text style, a first style element corresponding to the first text style is displayed at a second display level. In response to a user selecting a second text style, if the second text style and the first text style meet a preset conflict relationship, or if the second text style is a preset conflict style, a second style element corresponding to the second text style is displayed at a third display level.

[0056] In a possible implementation, the software architecture level of the electronic device may include a browser application and a page editing application. In a specific implementation of the method provided in an embodiment of the present application, the user interface of the page editing application is displayed on the screen of the electronic device through the browser application, and the page editing application generates data to be rendered corresponding to the target text in response to various text editing operations of the user in the above-mentioned user interface. The browser application then obtains the data to be rendered from the page editing application, and renders it to obtain the data to be displayed, and then the browser application outputs the data to be displayed to the display hardware, and finally realizes the preview display of the target text and its various style elements in the user interface.

[0057] In combination with the above-mentioned display method, optionally, when the user enters text on the editing interface, the page editing application generates the first data to be rendered corresponding to the target text in response to the user operation; the browser application obtains the first data to be rendered from the page editing application, renders and displays it on the first display level, the first data to be rendered includes the target text data, and indicates the first display level. In addition, when the user selects the first text style, the page editing application generates the second data to be rendered corresponding to the first text style in response to the user operation; the browser application obtains the second data to be rendered from the page editing application, renders and displays it on the second display level, the second data to be rendered includes the second text element, and indicates the second display level. When the user selects the second text style, the page editing application generates the third data to be rendered corresponding to the second text style in response to the user operation; the browser application obtains the third data to be rendered from the page editing application, renders and displays it on the third display level, the third data to be rendered includes the third text element, and indicates the third display level.

[0058] The electronic device 100 in the embodiment of the present application may be a portable electronic device including other functions such as a personal digital assistant and / or a music player function, such as a mobile phone, a tablet computer, a wearable device with a wireless communication function (such as a smart watch), etc. Exemplary embodiments of portable electronic devices include but are not limited to portable electronic devices equipped with iOS®, Android®, Microsoft® or other operating systems. The above-mentioned portable electronic device may also be other portable electronic devices, such as a laptop computer (Laptop) with a touch-sensitive surface (such as a touch panel). It should also be understood that in some other embodiments, the above-mentioned electronic device may not be a portable electronic device, but a desktop computer with a touch-sensitive surface (such as a touch panel).

[0059] Figure 2 The following is a schematic diagram of the composition of an electronic device provided in an embodiment of the present application. Figure 2 As shown, the electronic device may include: a processor 20 , a memory 21 , a communication line 22 , a communication interface 23 , and an input / output interface 24 .

[0060] The processor 20 , the memory 21 , the communication interface 23 and the input / output interface 24 may be connected via a communication line 22 .

[0061] The processor 20 is used to execute the instructions stored in the memory 21 to implement the fault analysis method provided in the following embodiments of the present application. The processor 20 can be a CPU, a general-purpose processor network processor (NP), a digital signal processor (DSP), a microprocessor, a microcontroller (MCU) / single chip microcomputer, a programmable logic device (PLD), or any combination thereof. The processor 20 can also be any other device with processing functions, such as a circuit, a device, or a software module, which is not limited in the embodiments of the present application. In one example, the processor 20 may include one or more CPUs, such as Figure 2 As an optional implementation, the server may include multiple processors, for example, in addition to the processor 20, it may also include a processor 25 ( Figure 2 ) is shown by the dotted line as an example.

[0062] The memory 21 is used to store instructions. For example, the instructions may be computer programs. Optionally, the memory 21 may be a read-only memory (ROM) or other types of static storage devices that can store static information and / or instructions, or a random access memory (RAM) or other types of dynamic storage devices that can store information and / or instructions, or an electrically erasable programmable read-only memory (EEPROM), a compact disc read-only memory (CD-ROM) or other optical disc storage, optical disc storage (including compressed optical disc, laser disc, optical disc, digital versatile disc, Blu-ray disc, etc.), a magnetic disk storage medium or other magnetic storage devices, etc., and the embodiments of the present application are not limited to this.

[0063] It should be noted that the memory 21 may exist independently of the processor 20, or may be integrated with the processor 20. The memory 21 may be located inside the server, or may be located outside the server, which is not limited in the embodiment of the present application.

[0064] The communication line 22 is used to transmit information between the components included in the server.

[0065] The communication interface 23 is used to communicate with other devices or other communication networks. The other communication networks may be Ethernet, radio access network (RAN), wireless local area network (WLAN), etc. The communication interface 23 may be a module, a circuit, a transceiver or any device capable of achieving communication.

[0066] The input / output interface 24 is used to implement human-computer interaction between the user and the server, for example, to implement action interaction or information interaction between the user and the server.

[0067] Exemplarily, the input / output interface 24 may be a mouse, a keyboard, a display screen, or a touch display screen, etc. Action interaction or information interaction between a user and a server may be achieved through a mouse, a keyboard, a display screen, or a touch display screen, etc.

[0068] It should be noted that Figure 2 The structure shown in the figure does not constitute a limitation on the electronic device, except Figure 2 In addition to the components shown, the electronic device may include more or fewer components than shown, or a combination of certain components, or a different arrangement of components.

[0069] The following is an introduction to the display method provided by the embodiment of the present application. The execution subject of the following text rendering method takes an electronic device as an example.

[0070] Figure 3 A flow chart of a display method provided in an embodiment of the present application. The display method provided in an embodiment of the present application is applied to an electronic device, and the electronic device is used to run a page editing application based on a cascading style sheet CSS, and the cascading style sheet CSS includes a plurality of predefined basic styles and advanced styles, and there is no conflict relationship between the advanced style and the basic style, and the display method includes: S301-S304.

[0071] S301: Display an editing interface of a page editing application.

[0072] In one scenario, the user opens the editing page through a browser application. For example, when the browser application is opened, the electronic device displays the editing interface of the page editing application by inputting a URL corresponding to the page editing application in the browser application.

[0073] In another scenario, the user opens the editing page through the page editing application. For example, when the page editing application is started, in response to the creation operation of the editing page performed by the user, the electronic device displays the editing interface of the page editing application.

[0074] Exemplarily, in response to a click operation on a "new page" component in a page editing application, the electronic device displays an editing interface of the page editing application.

[0075] Figure 4 An example of an initial page of an editing page is shown. Figure 4 In the edit page, the initial page style display area and style configuration area. The effect display area is used to display the rendering effect of the rendered data. The style configuration area is used to display multiple style configuration controls of the target text. A style configuration control is used to configure a style of the text.

[0076] S302: In response to a user inputting text on an editing interface, display the target text input by the user on a first display level according to a preset basic style.

[0077] In the embodiments of the present application, the text style is also called the rendering style, which is divided into a basic style and an advanced style. Among them, as the name implies, the basic style refers to a relatively basic style among a variety of text styles. The advanced style is relative to the basic style. In practical applications, the basic style and the advanced style can be preset according to the display requirements of the text in the application scenario. That is, according to the display requirements of the text in the application scenario, some text styles can be defined as basic styles and other text styles can be defined as advanced styles.

[0078] In the embodiment of the present application, a style that will not have a display conflict with other text styles is preset as a basic style. Text styles other than the basic style are preset as advanced styles. Of course, when presetting the basic style, it is also considered whether the style is used to achieve the basic display effect of the text. Exemplarily, the font style, font size style and font color style can be used as the basic style of the text. The rounded corners, rotation angle, background color and size can also be used as the basic style of the text box used to accommodate the text.

[0079] It should be noted that the preset basic style can also be a system default style. The basic style in the embodiment of the present application includes font color, font size, and one of the fonts in the font style. The preset advanced style can be a text gradient style, a text strikethrough style, a text shadow style, or a text stroke style. The preset advanced style can also be other text styles, which is not limited in the embodiment of the present application.

[0080] As a possible implementation method, when displaying an editing interface, the electronic device generates an initial text editing container in response to a user's operation of initiating text editing, and displays a text editing control corresponding to the initial text editing container in the editing interface according to a preset basic style.

[0081] Regarding the initial text editing control, for example, Figure 5 As shown, the text editing control is a text box.

[0082] Regarding the initial text editing container, for example, Figure 6 As shown, the initial text editing container includes a first container, a second container and a third container, and the first container is the parent container of the second container and the third container. The first container carries the preset basic style of the text. The second container is used to support the user's operation of inputting text. The third container is used to carry the preset advanced style of the text. The second container and the third container are child containers of the first container and inherit the preset basic style of the text in the first container.

[0083] Continue reading Figure 5 , "Please double-click to enter text" is displayed in the text box. When the user double-clicks any area in the text box, the text box enters an editable state. At this time, the user can enter the target text in the text box, and the electronic device receives the target text and displays the target text in the first display level.

[0084] As a possible implementation method, in response to the user inputting text on the editing interface, the electronic device displays the target text input by the user on the first display level according to a preset basic style.

[0085] In some embodiments, in response to a user inputting text on the editing interface, the electronic device switches the initial text editing control to an editable state, and uses the second container to obtain the target text input by the user. Further, when the electronic device obtains the target text, it displays the target text at the first display level according to the basic style carried in the first container.

[0086] In some embodiments, before the user inputs text on the editing interface, the electronic device responds to the configuration operation of the basic style of the target text and uses the configured basic style as the preset basic style. When the electronic device generates an initial text editing container in response to the user operation, the preset basic style is configured into the first container.

[0087] As a possible implementation manner, when the target text is displayed at the first display level, the electronic device adjusts the basic style of the target text in response to a configuration operation on the basic style of the target text.

[0088] In some embodiments, the electronic device obtains a selected basic style in response to a user's selection operation on a target style control in a style configuration area, and adjusts the basic style of the target text according to the selected basic style.

[0089] For example, taking the target text font style as "Kaiti", in response to the user's operation of adjusting the font style control "Kaiti" to "Songti" in the style configuration area, the electronic device configures the font style "Songti" into the first container and adjusts the font style of the target text to "Songti".

[0090] S303: In response to the user selecting the first text style, display a first style element corresponding to the first text style at a second display level.

[0091] In the embodiment of the present application, the style element is used to present the rendering effect of the text style, and one text style corresponds to one style element. For example, the style element corresponding to the text stroke style is the text stroke element, and the text stroke element is the stroke of the target text.

[0092] In some embodiments, the electronic device renders the first style element at the second display level according to the first text style and the target text. For example, the electronic device renders the gradient color element of the target text at the second display level according to the text gradient color style and the target text.

[0093] As a possible implementation manner, in response to a user selecting a first text style from a plurality of text styles, the electronic device displays a first style element corresponding to the first text style on a second display level.

[0094] For example, on the editing interface, multiple text style options are displayed: text gradient style, text strikethrough style, text shadow style or text stroke style. In response to the selection operation of the text strikethrough style, the electronic device displays the first style element corresponding to the first text style on the second display level.

[0095] In some embodiments, in response to a user selecting a first text style from a plurality of text styles, the electronic device configures the style configuration parameters of the first text style to a third container. For example, the electronic device obtains the style parameters of the text strikethrough style, and configures the style configuration parameters of the text strikethrough style to the third container. Further, the electronic device determines the first style element corresponding to the first text style based on the style configuration parameters in the third container and the target text, and displays the first style element corresponding to the first text style on the second display level.

[0096] In some embodiments, in response to a user selecting a first text style, the electronic device determines the respective level heights of the first display level and the second display level according to the first text style, and displays the first style element at the second display level according to the respective level heights of the first display level and the second display level.

[0097] In the embodiment of the present application, the level height is used to indicate the stacking order between different display levels. The level height can be set to a number, a letter, or other identifier, which is not limited in the embodiment of the present application. For example, if the level height is 2, it means that the target text style is at the second level. For example, if the level height is L3, it means that the target text style is at the third level.

[0098] For example, Figure 7 As shown in FIG. 1 , a schematic diagram of the hierarchical position of the strikethrough style of the target text “The weather is great” and the basic style is shown. Figure 7 , level 1 displays the basic style, and level 2 displays the strikethrough style.

[0099] In some embodiments, in response to a user selecting a first text style, the electronic device determines a second display level according to the first text style and a style level mapping relationship, and displays the first style element at the second display level. The style level mapping relationship includes multiple text styles and a display level corresponding to each text style.

[0100] For example, the style level mapping relationship is a style level mapping table. Exemplarily, the style level mapping table is shown in Table 1.

[0101] Table 1 Style level mapping table

[0102]

[0103] S304: In response to the user selecting the second text style, if the second text style and the first text style meet a preset conflict relationship, or the second text style is a preset conflict style, display a second style element corresponding to the second text style at a third display level.

[0104] As a possible implementation method, in response to the user selecting the second text style, the electronic device determines whether the second text style and the first text style meet the preset conflict relationship, or whether the second text style is a preset conflict style, and displays the second style element corresponding to the second text style at the third display level if the second text style and the first text style meet the preset conflict relationship, or the second text style is a preset conflict style. Otherwise, the style element corresponding to the text strikethrough style is displayed at the second display level.

[0105] Exemplarily, taking the second text style as a text strikethrough style and the first text style as a text stroke style as an example: the electronic device determines whether the text stroke style and the text strikethrough style meet a preset conflict relationship, or whether the text strikethrough style is a preset conflict style. Further, the electronic device displays the style element corresponding to the text strikethrough style at the third display level when the text strikethrough style, the text stroke style and the text strikethrough style meet a preset conflict relationship, or the text strikethrough style is a preset conflict style. Otherwise, the style element corresponding to the text strikethrough style is displayed at the second display level.

[0106] The preset conflict relationship and the preset conflict style are pre-set in the electronic device by the operation and maintenance personnel, and the embodiments of the present application do not limit this. Exemplarily, the styles with preset conflict relationships include: text gradient color style and text strikethrough style, text stroke style and text shadow style; the preset conflict style can be text gradient color style and / or text stroke style.

[0107] In some embodiments, the electronic device determines the level heights of the first display level, the second display level, and the third display level according to the first text style and the second text style. Further, the electronic device displays the second style element on the third display level according to the level heights of the first display level, the second display level, and the third display level. It should be noted that the second display level and the third display level are different display levels. This step is detailed in S3041-S3042 below and will not be repeated here.

[0108] In some embodiments, in response to a user selecting the second text style, the electronic device generates a fourth container in the text editing container that is parallel to the third container, and configures the second text style to the fourth container.

[0109] For example, Figure 5 As shown, in response to the user selecting "text style 2" as the "text stroke style", the electronic device generates a fourth container parallel to the third container in the text editing container, and configures the second text style to the fourth container.

[0110] In some other embodiments, the electronic device generates style configuration parameters of the second text style in a third container in response to a user selecting the second text style.

[0111] In some embodiments, Fig.10As shown, when the first text style is a text gradient style, the second text style is a text strikethrough style, the second display level is located above the first display level, and the third display level is located above the second display level. When the first text style is a text shadow style, the second text style is a text stroke style, the first display level is located above the third display level, and the second display level is located above the first display level.

[0112] It is understandable that, when multiple text styles are in conflict, in order to avoid a poor display effect caused by the style conflict, the style elements in conflict are displayed at different display levels.

[0113] In another case, when the first text style and the second text style do not conform to a preset conflict relationship and the second text style is not a preset conflict style, the electronic device displays the second style element at the second display level.

[0114] The display method provided by the embodiment of the present application brings at least the following beneficial effects: the CSS style is divided into a basic style and an advanced style, and there is no conflict relationship between the advanced style and the basic style. In the case of the editing interface of the page editing application that displays CSS, the style elements corresponding to the basic style are displayed at the first display level, and the first style elements are displayed at the second display level. Subsequently, when the second text style and the first text style meet the preset conflict relationship, or the second text style is a preset conflict style, the second style element corresponding to the second text style is displayed at the third display level. In this way, the advanced styles that display the conflict are displayed in layers to avoid display conflicts between advanced styles at the same level. The display effect of the style elements presented in the editing interface meets the user's expectations, ensuring the development efficiency and experience of page developers.

[0115] For example, in the case of the style elements corresponding to the text stroke style and the text shadow style displayed at the same display level, since the style element corresponding to the text shadow style is occupied by the style element corresponding to the text stroke style, such as Figure 8 As shown, the style element corresponding to the text shadow style of the target text cannot be displayed.

[0116] According to the display method provided in the embodiment of the present application, the style elements corresponding to the text shadow style are displayed in layers by the style elements corresponding to the text stroke style, and the style elements at the two display levels will not be squeezed, such as Fig. 9 As shown, the style elements corresponding to the text shadow style and the style elements corresponding to the text stroke style of the target text may be displayed.

[0117] In a possible design, when the second style element is displayed at the third display level, the electronic device displays the third style element corresponding to the third text style at the fourth display level in response to the user selecting the third text style.

[0118] Specifically, in response to the user's operation of selecting the third text style, the electronic device determines the display levels of the first text style, the second text style, the third text style, and the preset basic style according to the first text style, the second text style, and the third text style. Further, the electronic device displays the first text style, the second text style, the third text style, and the preset basic style according to the display levels of the first text style, the second text style, the third text style, and the preset basic style, respectively.

[0119] Exemplary, combined Fig.10 , taking the first text style as a text shadow style, the second text style as a text gradient color style, and the third text style as a text stroke style as an example. The electronic device determines the hierarchical heights of the text shadow style, the preset basic style, the text gradient color style, and the text stroke style as 3, 2, 4, and 1, respectively, and displays the style element corresponding to the text stroke style at the first display level, the style element corresponding to the preset basic style at the second display level, the style element corresponding to the text shadow style at the third display level, and the style element corresponding to the text gradient color style at the fourth display level.

[0120] It can be understood that when a high-level style is added to the target text, it is necessary to reorder the display levels of all styles configured for the target text and redisplay the corresponding style elements according to the reordered display levels.

[0121] In one possible design, the above S303 includes: S3031-S3032.

[0122] S3031. Determine, according to the first text style, respective level heights of the first display level and the second display level.

[0123] The level height is used to indicate the stacking order between different display levels.

[0124] In some embodiments, when the electronic device obtains the first text style, it determines the level heights of the first display level and the second display level according to the level height mapping relationship. The level height mapping relationship includes multiple styles and the level height corresponding to each style.

[0125] For example, the layer height mapping relationship is a layer height mapping table. Exemplarily, the layer height mapping table is shown in Table 2.

[0126] Table 2 Layer height mapping table

[0127]

[0128] For example, taking the first text style as a text stroke style as an example, the electronic device determines, according to the first text style and Table 2, that the level height of the first display level is L4 and the level height of the second display level is L1.

[0129] S3032: Display the first style element at the second display level according to the level heights of the first display level and the second display level.

[0130] The second display level is located above or below the first display level.

[0131] In some embodiments, the electronic device determines the hierarchical height relationship between the first display level and the second display level when determining the hierarchical heights of the first display level and the second display level, and displays the first style element at the second display level of the first display level when the second display level is above the first display level. When the second display level is below the first display level, the first style element is displayed at the second display level below the first display level.

[0132] For example, if the first display level is L4 and the second display level is L1, the electronic device determines that the second display level is below the first display level, and thus displays the first style element below the basic style element of the basic style.

[0133] In one possible design, the above S304 includes: S3041-S3042.

[0134] S3041. Determine the respective level heights of the first display level, the second display level, and the third display level according to the first text style and the second text style.

[0135] The level height is used to indicate the stacking order between different display levels.

[0136] In some embodiments, the electronic device determines the hierarchical heights of the first text style, the second text style, and the preset basic style respectively according to the hierarchical height mapping relationship.

[0137] For example, taking the first text style as a text shadow style and the second text style as a text stroke style, the electronic device determines the hierarchical heights of the text shadow style, the preset basic style, and the text stroke style according to the style hierarchical mapping relationship.

[0138] In some other embodiments, the electronic device determines the level heights of the first display level, the second display level, and the third display level according to a preset style display order, a first text style, a second text style, and a preset basic style. The preset style display order includes a display order of multiple styles.

[0139] It should be noted that the preset style display order is pre-set in the electronic device by the operation and maintenance personnel. The display order can be positively correlated with the level height or negatively correlated. The embodiment of the present application does not limit the relationship between the display order and the level height in the preset style display order. The embodiment of the present application does not specifically limit the number of second text styles.

[0140] S3042: Display the second style element at the third display level according to the level heights of the first display level, the second display level, and the third display level.

[0141] The third display level is located above the first display level, below the first display level, above the second display level, or below the second display level.

[0142] In some embodiments, the electronic device, after determining the respective level heights of the first display level, the second display level, and the third display level, sorts the level heights of the first display level, the second display level, and the third display level to obtain a display order of the second text style. Further, the electronic device determines the third display level according to the display order of the second text style, and displays the second style element at the third display level.

[0143] For example, the first display level, the second display level, and the third display level have respective level heights of 2, 1, and 4. The electronic device determines the display order as: the third display level, the first display level, and the second display level. Further, the electronic device sets the second style element at the top layer, the basic style at the middle layer, and the first style element at the bottom layer.

[0144] In order to better understand the implementation method of the text editing container provided in the embodiment of the present application, the following specific example of the text editing container is given.

[0145] In order to better understand the display method provided by this application, Fig.10 The following figure shows the display effect of a display hierarchy with multiple rendering styles. Fig.10 In the text main level, preset basic style, text shadow style, text stroke style, text gradient style and text strikethrough style display effect diagram. Fig.10, the display level of text strikethrough style is the first level (top level), the display level of text gradient style is the second level, the display level of text shadow style is the third level, the display level of preset basic style is the fourth level, the display level of text stroke style is the fifth level, and the text main level is at the bottom level.

[0146] In a possible design, the display method provided in the embodiment of the present application further includes: S305-S306.

[0147] S305 . In response to the user's adjustment operation on the display level of the target text style, obtain a target display level of the target text style.

[0148] The target text style is any text style currently configured for the target text.

[0149] For example, the target text is currently configured with three text styles: a preset basic style, a text stroke style, and a text gradient style, and the display level of the text stroke style is 2, the display level of the text gradient style is 2, and the preset basic style is 3. In response to the user adjusting the display level value of the text gradient style from 2 to 3, the electronic device determines that the display level of the text gradient style is 3.

[0150] In some embodiments, the display level of the rendering style can be set in the z-index property of the rendering style container (such as the third container, the fourth container, etc.). In this way, the display level of the target text style is adjusted by adjusting the z-index property value of the target text style.

[0151] For example, the style attribute parameters of the text shadow style container are:

[0152] .font-shadow[data-v-215a1362]{

[0153] width:100%;

[0154] position:absolute;

[0155] top:0;

[0156] left:0;

[0157] z-index:1

[0158] }.

[0159] Among them, z-index:1 is used to indicate that the display level of the text shadow style is 1.

[0160] In response to the user adjusting z-index: 1 to z-index: 2, the display level of the text shadow style is determined to be 2, thereby determining the display level of the text shadow style to be the second layer.

[0161] S306: Display the style element corresponding to the target text style at the target display level.

[0162] In a possible design, the data to be rendered in the embodiment of the present application is cascading style sheets (CSS) data. The first container and the third container are constructed by Div elements in HTML, and the second container is constructed by textarea elements.

[0163] The display method provided in the embodiment of the present application also brings the following beneficial effects: Since the present application adopts CSS data to realize the canvas rendering text effect. Realizing canvas rendering text based on CSS also has the following beneficial effects: 1. Since the browser has a special text rendering engine to process CSS data to layout and render text, the performance of browser rendering text is improved. 2. Style rendering can be performed directly using CSS rendering styles within the document range of the entire page or within a specific element of the page without additional programming or processing. 3. CSS-rendered text can be selected, copied and searched, which improves user experience and accessibility. 4. Realizing canvas rendering text based on CSS allows the text to be rendered to be displayed correctly on devices with different screen sizes, avoiding adaptive adjustments for devices with different screen sizes and improving development efficiency. 5. Current browsers support canvas display generated based on CSS data, which is more applicable.

[0164] The above mainly introduces the solution provided by the embodiment of the present application from the perspective of the method. In order to achieve the above functions, it includes hardware structures and / or software modules corresponding to the execution of each function. It should be easy to realize that the technical goals in this field are combined with the units and algorithm steps of each example described in the embodiments disclosed in this article, and the present application can be implemented in the form of hardware or a combination of hardware and computer software. Whether a function is executed in the form of hardware or computer software driving hardware depends on the specific application and design constraints of the technical solution. Professional and technical goals can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

[0165] In an exemplary embodiment, the embodiment of the present application also provides a text rendering device, which is applied to an electronic device, and the electronic device is used to run a page editing application based on a cascading style sheet CSS. The cascading style sheet CSS includes a plurality of predefined basic styles and advanced styles, and there is no conflict relationship between the advanced style and the basic style. Fig.11Schematic diagram of the composition of a text rendering device 40 provided in an embodiment of the present application. Fig.11 As shown, the text rendering device 40 includes: a display unit 401.

[0166] The display unit 401 is used to display the editing interface of the page editing application.

[0167] The display unit 401 is further configured to, in response to a user inputting text on the editing interface, display the target text input by the user at the first display level according to a preset basic style.

[0168] The display unit 401 is further configured to display a first style element corresponding to the first text style at a second display level in response to a user selecting the first text style.

[0169] The display unit 401 is also used to display the second style element corresponding to the second text style at the third display level in response to the user selecting the second text style, when the second text style and the first text style meet a preset conflict relationship, or when the second text style is a preset conflict style.

[0170] In a possible implementation, the display unit 401 is specifically used to: determine the level heights of the first display level and the second display level according to the first text style, wherein the level heights are used to indicate the stacking order between different display levels. According to the level heights of the first display level and the second display level, the first style element is displayed in the second display level, and the second display level is located above or below the first display level.

[0171] In a possible implementation, the display unit 401 is specifically used to: determine the level heights of the first display level, the second display level, and the third display level according to the first text style and the second text style. The level height is used to indicate the stacking order between different display levels. According to the level heights of the first display level, the second display level, and the third display level, the second style element is displayed in the third display level, and the third display level is located above the first display level, below the first display level, above the second display level, or below the second display level.

[0172] In one possible implementation, Fig.11 As shown, the text rendering device 40 further includes: a generating unit 402 .

[0173] The generation unit 402 is used to generate an initial text editing container in response to the user's operation of starting text editing. The display unit 401 is also used to: display the text editing control corresponding to the initial text editing container. The text editing container is used to configure the data to be rendered corresponding to the target text, and the data to be rendered is used for rendering by the browser of the electronic device to obtain the data to be displayed of the target text. Among them, the initial text editing container includes a first container, a second container and a third container, and the first container is the parent container of the second container and the third container. The first container carries the preset basic style of the text. The second container is used to support the user's operation of inputting text. The third container is used to carry the preset advanced style of the text.

[0174] In a possible implementation, the display unit 401 is specifically configured to: in response to a user inputting text on the editing interface, switch the initial text editing container to an editable state, obtain the target text input by the user using the second container, and display the target text at the first display level according to the basic style carried in the first container.

[0175] In a possible implementation, the display unit 401 is specifically configured to: configure the first text style to the third container. And / or,

[0176] In response to the user selecting the second text style, a fourth container is generated in the text editing container in parallel with the third container, and the second text style is configured in the fourth container. And / or,

[0177] The preset basic style includes at least one of font color, font size and font style, and the preset advanced style is text gradient style, text strikethrough style, text shadow style or text stroke style.

[0178] In a possible implementation, when the first text style is a text gradient style, the second text style is a text strikethrough style, the second display level is located above the first display level, and the third display level is located above the second display level. When the first text style is a text shadow style, the second text style is a text stroke style, the first display level is located above the third display level, and the second display level is located above the first display level.

[0179] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware or any combination thereof. When implemented using a software program, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer-executable instructions. When the computer-executable instructions are loaded and executed on a computer, the process or function according to the embodiment of the present application is generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer-executable instructions can be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium. For example, the computer-executable instructions can be transmitted from a website site, computer, server or data center by wired (e.g., coaxial cable, optical fiber, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) mode to another website site, computer, server or data center. The computer-readable storage medium can be any available medium that can be accessed by a computer or a data storage device such as a server, data center, etc. that contains one or more servers that can be integrated with the medium. The available medium can be a magnetic medium (e.g., a floppy disk, a hard disk, a tape), an optical medium (e.g., a DVD), or a solid state disk (SSD), etc.

[0180] Although the present application is described herein in conjunction with various embodiments, in the process of implementing the claimed application, those skilled in the art may understand and implement other changes to the disclosed embodiments by viewing the drawings, the disclosure, and the appended claims. In the claims, the word "comprising" does not exclude other components or steps, and "one" or "an" does not exclude multiple situations. A single processor or other unit may implement several functions listed in a claim. Certain measures are recorded in different dependent claims, but this does not mean that these measures cannot be combined to produce good results.

[0181] Although the present application has been described in conjunction with specific features and embodiments thereof, it is obvious that various modifications and combinations may be made thereto without departing from the spirit and scope of the present application. Accordingly, this specification and the drawings are merely exemplary illustrations of the present application as defined by the appended claims, and are deemed to have covered any and all modifications, variations, combinations or equivalents within the scope of the present application. Obviously, those skilled in the art may make various modifications and variations to the present application without departing from the spirit and scope of the present application. Thus, if these modifications and variations of the present application fall within the scope of the claims of the present application and their equivalents, the present application is also intended to include these modifications and variations.

[0182] The above are only specific implementations of the present application, but the protection scope of the present application is not limited thereto. Any changes or substitutions within the technical scope disclosed in the present application should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

Claims

1. A display method, characterized in that: Applied to an electronic device, the electronic device is used to run a page editing application based on a cascading style sheet CSS, the cascading style sheet CSS includes a plurality of predefined basic styles and advanced styles, and there is no conflict relationship between the advanced style and the basic style; The method comprises: Displaying the editing interface of the page editing application; In response to a user inputting text on the editing interface, displaying the target text input by the user at a first display level according to a preset basic style; In response to a user selecting a first text style, displaying a first style element corresponding to the first text style at a second display level; In response to a user selecting a second text style, when the second text style and the first text style meet a preset conflict relationship, or the second text style is a preset conflict style, a second style element corresponding to the second text style is displayed on a third display level; the first text style and the second text style are different advanced styles.

2. The display method according to claim 1, characterized in that: In response to the user selecting the first text style, displaying the first style element corresponding to the first text style at the second display level includes: Determine, according to the first text style, respective level heights of the first display level and the second display level, wherein the level heights are used to indicate a stacking order between different display levels; The first style element is displayed at the second display level according to the level heights of the first display level and the second display level, and the second display level is located above or below the first display level.

3. The display method according to claim 1, characterized in that: The step of displaying the second style element corresponding to the second text style at the third display level includes: Determine, according to the first text style and the second text style, respective level heights of the first display level, the second display level, and the third display level; wherein the level heights are used to indicate a stacking order between different display levels; The second style element is displayed on the third display level according to the respective level heights of the first display level, the second display level and the third display level, and the third display level is located above the first display level, below the first display level, above the second display level, or below the second display level.

4. The display method according to claim 1, characterized in that: In response to the user inputting text on the editing interface, displaying the target text input by the user before the first display level according to a preset basic style, the method further includes: In response to a user's operation of starting text editing, an initial text editing container is generated, and a text editing control corresponding to the initial text editing container is displayed; the text editing container is used to configure the data to be rendered corresponding to the target text, and the data to be rendered is used for rendering by the browser of the electronic device to obtain the data to be displayed of the target text; Among them, the initial text editing container includes a first container, a second container and a third container, the first container is the parent container of the second container and the third container; the first container carries the preset basic style of the text; the second container is used to support the user's input text operation; the third container is used to carry the preset advanced style of the text.

5. The display method according to claim 4, characterized in that: In response to the user inputting text on the editing interface, displaying the target text input by the user at the first display level includes: In response to a user inputting text on the editing interface, switching the initial text editing container to an editable state; The target text input by the user is acquired by using the second container, and the target text is displayed at the first display level according to the basic style carried in the first container.

6. The display method according to claim 4, characterized in that: In response to the user selecting the first text style, displaying the first style element corresponding to the first text style at the second display level includes: assigning the first text style to the third container; and / or, The step of displaying the second style element corresponding to the second text style at the third display level includes: Generating a fourth container in the text editing container that is parallel to the third container, and configuring the second text style to the fourth container; and / or, The preset basic style includes at least one of font color, font size and font style, and the preset advanced style is a text gradient style, a text strikethrough style, a text shadow style or a text stroke style.

7. The display method according to any one of claims 1 to 6, characterized in that: In the case where the first text style is a text gradient style, the second text style is a text strikethrough style, the second display level is located above the first display level, and the third display level is located above the second display level; In the case where the first text style is a text shadow style, the second text style is a text stroke style, the first display level is located above the third display level, and the second display level is located above the first display level.

8. A text rendering device, characterized in that: The device is applied to an electronic device, the electronic device is used to run a page editing application based on a cascading style sheet CSS, the cascading style sheet CSS includes a plurality of predefined basic styles and advanced styles, and there is no conflict relationship between the advanced style and the basic style. The device includes: a display unit; The display unit is used to display the editing interface of the page editing application; The display unit is further configured to, in response to a user inputting text on the editing interface, display the target text input by the user at the first display level according to a preset basic style; The display unit is further configured to display a first style element corresponding to the first text style at a second display level in response to a user selecting the first text style; The display unit is also used to respond to the user's operation of selecting a second text style, and when the second text style and the first text style meet a preset conflict relationship, or the second text style is a preset conflict style, display a second style element corresponding to the second text style at a third display level; the first text style and the second text style are different advanced styles.

9. An electronic device, characterized in that: include: Processor and memory; The memory stores instructions executable by the processor; When the processor is configured to execute the instructions, the electronic device implements the method according to any one of claims 1 to 7.

10. A readable storage medium, characterized in that: The readable storage medium includes: software instructions; When the software instructions are executed in an electronic device, the electronic device is enabled to implement the method according to any one of claims 1 to 7.

Images