I extracted EPUB files to XHTML and showed them on WebView. But when I want to show them on WebView, it shows whole page. So it is not look like a book. I want to split pages specify according to screen size. Is it possible? Or how can EPUB viewers parse the pages and show only a part of it?
Thanks.
The most common way to implement ebook pagination in a web browser is to use CSS3 columns, make each column the width of the viewport, and slide the content back and forth across the viewport as the user pages right or left. The open-source ereader Readium is an example of this implementation.
Related
I have an issue for my e-Book app that is I intend to make e-Book page by Webview, but the problem here is paging when its content is too long, I dont want user vertical scroll, uhmm... I mean the content will be cut and hold into a number of Webview base on the height of screen. Can we distibute continuously the content to particular Webview.
Thank for your reading
In Netflix's Android app, there is a WebView that covers almost the entire app's area. When you drag a row left to right, it will scroll only that row, and do so using nice inertial scrolling. If you drag up and down, it will scroll the whole page up and down.
I've managed to duplicate this functionality on iOS (in a uiWebView as well as in Safari proper), but not on Android. On Android devices, anything I do is either painfully slow to scroll, or you have to be very careful scrolling vertically to start by touching in the background area between rows. Neither of which are acceptable. Obviously, I don't want to do the scrolling animation in javascript, as that will be too slow.
I know Netflix does it using a WebView, so....what is the trick they are using?
I have tried using the css properties (for the row div):
overflow-y: hidden;
-webkit-overflow-scrolling-x: touch
to no avail.
If you can't get the css Android compatible for your particular WebView, why not create server-side functionality that outputs only requested rows into seperate WebViews?
I would do the following:
* Query the web server to determine how many rows there are.
* Programmatically add the amount of rows that the web server says it has. For example, if the server reports that there are 5 rows, create 5 WebViews, each with their own URL params (ex: the first WebView would query mydomain.com/wv?row=1).
* Put each WebView row in a HorizontalScrollView, and put all HorizontalScrollViews in a VerticalScrollView.
* On URL change, go to a full-page WebView that displays the details of the clicked tile.
* On back pressed, close full page WebView and reload rows.
Not the cleanest of solutions, but should work fine.
Try to use iScroll in your HTML.
In the link you can find the source code, examples and javascript libs.
Also it has some useful callbacks.
I use it a lot when I'm working with WebViews.
Netflix could have used custom gesture detection and have seen if the scroll was more horizontal then vertical or more vertical than horizontal, and then based on how far the scroll was, scrolled the webview horizontally or vertically
I'm writing one of those reader applications. I would like to know if you have opinions and arguments for and against using WebView and Canvas (with drawText()) to achieve it.
What are the requirements:
format text according to a few html tags: <p>, <strong>, <h3>, <br/>, <a>,
display images within the text (they are in <img> tags),
display the text in two columns on tablet devices,
paging the text (Google currents style)
The ones in bold are absolutely required. The latter are strongly desired, but I can drop them.
So as far as my knowledge goes:
WebView will be great when it comes to displaying the html formatted text. I also don't have to take care of loading images, tey will be loaded automatically with <img> tags (will they, even if I use loadData() instead of loadUrl()?). The problems begin if I try to page the text. Is there a possibility to count the size of the text in a WebView and reflow it into multiple pages (using ViewPager)?
Canvas is great when it comes to counting the size of the text, putting it into columns and pages. But I will have to handle all the HTML tags myself, format the text myself. What is even worse, I will have to extract images' urls, handle the downloading and putting them back to the text (reflowing the whole text every time they load). Am I right?
Can you point some other advantages and disadvantages of using them? Which would you choose? Or maybe something else? Or is there some lib which does at least some of the work for me?
Why not use the Textview combined with spanned text and viewpagers for the paging.
I'm building an e-Book reader for android. The content of an ebook is often divided into html files (epub) with one or may chapters in them.
I'm planning to build an e-book reader who divides the content of those files into different "pages". The problem is to know how many much text "fits" on one page and to calculate the correct amount of pages since that depends on a number of different factors, such as: font-size, word size, paragraphs, images, page-breaks, headlines etc.
Idealy i would have my text justified and selectable, and since that's not possible with normal TextView or EditText i must use a non-scrollable WebView.
So to sum it up, how can i "measure" how much text that fits on one "page" on my WebView? Or is there a different better approach to solve this? I saw that the Paint class as support for measure text and breakText.
Thanks!
Note : This answer does not use the webview as your display surface.
You can use the Canvas to draw each page. The canvas gives you it's height & width using which you can draw each line on the canvas using drawText based on the width & height available.
Basically you can calculate how many letters can fit in a line , take that many words , taking care you don't split any words and keep drawing the text.
If you break up the tasks to use different workers for each paragraph you can also probably make it fast.
Maybe you can do it like this
Text is being added and rendered inside WebView
In WebView, you can use Javascript to inspect the current state of DOM tree and extract measurements like width and height of individual elements
Javascript communicates back the size of the page back to WebView creator thru some callback
When Javascript detects that the page size threshold is exceeded it sends a signal for a page break needed
Android HTML5 Kindle does page breaking with Javascript so it is definitely possible.
Take a look at the source of FitText or perhaps here. Both figure how much text can fit in a given space. You may be able to borrow ideas from them and adapt for your purposes.
So I have a local HTML file with CSS and I need to display this file in the form of a book (scroll left/right to view previous/next content, not up and down). I've thought of a really complicated ways to achieve this:
A Gallery of WebViews
Disable scrolling in the WebView
On swipe, scroll the WebView down the height of the WebView
There's a couple of problems with this approach:
I'd have to have the HTML content loaded for each WebView (extremely inefficient)
There exists the possibility that at the bottom of the page, there would be some content partially hidden
I'm looking for some suggestions on how to approach this problem, as the only thing I've came up with sounds dreadful. Thanks!
You could use two frames or iframes side by side and load odd page numbers in the left frame and even page numbers in the right frame. Put some fancy control buttons on each page, or a javascript scrollbar under the frames, and a div with a page-flipping animation that you can turn on or off when pages are loaded into the frames. I think it's totally doable, and could actually be pretty slick.
I can't help you totally, but here is a good example for page curl animation with custom view.
https://github.com/harism/android_page_curl/tree/master/src/fi