Automatic typesetting method and system for dragging type newspaper advertisement materials

Abstract

The invention provides an automatic typesetting method and system for dragging type newspaper advertisement materials, and belongs to the technical field of computer typesetting. The method comprises the steps that a front end sends layout information of the advertisement materials to a background after a user finishes dragging; the method comprises the following steps: a background automatically adjusts vertical coordinates of all materials according to a preset vertical segmentation rule, so that the vertical coordinates are automatically aligned to a nearest datum line; then, based on the adjusted layout information, finding out a key path with the maximum transverse occupied space in all the materials through calculation; and finally, according to the difference between the total width of the layout and the total width of the key path, automatically and equally adjusting the horizontal coordinates of all the materials on the key path to realize horizontal uniform distribution. Through cooperation of the front end and the rear end, rough dragging positioning of the user is converted into an accurate and standard typesetting result, manual fine alignment of the user is not needed, and the efficiency and accuracy of newspaper advertisement typesetting are greatly improved.

Description

Technical Field

[0001] This invention relates to the field of computer typesetting technology, and in particular to an automatic typesetting method and system for drag-and-drop newspaper advertising materials. Background Technology

[0002] With the development of newspaper digitization, web-based newspaper advertising layout systems are becoming increasingly popular. These systems typically allow users to drag and drop advertising images, text, and other materials onto designated locations on the newspaper page through a front-end interface (such as one built using frameworks like React). The back-end is responsible for receiving and processing the final page layout data.

[0003] In existing technologies, "alignment guidelines" are often used to achieve neat and standardized layouts. When a user drags an element close to the edge of another element or a column line, the system displays guidelines to assist the user in manual alignment. While this method offers some convenience, its drawbacks are obvious: users still need to spend a significant amount of time and effort performing precise dragging operations to align each guideline, resulting in low overall layout efficiency. This is especially problematic for advertising pages with numerous elements and complex layouts, where the operation is cumbersome, the user experience is poor, and errors are easily introduced due to manual operation.

[0004] Therefore, there is an urgent need for an automatic typesetting method that can simplify the operation process and improve typesetting efficiency and accuracy. Summary of the Invention

[0005] The present invention aims to solve the technical problems of low efficiency and cumbersome operation caused by relying on manual fine alignment in the existing technology, and proposes an automatic layout method and system for drag-and-drop newspaper advertising materials.

[0006] In a first aspect, embodiments of the present invention provide an automatic layout method for drag-and-drop newspaper advertising materials, including: S1, in response to the user's completion of the drag-and-drop operation on the advertising material, the front end sends the layout information of the advertising material in the layout to the back end. The layout information includes at least the coordinates, height and width of the advertising material. S2, the backend automatically adjusts the vertical coordinates of all advertising materials based on preset general rules for vertically segmenting newspaper pages; S3: The backend calculates the critical path on the page based on the layout information after all the advertising materials have been adjusted. S4, the backend automatically adjusts the horizontal coordinate of all advertising materials based on the critical path and the total width of the page; S5: The backend returns the layout information of all adjusted advertising materials to the frontend for rendering, completing the automatic layout.

[0007] The technical effect of the automatic layout method for drag-and-drop newspaper advertising materials disclosed in this invention is that: by using preset vertical segmentation rules and horizontal critical path algorithms, the layout results are ensured to meet the standard requirements of newspaper layout, eliminating errors that may be introduced by manual operation; users only need to roughly drag the advertising materials to the target area, without precise alignment, and the system automatically completes the accurate positioning and alignment of coordinates, significantly reducing the user's operation steps and time.

[0008] Furthermore, in S2, the general rule is: the newspaper page is evenly divided vertically into N segments and N-1 intervals, and the reference coordinates of the starting position of each segment are determined, where N is an integer greater than 1.

[0009] Furthermore, the automatic adjustment of the ordinate in S2 specifically includes: For any given ad creative, determine the current segment to which its current vertical axis belongs; Compare the current vertical coordinate of the advertising material with the baseline coordinate of the current segment; If the current ordinate is less than the reference ordinate, then the ordinate of the advertising material is adjusted to the reference ordinate. If the current ordinate is greater than or equal to the reference coordinate and less than the sum of the reference coordinate and a certain interval height, then the ordinate of the advertising material will be adjusted to the reference coordinate.

[0010] Furthermore, in step S3, calculating the critical path includes: S31, sort all advertising materials in ascending order according to their horizontal axis; S32, starting from the ad creative with the smallest horizontal coordinate, construct multiple vertically overlapping creative sequences as candidate paths; the vertical overlap refers to the intersection of the vertical coordinate ranges of two ad creatives; S33, calculate the total width of each candidate path, where the total width is the sum of the widths of all advertising materials on that path; S34, sort the candidate paths in descending order of their total width, and determine the candidate path with the largest total width as the critical path.

[0011] Furthermore, in S4, the automatic adjustment of the horizontal coordinate specifically includes: S41, calculate the difference between the total width of the page and the total width of the critical path as the total white space; S42, determine whether the total remaining white space is negative; if it is negative, determine that the typesetting has failed and return an error message; if it is positive or zero, proceed to step S43; S43, based on the number of advertising materials on the critical path, the total white space is evenly distributed to obtain the white space values ​​between adjacent advertising materials and between the materials at both ends and the page boundary; S44, based on the white space value, recalculate and set the horizontal coordinate of each advertising material on the critical path.

[0012] Furthermore, in S44, the horizontal coordinate of each advertising creative on the critical path is recalculated and set, specifically including: The x-coordinate of the leftmost ad creative on the critical path is set to the margin value; the x-coordinate of each subsequent ad creative is set to the sum of the x-coordinate of the previous ad creative and the width of the previous ad creative, plus the margin value.

[0013] Furthermore, the construction of candidate paths in S32 specifically includes: Starting with the ad creative with the smallest horizontal coordinate, find the ad creatives that overlap with it on the right in the vertical direction to form a path; repeat this process until all ad creatives have been traversed, resulting in multiple candidate paths.

[0014] Furthermore, the front-end is developed based on the React framework to implement drag-and-drop interactive functionality for advertising materials; the back-end is developed based on the Java language to implement logical processing such as coordinate adjustment and critical path calculation.

[0015] Furthermore, the layout information also includes the unique identifier ID of the advertising material and the material type. When the backend adjusts the coordinates, it associates the corresponding advertising material with the unique identifier ID.

[0016] Secondly, embodiments of the present invention provide an automatic layout system for drag-and-drop newspaper advertising materials, including: The front-end module is used to provide a visual drag-and-drop interface and collect material layout information after user operations; The background processing module is used to receive the layout information and execute the method described above; The return module is used to send the adjusted coordinate information back to the front end to update the display.

[0017] The technical advantages of the drag-and-drop automatic layout system for newspaper advertising materials disclosed in this invention are as follows: the system is compatible with various material types such as image ads, text ads, and graphic ads; it supports batch automatic layout of multiple materials on a single page; and it can adapt to different newspaper page sizes by adjusting parameters such as vertical reference coordinates and page width. At the same time, the logic for determining the critical path and automatically allocating white space can be dynamically adjusted according to the number and size of materials to adapt to different density layout needs, meet the diverse layout scenarios of newspaper advertising, and improve the system's versatility and practicality. Attached Figure Description

[0018] Figure 1 A flowchart illustrating an automatic layout method for drag-and-drop newspaper advertising materials provided in an embodiment of the present invention; Figure 2 This is a schematic diagram of a newspaper layout provided for an embodiment of the present invention. Detailed Implementation

[0019] To enable those skilled in the art to better understand the technical solutions of the present invention, exemplary embodiments of the present invention are described below in conjunction with the accompanying drawings, including various details of the embodiments of the present invention to aid understanding. These should be considered merely exemplary. Therefore, those skilled in the art should recognize that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of the present invention. Similarly, for clarity and brevity, descriptions of well-known functions and structures are omitted in the following description.

[0020] A method for automatically formatting drag-and-drop newspaper advertising materials, referenced. Figures 1 to 2 As shown, this invention, through a two-step core algorithm of "vertical axis based on segmented rule snapping" and "horizontal axis based on critical path equal distribution," transforms the user's rough dragging intentions into a precise, aesthetically pleasing layout that conforms to publishing standards, effectively solving the problem of low efficiency in manual alignment in existing technologies. Specifically, it includes the following steps: S1: Upon completion of the user's drag-and-drop operation on the ad creative, the front-end sends the layout information of the ad creative within the page to the back-end. This layout information includes at least the coordinates, height, and width of the ad creative. The front-end uses the React framework to build the user interface, providing intuitive drag-and-drop operations. The back-end service is developed using Java and is responsible for handling the layout logic.

[0021] The entire process begins with a drag-and-drop operation by the user on the front end. When the user releases the mouse, i.e., the drag ends, the front end collects the layout information of all ad creatives on the current page. This information includes at least the top-left corner x-coordinate (x), y-coordinate (y), width (w), and height (h) of each creative, and is sent to the backend server in the form of a data set (such as JSON).

[0022] S2: The backend automatically adjusts the vertical coordinates of all advertising materials based on a preset general rule for vertically segmenting the newspaper layout. The general rule is: divide the newspaper layout vertically into N segments and N-1 intervals, and determine the reference coordinates of the starting position of each segment, where N is an integer greater than 1.

[0023] Specific solution: After the background receives the data, it first executes the vertical coordinate automatic adjustment process. This process is based on the preset "general rules". The general rules are as follows: The standard newspaper layout is vertically divided into 15 segments and 14 gaps evenly. The height of each segment can be determined according to the actual layout height and design specifications. The system pre-stores the vertical coordinate values of the starting positions of each segment, that is, the reference coordinates Y_base[i] (i = 1 to 15). For example, Y_base[1] = 0 (the top of the layout), Y_base[2] = the height of the first segment, and so on. The gap height is used to judge the adsorption range.

[0024] The detailed process of vertical coordinate adjustment is as follows: For each received advertisement material, the background determines which segment it belongs to according to its current vertical coordinate y_current, denoted as the current segment i. Then it makes a judgment: If y_current < Y_base[i], it means the material is dragged above the reference line of the current segment, then directly adjust its vertical coordinate to Y_base[i].

[0025] If y_current == Y_base[i], it means it is already precisely aligned and no adjustment is needed.

[0026] If Y_base[i] <= y_current < (Y_base[i] + Gap_Height), it means the material is dragged below the reference line of the current segment but still within the "adsorption range" allowed by the current segment (usually the height of a gap), then also adjust its vertical coordinate to Y_base[i].

[0027] If y_current >= (Y_base[i] + Gap_Height), it means this material belongs to the next segment, and judgment should be made for the next segment (return to the previous step, i = i + 1). <{

[0028] The effect of this step is that the top vertical coordinates of all advertisement materials will be automatically "adsorbed" to the nearest segment reference line, achieving fast and precise vertical alignment.

[0029] S3: The background calculates the critical path on the layout according to the adjusted layout information of all advertisement materials. After completing the vertical coordinate adjustment of all materials, enter the horizontal coordinate automatic adjustment process. This process first needs to find the "critical path", the purpose of which is to determine the material combination that is the most crowded horizontally and determines the overall width of the layout. The specific algorithm is as follows: a) Sort all advertisement materials in ascending order according to their horizontal coordinates x.

[0030] b) Traverse from left to right: Starting with the leftmost image, find the image to its right that overlaps vertically (i.e., the vertical coordinate ranges [y, y+h] of the two images intersect), forming a vertically overlapping sequence (candidate path). There may be multiple such sequences.

[0031] c) Calculate the total width of each candidate path, which is the sum of the widths of all materials within the path.

[0032] d) Sort all candidate paths in descending order of total width, and define the path with the largest total width as the "critical path". This path represents the column of materials with the most limited horizontal space on the page.

[0033] S4: The backend automatically adjusts the horizontal coordinates of all advertising materials based on the critical path and the total width of the layout.

[0034] The backend first calculates the total margin: Total_Margin = Total page width (Page_Width) - Total critical path width (Critical_Path_Width). Then it checks the value of Total_Margin. If Total_Margin < 0, it means that the total width of the material on the critical path has exceeded the page width and cannot be accommodated in the current line, resulting in layout failure. The backend returns an error message to the frontend, such as "The total width of the material exceeds the page width, please adjust".

[0035] If Total_Margin >= 0, then an equal distribution can be used. Assuming there are M clips on the critical path, this will generate (M+1) margin intervals (including the left side of the leftmost clip and the right side of the rightmost clip). Calculate the equal margin value for each interval: Even_Margin = Total_Margin / (M+1).

[0036] Finally, reset the x-coordinate of each clip on the critical path. Let the sorted critical path clip sequence be [E1, E2, ..., EM], then: E1.x = Even_Margin; E2.x = E1.x + E1.w + Even_Margin; ...; EM.x = E(M-1).x + E(M-1).w + Even_Margin. This step ensures that the materials on the critical path and their left and right spacing are evenly distributed within the page, achieving a neat horizontal layout.

[0037] S5: The backend returns the layout information of all adjusted ad creatives to the frontend for rendering, completing the automatic layout. The backend returns complete layout information containing all adjusted coordinates (x, y) to the frontend. The frontend re-renders the layout based on the new coordinates, and the user immediately sees the final effect with automatic layout and horizontal and vertical alignment.

[0038] The following is an example of a specific application. Suppose a newspaper page has a preset width W_total=1000px, and the user needs to layout three advertising materials (material A, material B, and material C). The specific process is as follows: The first step is to establish general rules. Following step S1, the rules are defined: the newspaper layout is vertically divided into 15 segments and 14 intervals, with reference coordinates from top to bottom as 25730, 24040, 22350…2070, and a segment length of 1690. This rule provides a unified standard for adjusting the vertical coordinates, ensuring that all materials are vertically aligned correctly, and solving the layout chaos problem caused by the lack of a unified benchmark in existing technologies.

[0039] The second step is the transmission of material information. Users drag and drop materials A, B, and C roughly to the upper middle area of ​​the layout using the React front-end interface. After dragging, the front-end collects the material information and sends it to the Java back-end. The material information is shown in the table below:

[0040] A unique identifier ID ensures that the backend can accurately identify each material, avoiding confusion during adjustments and improving layout accuracy.

[0041] The third step is to adjust the vertical axis. After receiving the information, the backend adjusts the vertical axis of each material: Material A's current ordinate Y=25500, matching the current segment's baseline coordinate is 25730 (segment 1). Since 25500 < 25730, Y is reset to 25730. Material B's current ordinate Y = 25800, 25730 < 25800 < 25730 + 1690 = 27420, therefore Y is reset to 25730; Material C currently has a vertical coordinate Y=26000. Since 25730<26000<27420, Y is reset to 25730. After adjustment, the vertical coordinates of all three materials are 25730, achieving neat vertical alignment without requiring manual alignment by the user, thus saving layout time.

[0042] The fourth step is to determine the critical path. First, sort the three materials by their horizontal coordinates in ascending order: Material A (120) < Material B (280) < Material C (450). Next, starting with the leftmost material A, find the materials that overlap vertically on the right: Materials A, B, and C all have a vertical coordinate of 25730, and heights of 800, 750, and 900 respectively. Their vertical projections all cover the range of 25730-26530, indicating overlap, thus forming a material path (A→B→C). Finally, calculate the sum of the path widths, W_sum = 200 + 250 + 300 = 750. Since there are no other paths, this is the critical path. Determining the critical path ensures that the horizontal coordinate adjustment is based on the widest material combination, avoiding horizontal overflow of the layout and improving the rationality of the layout.

[0043] Step 5, adjust the horizontal coordinate: Calculate the difference D = 1000 - 750 = 250 (positive number); the number of materials on the critical path N = 3, and the margin width W = 250 / (3 + 1) = 62.5px; reset the horizontal coordinate: Image A has a horizontal coordinate of 62.5px; The x-coordinate of image B is 62.5 + 200 + 62.5 = 325 pixels. The x-coordinate of image C is 325 + 250 + 62.5 = 637.5 pixels.

[0044] After adjustment, the three materials are evenly distributed horizontally with reasonable white space, resulting in a neat and aesthetically pleasing layout. This solves the problem of uneven white space when manually adjusting existing technology.

[0045] Step 6: Layout Result Feedback. The backend returns the adjusted material information to the frontend, which renders and displays: Material A (X=62.5, Y=25730), Material B (X=325, Y=25730), and Material C (X=637.5, Y=25730). This result is the final newspaper layout. Users can use it directly or drag Material C to the X=700 position. After the second drag, the frontend resends the material information, and the backend repeats steps S2-S6, achieving iterative automatic layout to meet users' flexible adjustment needs.

[0046] Example embodiments have been disclosed herein, and while specific terminology has been used, it is for illustrative purposes only and should be construed as such, and is not intended to be limiting. In some instances, it will be apparent to those skilled in the art that features, characteristics, and / or elements described in conjunction with particular embodiments may be used alone, or in combination with features, characteristics, and / or elements described in conjunction with other embodiments, unless otherwise expressly indicated. Therefore, those skilled in the art will understand that various changes in form and detail may be made without departing from the scope of the invention as set forth in the appended claims.

Claims

1. A method for automatically formatting drag-and-drop newspaper advertising materials, characterized in that, include: S1, in response to the user's completion of the drag-and-drop operation on the advertising material, the front end sends the layout information of the advertising material in the layout to the back end. The layout information includes at least the coordinates, height and width of the advertising material. S2, the backend automatically adjusts the vertical coordinates of all advertising materials based on preset general rules for vertically segmenting newspaper pages; S3: The backend calculates the critical path on the page based on the layout information after all the advertising materials have been adjusted. S4, the backend automatically adjusts the horizontal coordinate of all advertising materials based on the critical path and the total width of the page; S5: The backend returns the layout information of all adjusted advertising materials to the frontend for rendering, completing the automatic layout.

2. The method according to claim 1, characterized in that, In S2, the general rule is: the newspaper page is divided vertically into N segments and N-1 intervals, and the reference coordinates of the starting position of each segment are determined, where N is an integer greater than 1.

3. The method according to claim 2, characterized in that, The automatic adjustment of the ordinate in S2 specifically includes: For any given ad creative, determine the current segment to which its current vertical axis belongs; Compare the current vertical coordinate of the advertising material with the baseline coordinate of the current segment; If the current ordinate is less than the reference ordinate, then the ordinate of the advertising material is adjusted to the reference ordinate. If the current ordinate is greater than or equal to the reference coordinate and less than the sum of the reference coordinate and a certain interval height, then the ordinate of the advertising material will be adjusted to the reference coordinate.

4. The method according to claim 1, characterized in that, In step S3, calculating the critical path includes: S31, sort all advertising materials in ascending order according to their horizontal axis; S32, starting from the ad creative with the smallest horizontal coordinate, construct multiple vertically overlapping creative sequences as candidate paths; the vertical overlap refers to the intersection of the vertical coordinate ranges of two ad creatives; S33, calculate the total width of each candidate path, where the total width is the sum of the widths of all advertising materials on that path; S34, sort the candidate paths in descending order of their total width, and determine the candidate path with the largest total width as the critical path.

5. The method according to claim 4, characterized in that, In step S4, the automatic adjustment of the horizontal coordinate specifically includes: S41, calculate the difference between the total width of the page and the total width of the critical path as the total white space; S42, determine whether the total remaining white space is negative; if it is negative, determine that the typesetting has failed and return an error message; if it is positive or zero, proceed to step S43; S43, based on the number of advertising materials on the critical path, the total white space is evenly distributed to obtain the white space values ​​between adjacent advertising materials and between the materials at both ends and the page boundary; S44, based on the white space value, recalculate and set the horizontal coordinate of each advertising material on the critical path.

6. The method according to claim 5, characterized in that, S44 recalculates and sets the x-coordinate of each ad creative on the critical path, specifically including: The x-coordinate of the leftmost ad creative on the critical path is set to the margin value; the x-coordinate of each subsequent ad creative is set to the sum of the x-coordinate of the previous ad creative and the width of the previous ad creative, plus the margin value.

7. The method according to claim 4, characterized in that, The construction of candidate paths in S32 specifically includes: Starting with the ad creative with the smallest horizontal coordinate, find the ad creatives that overlap with it on the right in the vertical direction to form a path; repeat this process until all ad creatives have been traversed, resulting in multiple candidate paths.

8. The method according to claim 1, characterized in that, The front-end is developed based on the React framework to enable drag-and-drop interactive functionality for advertising materials; the back-end is developed based on the Java language to implement logical processing such as coordinate adjustment and critical path calculation.

9. The method according to claim 1, characterized in that, The layout information also includes the unique identifier ID of the advertising material and the material type. When the backend adjusts the coordinates, it associates the corresponding advertising material with the unique identifier ID.

10. An automatic layout system for drag-and-drop newspaper advertising materials, characterized in that, include: The front-end module is used to provide a visual drag-and-drop interface and collect material layout information after user operations; The background processing module is used to receive the layout information and execute the method as described in any one of claims 1-9; The return module is used to send the adjusted coordinate information back to the front end to update the display.

Images