Layout method and device for elements in page and computer program product
The application of target auxiliary lines on the page through custom helper line instructions solves the problem of low element layout efficiency in the page, and realizes accurate vertical alignment and responsive design, simplifying the front-end development process.
Patent Information
- Application Number
- CN202510442097.X
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-04-09
- Publication Date
- 2025-07-22
AI Technical Summary
In the prior art, the layout efficiency of elements in the page is inefficient, especially in the vertical layout of mixed inline elements or inline block elements of different sizes, and the manual adjustment method is cumbersome and error-prone, making it difficult to adapt to changes in different devices and screen sizes.
Apply target helper lines on the page through custom helper lines. Use helper lines to display target helper lines within target elements, and adjust the position of text or symbols through target helper lines for precise layout, including registering helper lines instructions, configuring helper lines styles and positions, and dynamically adjusting colors and line styles to suit different scenarios.
Improves the efficiency and accuracy of page layout, simplifies the development process, reduces manual operations, adapts to changes in different devices and screen sizes, and ensures the consistency of the page's responsive design.
Smart Images
Figure CN120354824A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of front-end page layout. Specifically, it relates to a method, device, and computer program product for laying out elements in a page. Background Art
[0002] In the typesetting design of front-end pages, when inline elements or inline-block elements of different sizes are mixed and arranged in the same line, precise typesetting in the vertical direction often becomes a problem. In such a page layout scenario, texts or symbols need to be aligned according to specific baselines, ratios, or reference lines, and the methods of using CSS (Cascading Style Sheets) for page layout and manual adjustment in related technologies are difficult to cope with such complex requirements.
[0003] When the text content in a page contains fonts of different sizes or a mixture of inline-block elements, it is difficult to align them vertically by manual adjustment. Fonts and symbols of different sizes may deviate from the center line, causing typesetting chaos. For example, in a language learning application, it may be necessary to insert pinyin and Chinese characters in the same line of a page, but due to the different sizes and typesetting rules of these two types of characters, the vertical alignment between pinyin and Chinese characters may be unbalanced. In fields such as music education, especially in the writing of musical scores, symbols such as notes and beats need to be precisely arranged at the corresponding positions on the staff. Manually adjusting the positions of these symbols is not only cumbersome but also error-prone. In language learning applications, such as handwriting letter practice, auxiliary lines are also needed to guide the correct writing and typesetting of characters.
[0004] In a responsive layout, the font size, line spacing, etc. may be adjusted according to changes in the screen size and resolution. The manual adjustment methods in related technologies are difficult to dynamically adapt to changes in different devices and screen sizes, resulting in misalignment of fonts and elements, increasing the difficulty of page maintenance. Manually adding auxiliary lines or adjusting the alignment for each character or symbol will greatly increase the complexity of development and maintenance in a page containing a large amount of content. In addition, manual adjustment may lead to a decrease in page performance, especially in multi-level typesetting, where the page rendering time is relatively long.
[0005] Aiming at the problem of low efficiency in laying out elements in a page in related technologies, no effective solution has been proposed yet. Summary of the Invention
[0006] The main purpose of this application is to provide a method, device, and computer program product for laying out elements in a page, so as to solve the problem of low efficiency in laying out elements in a page in related technologies.
[0007] To achieve the above object, according to one aspect of the present application, a method for laying out elements in a page is provided. The method includes: determining a target element to be laid out in a target page, and calling a guide line instruction for the target element, where the guide line instruction is used to apply a target guide line to the target element when the target page is rendered; displaying the target guide line in the target element based on the guide line instruction; adjusting the text or symbols in the target element through the target guide line to obtain the laid-out target element.
[0008] Optionally, before calling the guide line instruction for the target element, the method further includes: registering the guide line instruction in a user interface construction framework through a custom instruction registration method; adding a basic style to the guide line instruction, and configuring a container for each target guide line in the user interface construction framework, where the basic style includes at least one of the following: basic class, color class, line type class, and position class.
[0009] Optionally, displaying the target guide line in the target element based on the guide line instruction includes: dividing the target guide line into multiple groups of target guide lines according to the guide line position, where the guide line position includes at least one of the following: top, bottom, basic reference position, middle, superscript, subscript, ascending line, and descending line; configuring a target color for each group of target guide lines, where the color of each group of target guide lines is different from that of other groups of target guide lines; and displaying each group of target guide lines in a container at the corresponding guide line position in the target element.
[0010] Optionally, dividing the target guide line into multiple groups of target guide lines according to the guide line position includes: determining the top line and the bottom line in the target guide line as a group of target guide lines; determining the ascending line and the descending line in the target guide line as a group of target guide lines; determining the baseline and the middle line in the target guide line as a group of target guide lines; and determining the superscript line and the subscript line in the target guide line as a group of target guide lines.
[0011] Optionally, after displaying the target guide line in the target element based on the guide line instruction, the method further includes: setting the width of the target guide line to be the same as the width of the target element; configuring a target margin for the target guide line to adjust the relative position between the target guide line and the text or symbols in the target element; and configuring a stacking order for the target guide line to adjust the layer of the target guide line in the target element, where the stacking order is the order of the layer of the target guide line in the target element.
[0012] Optionally, after displaying the target guide line in the target element based on the guide line instruction, the method further includes: receiving a guide line style adjustment instruction, determining adjusted basic style parameters of the target guide line based on the guide line style adjustment instruction, where the basic style parameters include at least one of the following: color parameter, line type parameter, and position parameter; and adjusting the display effect of the target guide line in the target element through the basic style parameters.
[0013] Optionally, after adjusting the text or symbols within the target element by the target reference line to obtain the laid-out target element, the method further includes: receiving a reference line removal instruction, and removing the target reference line from within the target element by the reference line removal instruction.
[0014] To achieve the above object, according to another aspect of the present application, there is provided a layout device for elements in a page. The device includes: a calling unit configured to determine a target element to be laid out in a target page and call a reference line instruction for the target element, where the reference line instruction is used to apply a target reference line to the target element when the target page is rendered; a display unit configured to display the target reference line within the target element based on the reference line instruction; and an adjustment unit configured to adjust the text or symbols within the target element by the target reference line to obtain the laid-out target element.
[0015] To achieve the above object, according to another aspect of the present application, there is provided a computer program product including a computer program, where when the computer program is executed by a processor, the steps of the layout method for elements in a page described in various embodiments of the present application are implemented.
[0016] Through the present application, the following steps are adopted: determining a target element to be laid out in a target page and calling a reference line instruction for the target element, where the reference line instruction is used to apply a target reference line to the target element when the target page is rendered; displaying the target reference line within the target element based on the reference line instruction; and adjusting the text or symbols within the target element by the target reference line to obtain the laid-out target element, thereby solving the problem of low efficiency in laying out elements in a page in the related art. By encapsulating the auxiliary effect of the font eight-line grid through a custom reference line instruction, the front-end development process is simplified. When laying out elements in a page, only by calling the reference line instruction, the target reference line can be displayed within the target element, thereby achieving the effect of improving the page layout efficiency. BRIEF DESCRIPTION OF THE DRAWINGS
[0017] The accompanying drawings that form a part of the present application are used to provide a further understanding 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 of the present application. In the drawings:
[0018] Figure 1 is a flowchart of a layout method for elements in a page provided by an embodiment of the present application;
[0019] Figure 2 is a schematic diagram of a target reference line provided by an embodiment of the present application;
[0020] Figure 3 is a schematic diagram of a layout device for elements in a page provided by an embodiment of the present application;
[0021] Figure 4 It is a schematic diagram of an electronic device provided according to an embodiment of the present application. Detailed implementation manners
[0022] It should be noted that, without conflict, the embodiments in the present application and the features in the embodiments may be combined with each other. The present application will be described in detail below with reference to the drawings and in combination with the embodiments.
[0023] In order to enable those skilled in the art to better understand the solution of the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only a part of the embodiments of the present application, rather than all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without making creative efforts shall fall within the protection scope of the present application.
[0024] 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 do not necessarily need to be used to describe a specific order or sequence. It should be understood that such data can be interchanged under appropriate circumstances so as to describe the embodiments of the present application here. In addition, the terms "comprising" and "having" and any variations thereof are intended to cover non-exclusive inclusion. For example, a process, method, system, product or device comprising a series of steps or units does not necessarily need to be limited to those clearly listed steps or units, but may include other steps or units not clearly listed or inherent to these processes, methods, products or devices.
[0025] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data for display, data for analysis, etc.) involved in the present disclosure are all information and data authorized by the user or fully authorized by all parties.
[0026] It should be noted that the collected information is information and data authorized by the user or fully authorized by all parties, and the processing of relevant data such as collection, storage, use, processing, transmission, provision, disclosure and application all complies with the relevant laws, regulations and standards of the relevant regions, takes necessary confidentiality measures, does not violate public order and good customs, and provides corresponding operation entrances for users to choose to authorize or refuse.
[0027] The present invention will be described below in combination with preferred implementation steps. Figure 1 It is a flowchart of a method for laying out elements in a page provided according to an embodiment of the present application, as Figure 1 shown, the method includes the following steps:
[0028] Step S101: Determine the target element to be laid out on the target page, and call the auxiliary line instruction for the target element. The auxiliary line instruction is used to apply the target auxiliary line to the target element when the target page is rendered.
[0029] In step S101, the auxiliary line instruction can be a custom instruction, which is an extension mechanism provided by Vue.js (a user interface construction framework) for adding specific behaviors or functions to HTML (HyperText Markup Language, the standard markup language for creating web pages) elements. Custom instructions allow developers to bind custom behaviors to DOM (Document Object Model) elements, providing greater flexibility and controllability in rendering and interaction. After defining the auxiliary line instruction in the user interface construction framework, it can be easily applied to any DOM element, i.e., the target element, on the target page, simply by using the auxiliary line instruction on the element tag of the target element.
[0030] Step S102: Display the target auxiliary line within the target element based on the auxiliary line instruction.
[0031] In step S102, the target auxiliary line can be a font octoline grid auxiliary line. In design and typesetting, visible or invisible reference lines (similar to the five-line staff in musical scores) are used to help designers ensure the consistency of text baselines, line spacing, and font sizes on the page. After applying the auxiliary line instruction to the target element, the target auxiliary line is rendered within the target element according to the configuration parameters of the auxiliary line preset in the auxiliary line instruction, such as color, line type, and position, thus displaying the target auxiliary line within the target element.
[0032] Step S103: Adjust the text or symbols within the target element through the target auxiliary line to obtain the laid-out target element.
[0033] In step S103, determine how to use the target auxiliary line to adjust the text or symbols according to the design requirements of the target page. For example, to ensure that the baselines of all text are aligned with a specific auxiliary line, or that symbols must be precisely placed on another auxiliary line. Apply the auxiliary line instruction to the target element and pass parameters such as color, line type, and position. The auxiliary line instruction receives a parameter object containing positions such as top, baseline (used for vertical alignment of inline elements or inline-block elements), and bottom (the bottom property is used to position an element from its bottom boundary). These positions of the auxiliary lines can be used to guide the vertical alignment of text or symbols.
[0034] In an editing or design environment, the relative position of the guide lines with respect to the text or symbols can be viewed in real time. If the guide lines do not match the expected typesetting baseline or alignment points, the position of the text or symbols can be adjusted manually or through code to ensure that they are precisely laid out according to the guide lines. CSS styles such as line-height (used to adjust the line height to ensure the text is aligned with the guide lines), vertical-align (used to adjust the vertical alignment of inline elements, such as aligning the baseline with the guide lines), and margin (used to fine-tune the distance between the element and the guide lines to ensure precise alignment) are used to adjust the vertical position and alignment of the text or symbols to match the guide lines.
[0035] In different screen sizes, the position of the guide lines may change dynamically to maintain the layout consistency of the responsive design. After making layout adjustments in the editor, ensure that the text or symbols are correctly laid out according to the guide lines on various devices and screen sizes through preview and testing. After adjusting the target elements to obtain the layout, if the layout of the text or symbols meets the design requirements, save these adjustments to the layout project of the target page for subsequent editing or publishing.
[0036] The layout method for elements on a page provided by the embodiments of the present application determines the target elements to be laid out on the target page and invokes the guide line instruction for the target elements. The guide line instruction is used to apply the target guide lines to the target elements when the target page is rendered; based on the guide line instruction, the target guide lines are displayed within the target elements; and the text or symbols within the target elements are adjusted through the target guide lines to obtain the laid-out target elements, solving the problem of low efficiency in laying out elements on a page in the related art. By encapsulating the auxiliary effect of the font eight-line grid through a custom guide line instruction, the front-end development process is simplified. When laying out elements on a page, only the guide line instruction needs to be invoked to display the target guide lines within the target elements, thereby achieving the effect of improving the page layout efficiency.
[0037] To improve the page layout efficiency, it is necessary to encapsulate the guide line instruction. Optionally, in the layout method for elements on a page provided by the embodiments of the present application, before invoking the guide line instruction for the target elements, the method further includes: registering the guide line instruction in the user interface construction framework through a custom instruction registration method; adding basic styles to the guide line instruction, and configuring the container for each target guide line in the user interface construction framework, where the basic styles include at least one of the following: basic class, color class, line type class, and position class.
[0038] In some examples, using the hook function of custom directives, basic styles are automatically injected before DOM rendering to provide structural support for subsequent generation of eight-line grids. Then, the directive dynamically injects 8 inline elements, which will serve as the containers for the eight-line grids, ensuring that they do not interfere with the existing layout structure or element positions in the target page. Subsequently, the width and height of each auxiliary line are adjusted, and the styles of the lines are precisely controlled to avoid affecting the page content, ensuring the beauty and practicality of the auxiliary effect.
[0039] Define the auxiliary line directive through app.directive (i.e., the custom directive registration method) to ensure that the styles of the target auxiliary lines can be automatically applied to the target elements every time the page is rendered. The registration code can be as follows:
[0040] app.directive('lines', {
[0041] mounted(el) {
[0042] el.classList.add('lines');
[0043] }
[0044] )
[0045] The class registered through app.directive will serve as the container for the target auxiliary lines and will be automatically injected into the target elements through the auxiliary line directive. By adding the class name of the auxiliary line directive, the styles can be uniformly managed and adjusted without manually setting them for each element. When registering the auxiliary line directive, basic styles can be defined. The basic styles can include: basic class: line (line), color classes: red (red), green (green), blue (blue), black (black), line type classes: dotted (dotted line), solid (solid line), position classes: top (top), bottom (bottom), text-top (upper line), text-bottom (lower line), baseline (basic reference position), middle (middle), sub (subscript), super (superscript).
[0046] In this embodiment, by registering the auxiliary line instruction, an efficient method for developers to quickly generate the target auxiliary line effect is provided, which meets the requirements of vertical typesetting alignment, can flexibly adapt to various scenarios and devices, greatly improves the scalability and maintenance efficiency of the code, greatly reduces manual operations and repetitive work, and improves the development efficiency. Through the auxiliary line instruction, a display environment for the target auxiliary line is constructed for the DOM element and its child elements. The auxiliary line instruction can also dynamically adjust the auxiliary line effect according to the transmitted color, line type, and position parameters, making the display more flexible. By abstracting the target auxiliary line management into instruction and class definitions, all styles and behaviors can be centrally managed and modified, reducing code redundancy and maintenance difficulty.
[0047] The auxiliary line instruction allows the configuration and display of the auxiliary line to be completely separated from the HTML markup, making the HTML structure clearer. At the same time, through CSS classes and custom directives of Vue.js, the style, position, and visibility of the auxiliary line can be flexibly controlled without repeating the same code or style definition every time it is used.
[0048] After the auxiliary line instruction is called on the target element, the page can be rendered according to the auxiliary line instruction to display the target auxiliary line. Optionally, in the element layout method provided in the embodiment of the present application, displaying the target auxiliary line in the target element based on the auxiliary line instruction includes: dividing the target auxiliary line into multiple groups of target auxiliary lines according to the auxiliary line position, where the auxiliary line position includes at least one of the following: top, bottom, basic reference position, middle, superscript, subscript, upward row, and downward row; configuring a target color for each group of target auxiliary lines, where the target color of each group of target auxiliary lines is different from that of other groups of target auxiliary lines; and displaying each group of target auxiliary lines in a container corresponding to the auxiliary line position in the target element.
[0049] In some examples, during the layout process of the target auxiliary line, the target auxiliary line can be divided into four groups according to the position, and each group is marked with a different color, making the display effect of the eight-line grid more intuitive and clear. For example, it is divided into four groups of colors according to the position of the eight-line grid, which is visually easy to distinguish. Figure 2 is a schematic diagram of the target auxiliary line provided according to the embodiment of the present application, as Figure 2As shown, group them in the following format: [red top bottom], [green text-top text-bottom], [blue baseline middle], [black sub super]. According to the grouping, distribute the color, line type, and position types to the container of the target auxiliary line in sequence, [red top solid], [red bottom solid], [green text-top dotted], [green text-bottom dotted], [blue baseline dotted], [blue middle dotted], [black super dotted], [black sub dotted].
[0050] In this embodiment, through the grouping design of color and line type, the auxiliary effect of the target auxiliary line has a high visual distinctiveness and is applicable to scenarios that require precise vertical alignment, such as the fields of education, music, language learning, etc. Through this automatically generated eight-line grid auxiliary effect, the accuracy of the font and symbols in vertical alignment is significantly improved.
[0051] The target auxiliary line can be custom grouped. Optionally, in the layout method of elements provided in the embodiment of this application, the target auxiliary line is divided into multiple groups according to the position of the auxiliary line. The target auxiliary lines include: determining the top line and the bottom line in the target auxiliary line as a group of target auxiliary lines; determining the upper line and the lower line in the target auxiliary line as a group of target auxiliary lines; determining the baseline and the middle line in the target auxiliary line as a group of target auxiliary lines; determining the upper marking line and the lower marking line in the target auxiliary line as a group of target auxiliary lines.
[0052] In some examples, the grouping of the target auxiliary line can be custom set. For example, group based on the position of the auxiliary line. According to the color, line type, and position types, apply the eight-line grid grouping to the corresponding DOM elements, such as: `[red top solid]`, `[red bottom solid]`, `[green text-top dotted]`, `[green text-bottom dotted]`, `[blue baseline dotted]`, `[blue middle dotted]`, `[black super dotted]`, `[black sub dotted]`.
[0053] In this embodiment, by dividing the target auxiliary line into multiple groups according to positions such as the top, bottom, baseline, middle, superscript, and subscript, and assigning unique colors and positions to each group, the typesetting on the page can be controlled more systematically and intuitively. The visualization effect during the editing process is improved, the code structure is simplified, and the management of the auxiliary line becomes more efficient. The grouping and color scheme can be customized according to the design requirements and the actual role of the auxiliary line to achieve the best typesetting guidance effect.
[0054] To avoid affecting the layout in the target element, the target auxiliary line can adjust the margin and stacking order. Optionally, in the method for laying out elements in the page provided in the embodiment of the present application, after the target auxiliary line is displayed in the target element based on the auxiliary line instruction, the method further includes: setting the width of the target auxiliary line to be the same as the width of the target element; configuring a target margin for the target auxiliary line to adjust the relative position of the target auxiliary line with respect to the text or symbol of the target element; configuring a stacking order for the target auxiliary line to adjust the layer of the target auxiliary line within the target element, where the stacking order is the order of the layer of the target auxiliary line within the target element.
[0055] In some examples, the target margin can be a negative right margin. The target auxiliary line is set as an inline-block element, enabling it to be arranged on the same line as other content like an inline element and also set width and height attributes like a block element. The width of the target auxiliary line is set to 100%, indicating that it will occupy the entire width of the target element. By setting a negative right margin equal to the width of the target auxiliary line, it "offsets" to the right by a distance equal to its own width. This is used to eliminate overflow in some layouts and achieve the effect of not disturbing the existing element layout. The positioning of the target auxiliary line is set as relative positioning, indicating that it can be offset relative to its normal position but still remains in the document flow.
[0056] The stacking order for the target auxiliary line is set, that is, the z-index value is 10. This value controls the stacking order of the target auxiliary line on the Z-axis, and a larger value makes the element display above other layers on the screen. By setting the width of the target auxiliary line to be the same as the width of the target element, a responsive effect is achieved without affecting the existing DOM layout. Combining the target margin and the stacking order ensures the adaptability of the line in various layouts and controls the display effect of the element in the stacking order. The combination of the negative right margin and the inline-block element ensures the self-adaptability of the line in various layouts, does not interfere with the existing element layout, and guarantees the structural integrity of the overall page.
[0057] The target auxiliary line is dynamically adjustable. Optionally, in the method for laying out elements on the page provided in the embodiments of the present application, after the target auxiliary line is displayed within the target element based on the auxiliary line instruction, the method further includes: receiving an auxiliary line style adjustment instruction, and determining the adjusted basic style parameters of the target auxiliary line based on the auxiliary line style adjustment instruction, where the basic style parameters include at least one of the following: color parameter, line type parameter, and position parameter; adjusting the display effect of the target auxiliary line within the target element through the basic style parameters.
[0058] In some examples, by dynamically passing color, line type, and position parameters, target auxiliary lines with different visual effects are generated to meet the requirements of different page layout scenarios. The auxiliary line instruction supports dynamic parameter configuration, allowing developers to freely adjust the color, line type, and position according to their needs, ensuring flexible application in different scenarios. Through simple configuration, different visual effects can be generated without changing the core logic.
[0059] In this embodiment, by receiving the auxiliary line style adjustment instruction and dynamically adjusting the color, line type, and position of the target auxiliary line based on these instructions, front-end developers or users can perform typesetting adjustments more flexibly, thereby achieving more precise alignment and layout control during the design process.
[0060] After adjusting the layout of the elements on the page, the display effect of the target auxiliary line can also be removed. Optionally, in the method for laying out elements on the page provided in the embodiments of the present application, after adjusting the text or symbols within the target element through the target auxiliary line to obtain the target element after layout, the method further includes: receiving an auxiliary line removal instruction, and removing the target auxiliary line from within the target element through the auxiliary line removal instruction.
[0061] In some examples, in the user interface, a button, a menu item, or a shortcut key can be set to receive the auxiliary line removal instruction. In the Vue.js environment, the auxiliary line removal instruction can be captured by adding an event listener to the element.
[0062] In the methods (an object used to encapsulate the business logic and interaction logic in the component) section of the Vue component, define a function for handling the removal of the auxiliary line. This function can find and remove the target auxiliary line based on the capabilities provided by the custom instruction. In the custom instruction v-lines, add support for the removal of the auxiliary line. When the removeLine (used to remove the auxiliary line) method is called, the instruction can respond to this event and perform the corresponding DOM operations. When the auxiliary line is removed, ensure that the user interface is updated in real time to reflect the result of the removal operation.
[0063] This embodiment has the function of receiving an auxiliary line removal instruction and removing the target auxiliary line from the target element. It enhances the flexibility of typesetting and design tools, allowing users to dynamically add or delete auxiliary lines according to specific design requirements or typesetting effects, thereby more efficiently performing typesetting and editing work.
[0064] It should be noted that the steps shown in the flowchart of the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions. And although the logical order is shown in the flowchart, in some cases, the steps shown or described can be executed in a different order than here.
[0065] The embodiment of the present application also provides a device for laying out elements in a page. It should be noted that the device for laying out elements in a page in the embodiment of the present application can be used to execute the method for laying out elements in a page provided by the embodiment of the present application. The following introduces the device for laying out elements in a page provided by the embodiment of the present application.
[0066] Figure 3 is a schematic diagram of the device for laying out elements in a page provided by the embodiment of the present application. As Figure 3 shown, the device includes:
[0067] A calling unit 301, configured to determine a target element to be laid out in a target page, and call an auxiliary line instruction for the target element, where the auxiliary line instruction is used to apply a target auxiliary line to the target element when the target page is rendered;
[0068] A display unit 302, configured to display the target auxiliary line in the target element based on the auxiliary line instruction;
[0069] An adjustment unit 303, configured to adjust the text or symbols in the target element through the target auxiliary line to obtain the laid-out target element.
[0070] The device for laying out elements in a page provided by the embodiment of the present application, through the calling unit 301, determines a target element to be laid out in a target page, and calls an auxiliary line instruction for the target element, where the auxiliary line instruction is used to apply a target auxiliary line to the target element when the target page is rendered; the display unit 302 displays the target auxiliary line in the target element based on the auxiliary line instruction; the adjustment unit 303 adjusts the text or symbols in the target element through the target auxiliary line to obtain the laid-out target element, solving the problem of low efficiency in laying out elements in a page in the related art. By encapsulating the auxiliary effect of the font octoline through a custom auxiliary line instruction, the front-end development process is simplified. When laying out elements in a page, only by calling the auxiliary line instruction, the target auxiliary line can be displayed in the target element, thereby achieving the effect of improving the page layout efficiency.
[0071] Optionally, in the layout device for elements on a page provided in the embodiments of the present application, the device further includes: a registration unit, configured to register a guide line instruction in a user interface construction framework through a custom instruction registration method; an addition unit, configured to add a basic style to the guide line instruction and configure a container for each target guide line in the user interface construction framework, where the basic style includes at least one of the following: a basic class, a color class, a line type class, and a position class.
[0072] Optionally, in the layout device for elements on a page provided in the embodiments of the present application, the display unit 302 includes: a division module, configured to divide target guide lines into multiple groups of target guide lines according to the guide line positions, where the guide line positions include at least one of the following: top, bottom, basic reference position, middle, superscript, subscript, upward line, and downward line; a first configuration module, configured to configure a target color for each group of target guide lines, where the color of each group of target guide lines is different from that of other groups of target guide lines; a display module, configured to display each group of target guide lines in a container at the corresponding guide line position within a target element.
[0073] Optionally, in the layout device for elements on a page provided in the embodiments of the present application, the division module includes: a first determination sub-module, configured to determine the top line and the bottom line in the target guide lines as a group of target guide lines; a second determination sub-module, configured to determine the upward line and the downward line in the target guide lines as a group of target guide lines; a third determination sub-module, configured to determine the baseline and the middle line in the target guide lines as a group of target guide lines; a fourth determination sub-module, configured to determine the superscript line and the subscript line in the target guide lines as a group of target guide lines.
[0074] Optionally, in the layout device for elements on a page provided in the embodiments of the present application, the device further includes: a setting unit, configured to set the width of the target guide line to be the same as the width of the target element; a first configuration unit, configured to configure a target margin for the target guide line to adjust the relative position between the target guide line and the text or symbol of the target element; a second configuration unit, configured to configure a stacking order for the target guide line to adjust the layer of the target guide line within the target element, where the stacking order is the order of the layers of the target guide line within the target element.
[0075] Optionally, in the layout device for elements on a page provided in the embodiments of the present application, the device further includes: a receiving unit, configured to receive a guide line style adjustment instruction and determine adjusted basic style parameters of the target guide line based on the guide line style adjustment instruction, where the basic style parameters include at least one of the following: a color parameter, a line type parameter, and a position parameter; a parameter adjustment unit, configured to adjust the display effect of the target guide line within the target element through the basic style parameters.
[0076] Optionally, in the layout device of elements in the page provided in the embodiments of the present application, the device further includes: a removal unit, configured to receive a guideline removal instruction, and remove a target guideline from a target element through the guideline removal instruction.
[0077] The layout device of elements in the page includes a processor and a memory. The above-mentioned calling unit 301, display unit 302, adjustment unit 303, etc. are all stored in the memory as program units, and the processor executes the above program units stored in the memory to implement corresponding functions.
[0078] The processor contains a kernel, and the kernel retrieves the corresponding program unit from the memory. One or more kernels can be set, and the page layout efficiency can be improved by adjusting the kernel parameters.
[0079] The memory may include non-permanent memory in a computer-readable medium, in the form of random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash memory (flash RAM), and the memory includes at least one storage chip.
[0080] The embodiments of the present invention provide a computer-readable storage medium, on which a program is stored, and when the program is executed by a processor, it implements the layout method of elements in the page.
[0081] The embodiments of the present invention provide a processor, and the processor is used to run a program, wherein when the program runs, it executes the layout method of elements in the page.
[0082] Figure 4 It is a schematic diagram of an electronic device provided according to the embodiments of the present application. As Figure 4 shown, the electronic device 401 includes a processor, a memory, and a program stored on the memory and executable on the processor. When the processor executes the program, the following steps are implemented: determining a target element to be laid out in a target page, and calling a guideline instruction for the target element, where the guideline instruction is used to apply a target guideline to the target element when the target page is rendered; displaying the target guideline in the target element based on the guideline instruction; adjusting the text or symbols in the target element through the target guideline to obtain the laid-out target element. The device herein can be a server, a PC, a PAD, a mobile phone, etc.
[0083] The present application also provides a computer program product, which, when executed on a data processing device, is adapted to execute a program initialized with the following method steps: determining a target element to be laid out in a target page, and calling a guideline instruction for the target element, where the guideline instruction is used to apply a target guideline to the target element when the target page is rendered; displaying the target guideline in the target element based on the guideline instruction; adjusting the text or symbols in the target element through the target guideline to obtain the laid-out target element.
[0084] Those skilled in the art will understand that the embodiments of the present application can be provided as a method, a system, or a computer program product. Therefore, the present application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Moreover, the present application can take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk memory, CD-ROM, optical memory, etc.) containing computer-usable program code.
[0085] The present application is described with reference to the flowcharts and / or block diagrams of methods, apparatuses (systems), and computer program products according to the embodiments of the present application. It should be understood that each flow and / or block in the flowchart and / or block diagram, as well as the combination of flows and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to the processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing devices to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing devices generate means for implementing the specified functions in Figure 1 one or more of the processes or multiple processes and / or blocks Figure 1 one or more of the blocks or multiple blocks.
[0086] These computer program instructions can 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 generate a manufactured article including instruction means, and the instruction means implements the specified functions in Figure 1 one or more of the processes or multiple processes and / or blocks Figure 1 one or more of the blocks or multiple blocks.
[0087] These computer program instructions can also be loaded onto a computer or other programmable data processing device, so that a series of operation steps are executed on the computer or other programmable device to generate a computer-implemented process. Thus, the instructions executed on the computer or other programmable device provide steps for implementing the specified functions in Figure 1 one or more of the processes or multiple processes and / or blocks Figure 1 one or more of the blocks or multiple blocks.
[0088] In a typical configuration, a computing device includes one or more processors (CPUs), an input / output interface, a network interface, and a memory.
[0089] The memory may include non-permanent memory in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. The memory is an example of a computer-readable medium.
[0090] Computer readable media include permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. Information can be computer readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include temporary computer readable media (transitory media), such as modulated data signals and carrier waves.
[0091] It should also be noted that the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, commodity or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, commodity or device. In the absence of more restrictions, the elements defined by the sentence "comprises a ..." do not exclude the existence of other identical elements in the process, method, commodity or device including the elements.
[0092] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems or computer program products. Therefore, the present application may 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 may adopt the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) that contain computer-usable program code.
[0093] The above are only embodiments of the present application and are not intended to limit the present application. For those skilled in the art, the present application may have various changes and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included within the scope of the claims of the present application.
Claims
1. A layout method for elements in a page, characterized in that, including: Determine a target element to be laid out in a target page, and call a guide line instruction for the target element, where the guide line instruction is used to apply a target guide line to the target element when rendering the target page; Display the target guide line within the target element based on the guide line instruction; Adjust the text or symbols within the target element through the target guide line to obtain the laid-out target element.
2. The method according to claim 1, wherein Before calling the guide line instruction for the target element, the method further includes: Register the guide line instruction in a user interface construction framework through a custom instruction registration method; Add a basic style to the guide line instruction, and configure a container for each target guide line in the user interface construction framework, where the basic style includes at least one of the following: basic class, color class, line type class, and position class.
3. The method according to claim 1, characterized in that Displaying the target guide line within the target element based on the guide line instruction includes: Divide the target guide line into multiple groups of target guide lines according to the guide line position, where the guide line position includes at least one of the following: top, bottom, basic reference position, middle, superscript, subscript, ascending line, and descending line; Configure a target color for each group of target guide lines, where the color of each group of target guide lines is different from that of other groups of target guide lines; Display each group of target guide lines within a container at the corresponding guide line position within the target element.
4. The method according to claim 3, characterized in that, Dividing the target guide line into multiple groups of target guide lines according to the guide line position includes: Determine the top line and the bottom line in the target guide line as a group of target guide lines; Determine the ascending line and the descending line in the target guide line as a group of target guide lines; Determine the baseline and the middle line in the target guide line as a group of target guide lines; Determine the superscript line and the subscript line in the target guide line as a group of target guide lines.
5. The method according to claim 1, wherein After displaying the target guide line within the target element based on the guide line instruction, the method further includes: Set the width of the target guide line to be the same as the width of the target element; Configure a target margin for the target guide line to adjust the relative position between the target guide line and the text or symbols of the target element; Configure a stacking order for the target guide line to adjust the layer of the target guide line within the target element, where the stacking order is the order of the layers of the target guide line within the target element.
6. The method according to claim 1, wherein After displaying the target guide line within the target element based on the guide line instruction, the method further includes: Receive a guide line style adjustment instruction, and determine adjusted basic style parameters of the target guide line based on the guide line style adjustment instruction, where the basic style parameters include at least one of the following: color parameter, line type parameter, and position parameter; Adjust the display effect of the target guide line within the target element through the basic style parameters.
7. The method according to claim 1, wherein After adjusting the text or symbols within the target element through the target guide line to obtain the laid-out target element, the method further includes: Receive a guide line removal instruction, and remove the target guide line from within the target element through the guide line removal instruction.
8. A layout device for elements in a page, characterized in that including: A calling unit, configured to determine a target element to be laid out in a target page, and call an auxiliary line instruction for the target element, where the auxiliary line instruction is used to apply a target auxiliary line to the target element when the target page is rendered; A display unit, configured to display the target auxiliary line within the target element based on the auxiliary line instruction; An adjustment unit, configured to adjust text or symbols within the target element through the target auxiliary line to obtain a laid-out target element.
9. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by a processor, it implements the method for laying out elements in a page according to any one of claims 1 to 7.
10. An electronic device, characterized in that, It includes one or more processors and a memory, where the memory is used to store one or more programs. When the one or more programs are executed by the one or more processors, the one or more processors implement the method for laying out elements in a page according to any one of claims 1 to 7.