Android Question WebView Text Wrap-around when using in-line images.

[luisftv]

Frist and foremost, this is not about html background images, nope. This is about in-line text images.


I tried asking this before with few words but they were not enough… so I have to give a little longer explanation now. I beg your forgiveness…


I have an App for which I need to add a help file. After trying most options (ScrollView, ListView, Panels, Labels, etc.) I found out that WebView fits my need just perfectly (thank you Erel, you suggested that in the forum to someone else).


Everything works as needed… I can change the font size, color, type, etc. Of course, this has to be done in an HTML editor like the free Mozilla Komposer, which I used. I also have Serif WebPlus, but Komposer is simple and quick enough for the help file I need.


So, I opened Basic4Android v.3.82, and save a new blank app with the name “WebView”, just to illustrate my problem… now I added an Activity Module called “Help1”. Then I opened the “Visual Designer” and proceeded to add a “WebView” container box in the Abstract Designer. I gave the name of that WebView of “WVHelp”. JavaScriptEnabled is TRUE and so is ZoomEnabled. Also, the background of the Activity is set to “BitmapDrawable” and I loaded a nice background.


Then I proceeded to type the code. I found three options. The first one is my favorite (see below).


Only the “Core” library is needed so far…


On the HTML file, I open/edit it with Komposer and add whatever text I wanted and made any changes I wanted. Once done, I save the html, and then I go back to B4A and import this html file to the assets. Then I compile the app.


After compiling the App, my phone shows the html file as intended. I can pinch zoom in or out all I want and the text wraps around accordingly. Wonderful!!!!


*********

NOW, here is the problem. If I add an in-line picture in between paragraphs or wherever (in Komposer, of course, or any html editor) to the html file, then the text wrap-around will not reposition the text within the phone or tablet screen once I zoom beyond the size of the picture. Instead I will have to scroll from left to right… but here is the thing… only if you zoom beyond the size of the image. If you keep zooming but not beyond the size of the image (I mean, a size that will make the image fit on the device screen), then it is fine, you don’t have to scroll left to right…


This is not a glitch of B4A… it is a logical outcome.


I also tried tweaking the html code with “overflow-x:hidden” to no avail.


So, my question is:


How, what code, which way do I get the text to wrap-around whiting the device screen (the WebView container, actually) so that it will never scroll or need to scroll horizontally, but only vertically, and ignore that the picture(s) is there, but still show the picture?


I included the B4A project in a zip file here, just in case anyone has a suggestion which can be tested before offering it.


In advanced… thank you, even if it cannot be done.

#Region  Project Attributes
    #FullScreen: False
    #IncludeTitle: True
    #ApplicationLabel: WebView Help
    #VersionCode: 1
    #VersionName:
    #SupportedOrientations: Portrait
    #CanInstallToExternalStorage: False
#End Region

Sub Process_Globals
End Sub

Sub Globals

    Dim WVHelp As WebView

End Sub

Sub Activity_Create(FirstTime As Boolean)
   
    Activity.LoadLayout("Help1")

'---FRIST OPTION----------------------------------------------------
      myHTML = File.ReadString(File.DirAssets, "Delphi.html") 'html file name in lower or upper case, works either way
    WVHelp.LoadHTML(myHTML)
    WVHelp.Color = Colors.Transparent 'Makes WebView box background transparent in the Abstract Designer

   
'---SECOND OPTION----------------------------------------------------   
    'url="File:///android_asset/delphi.html"    'html file name must be in lower case for this to work.
    'WVHelp.LoadUrl(url)
    'WVHelp.Color = Colors.Transparent

   
'---THIRD OPTION----------------------------------------------------   
    'HTML="File:///android_asset/delphi.html"    'html file name must be in lower case for this to work.
    'WVHelp.LoadUrl(HTML)                        'Year, I know, HTML... but I'm using LoadUrl... It works!! Go figure!
    'WVHelp.Color = Colors.Transparent
   
End Sub

Sub Activity_Resume
End Sub

Sub Activity_Pause (UserClosed As Boolean)
End Sub

Thanks again, in advance.

 

[Erel]

Try to add the following meta tag to your page head: http://stackoverflow.com/questions/4192277/disable-horizontal-scroll-on-mobile-web

 

[luisftv]

Erel, thank you.

The link was helpful. I tried all the suggestions there, and a few combinations...

This is what worked best:

body {
overflow:hidden;
width:100%;
}

Like this:

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Oracle Training</title>
</head>
<body>
<span style="" {="" overflow:hidden=""
width:100="" }="" color="" rgb(255=""
102="" 0="" font-family="" lao="" ui=""><span
style="color: rgb(153, 153, 255);">


But it did not work on all my devices. Only on old Android versions.

The above code makes the page automatically move to the left after zooming and re-positioning the text. Awesome! If only it would work on all devices... but it is a step forward...

Thanks again.