javascript - page based load epub when changing font - Stack Overflow

admin管理员组

文章数量:1332353

I am doing ebook reader app like as iBooks. I have succesfully read a .epub file. But my problem is:-

I have to add Font size increase and decrease and font changing functionality. I have to adjust pages When i increase and decrease font size . How can I split HTML string in pages ? .

You can see in both images . After changing font size the html string gets separated and the formatting is getting collapsed.

Thanks in advance

I am doing ebook reader app like as iBooks. I have succesfully read a .epub file. But my problem is:-

I have to add Font size increase and decrease and font changing functionality. I have to adjust pages When i increase and decrease font size . How can I split HTML string in pages ? .

You can see in both images . After changing font size the html string gets separated and the formatting is getting collapsed.

Thanks in advance

• javascript
• ios
• objective-c
• uiwebview

Share Improve this question Follow edited Dec 10, 2014 at 11:22 Kalpesh asked Apr 8, 2014 at 6:36 KalpeshKalpesh 5,3242828 silver badges4141 bronze badges 5

• How are you loading the epub file? Is that a UIWebView or something else? – Enrico Susatyo Commented Apr 8, 2014 at 7:31
• Using UIwebview. Basically i have html string of ebook . so i want to split that html string – Kalpesh Commented Apr 8, 2014 at 7:36
• Could you clarify what you mean when you say 'split that html string'? – Joshua Commented Apr 18, 2014 at 19:42
• @Joshua thankx for reply . i want to change font size like as in iBooks app. – Kalpesh Commented Apr 19, 2014 at 5:53
• i have .epub file of ebook and i have succesfully parse . now i want to calculate how many character that should be fit in UIwebview according to font size and font name . – Kalpesh Commented Apr 19, 2014 at 5:59

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4 +50

Well, this is really a hard question...

I have an idea for a method that splits a HTML page into two parts: the first page, and the rest. You can then repeatedly call that method on the "rest" to get all pages.

1. Set $num_words = 100
2. Take the first $num_words words from the page => $first_page_html;
3. Put $first_page_html into UIWebView and "render" it (see note below).
4. Check height of UIWebView. Does it fit? If yes, return from algorithm.
5. If the words don't fit into the UIWebView, do $num_words--;
6. Otherwise, do $num_words++;
7. GOTO 2

This is a first algorithm that should work somehow. However, there are optimization opportunities and hidden problems:

You should probably do something like a binary search instead of a linear search. So $num_words should not be 100, 99, 98, 97, 96, ..., 62, but rather 100, 80, 60, 70, 65, 64, 63, 62. It would be even faster to ask the webview how much it is bigger or smaller than expected. I.e. if the webview is 30% too big in height, it means that you should reduce it by (1-1/(1+30%))=23%, so you should probably multiply the word-count by 0.77 in the first step.

When there are hard page-breaks in the document, your function should take that into account.

You get the height of the UIWebView by calling webView.scrollView.contentSize.height. I think you have to wait for the UIWebView to finish rendering before you can check the height though.

If you know a bit more about the structure of your HTML you may be able to use the -stringByEvaluatingJavaScriptFromString: method from UIWebView to add individual words and see what happens. That way the webview doesn't have to re-render everything all the time.

Note: by "rendering" I mean calling -loadHTMLString:baseURL: and then waiting for the -webViewDidFinishLoad: delegate method to be called.

If performance is an issue it may be faster (for the device) to encode this algorithm in Javascript somehow, but I think that would be much harder.

Finally I got answer .It is very simple . In ios 7 you don't need to write javascript for pagination or any logic .

Just set UIWebview Property . Here is my code.

self.webView.paginationMode = UIWebPaginationModeLeftToRight;
self.webView.paginationBreakingMode = UIWebPaginationBreakingModePage;
self.webView.scrollView.delegate = self;
self.webView.scrollView.pagingEnabled = YES;
self.webView.scrollView.alwaysBounceHorizontal = YES;
self.webView.scrollView.alwaysBounceVertical = NO;
self.webView.scrollView.bounces = YES;

Here is sample code a : https://github./kalpesh22m/Epub-Reader-With-Pegination

first to increase font size you need to give font size in em . before using em you need to give the body font-size:62.5% and for the elements inside div give font-size like 1.2em (which will act as 12px). so when you want to increase any Div's font-size you just have to increase font size of body by 10%. And you don't need to calculate characters for adjusting pages and this is not good practice for if you are making responsive book. use column property off css, let css handle flow of your pages. See below link for font size and flowable html structure

js fiddle

<a href="http://jsfiddle/hJ6Mj/4/">Js Fiddle</a>

and also see "readium js for chrome". which will give you idea about how to render epub file on browser

本文标签： javascriptpage based load epub when changing fontStack Overflow