Webpage multi-language font adaptive display method and device, equipment and storage medium

Abstract

The embodiment of the invention provides a webpage multi-language font adaptive display method and device, equipment and a storage medium, and the method comprises the steps: for each language to be displayed in a webpage, setting a row height parameter of each font size of each font of the current language; for each type of received to-be-displayed text content, obtaining fonts, font sizes and languages of texts in the current text content; determining the row height of the characters in the current character content according to the fonts, the font sizes and the languages of the characters in the current character content; the current text content is rendered according to the line height of the text in the current text content to display the current text content, and the line height of the text is calculated according to the language, font and font size of the text, so that the mode of setting the line height according to the language in the existing development is changed; the repeated work that designers set the row height based on experience and manually adjust the row height is fundamentally solved, and multi-language development is more accurate, controllable and efficient.

Description

Technical Field

[0001] The present application relates to the technical field of web page rendering, and in particular to a method, apparatus, device and storage medium for adaptively displaying multi-language fonts on a web page. Background Art

[0002] As China Media Group expands its overseas presence, disseminating content to overseas users through its website has steadily stabilized, with the website serving as a foundation and expanding into social media platforms. When targeting overseas users who speak different languages, using their most commonly used language has become crucial for enhancing communication capabilities. However, due to the varying writing styles of various languages, text heights vary when displayed using different font libraries, posing a challenge to website development.

[0003] During website development, customized line height settings are often required for different languages to ensure that multiple lines of text are not obscured or collapsed. Existing methods rely on separate settings for different languages. Designers and developers adjust these parameters based on their experience and the website's presentation to ensure the website displays correctly. These customized settings create a significant workload and hinder the website's ability to display content across multiple languages. Summary of the Invention

[0004] Embodiments of the present application provide a method, apparatus, device, and storage medium for adaptively displaying multilingual fonts on a web page.

[0005] A first aspect of an embodiment of the present application provides a method for adaptively displaying multilingual fonts on a web page, comprising:

[0006] For each language to be displayed on the webpage, set line height parameters for each font size in the current language, where the line height parameters include ascender, descender, font design grid, line spacing, text size, and spacing weight;

[0007] For each received text content to be displayed, obtain the font, font size and language of the text in the current text content;

[0008] Determine the line height of the characters in the current text content according to the font, font size and language of the characters in the current text content;

[0009] Render the current text content according to the line height of the characters in the current text content to display the current text content.

[0010] In an optional embodiment of the present application, for each language to be displayed on a web page, setting the line height parameters of each font size of the current language includes:

[0011] For each language to be displayed on the webpage, storing the line height parameter corresponding to each font size in a plurality of font sizes of the current language in a font library of the current language, wherein in the font library, each font size in the current language corresponds to the line height parameter;

[0012] Based on multiple font libraries of all languages to be displayed on the web page, the line height parameters of the text are determined according to the language, font and font size of the text.

[0013] In an optional embodiment of the present application, for each received text content to be displayed, obtaining the font, font size, and language of the text in the current text content includes:

[0014] Upon receiving text content to be displayed, comparing characters in the current text content with characters in a plurality of font libraries;

[0015] Determine a target font library based on a comparison result between characters in the current text content and characters in multiple font libraries;

[0016] The language of the target font library is used as the language of the text in the current text content, and the font and font size of the text in the target font library that is most similar to the text in the current text content are used as the font and font size of the text in the current text content.

[0017] In an optional embodiment of the present application, each font library corresponds to a Unicode number of a language in the current font library, and comparing the characters in the current text content with the characters in the multiple font libraries includes:

[0018] Get the Unicode number of the characters in the current text content;

[0019] Compare the Unicode numbers of the characters in the current text content with the corresponding Unicode numbers of all font libraries;

[0020] The font library with the same Unicode number as the Unicode number of the character in the current text content is used as the target font library.

[0021] In an optional embodiment of the present application, the line height of the characters in the current text content is determined according to the font, font size, and language of the characters in the current text content by the following expression:

[0022]

[0023] Among them, LineHeight is the line height of the text, Ascent is the size of the ascender of the text, Descent is the size of the descender of the text, EM-Square is the font design grid of the text, TextSize is the actual pixel value converted based on the set font size, and MarginMetric is the margin weight of the text.

[0024] In an optional embodiment of the present application, rendering the current text content according to the line height of the characters in the current text content to display the current text content includes:

[0025] Determine a corresponding rendering template according to the language of the current text content, wherein the rendering template includes the reading order and alignment of the current text content;

[0026] Divide the page to be rendered into multiple cards, and determine the card loading order based on the reading order of the current text content;

[0027] Renders the text content in multiple cards according to the order in which the cards are loaded, based on the alignment, font, size, and line height of the current text content.

[0028] In an optional embodiment of the present application, text content in multiple cards is rendered according to the card loading order and the alignment, font, font size, and line height of the current text content, including:

[0029] Load each card in turn according to the card loading order;

[0030] Render the text content in each card according to the current text content's alignment, font, font size, and line height.

[0031] A second aspect of the embodiments of the present application provides a device for adaptively displaying multilingual fonts on a web page, comprising:

[0032] a setting module for setting line height parameters for each font size of each language to be displayed on the webpage, wherein the line height parameters include ascender, descender, font design grid, line spacing, text size, and spacing weight;

[0033] An acquisition module, configured to acquire the font, font size, and language of the characters in the current text content for each received text content to be displayed;

[0034] A determination module, configured to determine the line height of the characters in the current text content according to the font, font size, and language of the characters in the current text content;

[0035] The rendering module is used to render the current text content according to the line height of the characters in the current text content to display the current text content.

[0036] A third aspect of an embodiment of the present application provides a computer device comprising: a memory and a processor, wherein the memory stores a computer program, and when the processor executes the computer program, the steps of any of the above methods for adaptively displaying multilingual fonts on a web page are implemented.

[0037] A fourth aspect of the embodiments of the present application provides a computer-readable storage medium having a computer program stored thereon, wherein when the computer program is executed by a processor, the computer program implements the steps of any of the above methods for adaptively displaying multilingual fonts on a web page.

[0038] The above technical solutions provided by the embodiments of the present application have at least some or all of the following advantages compared to the prior art:

[0039] The method for adaptively displaying multilingual fonts on a web page described in an embodiment of the present application sets line height parameters for each font size of the current language for each language to be displayed on the web page, wherein the line height parameters include an ascender, a descender, a font design grid, a line spacing gap, a text size, and a spacing weight; for each received text content to be displayed, obtains the font, font size, and language of the characters in the current text content; determines the line height of the characters in the current text content based on the font, font size, and language of the characters in the current text content; renders the current text content according to the line height of the characters in the current text content to display the current text content, and calculates the line height of the characters based on the language, font, and font size of the characters. This changes the existing development model of setting line height according to language, fundamentally solves the repetitive work of designers setting line height based on experience and manually adjusting line height, and makes multilingual development more accurate, controllable, and efficient. BRIEF DESCRIPTION OF THE DRAWINGS

[0040] 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:

[0041] Figure 1 A flowchart of a method for adaptively displaying multilingual fonts on a web page provided by one embodiment of the present application;

[0042] Figure 2 A schematic diagram of information contained in a font library provided in one embodiment of the present application;

[0043] Figure 3 A schematic diagram of the overall web page hierarchical structure provided for one embodiment of the present application;

[0044] Figure 4 A schematic diagram of the entire rendering life cycle of a website page provided in one embodiment of the present application;

[0045] Figure 5 A schematic diagram of the structure of a device for adaptively displaying multilingual fonts on a web page according to one embodiment of the present application;

[0046] Figure 6 A schematic diagram of the computer device structure provided for one embodiment of the present application. DETAILED DESCRIPTION

[0047] In order to make the technical solutions and advantages of the embodiments of the present application more clearly understood, the exemplary embodiments of the present application are further described in detail below with reference to the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present application, and are not an exhaustive list of all the embodiments. It should be noted that the embodiments and features in the embodiments of the present application can be combined with each other unless they conflict.

[0048] See Figure 1 The method for adaptively displaying multilingual fonts on a web page provided by the embodiment of the present application includes the following steps S100 to S400:

[0049] Step S100: For each language to be displayed on the webpage, set line height parameters for each font size of the current language, wherein the line height parameters include ascender, descender, font design grid, line spacing, text size, and spacing weight;

[0050] Step S200: For each received text content to be displayed, obtain the font, font size, and language of the characters in the current text content;

[0051] Step S300: determining the line height of the characters in the current text content according to the font, font size, and language of the characters in the current text content;

[0052] Step S400: Render the current text content according to the line height of the characters in the current text content to display the current text content.

[0053] In an optional embodiment of the present application, during the development of the website page, different fonts will be set due to the display needs of different languages. Different languages need to have different line heights at the same font size due to the particularity of each language. The presentation forms of the three languages with the same font size but different fonts vary greatly between different languages. Through the webpage multilingual font adaptive display method of the present application, by setting the line height for different languages during page development, it is possible to avoid the situation where multiple lines of text in different languages obscure each other and affect the user experience when displaying multiple languages.

[0054] In an optional embodiment of the present application, in step S100, for each language to be displayed on the webpage, setting the line height parameters of each font size of the current language includes:

[0055] For each language to be displayed on the webpage, storing the line height parameter corresponding to each font size in a plurality of font sizes of the current language in a font library of the current language, wherein in the font library, each font size in the current language corresponds to the line height parameter;

[0056] Based on multiple font libraries of all languages to be displayed on the web page, the line height parameters of the text are determined according to the language, font and font size of the text.

[0057] The multi-language font adaptive display method for web pages of this application uses multi-language adaptive display technology to parse the font library, automatically calculate the line height settings required on the web page, and "predict" the browser-side presentation of multiple languages, thereby avoiding developers from manually adjusting the code, so that the same website can be compatible with multiple different languages.

[0058] In an optional embodiment of the present application, in step S200, for each received text content to be displayed, obtaining the font, font size, and language of the characters in the current text content includes:

[0059] Upon receiving text content to be displayed, comparing characters in the current text content with characters in a plurality of font libraries;

[0060] Determine a target font library based on a comparison result between characters in the current text content and characters in multiple font libraries;

[0061] The language of the target font library is used as the language of the text in the current text content, and the font and font size of the text in the target font library that is most similar to the text in the current text content are used as the font and font size of the text in the current text content.

[0062] In an optional embodiment of the present application, each font library corresponds to a Unicode number of a language in the current font library, and comparing the characters in the current text content with the characters in the multiple font libraries includes:

[0063] Get the Unicode number of the characters in the current text content;

[0064] Compare the Unicode numbers of the characters in the current text content with the corresponding Unicode numbers of all font libraries;

[0065] The font library with the same Unicode number as the Unicode number of the character in the current text content is used as the target font library.

[0066] In an optional embodiment of the present application, in step S300, the line height of the characters in the current text content is determined according to the font, font size, and language of the characters in the current text content by the following expression:

[0067]

[0068] Among them, LineHeight is the line height of the text, Ascent is the size of the ascender of the text, Descent is the size of the descender of the text, EM-Square is the font design grid of the text, TextSize is the actual pixel value converted based on the set font size, and MarginMetric is the margin weight of the text.

[0069] In an optional embodiment of the present application, according to the font library used by the text, the Ascent and Descent information of the file are obtained by parsing the font library file. The information contained in the font library is as follows: Figure 2 As shown, in Figure 2 In the translation, Ascent is the size of the ascending part of the text, Descent is the size of the descending part of the text, Bounding box is the bounding box, Left-sidebearing is the left margin, Right-side bearing is the right margin, Baseline is the baseline, and Advance width is the maximum horizontal cursor movement distance of all characters in the font. The Chinese content of this translation is consistent with the foreign text.

[0070] The line height calculated by the algorithm in the web page multi-language font adaptive display method of the present application can be set in the page code as the line height in the website page, thereby realizing multi-language adaptation of the web page.

[0071] In an optional embodiment of the present application, in step S400, rendering the current text content according to the line height of the characters in the current text content to display the current text content includes:

[0072] Determine a corresponding rendering template according to the language of the current text content, wherein the rendering template includes the reading order and alignment of the current text content;

[0073] Divide the page to be rendered into multiple cards, and determine the card loading order based on the reading order of the current text content;

[0074] Renders the text content in multiple cards according to the order in which the cards are loaded, based on the alignment, font, size, and line height of the current text content.

[0075] In an optional embodiment of the present application, text content in multiple cards is rendered according to the card loading order and the alignment, font, font size, and line height of the current text content, including:

[0076] Load each card in turn according to the card loading order;

[0077] Render the text content in each card according to the current text content's alignment, font, font size, and line height.

[0078] Figure 3 The overall webpage hierarchy is organized into multiple levels during website development, including pages, modules, and content. Regarding text within content, if the same page or module needs to support multiple languages simultaneously, the text line height within the module will automatically adapt to the language.

[0079] In the entire rendering life cycle of the website page, multi-language adaptation is added to the page's hypertext markup language HTML generation action to achieve adaptation of fonts and font sizes. The process is as follows: Figure 4 As shown in the figure, during the page rendering process, the page data includes text data such as the title and introduction. This data is rendered and displayed based on the configuration of the page module. When a page module contains text content such as the title and introduction, the module sets the font, font size, and line height information for the text content.

[0080] The multi-language font adaptive display method for web pages in this application calculates the line height of text based on the font size and font library, avoiding the situation where multiple lines of text in multiple languages are blocked due to the same line height setting, thereby improving the multi-language display compatibility of website pages.

[0081] It should be understood that, although the various steps in the flowchart are shown in sequence as indicated by the arrows, these steps are not necessarily performed in the order indicated by the arrows. Unless otherwise specified herein, there is no strict order restriction on the execution of these steps, and these steps may be performed in other orders. Moreover, at least a portion of the steps in the figure may include multiple sub-steps or multiple stages, and these sub-steps or stages are not necessarily performed at the same time, but may be performed at different times. The execution order of these sub-steps or stages is not necessarily to be performed in sequence, but may be performed in turn or alternately with other steps or at least a portion of the sub-steps or stages of other steps.

[0082] See Figure 5 One embodiment of the present application provides a device 600 for adaptively displaying multi-language fonts on a web page, including:

[0083] A setting module 610 is configured to set line height parameters for each font size of each language to be displayed on the webpage, wherein the line height parameters include ascender, descender, font design grid, line spacing, text size, and spacing weight;

[0084] The acquisition module 620 is used to obtain the font, font size and language of the characters in the current text content for each received text content to be displayed;

[0085] Determination module 630, for determining the line height of the characters in the current text content according to the font, font size and language of the characters in the current text content;

[0086] The rendering module 640 is configured to render the current text content according to the line height of the characters in the current text content to display the current text content.

[0087] The multi-language font adaptive display device for web pages of the present application analyzes the font library, combines it with the common spacing of the website, and automatically calculates the line height based on the font library and font size, thereby fundamentally solving the problem of cross-line occlusion in the multi-language display of web pages, reducing the workload of cross-language customized development and setting, improving the overall content presentation effect of the website, and enhancing the user experience.

[0088] The specific limitations of the apparatus 600 can be found in the above-mentioned limitations on the method for adaptively displaying multilingual fonts on a web page, and will not be further elaborated here. Each module in the apparatus 600 can be implemented in whole or in part through software, hardware, or a combination thereof. Each module can be embedded in or independent of a processor in a computer device in hardware form, or can be stored in a memory in a computer device in software form, so that the processor can call and execute the corresponding operations of each module.

[0089] In one embodiment, a computer device is provided. The internal structure diagram of the computer device can be as follows: Figure 6 As shown. The computer device includes a processor, a memory, a network interface and a database connected via a system bus. The processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, a computer program and a database. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The database of the computer device is used to store data. The network interface of the computer device is used to communicate with an external terminal via a network connection. When the computer program is executed by the processor, it implements a method for adaptively displaying multi-language fonts on a web page as described above. It includes: a memory and a processor, the memory stores a computer program, and when the processor executes the computer program, it implements any step in the method for adaptively displaying multi-language fonts on a web page as described above.

[0090] In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, any step of the above-mentioned method for adaptively displaying multilingual fonts on a web page can be implemented.

[0091] Those skilled in the art will appreciate that the embodiments of the present application can be provided as methods, systems, or computer program products. Therefore, the present application can adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment in combination with software and hardware. Moreover, the present application can adopt the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to magnetic disk storage, CD-ROM, optical storage, etc.) that contain computer-usable program code.

[0092] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the steps in the process. Figure 1 a process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0093] These computer program instructions may also be stored in a computer readable memory that can direct a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 a process or multiple processes and / or boxes Figure 1 The function specified in one or more boxes.

[0094] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operational steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing the instructions executed on the computer or other programmable device for implementing the process. Figure 1 a process or multiple processes and / or boxes Figure 1 A step that specifies a function in one or more boxes.

[0095] Although the preferred embodiments of the present application have been described, those skilled in the art may make additional changes and modifications to these embodiments once they have learned the basic creative concept. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments and all changes and modifications that fall within the scope of the present application.

[0096] Obviously, those skilled in the art may make various changes and modifications to this application without departing from the spirit and scope of this application. Thus, if these modifications and variations of this application fall within the scope of the claims of this application and their equivalents, this application is intended to include these modifications and variations.

Claims

1. A method for adaptively displaying multi-language fonts on a web page, characterized in that: include: For each language to be displayed on the webpage, set line height parameters for each font size in the current language, where the line height parameters include ascender, descender, font design grid, line spacing, text size, and spacing weight; For each received text content to be displayed, obtain the font, font size and language of the text in the current text content; Determine the line height of the characters in the current text content according to the font, font size and language of the characters in the current text content; Render the current text content according to the line height of the characters in the current text content to display the current text content.

2. The method according to claim 1, characterized in that For each language to be displayed on the web page, set the line height parameters for each font size of the current language, including: For each language to be displayed on the webpage, storing the line height parameter corresponding to each font size in a plurality of font sizes of the current language in a font library of the current language, wherein in the font library, each font size in the current language corresponds to the line height parameter; Based on multiple font libraries of all languages to be displayed on the web page, the line height parameters of the text are determined according to the language, font and font size of the text.

3. The method according to claim 2, characterized in that For each received text content to be displayed, obtain the font, font size, and language of the text in the current text content, including: Upon receiving text content to be displayed, comparing characters in the current text content with characters in a plurality of font libraries; Determine a target font library based on a comparison result between characters in the current text content and characters in multiple font libraries; The language of the target font library is used as the language of the text in the current text content, and the font and font size of the text in the target font library that is most similar to the text in the current text content are used as the font and font size of the text in the current text content.

4. The method according to claim 1, wherein Each font library corresponds to the Unicode code of the language in the current font library. The characters in the current text content are compared with the characters in multiple font libraries, including: Get the Unicode number of the characters in the current text content; Compare the Unicode numbers of the characters in the current text content with the corresponding Unicode numbers of all font libraries; The font library with the same Unicode number as the Unicode number of the character in the current text content is used as the target font library.

5. The method according to claim 1, wherein The following expression is used to determine the line height of the text in the current text content based on the font, font size, and language of the text in the current text content: Among them, LineHeight is the line height of the text, Ascent is the size of the ascender of the text, Descent is the size of the descender of the text, EM-Square is the font design grid of the text, TextSize is the actual pixel value converted based on the set font size, and MarginMetric is the margin weight of the text.

6. The method according to claim 1, characterized in that Render the current text content according to the line height of the characters in the current text content to display the current text content, including: Determine a corresponding rendering template according to the language of the current text content, wherein the rendering template includes the reading order and alignment of the current text content; Divide the page to be rendered into multiple cards, and determine the card loading order based on the reading order of the current text content; Renders the text content in multiple cards according to the order in which the cards are loaded, based on the alignment, font, size, and line height of the current text content.

7. The method according to claim 1, characterized in that Render the text content of multiple cards in the order in which the cards are loaded, based on the alignment, font, size, and line height of the current text content, including: Load each card in turn according to the card loading order; Render the text content in each card according to the current text content's alignment, font, font size, and line height.

8. A device for adaptively displaying multi-language fonts on a web page, characterized in that: include: a setting module for setting line height parameters for each font size of each language to be displayed on the webpage, wherein the line height parameters include ascender, descender, font design grid, line spacing, text size, and spacing weight; An acquisition module, configured to acquire the font, font size, and language of the characters in the current text content for each received text content to be displayed; A determination module, configured to determine the line height of the characters in the current text content according to the font, font size, and language of the characters in the current text content; The rendering module is used to render the current text content according to the line height of the characters in the current text content to display the current text content.

9. A computer device comprising: The method comprises a memory and a processor, wherein the memory stores a computer program, and is characterized in that when the processor executes the computer program, the steps of the method for adaptively displaying multilingual fonts on a web page according to any one of claims 1 to 7 are implemented.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method for adaptively displaying multilingual fonts on a web page according to any one of claims 1 to 7 are implemented.

Images