Text line adaptive layout method for converting html (hypertext markup language) into pdf (hypertext markup language)

Abstract

The invention provides an html-to-pdf text line self-adaptive layout method, which comprises the following steps of: (1) according to requirements, marking character spacing in an element label by using self-defined data while setting the character spacing of an html element; (2) setting the fonts of the html elements as Chinese fonts; (3) traversing leaf nodes in the html element dom tree, and when the node type is # text, wrapping continuous English characters in a text with in-line element tags, and setting the continuous English characters as English fonts to obtain a new html character string to replace the original leaf nodes; (4) generating layout information from the html element by an html style analysis component; (5) traversing character nodes in each row in the layout information, checking whether parent elements with character spacing styles exist or not, if so, acquiring the character spacing styles, and recalculating new abscissas in combination with an alignment mode of the parent elements and abscissa information of the parent elements and the character nodes in the rows; and (6) rendering the character spacing, the new abscissa and the original ordinate into a pdf file by a pdf generation component.

Description

Technical Field

[0001] The present invention relates to the technical field of IT systems related to document format conversion, and in particular to a text line adaptive layout method for converting HTML to PDF. Background Art

[0002] Browser-based rich text editors often use HTML+CSS technology to achieve a WYSIWYG display effect. Outputting document content to PDF format and saving it locally is one of its important functions.

[0003] An html element contains various CSS styles to control its display in the browser, such as font (font-family), text spacing (scaleX), etc.; font can be multiple font names separated by commas. In the browser, if the browser does not support the first font, it will try the next font. English fonts usually do not contain Chinese characters. Therefore, by setting the font order, the browser itself supports different display effects of Chinese and English font styles; in addition, text spacing is the function scaleX() in the CSS3 attribute transform, which is used to specify the enlargement or reduction of elements in the horizontal direction.

[0004] In the Java backend, converting HTML to PDF requires parsing HTML+CSS into layout information of page elements, and then rendering it into PDF files, which is usually done through third-party libraries. For example, there are flying-saucer and iText.XmlParser for parsing HTML styles, and OpenPDF, iText, PDFBox, etc. for generating PDF files.

[0005] Rendering text to a PDF page is generally done in units of text lines. The layout information of the text line contains various information related to rendering PDF, such as: the starting coordinate lx, width width, style, the contained inline text blocks and their starting coordinate x, etc. of the text line.

[0006] However, common HTML style parsing components only implement CSS2.1 and a few CSS3 properties, and do not support the text spacing (scaleX, which belongs to CSS3) style; and the PDF rendering component interface usually only accepts one font, and characters not included in the font file will be displayed as blanks. Therefore, when the page elements have a scaled layout with mixed Chinese and English fonts, the generated PDF file cannot achieve the same display effect as in the browser, which seriously affects the user experience. Summary of the invention

[0007] The purpose of the present invention is to provide a text line adaptive layout method for converting HTML to PDF, in order to solve the technical problems existing in the background technology.

[0008] In order to achieve the above object, the present invention adopts the following technical solutions:

[0009] A text line adaptive layout method for converting HTML to PDF, comprising the following steps:

[0010] (1) As needed, while setting the text spacing of HTML elements, use custom data to mark the text spacing in the element tag;

[0011] (2) Set the font of the HTML element to Chinese font;

[0012] (3) Traverse the leaf nodes in the HTML element DOM tree. When the node type is "#text", wrap the consecutive English characters in the text with inline element tags and set them to English fonts to obtain a new HTML string to replace the original leaf node.

[0013] (4) Generate layout information for this HTML element using the HTML style parsing component;

[0014] (5) traverse each inline text node in the layout information, check whether it has a parent element with a text spacing style set, and if so, obtain the text spacing style, and recalculate a new horizontal coordinate based on the alignment of the parent element, the horizontal coordinate information of the parent element and the inline text node;

[0015] (6) The necessary parameters such as text spacing, new horizontal coordinates, original vertical coordinates, etc. are rendered into a PDF file by the PDF generation component.

[0016] In some embodiments, setting the font of the HTML element to a Chinese font includes: presetting a Chinese font style class for all HTML elements in the style.

[0017] In some embodiments, the traversal of leaf nodes in the HTML element DOM tree, when the node type is "#text", wraps consecutive English characters in the text with inline element tags and sets them to English fonts to obtain a new HTML string to replace the original leaf nodes; including: first presetting a style class such as ".basic-latin" in the style sheet and setting it to English font, and then replacing all pure English substrings in the text with HTML nodes wrapped by span; generating layout information for this HTML element by the HTML style parsing component; the layout information at least includes the positioning, width and height data of each element rendered in PDF.

[0018] In some embodiments, traversing each inline text node in the layout information, checking whether it has a parent element with a text spacing style set, and if so, obtaining the text spacing style, combining the alignment of the parent element, the parent element and the horizontal coordinate information of the inline text node, and recalculating a new horizontal coordinate, includes:

[0019] Assume that there is a text spacing scaleX. In the layout information, the absolute horizontal coordinate of the text line is lx, the width is width, and the absolute horizontal coordinate of the text block in the line is x;

[0020] When the text line is centered, the horizontal coordinate of the text line layout information is dx = width*(1-scaleX) / 2 relative to the horizontal coordinate rendered in the PDF page. Similarly, when the text is left-aligned, dx = 0, and when the text is right-aligned, dx = width*(1-scaleX);

[0021] Get the absolute horizontal coordinate x' of the inline text block rendered in the PDF page:

[0022] x'=x+dx–(x-lx)*(1-scaleX).

[0023] Beneficial Effects

[0024] Compared with the prior art, the present invention has the following significant advantages:

[0025] The text line adaptive layout method for converting HTML to PDF provided by the present invention solves the problem of failure of the zoom layout function of mixed Chinese and English fonts when converting HTML to PDF files by marking text blocks and recalculating the horizontal coordinates of text blocks. BRIEF DESCRIPTION OF THE DRAWINGS

[0026] Figure 1 is a flow chart of the present invention;

[0027] Figure 2 The present invention is a schematic diagram of the principle of determining the horizontal coordinates of the text blocks in the line in PDF when the text line is centered, left-aligned, or right-aligned in an embodiment of the present invention. DETAILED DESCRIPTION

[0028] In order to make the purpose, technical solution and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

[0029] On the contrary, the present application covers any substitution, modification, equivalent method and scheme made on the essence and scope of the present application as defined by the claims. Further, in order to make the public have a better understanding of the present application, some specific details are described in detail in the detailed description of the present application below. Those skilled in the art can fully understand the present application without the description of these details.

[0030] The following will be combined Figure 1-2 A text line adaptive layout method for converting HTML to PDF involved in the embodiment of the present application is described in detail. It is worth noting that the following embodiments are only used to explain the present application and do not constitute a limitation on the present application.

[0031] like Figure 1 As shown, an embodiment of the present invention provides a text line adaptive layout method for converting HTML to PDF, including:

[0032] Step S1, as needed, while setting the text spacing style of the html element, use custom data such as data-scaleX to mark the text spacing style in the element tag;

[0033] Furthermore, data-scaleX is equal to the parameter value of the function scaleX() in CSS3 transform. Regardless of whether the text spacing style is preset or dynamically adjusted, data-scaleX should be consistent with the CSS style scaleX parameter value;

[0034] For example, there is a piece of HTML text:

[0035] " A text line adaptive layout method for converting HTML to PDF "

[0036] And its CSS style

[0037] p{

[0038] transform:scaleX(0.8);

[0039] }

[0040] The processed HTML text is:

[0041] " <p data-scalex＝"0.8"> A text line adaptive layout method for converting HTML to PDF "

[0042] Step S2, setting the font of the html element to Chinese font;

[0043] Preferably, to simplify the operation, the style class of the Chinese font can be preset for all HTML elements in the style;

[0044] Step S3, traverse the leaf nodes in the HTML element DOM tree, when the node type is "#text", wrap the continuous English characters in the text with inline element tags and set them to English font, get a new HTML string, and replace the original leaf node;

[0045] Preferably, a style class such as ".basic-latin" can be preset in the style sheet and set as the English font, and then all the pure English substrings in the text are replaced with HTML nodes wrapped by span;

[0046] Furthermore, care should be taken to prevent the inline element span.basic-latin from being polluted by other styles;

[0047] For example, the above html text is processed as follows:

[0048] " <p data-scalex＝"0.8">A sort of <span class＝"basic-latin"> html change <span class＝"basic-latin"> pdf Text line adaptive layout method based on "

[0049] Step S4, generating layout information from the HTML element by using the HTML style parsing component;

[0050] Furthermore, the layout information at least includes the position, width, height and other data of each element rendered in PDF;

[0051] Preferably, taking flying-saucer as an example, the generated layout information is a tree data structure similar to DOM. Each tree node is similar to the CSS box model. The layout information includes the absolute coordinates of the node in the page, the relative coordinates relative to the parent node, the width and height, etc.;

[0052] Further preferably, the layout information of a line of text is described in the flying-saucer using the LineBox class, and its width represents the page width occupied by the line of text;

[0053] Step S5, traverse each inline text node in the layout information, check whether it has a parent element with a text spacing style set, if so, obtain the text spacing style data-scaleX, combine the alignment of the parent element, the horizontal coordinate information of the parent element and the inline text node, and recalculate the new horizontal coordinate x';

[0054] like Figure 2 As shown, it is assumed that: there is a text spacing scaleX, in the layout information, the absolute horizontal coordinate of the text line is lx, the width is width, and the absolute horizontal coordinate of the text block in the line is x.

[0055] Furthermore, when the text line is centered, the horizontal coordinate of the text line layout information is dx=width*(1-scaleX) / 2 relative to the horizontal coordinate rendered in the PDF page. Similarly, when the text is left-aligned, dx=0, and when the text is right-aligned, dx=width*(1-scaleX).

[0056] Furthermore, the absolute horizontal coordinate x' of the inline text block rendered in the PDF page can be obtained:

[0057] x'=x+dx–(x-lx)*(1-scaleX)

[0058] Step S6, the text spacing scaleX, the new horizontal coordinate x', the original vertical coordinate y and other necessary parameters are rendered into a pdf file by the pdf generation component;

[0059] In a specific embodiment, the present invention has been implemented in the company's online document generation system. The company's online document editing system adopts a rich text method with a preset template, in which the font requirements are: the fonts for numbers and letters are Times New Roman, and according to the different functions of the paragraphs, the Chinese fonts are required to be Fangsong, Heiti, Kaiti, Songti, etc. In addition, if the red-headed title of the red-headed document is too long and exceeds the page width, the text spacing needs to be set to ensure that it is displayed in one line. When the html file generated by the rich text editor is converted to pdf, the functions of the relevant components cannot directly meet the above requirements. The present invention can better solve this problem and achieve a display effect in pdf that is consistent with that in the browser.

[0060] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions and improvements made within the spirit and principles of the present invention should be included in the protection scope of the present invention.

Claims

1. A text line adaptive layout method for converting HTML to PDF, characterized in that: The following steps are involved: (1) As needed, while setting the text spacing of HTML elements, use custom data to mark the text spacing in the element tag; (2) Set the font of the HTML element to Chinese font; (3) Traverse the leaf nodes in the HTML element DOM tree. When the node type is "#text", wrap the consecutive English characters in the text with inline element tags and set them to English fonts to obtain a new HTML string to replace the original leaf node. (4) Generate layout information for this HTML element using the HTML style parsing component; (5) traverse each inline text node in the layout information, check whether it has a parent element with a text spacing style set, and if so, obtain the text spacing style, and recalculate a new horizontal coordinate based on the alignment of the parent element, the horizontal coordinate information of the parent element and the inline text node; (6) The text spacing, the new horizontal coordinate, and the original vertical coordinate are rendered into a PDF file by the PDF generation component.

2. The text line adaptive layout method of converting HTML to PDF according to claim 1, characterized in that: The step of marking text spacing with custom data in the element tag includes marking the text spacing style with custom data data-scaleX in the element tag; data-scaleX is equal to the parameter value of the function scaleX() in CSS3 transform. Regardless of whether the text spacing style is preset or dynamically adjusted, data-scaleX should be consistent with the CSS style scaleX parameter value.

3. The text line adaptive layout method of converting HTML to PDF according to claim 1, characterized in that: The step of setting the font of the HTML element to a Chinese font includes: presetting a style class of the Chinese font for all HTML elements in the style.

4. The text line adaptive layout method of converting HTML to PDF according to claim 1, characterized in that: The method traverses the leaf nodes in the html element dom tree, and when the node type is "#text", wraps the continuous English characters in the text with inline element tags and sets them to English font, so as to obtain a new html string and replace the original leaf node; the method includes: firstly presetting a style class such as ".basic-latin" in the style sheet and setting it to English font, and then replacing all the pure English substrings in the text with html nodes wrapped by span; generating layout information for this html element by the html style parsing component; the layout information at least includes the positioning, width and height data of each element rendered in the pdf.

5. The text line adaptive layout method of converting HTML to PDF according to claim 1, characterized in that: The traversing of each inline text node in the layout information, checking whether it has a parent element with a text spacing style set, if so, obtaining the text spacing style, combining the alignment of the parent element, the parent element and the horizontal coordinate information of the inline text node, and recalculating a new horizontal coordinate, includes: Assume that there is a text spacing scaleX. In the layout information, the absolute horizontal coordinate of the text line is lx, the width is width, and the absolute horizontal coordinate of the text block in the line is x; When the text line is centered, the horizontal coordinate of the text line layout information is dx = width*(1-scaleX) / 2 relative to the horizontal coordinate rendered in the PDF page. Similarly, when the text is left-aligned, dx = 0, and when the text is right-aligned, dx = width*(1-scaleX); Get the absolute horizontal coordinate x' of the inline text block rendered in the PDF page: x'=x+dx–(x-lx)*(1-scaleX).

Images