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.
Related
I have a wordpress website with Json API installed.
Now I want to take the posts content and put it in a webview that has normal margins, breaklines that prevent the text to go out of the screen, prevent zoom in or zoom out (or these will just increase/ decrease font size), and consistent font size across all posts length.
Until now I used a textview, because I just couldn't make it look right, But textview can't show images or videos, and it looks worse overall than my website's mobile version.
this is an example of an html code content:
<p dir=\"ltr\"><strong>This is how a Post should look like</strong></p>\n<p dir=\"ltr\"> <span style=\"text-decoration: underline;\"><u>with underlines and highlights</u> </span></p>\n<p dir=\"ltr\">Paragraphs are the building blocks of papers. Many students define paragraphs in terms of length: a paragraph is a group of at least five sentences, a paragraph is half a page long, etc. In reality, though, the unity and coherence of ideas among sentences is what constitutes a paragraph. A paragraph is defined as “a group of sentences or a single sentence that forms a unit” (Lunsford and Connors 116). Length and appearance do not determine whether a section in a paper is a paragraph. For instance, in some styles of writing, particularly journalistic styles, a paragraph can be just one sentence long. Ultimately, a paragraph is a sentence or group of sentences that support one main idea. In this handout, we will refer to this as the “controlling idea,” because it controls what happens in the rest of the paragraph.</p>\n<p dir=\"ltr\">list of examples:</p>\n<ul>\n<li dir=\"ltr\" style=\"text-align: left;\">first itme</li>\n<li dir=\"ltr\" style=\"text-align: left;\">second item</li>\n</ul>\n<p> </p>\n<p> </p>\n
(you can ignore the "/n" I delete it through code)
this is how I want it too look like:
this is how it actually looks like:
example 1
example 2
as you can see there are no borders and it looks like a desktop site on smartphone.
thank you!
I have a big HTML string, all tags in it are supported by Html.fromHtml() ex. p, b, strong, br, i, em, a, and some other escape characters nothing fancy. I also have some images in there, but lets just skip that cause it may get very complicated. I want to be able to to splint my string in pages with fixed base font size. I have seen this question Breaking large text into pages in android text switcher or view flipper that uses Paint.breakText() and TextView.getLineHeight(), the solution is very nice and works pretty much well with plain text. How do I achieve the same with simple html?
First let me say that I'm very new to android development (although I have a good understanding of the basics of java), and I am building a magazine reader app for a campus publication I work for.
I want to display each article using a ViewPager widget. I'm going to build a java program which enables the magazine editor to post articles in .txt format onto a server, along with images associated with each, and have the android app periodically download these articles to a local folder.
I'm a little confused about how to construct the views for each ViewPager from the text files. Somehow my logic needs to determine the size of the screen running the app, in order to know how many words can fit on each screen.
Is this right, or am I fundamentally misunderstanding ViewPager somehow? If so, how might I structure the program to configure the views dynamically based on the txt + images given to it?
From what I understand, each page will contain as much of the article as possible, and when the user selects the article they will be able to see the entire thing. Something like this, but so it fills up the entire screen?
If this is the case, you have two options here:
Just ellipsize the textview so that it ends with a "..." at the end. Probably the preferred solution.
Resize the TextView to fit all your text (Auto Scale TextView Text to Fit within Bounds).
EDIT:
Here's a different interpretation of your question.
From what I understand, you're trying to have something like an eBook reader with an undefined number of pages; kind of what Flipboard does:
Basically, once all the text fills in the entire area you want to have it continue to the next page.
The easiest way to do this, if you do not need native performance, would be to just use a WebView, split the text across several columns, and have only one column be visible at a time.
However, it is certainly possible to calculate how tall the entire text would be and then split it up accordingly; i.e. Pagination in Android TextView
It seems similar questions have been asked and addressed: Splitting a TextView into multiple TextViews relative to screen height (see the accepted answer).
EDIT: I've tried a WebView, which does render the HTML correctly, but it is also very slow, and has visual flicker when new data is loaded. I'm looking into what inside the WebView handles the HTML formatting, as it may be a little faster on its own...
I'm making a calculator. To make the input string look real pretty-like, I've been using the HTML.FromHTML() method to handle superscripts powers and subscripts for logs, to be displayed in textViews. For example, the following HTML is handled by your browser and probably looks correct (tested on Chrome and IE):
12+10log10(10log10(33))
The subscript 10s for the logs are properly positioned just slightly below their accompanying log text, and nesting does not cause a problem. Now, the HTML.FromHTML() as used in Android 4.0:
Definitely wrong. It appears that the <sub> tag, instead of implying a subscript of the wrapping text style, instead implies a vertical offset from the baseline. This meaning that having one <sup> tag will make the enclosed text offset by 1 constant amount from the baseline, two <sup> tags will cause two of these constant amounts from the baseline, etc. To make things worse, the <sub> tag merely subtracts this constant value. To add insult to injury, instead of the <small> tag scaling things in place, it also scales the offset of any text inside a <sup> or <sub> tag.
Is there any way I can make the HTML.FromHTML() method act in the same way as the text is rendered in web browsers? Assuming the answer to this is "not right now" or "you can write your own HTML parser!", does anyone have a suggestion to create similar functionality?
Thanks!
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.