Intelligent column division method and system

Abstract

The present invention relates to an intelligent column division method, comprising the following steps: S1: putting all contents to be divided into columns into an original DIV, the width of the original DIV being the column width, and the height of the original DIV being unlimited; S2: taking out original DOM nodes from the original DIV in turn and putting the original DOM nodes one by one into one of the one or more column division sub-DIVs whose height is the column height, if the current column division sub-DIV is not enough to accommodate the original DOM nodes, the original DOM nodes are cut according to the height and distributed to the column division sub-DIV. An intelligent column division system is used to implement the above-mentioned intelligent column division method, comprising a data receiving interface, a data processing center and a data output interface. By dynamically adjusting based on the HTML DOM structure, the column division not based on CSS3 Columns is realized, and the column division of the last page under the human perspective of "first left and then right" is realized; at the same time, the paper space is utilized to the greatest extent, resources are saved, and waste is avoided; it can be used in combination with third-party tools that do not support CSS3.

Description

Technical Field

[0001] The present invention relates to the field of column division, and in particular to an intelligent column division method and system. Background Art

[0002] Column layout refers to dividing the width of a web page into N equal parts. CSS3 supports this feature, which uses the Columns attribute to set the column width and number of columns of an element. Multi-column layout can control the layout of page content, and can design text content into a multi-column layout like a newspaper.

[0003] When using CSS3 Columns for column division, there will be the following problems.

[0004] When printing a web page, the last page will show half of the content on the left and half on the right, which does not conform to the human perspective of "first left and then right".

[0005] After using CSS3's Columns to divide the pages, when printing the web pages, the columns cannot be divided perfectly and intelligently, and the paper space cannot be fully utilized.

[0006] CSS3 Columns were introduced in the CSS3 standard. Some older browsers or third-party tools cannot use it; they cannot be combined with third-party tools (such as wkhtmltopdf) that do not have sufficient CSS3 support. Summary of the invention

[0007] The purpose of the present invention is to overcome the shortcomings of the prior art and provide an intelligent column division method and system, which realizes column division not based on CSS3 Columns and realizes column division from a human perspective; at the same time, it makes maximum use of paper space; and can be used in combination with third-party tools that do not support CSS3.

[0008] The objective of the present invention is achieved through the following technical solutions:

[0009] An intelligent column division method comprises the following steps:

[0010] S1: Put all the contents to be divided into columns into the original DIV. The width of the original DIV is the column width, and the height of the original DIV is not limited.

[0011] S2: Take out the original DOM nodes from the original DIV one by one and put them into one of the one or more column sub-DIVs whose height is the column height. If the current column sub-DIV is not enough to accommodate the original DOM nodes, the original DOM nodes are cut according to the height and distributed to the column sub-DIVs.

[0012] Furthermore, in step S2, the following sub-steps are performed after the original DOM nodes are taken out from the original DIV in sequence;

[0013] S201: Determine whether the current sub-DIV is full. If the current sub-DIV is full, move to the next sub-DIV.

[0014] S202: Determine whether the current column sub-DIV can accommodate the original DOM node;

[0015] S203: If the current column sub-DIV can accommodate the original DOM node, the original DOM node is placed in the current column sub-DIV; if the current column sub-DIV cannot accommodate the original DOM node, a DOM cut node that can be accommodated by the current column sub-DIV is cut from the original DOM node according to the height, and the DOM cut node is placed in the current column sub-DIV and then in the next column sub-DIV, and the operations of steps S201-S203 are continued for the cut original DOM node.

[0016] Furthermore, when the original DOM node is cut in step S203, the height of the cut DOM node = the remaining height of the current column sub-DIV.

[0017] Furthermore, in step S203, when the original DOM node is cut, the cutting is performed in units of child DOM nodes of the original DOM node.

[0018] Furthermore, the operation of cutting the original DOM node in step S203 includes the following sub-steps:

[0019] (1) Create the front page DIV and the back page DIV;

[0020] (2) Place the original DOM node into the previous page DIV;

[0021] (3) Move the child DOM nodes from the end of the DOM node in the previous page DIV to the next page DIV in sequence until the current column child DIV can accommodate the DOM node in the previous page DIV; the DOM node in the previous page DIV is the DOM cut node, and the DOM node in the next page DIV is the original DOM node after cutting.

[0022] Further, when a critical child DOM node appears when cutting the child DOM nodes of the original DOM node as a unit in step S203, the critical child DOM node is cut;

[0023] The critical child DOM node cannot be accommodated in the current column sub-DIV, but when the critical child DOM node is not placed in the current column sub-DIV, there is remaining space in the current column sub-DIV.

[0024] Furthermore, if the critical child DOM node is a text, binary cutting is used to cut the critical child DOM node.

[0025] Furthermore, the creation method of the column sub-DIV includes new creation and reconstruction.

[0026] An intelligent column division system is used to implement the above-mentioned intelligent column division method, including a data receiving interface, a data processing center and a data output interface. The data receiving interface receives all contents to be divided into columns, the data processing center processes all contents to be divided into columns to obtain information of column sub-DIVs, and the data output interface outputs the information of column sub-DIVs.

[0027] The beneficial effects of the present invention are:

[0028] Through dynamic adjustment based on HTML DOM structure, we realize the column division not based on CSS3 Columns, and realize the column division of the last page from the human perspective of "first left and then right". At the same time, we make the most of paper space, save resources and avoid waste. It can be used in combination with third-party tools that do not support CSS3. BRIEF DESCRIPTION OF THE DRAWINGS

[0029] Figure 1 This is the effect of the last page printed in columns using CSS3 Columns;

[0030] Figure 2 This is a column effect diagram from left to right, from the human perspective of "first left and then right";

[0031] Figure 3 This is a diagram showing the space waste that may occur when using CSS3 Columns.

[0032] Figure 4 This is an example diagram after the column division of the present invention is completed;

[0033] Figure 5 It is the overall flow chart of the present invention. DETAILED DESCRIPTION

[0034] The following describes the embodiments of the present invention by specific examples, and those skilled in the art can easily understand other advantages and effects of the present invention from the contents disclosed in this specification. The present invention can also be implemented or applied through other different specific embodiments, and the details in this specification can also be modified or changed in various ways based on different viewpoints and applications without departing from the spirit of the present invention. It should be noted that the following embodiments and features in the embodiments can be combined with each other without conflict.

[0035] It should be noted that the illustrations provided in the following embodiments are only schematic illustrations of the basic concept of the present invention, and thus the drawings only show components related to the present invention rather than being drawn according to the number, shape and size of components in actual implementation. In actual implementation, the type, quantity and proportion of each component may be changed arbitrarily, and the component layout may also be more complicated.

[0036] Embodiment 1:

[0037] like Figures 1 to 5 As shown, an intelligent column division method includes the following steps:

[0038] S1: Put all the contents to be divided into columns into the original DIV. The width of the original DIV is the column width, and the height of the original DIV is not limited.

[0039] All the content to be divided into columns is located in the HTML DOM node.

[0040] The column width is the width of the column obtained by dividing the columns. The column width can be 1 / N of the page width, where N is the number of columns. The number of columns can be set by input, and the column width can also be determined based on the number of columns combined with the spacing between columns.

[0041] If N is equal to 2, all the contents to be divided into columns will be placed in an original DIV (ie ORG_DIV) with a width of half a page.

[0042] ORG_DIV is only an intermediate container in the column splitting process. All contents are put into it first, and then taken out one by one.

[0043] S2: Take out the original DOM nodes from the original DIV one by one and put them into one of the sub-DIVs with the height of the column. If the current sub-DIV is not large enough to accommodate the original DOM nodes, cut the original DOM nodes according to the height and distribute them to the sub-DIVs.

[0044] A column sub-DIV corresponds to a column of the page, where the column height can be the page height or the content height of the page. The column sub-DIV here is the final output, and every N column sub-DIVs are set on a page.

[0045] Among multiple column sub-DIVs, every N column sub-DIVs belong to a page DIV. A page DIV corresponds to a page. The layout of N column sub-DIVs under a page DIV can use absolute positioning layout.

[0046] The sub-DIV columns are arranged from left to right.

[0047] The creation method of the column sub-DIV includes new creation and re-creation.

[0048] When creating a new one, it can be set by the system or by the user.

[0049] If the column sub-DIV is insufficient, a new column sub-DIV is created.

[0050] Specifically, if the last column sub-DIV can no longer fit, a new page DIV (containing N column sub-DIVs) is created until all the child nodes in ORG_DIV are taken out.

[0051] The original DOM node is the original HTML DOM node loaded into the original DIV in step S1.

[0052] Put the original DOM node into the sub-DIV. From left to right, if the first sub-DIV is full, put the second sub-DIV; if the second sub-DIV is full, put the third sub-DIV, and so on. If the last sub-DIV is full, create multiple sub-DIVs with the same height as the column height until all the original DOM nodes in ORG_DIV are taken out.

[0053] In step S2, after taking out the original DOM nodes from the original DIV in sequence, the following sub-steps are performed;

[0054] S201: Determine whether the current sub-DIV is full. If the current sub-DIV is full, move to the next sub-DIV.

[0055] S202: Determine whether the current column sub-DIV can accommodate the original DOM node;

[0056] S203: If the current column sub-DIV can accommodate the original DOM node, the original DOM node is placed in the current column sub-DIV; if the current column sub-DIV cannot accommodate the original DOM node, a DOM cut node that can be accommodated by the current column sub-DIV is cut from the original DOM node according to the height, and the DOM cut node is placed in the current column sub-DIV and then in the next column sub-DIV, and the operations of steps S201-S203 are continued for the cut original DOM node.

[0057] When the original DOM node is cut in step S203, the height of the cut DOM node = the remaining height of the current column sub-DIV.

[0058] For example, if the height of the original DOM node is 90, and the remaining height of the current column sub-DIV is only 60, the original DOM node needs to be cut, and the height of the second DOM node obtained by cutting is 60, which can be accommodated by the current column sub-DIV. The height of the first DOM node is 30.

[0059] In the step S203, when the original DOM node is cut, the cutting is performed in units of child DOM nodes of the original DOM node.

[0060] The operation of cutting the original DOM node in step S203 includes the following sub-steps:

[0061] (1) Create the front page DIV and the back page DIV;

[0062] (2) Place the original DOM node into the previous page DIV;

[0063] (3) Move the child DOM nodes from the end of the DOM node in the previous page DIV to the next page DIV in sequence until the current column child DIV can accommodate the DOM node in the previous page DIV; the DOM node in the previous page DIV is the DOM cut node, and the DOM node in the next page DIV is the original DOM node after cutting.

[0064] When a critical child DOM node appears when cutting the child DOM nodes of the original DOM node as a unit in step S203, the critical child DOM node is cut;

[0065] The critical child DOM node cannot be accommodated in the current column sub-DIV, but when the critical child DOM node is not placed in the current column sub-DIV, there is remaining space in the current column sub-DIV.

[0066] That is to say, if the height of the critical child DOM node itself cannot be perfectly cut, the critical child DOM node is cut.

[0067] Specifically, a critical child DOM node refers to a child DOM node that, when moved to, if this child DOM node is placed in the back page DIV created in step (1), the height of the DOM cut node can be satisfied in the current column child DIV, but there is still some space left. If it is not placed in, the height will not be satisfied (it will exceed the height of the current column child DIV).

[0068] If the critical child DOM node is a text, binary cutting is used for cutting the critical child DOM node.

[0069] If the critical child DOM node itself is text and has no child DOM nodes, binary cutting is performed until the condition is met. Binary cutting means cutting half of the text (based on the length of the text) first to see if the height meets the requirement. If not, cutting half of the other half again until the height meets the requirement.

[0070] The cutting of critical child DOM nodes is a recursive process. If the conditions are not met, the grandchild DOM nodes will be cut again until the conditions are met.

[0071] After all the contents in ORG_DIV are completely loaded into the newly created column sub-DIV, delete the ORG_DIV node.

[0072] An intelligent column division system is used to implement the above-mentioned intelligent column division method, including a data receiving interface, a data processing center and a data output interface. The data receiving interface receives all contents to be divided into columns, the data processing center processes all contents to be divided into columns to obtain information of column sub-DIVs, and the data output interface outputs the information of column sub-DIVs.

[0073] No CSS3 support is required. Calculate the width, height and position of DOM nodes during the column division process, and place the content (DOM nodes) to be divided into columns in the pre-created column sub-DIV in a similar way to building blocks.

[0074] Through dynamic adjustment based on HTML DOM structure, we realize the column division not based on CSS3 Columns, and realize the column division of the last page from the human perspective of "first left and then right". At the same time, we make the most of paper space, save resources and avoid waste. It can be used in combination with third-party tools that do not support CSS3.

[0075] The above-mentioned embodiments only express the specific implementation of the present invention, and the description thereof is relatively specific and detailed, but it cannot be understood as limiting the scope of the present invention. It should be pointed out that for ordinary technicians in this field, several variations and improvements can be made without departing from the concept of the present invention, which all belong to the protection scope of the present invention.

Claims

1. An intelligent column division method, characterized in that: The following steps are involved: S1: Put all the contents to be divided into columns into the original DIV. The width of the original DIV is the column width, and the height of the original DIV is not limited. S2: Take out the original DOM nodes from the original DIV one by one and put them into one of the sub-DIVs with the height of the column. If the current sub-DIV is not large enough to accommodate the original DOM nodes, cut the original DOM nodes according to the height and distribute them to the sub-DIVs. In step S2, after taking out the original DOM nodes from the original DIV in sequence, the following sub-steps are performed; S201: Determine whether the current sub-DIV is full. If the current sub-DIV is full, move to the next sub-DIV. S202: Determine whether the current column sub-DIV can accommodate the original DOM node; S203: if the current sub-DIV can accommodate the original DOM node, the original DOM node is placed in the current sub-DIV; if the current sub-DIV cannot accommodate the original DOM node, a DOM cut node that can be accommodated by the current sub-DIV is cut from the original DOM node according to the height, the DOM cut node is placed in the current sub-DIV and then in the next sub-DIV, and the operations of steps S201-S203 are continued for the cut original DOM node; When the original DOM node is cut in step S203, the cutting is performed in units of child DOM nodes of the original DOM node; The operation of cutting the original DOM node in step S203 includes the following sub-steps: (1) Create the front page DIV and the back page DIV; (2) Place the original DOM node into the previous page DIV; (3) Move the child DOM nodes from the end of the DOM node in the previous page DIV to the next page DIV in sequence until the current column child DIV can accommodate the DOM node in the previous page DIV; the DOM node in the previous page DIV is the DOM cut node, and the DOM node in the next page DIV is the original DOM node after cutting.

2. The intelligent column division method according to claim 1, characterized in that: When the original DOM node is cut in step S203, the height of the cut DOM node = the remaining height of the current column sub-DIV.

3. The intelligent column division method according to claim 1, characterized in that: When a critical child DOM node appears when cutting the child DOM nodes of the original DOM node as a unit in step S203, the critical child DOM node is cut; The critical child DOM node cannot be accommodated in the current column sub-DIV, but when the critical child DOM node is not placed in the current column sub-DIV, there is remaining space in the current column sub-DIV.

4. The intelligent column division method according to claim 3, characterized in that: If the critical child DOM node is a text, binary cutting is used for cutting the critical child DOM node.

5. The intelligent column division method according to claim 1, characterized in that: The creation method of the column sub-DIV includes new creation and re-creation.

6. An intelligent column partitioning system, used to implement an intelligent column partitioning method as claimed in any one of claims 1 to 5, characterized in that: It includes a data receiving interface, a data processing center and a data output interface. The data receiving interface receives all contents to be divided into columns, the data processing center processes all contents to be divided into columns to obtain information of column sub-DIVs, and the data output interface outputs the information of column sub-DIVs.

Images