CN105069060A - Page typesetting method of HTML (Hypertext Markup Language) documents - Google Patents
Page typesetting method of HTML (Hypertext Markup Language) documents Download PDFInfo
- Publication number
- CN105069060A CN105069060A CN201510450955.1A CN201510450955A CN105069060A CN 105069060 A CN105069060 A CN 105069060A CN 201510450955 A CN201510450955 A CN 201510450955A CN 105069060 A CN105069060 A CN 105069060A
- Authority
- CN
- China
- Prior art keywords
- html document
- height
- container
- paging
- current container
- 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.)
- Granted
Links
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)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Data Mining & Analysis (AREA)
- Information Transfer Between Computers (AREA)
- Document Processing Apparatus (AREA)
Abstract
The invention discloses a page typesetting method of HTML (Hypertext Markup Language) documents. The method comprises the following steps of firstly loading the HTML documents into a browser; secondly storing the contents of the HTML documents into a Document Object Modell (DOM); and finally using a JavaScript script to perform page typesetting on the contents of the HTML documents according to the display positions of the contents of the HTML documents. The page typesetting method of the HTML documents provided by the invention can perform page display on all contents in the documents, and the page display can be realized directly through the browser without installing an application program.
Description
Technical field
The present invention relates to digital reading field, particularly relate to a kind of html document paging composition method.
Background technology
Have in digital reading field much based on the reading scene of WEB, in these scenes, need resolve digital reading content file and present, and need to keep original format set type with in order to be effective.Mobile reading instrument is in html document procedure for displaying, at present multi-vendor greatly when these documents are resolved in order to paging typesetting, respectively cutting is carried out to the CSS (cascading style sheet) (CSS) supported, but this supports considerably less CSS, so just cannot reduce the aesthetic of books when showing the document, reducing reading experience.Another mode is carried out paging by the application program of this locality to html document and shows, although improve on viewing effect, complex operation, is unfavorable for that user uses.
Summary of the invention
(1) technical matters that will solve
The object of the invention is to, a kind of html document paging composition method is provided, without the need to local set up applications, use browser just can carry out paging to html document and show, and bandwagon effect attractive in appearance can be presented.
(2) technical scheme
The invention provides a kind of html document paging composition method, comprising:
S1, is loaded into browser by html document, and is stored in DOM Document Object Model by html document content;
S2, according to the display position of html document content, adopts JavaScript script to carry out paging typesetting to html document content.
(3) beneficial effect
Html document paging composition method provided by the invention, JavaScript script is adopted to carry out paging typesetting to html document content, can carry out paging displaying to all the elements in document, and paging is shown without the need to set up applications, directly just can be realized by browser.
Accompanying drawing explanation
Fig. 1 is the process flow diagram of the html document paging composition method that the embodiment of the present invention provides.
Fig. 2 is the workflow diagram of the JavaScript script that the embodiment of the present invention provides.
Embodiment
The invention provides a kind of html document paging composition method, browser is first adopted html document content to be stored in DOM Document Object Model (DOM), again according to the display position of html document content, JavaScript script is adopted to carry out paging typesetting to html document content.
In one embodiment, adopt JavaScript script to carry out paging typesetting to html document content to comprise: at the DIV element that page creation one is hiding, for storing every one page content of html document; In DIV element, create multiple container, each container is for holding one page content; From the root element of html document, travel through the element in described html document, judge whether element meets predetermined condition, if do not meet predetermined condition, then the element of the lower one deck of traversal, otherwise, judge that the height of current container interior element adds whether the height of element exceedes the height of current container, if do not exceed, then element is joined in current container, otherwise element is joined in lower one page container; Travel through the element of every one deck, until processed by all elements of described html document, obtain final paged content.
In one embodiment, before paging typesetting, adopt JavaScript script to carry out pre-service to html document content, the html element element cannot shown by browser and the CSS pattern that cannot support are removed.
In one embodiment, predetermined condition is that element is preset label and element does not have daughter element.
In one embodiment, preset label comprises form label, paragraph tag, unordered list label, definition list tab and heading label.
In one embodiment, judge that the height of current container interior element adds whether the height of element exceedes the height of current container, if do not exceed, then element is joined in current container, and mark current container and can also carry more element; If the height of current container interior element adds that the height of element exceedes the height of current container, element is joined simultaneously in current container and lower one page container, by the Part I of current container display element, by the Part II of lower one page container display element, wherein, the height of Part I is the residual altitude of current container, and the height that the height of Part II equals element deducts the height of Part I.
In one embodiment, the width of DIV element equals screen width, and screen here refers to the screen of the terminal that user uses, as mobile phone, notebook computer and panel computer.
In one embodiment, the width of container equals the width of DIV element, and the height of container equals the height of screen.
Html document paging composition method provided by the invention, can carry out paging displaying to all the elements in document, and paging is shown without the need to set up applications, directly just can be realized by browser.
For making the object, technical solutions and advantages of the present invention clearly understand, below in conjunction with specific embodiment, and with reference to accompanying drawing, the present invention is described in more detail.
Fig. 1 is the html document paging composition method that the embodiment of the present invention provides, and as shown in Figure 1, method comprises:
S1, is loaded into browser by html document, and html document content is stored in DOM Document Object Model (DOM), and now browser can load HTML picture wherein, form, mathematical formulae etc., and resolves its structure;
S2, according to the display position of html document content, adopts JavaScript script to carry out paging typesetting to html document content.
Fig. 2 is the workflow diagram of the JavaScript script that the embodiment of the present invention provides, and as shown in Figure 2, step S2 comprises:
S21, at the DIV element that page creation one is hiding, for storing every one page content of html document, wherein, DIV is the location technology in CSS, also can be called layer, and the width of DIV element equals mobile phone screen width.
S22, in DIV element, creates multiple container, and each container is for holding one page content of html document, and the width of each device equals the width of DIV element, and the height of container equals the height of mobile phone screen.
S23, because DOM Document Object Model is a tree structure, therefore from the root element root element of html document, element in traversal html document, judges whether element meets predetermined condition, if do not meet predetermined condition, the then element of the lower one deck of traversal, otherwise, carry out next step; Wherein, predetermined condition is that element is preset label and element does not have daughter element, and preset label comprises form label table, paragraph tag p, unordered list label ul, definition list tab dl and heading label h1 ~ h6.
S24, and mark current container and can also carry more element.If exceeded, still by currentElement current container, (each container is arranged to exceed container part and is hidden CSS pattern: overflow:hidden), then current container is calculated high for the row presenting also remaining height and currentElement, capable high and round divided by currentElement by residual altitude, obtain current page and can also show line number, be designated as X capable.
CurrentElement is added in the container of lower one page, and utilizes CSS pattern (margin-top: the height that need hide), hide the X line height of currentElement.Enter next step.Judge that the height of current container interior element adds whether the height of element exceedes the height of current container, if do not exceed, then element is joined in current container, and mark current container and can also carry more element; If the height of current container interior element adds that the height of element exceedes the height of current container, will join in current container by currentElement, wherein, each container is arranged to exceed container part and is hidden CSS pattern, and current container residual altitude is capable high and round divided by currentElement, and obtaining current page can also show line number, be designated as X capable,, currentElement is added in the container of lower one page meanwhile, and utilize CSS pattern to hide the X line height of currentElement.
S25, circulation S23 to S24, until processed by all elements of html document, obtain final paged content.
Before paging typesetting, adopt JavaScript script to carry out pre-service to html document content, the html element element cannot shown by browser and the CSS pattern that cannot support are removed, and prevent the page from cannot show.
Html document paging composition method provided by the invention, JavaScript script is adopted to carry out paging typesetting to html document content, can carry out paging displaying to all the elements in document, and paging is shown without the need to set up applications, directly just can be realized by browser.
Above-described specific embodiment; object of the present invention, technical scheme and beneficial effect are further described; be understood that; the foregoing is only specific embodiments of the invention; be not limited to the present invention; within the spirit and principles in the present invention all, any amendment made, equivalent replacement, improvement etc., all should be included within protection scope of the present invention.
Claims (8)
1. a html document paging composition method, is characterized in that, comprising:
S1, is loaded into browser by html document, and is stored in DOM Document Object Model by described html document content;
S2, according to the display position of described html document content, adopts JavaScript script to carry out paging typesetting to described html document content.
2. html document paging composition method according to claim 1, it is characterized in that, described step S2 comprises:
S21, at the DIV element that page creation one is hiding, for storing every one page content of described html document;
S22, in described DIV element, creates multiple container, and each container is for holding one page content of described html document;
S23, from the root element of described html document, travels through the element in described html document, judges whether described element meets predetermined condition, if do not meet predetermined condition, then analyzes the daughter element of described element, otherwise, carry out next step;
S24, judges that the height of described current container interior element adds whether the height of described element exceedes the height of described current container, if do not exceed, is then joined in described current container by described element, otherwise is joined by described element in lower one page container;
S25, circulation S23 to S24, until processed by all elements of described html document, obtain final paged content.
3. html document paging composition method according to claim 2, is characterized in that, before described step S21, also comprise:
Adopt JavaScript script to carry out pre-service to html document content, the html element element cannot shown by browser and the CSS pattern that cannot support are removed.
4. html document paging composition method according to claim 2, is characterized in that, in described step S23, described predetermined condition is: described element is that preset label or described element do not have daughter element.
5. html document paging composition method according to claim 4, is characterized in that, described preset label comprises form label, paragraph tag, unordered list label, definition list tab and heading label.
6. html document paging composition method according to claim 2, it is characterized in that, described step S24 comprises:
Judge that the height of described current container interior element adds whether the height of described element exceedes the height of current container, if do not exceed, then element is joined in current container, and mark current container and can also carry more element; If the height of described current container interior element adds that the height of element exceedes the height of described current container, described element is joined simultaneously in described current container and lower one page container, the Part I of described element is shown by described current container, the Part II of described element is shown by described lower one page container, wherein, the height of described Part I is the residual altitude of described current container, and the height that the height of described Part II equals described element deducts the height of described Part I.
7. html document paging composition method according to claim 2, is characterized in that, the width of described DIV element equals screen width.
8. html document paging composition method according to claim 7, is characterized in that, the width of described container equals the width of described DIV element, and the height of described container equals the height of described 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 true CN105069060A (en) | 2015-11-18 |
| CN105069060B 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) |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107105347A (en) * | 2017-05-26 | 2017-08-29 | 四川长虹电器股份有限公司 | With the method for div technological development WEBOS intelligent televisions front end |
| CN107451143A (en) * | 2016-05-31 | 2017-12-08 | 北京京东尚科信息技术有限公司 | The reading method and reading system of a kind of electronic document |
| CN108846109A (en) * | 2018-06-22 | 2018-11-20 | 广州中康资讯股份有限公司 | A kind of the file guiding system and method for achievable intelligent paging |
| CN109376351A (en) * | 2018-09-11 | 2019-02-22 | 宁波思骏科技有限公司 | A method of to content of courses self-adaption typesetting in tablet device |
| CN109460540A (en) * | 2017-09-06 | 2019-03-12 | 北京国双科技有限公司 | A kind of table paging display methods and device |
| CN111177602A (en) * | 2019-12-04 | 2020-05-19 | 思齐芙蓉教育集团(湖南)有限公司 | Method and system for paging typesetting of webpage content |
| CN112329396A (en) * | 2019-07-17 | 2021-02-05 | 小船出海教育科技（北京）有限公司 | Online document paging method, device, equipment and readable medium |
| CN113268209A (en) * | 2021-05-14 | 2021-08-17 | 深圳市领星网络科技有限公司 | Method and device for creating custom document printing template and computer equipment |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101331446A (en) * | 2005-09-23 | 2008-12-24 | 谷歌公司 | Displaying information on a mobile device |
| US20090319888A1 (en) * | 2008-04-15 | 2009-12-24 | Opera Software Asa | Method and device for dynamically wrapping text when displaying a selected region of an electronic document |
| 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 |
| CN104216699A (en) * | 2013-08-07 | 2014-12-17 | 侯金涛 | Icon structure based on HTML5 and display method and system |
-
2015
- 2015-07-28 CN CN201510450955.1A patent/CN105069060B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101331446A (en) * | 2005-09-23 | 2008-12-24 | 谷歌公司 | Displaying information on a mobile device |
| US20090319888A1 (en) * | 2008-04-15 | 2009-12-24 | Opera Software Asa | Method and device for dynamically wrapping text when displaying a selected region of an electronic document |
| 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 |
| CN104216699A (en) * | 2013-08-07 | 2014-12-17 | 侯金涛 | Icon structure based on HTML5 and display method and system |
Cited By (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107451143A (en) * | 2016-05-31 | 2017-12-08 | 北京京东尚科信息技术有限公司 | The reading method and reading system of a kind 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 |
| CN109376351A (en) * | 2018-09-11 | 2019-02-22 | 宁波思骏科技有限公司 | A method of to content of courses self-adaption typesetting in tablet device |
| 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 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN105069060B (en) | 2020-02-07 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN105069060A (en) | Page typesetting method of HTML (Hypertext Markup Language) documents | |
| CN105373567B (en) | Page generation method and client | |
| CN105740315B (en) | The method of one kind of multiple screen response type page layout adjustment | |
| CN106095437B (en) | The implementation method and device of the user interface layout type of RTL from right to left | |
| US20150033184A1 (en) | Method and apparatus for executing application in electronic device | |
| US9460062B2 (en) | Local rendering of an object as an image | |
| US20080244740A1 (en) | Browser-independent editing of content | |
| US8453051B1 (en) | Dynamic display dependent markup language interface | |
| TW201703513A (en) | Method and device for displaying a pop-up | |
| CN104298721B (en) | A kind of arbitrarily a object split screen layout edit methods of the online courseware development based on Web | |
| US20120218273A1 (en) | Dynamic typesetting method of display image | |
| US20100251098A1 (en) | Delivering Client Content on a Webpage | |
| CN102663126A (en) | Method and device for displaying webpage in mobile terminal | |
| CN103365855A (en) | Method and server for generating web pages | |
| CN109683978B (en) | Stream type layout interface rendering method and device and electronic equipment | |
| US20150046850A1 (en) | Multi-display system | |
| US10803236B2 (en) | Information processing to generate screen based on acquired editing information | |
| CN104217037A (en) | Method and device for displaying web page in mobile terminal | |
| CN104915186B (en) | A kind of method and apparatus making the page | |
| US20150074519A1 (en) | Method and apparatus of controlling page element | |
| KR20150095658A (en) | Preserving layout of region of content during modification | |
| Peng et al. | The design and research of responsive web supporting mobile learning devices | |
| CN104572744B (en) | structured document generation method and device | |
| US20150331558A1 (en) | Method for switching pictures of picture galleries and browser | |
| CN102662595A (en) | Magazine graphic and context mixed composing method for mobile terminal screen |
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 |