CN105069060B - HTML document paging typesetting method - Google Patents
HTML document paging typesetting method Download PDFInfo
- Publication number
- CN105069060B CN105069060B CN201510450955.1A CN201510450955A CN105069060B CN 105069060 B CN105069060 B CN 105069060B CN 201510450955 A CN201510450955 A CN 201510450955A CN 105069060 B CN105069060 B CN 105069060B
- Authority
- CN
- China
- Prior art keywords
- height
- elements
- container
- current
- html document
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/189—Automatic justification
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Document Processing Apparatus (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The invention discloses a page typesetting method for HTML documents, which comprises the steps of loading the HTML documents into a browser, storing the HTML document contents in a Document Object Model (DOM), and performing page typesetting on the HTML document contents by adopting a JavaScript script according to the display position of the HTML document contents. The method and the device can perform paging display on all contents in the document, and the paging display can be realized directly through a browser without installing an application program.
Description
Technical Field
The invention relates to the field of digital reading, in particular to a page typesetting method for an HTML document.
Background
In the field of digital reading, there are many WEB-based reading scenes, and in these scenes, digital reading content files need to be analyzed and presented, and the original format needs to be maintained to ensure the effect. In the process of displaying HTML documents, most manufacturers cut supported Cascading Style Sheets (CSSs) for paging typesetting when analyzing the documents, but only support very few CSSs, so that the attractive effect of books cannot be restored when displaying the documents, and the reading experience is reduced. In another way, the HTML document is paged and displayed by a local application program, which improves the viewing effect, but is cumbersome to operate and not beneficial to the user.
Disclosure of Invention
Technical problem to be solved
The invention aims to provide a page typesetting method for an HTML document, which can page and display the HTML document by using a browser without locally installing an application program and can present an attractive display effect.
(II) technical scheme
The invention provides a page typesetting method for an HTML document, which comprises the following steps:
s1, loading the HTML document into the browser, and storing the HTML document content in the document object model;
and S2, performing page layout on the HTML document content by adopting a JavaScript script according to the display position of the HTML document content.
(III) advantageous effects
The HTML document paging typesetting method provided by the invention adopts the JavaScript script to page and typeset the HTML document content, can page and display all the content in the document, and can realize paging display without installing an application program through a browser.
Drawings
Fig. 1 is a flowchart of a method for page layout of an HTML document according to an embodiment of the present invention.
Fig. 2 is a flowchart of the JavaScript script provided in the embodiment of the present invention.
Detailed Description
The invention provides a page typesetting method for HTML documents, which comprises the steps of firstly storing HTML document contents in a Document Object Model (DOM) by adopting a browser, and then performing page typesetting on the HTML document contents by adopting a JavaScript script according to the display position of the HTML document contents.
In one embodiment, the paging typesetting of the content of the HTML document by adopting the JavaScript script comprises the following steps: creating a hidden DIV element on a page, wherein the hidden DIV element is used for storing each page content of the HTML document; creating a plurality of containers in a DIV element, wherein each container is used for containing a page of content; traversing elements in the HTML document from a root element of the HTML document, judging whether the elements meet a preset condition, if not, traversing the elements of the next layer, otherwise, judging whether the height of the elements in the current container plus the height of the elements exceeds the height of the current container, if not, adding the elements into the current container, otherwise, adding the elements into the next container; and traversing the elements of each layer until all the elements of the HTML document are processed to obtain the final paging content.
In one embodiment, before paging typesetting, the content of the HTML document is preprocessed by a JavaScript script, and HTML elements which cannot be displayed by a browser and unsupported CSS styles are removed.
In one embodiment, the predetermined condition is that the element is a predetermined tag and the element has no sub-elements.
In one embodiment, the predetermined tags include a table tag, a paragraph tag, an unordered list tag, a definition list tag, and a title tag.
In one embodiment, judging whether the sum of the height of the elements in the current container and the height of the elements exceeds the height of the current container, if not, adding the elements into the current container, and marking that the current container can also bear more elements; and if the sum of the height of the elements in the current container and the height of the elements exceeds the height of the current container, adding the elements into the current container and a next container simultaneously, displaying a first part of the elements through the current container, and displaying a second part of the elements through the next container, wherein the height of the first part is the residual height of the current container, and the height of the second part is equal to the height of the elements minus the height of the first part.
In one embodiment, the width of the DIV element is equal to the width of a screen, where the screen refers to a screen of a terminal used by a user, such as a mobile phone, a notebook computer, and a tablet computer.
In one embodiment, the width of the container is equal to the width of the DIV element and the height of the container is equal to the height of the screen.
The page typesetting method of the HTML document can perform page display on all contents in the document, and the page display can be realized directly through a browser without installing an application program.
In order to make the objects, technical solutions and advantages of the present invention more apparent, the present invention is described in further detail below with reference to specific embodiments and the accompanying drawings.
Fig. 1 is a method for page layout of an HTML document according to an embodiment of the present invention, and as shown in fig. 1, the method includes:
s1, loading the HTML document into a browser, storing the HTML document content in a Document Object Model (DOM), and at the moment, the browser loads pictures, tables, mathematical formulas and the like in the HTML and analyzes the structure of the HTML document;
and S2, performing page layout on the HTML document content by adopting a JavaScript script according to the display position of the HTML document content.
Fig. 2 is a flowchart of the JavaScript script according to the embodiment of the present invention, and as shown in fig. 2, step S2 includes:
s21, a hidden DIV element is created on the page and used for storing each page content of the HTML document, wherein the DIV is a positioning technology in CSS and can also be called as an image layer, and the width of the DIV element is equal to the width of the mobile phone screen.
S22, in the DIV element, creating a plurality of containers, each container for containing one page of contents of the HTML document, each container having a width equal to the width of the DIV element and a height equal to the height of the cell phone screen.
S23, traversing the elements in the HTML document from the root element of the HTML document to judge whether the elements meet the preset conditions or not, traversing the elements of the next layer if the elements do not meet the preset conditions, otherwise, performing the next step; wherein the predetermined condition is that the element is a predetermined tag and the element has no sub-elements, the predetermined tag including a table tag table, a paragraph tag p, an unordered list tag ul, a definition list tag dl, and title tags h 1-h 6.
S24 and marks that the current container may also carry more elements. If the current page line number exceeds the preset line number, the current element container (each container is set to exceed the container part hidden CSS style: overflow: hidden), then the height of the current container remaining for presentation and the line height of the current element are calculated, and the remaining height is divided by the line height of the current element and is rounded, so that the current page line number which can be still presented is obtained and is recorded as X line.
The current element is added to the container of the next page and the X line height of the current element is hidden using CSS style (margin-top: height to be hidden). Proceed to the next step. Judging whether the sum of the height of the elements in the current container and the height of the elements exceeds the height of the current container or not, if not, adding the elements into the current container, and marking that the current container can also bear more elements; if the sum of the height of the elements in the current container and the height of the elements exceeds the height of the current container, adding the current elements into the current container, wherein each container is set to exceed the hidden CSS style of the container part, dividing the residual height of the current container by the height of the current elements and rounding to obtain the number of lines which can be displayed on the current page and is recorded as X lines, and meanwhile, adding the current elements into the container of the next page and hiding the height of the X lines of the current elements by using the CSS style.
S25, looping S23 through S24 until all elements of the HTML document are processed, and obtaining the final paging content.
Before paging typesetting, the JavaScript script is adopted to preprocess HTML document contents, HTML elements which cannot be displayed by a browser and CSS styles which cannot be supported are removed, and the page cannot be displayed.
The HTML document paging typesetting method provided by the invention adopts the JavaScript script to page and typeset the HTML document content, can page and display all the content in the document, and can realize paging display without installing an application program through a browser.
The above-mentioned embodiments are intended to illustrate the objects, technical solutions and advantages of the present invention in further detail, and it should be understood that the above-mentioned embodiments are only exemplary embodiments of the present invention, and are not intended to limit the present invention, and any modifications, equivalents, improvements and the like made within the spirit and principle of the present invention should be included in the protection scope of the present invention.
Claims (7)
1. A page layout method for HTML documents is characterized by comprising the following steps:
s1, loading the HTML document into the browser, and storing the content of the HTML document in the document object model;
s2, according to the display position of the content of the HTML document, performing page typesetting on all the content in the HTML document by adopting a JavaScript script, wherein the page typesetting comprises the following steps:
s21, creating a hidden DIV element on the page, and storing each page content of the HTML document;
s22, creating a plurality of containers in the DIV element, wherein each container is used for containing one page of content of the HTML document;
s23, traversing the elements in the HTML document from the root element of the HTML document, judging whether the elements of the current layer meet the preset conditions, if not, taking the next layer of the current layer as the current layer, and executing S25; if the predetermined condition is satisfied, performing S24;
s24, judging whether the height of the element in the current container plus the height of the element in the current layer exceeds the height of the current container, if not, adding the element in the current layer into the current container, otherwise, adding the element in the current layer into the next container of the current container;
s25, looping S23 through S24 until all elements of the HTML document are processed,
and obtaining the final paging content.
2. The method for pagination layout of HTML documents according to claim 1, before said S21, further comprising:
and preprocessing the content of the HTML document by adopting a JavaScript script, and removing HTML elements which cannot be displayed by a browser and CSS styles which cannot be supported.
3. The method for pagination layout of HTML documents as claimed in claim 1, wherein in step S23, the predetermined conditions are: the element is a predetermined tag or the element has no sub-elements.
4. The method for pagination layout of HTML documents according to claim 3, wherein said predetermined tags include a table tag, a paragraph tag, an unordered list tag, a definition list tag and a title tag.
5. The method for pagination layout of HTML documents according to claim 1, wherein said S24 includes:
judging whether the height of the elements in the current container plus the height of the elements in the current layer exceeds the height of the current container or not, if not, adding the elements in the current layer into the current container, and marking that the current container can also bear more elements; if the sum of the height of the elements in the current container and the height of the elements in the current layer exceeds the height of the current container, the elements in the current layer are added into the current container and a next container of the current container at the same time, a first part of the elements in the current layer is displayed through the current container, and a second part of the elements in the current layer is displayed through the next container, wherein the height of the first part is the remaining height of the current container, and the height of the second part is equal to the height of the elements in the current layer minus the height of the first part.
6. The page layout method of HTML documents according to claim 1, wherein the width of said DIV element is equal to the screen width.
7. The method for pagination of HTML documents according to claim 6, wherein the width of the container is equal to the width of the DIV element, and the height of the container is equal to the height of the screen.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510450955.1A CN105069060B (en) | 2015-07-28 | 2015-07-28 | HTML document paging typesetting method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510450955.1A CN105069060B (en) | 2015-07-28 | 2015-07-28 | HTML document paging typesetting method |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN105069060A CN105069060A (en) | 2015-11-18 |
| CN105069060B true CN105069060B (en) | 2020-02-07 |
Family
ID=54498430
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510450955.1A Active CN105069060B (en) | 2015-07-28 | 2015-07-28 | HTML document paging typesetting method |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN105069060B (en) |
Families Citing this family (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107451143B (en) * | 2016-05-31 | 2021-06-29 | 北京京东尚科信息技术有限公司 | Reading method and reading system of electronic document |
| CN107105347A (en) * | 2017-05-26 | 2017-08-29 | 四川长虹电器股份有限公司 | With the method for div technological development WEBOS intelligent televisions front end |
| CN109460540A (en) * | 2017-09-06 | 2019-03-12 | 北京国双科技有限公司 | A kind of table paging display methods and device |
| CN108846109A (en) * | 2018-06-22 | 2018-11-20 | 广州中康资讯股份有限公司 | A kind of the file guiding system and method for achievable intelligent paging |
| CN109376351B (en) * | 2018-09-11 | 2023-07-21 | 宁波思骏科技有限公司 | Method for adaptively typesetting teaching contents on tablet equipment |
| CN112329396A (en) * | 2019-07-17 | 2021-02-05 | 小船出海教育科技（北京）有限公司 | Online document paging method, device, equipment and readable medium |
| CN111177602A (en) * | 2019-12-04 | 2020-05-19 | 思齐芙蓉教育集团(湖南)有限公司 | Method and system for paging typesetting of webpage content |
| CN113268209A (en) * | 2021-05-14 | 2021-08-17 | 深圳市领星网络科技有限公司 | Method and device for creating custom document printing template and computer equipment |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101853293A (en) * | 2010-05-26 | 2010-10-06 | 卓望数码技术（深圳）有限公司 | Adaptive paging method and device |
| CN102693280A (en) * | 2012-04-28 | 2012-09-26 | 广州市动景计算机科技有限公司 | Webpage browsing method, WebApp framework, method and device for executing JavaScript, and mobile terminal |
Family Cites Families (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7788577B2 (en) * | 2005-09-23 | 2010-08-31 | Google Inc. | Displaying information on a mobile device |
| WO2009128728A1 (en) * | 2008-04-15 | 2009-10-22 | Opera Software Asa | Method and device for dynamically wrapping text when displaying a selected region of an electronic document |
| CN104216699B (en) * | 2013-08-07 | 2017-11-10 | 侯金涛 | A kind of icon shows system based on HTML5 |
-
2015
- 2015-07-28 CN CN201510450955.1A patent/CN105069060B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101853293A (en) * | 2010-05-26 | 2010-10-06 | 卓望数码技术（深圳）有限公司 | Adaptive paging method and device |
| CN102693280A (en) * | 2012-04-28 | 2012-09-26 | 广州市动景计算机科技有限公司 | Webpage browsing method, WebApp framework, method and device for executing JavaScript, and mobile terminal |
Also Published As
| Publication number | Publication date |
|---|---|
| CN105069060A (en) | 2015-11-18 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN105069060B (en) | HTML document paging typesetting method | |
| CN102663126B (en) | Method and device for displaying webpage in mobile terminal | |
| US7362311B2 (en) | Single column layout for content pages | |
| CN102968474B (en) | Webpage display process browsed by mobile communication equipment | |
| CA2815391C (en) | Systems, methods, and interfaces for display of inline content and block level content on an access device | |
| US20130205202A1 (en) | Transformation of a Document into Interactive Media Content | |
| EP2291010A1 (en) | Structure processing method and apparatus for layout file | |
| US20120218273A1 (en) | Dynamic typesetting method of display image | |
| US20210141999A1 (en) | Method for displaying handwritten note in electronic book, electronic device and computer storage medium | |
| CN102541819B (en) | Electronic document reading mode processing method and device | |
| WO2015180422A1 (en) | Page layout method and device | |
| US9727293B1 (en) | Method and apparatus for paginating electronic documents | |
| US20120278696A1 (en) | Rule-based grid independent of content | |
| JP2014197341A (en) | Electronic book production device, electronic book system, electronic book production method and program | |
| US9465780B2 (en) | User terminal device and scroll method supporting high-speed web scroll of web document | |
| CN105956133B (en) | Method and device for displaying file on intelligent terminal | |
| CN103365877B (en) | Method and server to establishing catalogue after webpage progress transcoding | |
| Peng et al. | The design and research of responsive web supporting mobile learning devices | |
| TW200847005A (en) | Document with sidebars | |
| CN106874387B (en) | Method for displaying real-time information in self-adaptive HTML (Hypertext markup language) scrolling mode | |
| CN111767488A (en) | Article display method, electronic device and storage medium | |
| CN106776527B (en) | Electronic book data display method and device and terminal equipment | |
| CN111222069B (en) | Report component adjustment method and device and related equipment | |
| CN105589883B (en) | Method and device for displaying page elements of webpage | |
| CN105260353A (en) | Typesetting method and device for mobile terminal |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |