CODEWITHSUNDEEP
android-layoutandroid-webviewhtml-encode
shecodesthings
shecodesthings

Reputation: 1258

Overlapping HTML Content In WebView, when using: webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

So I load some simple HTML into a webview. The html is in the format: (it is extracted html, therefore no body tags.

<p>..blah</p> 
<div style="text-align:center;">
<a href="http://services.runescape.com/m=rswikiimages/en/2012/5/combat1-18140712.jpg"    target="_blank">
<img src="http://services.runescape.com/m=rswikiimages/en/2012/5/combat1_thumb-18140804.jpg"></a></div>
<p>..blah</p>

In the webview activity class I add:

webInfo = "<body style=\"color:white;font-size:15px\">" + webInfo + "</body>";
//for setting the size and color of the text

I use the following to load the html:

webview.loadDataWithBaseURL(null,webInfo,"text/html","UTF-8",null);
// webInfo is an html string

and I do the following so that it doesn't scroll horizontally and so that the image fits within the screen.

webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);|

If I don't use SINGLE_COLUMN, I'm always scrolling horizontally, even though the text fits nicely within the page. I thought it had finally solved the problem but I get overlapping html when i load it. This fixes itself if I zoom slightly in or out with my fingers.

Here's a picture of whats happening:

enter image description here

Question 1: How do I fix that problem and display the image so it fits in the screen and no horizontal scrolling is required?

Question 2: I've also been having trouble getting rid of the weird symbols too, my 's show up really weird.Tried using several different encodings like UTF-8, US-ACSII and lots of Windows ones, none of them seem to work to get rid of the symbols.

I hope I've been clear, any help is appreciated, I've been fiddling with this for a while O_O...

Upvotes: 3

Views: 1274

Answers (1)

Praveen Kumar Verma
Praveen Kumar Verma

Reputation: 3470

Add in webview settings:

webSettings.setLayoutAlgorithm(LayoutAlgorithm.TEXT_AUTOSIZING) //handle for font overlapping.

Upvotes: 3

Related Questions