WebView Text Zoom Issue in Android

Question

I have a document reader project in android. Main Activity includes a WebView. The texts are reading from html. In Top Options menu includes a button for increasing text size dynamically (text are wrapping). So far so clear but when the button pressed, the text size is some increases but all text are shifting down in screen and twice wehen pressing the button, the text size increases and all text shifting down a little more again. This situation is really happening frustrating for readers. The reader must go back to where it left off after pressing the button so the reader should not lose reading location. How to solve this problem?

The Issue:

When solved the issue:

Html content of my WebView:

<!DOCTYPE html>

    <head>
        <style type="text/css"> 
            p{} p.x1{} p.x2{} p.x3{} p.x4{} 
            h2.x1{} h2.x2{} h2.x3{} h2.x4{}
        </style>
    </head>

    <body>

        //paragraph-1
        <p class="x1">Title-1</p>
        <p class="x2">Title-2</p>
        <p class="x3">Title-3</p>
        <p class="x4">Title-4</p>
        <p>Text content.</p>


        //paragraph-2
        <h class="x1">Title-1</p>
        <h class="x2">Title-2</p>
        <p>Text content.</p>


        //paragraph-3
        <h class="x3">Title-1</p>
        <h class="x4">Title-2</p>
        <p class="x3">Title-3</p>
        <p>Text content.</p>


        //paragraph-4
        <h class="x2">Title-1</p>
        <p class="x3">Title-2</p>
        <p>Text content.</p>


        //...

    </body>

</html>

score 2 · Accepted Answer · answered Apr 20 '20 at 11:28

2

You should use TextViews in a ListView and store id of top list item before zoom and after the zoom scroll to the stored list item. For the good scroll you should hide the scroll with basic image zoom effect.

answered Apr 20 '20 at 11:28

Pleaser

576
3
8

Aaron Gillion · Answer 2 · 2016-04-13T21:03:43.113

1

My idea of keeping text on-screen is to store a reference to whatever "element" (p, div, img, etc) is on the screen at a certain x,y point, changing the font size, then scrolling that element back onto the screen.

I created a working code example that works in the Android Webview:

//Route your onclick handler to our new function
function fontBtnClk() {

  //Store whatever paragraph container is in the middle of the screen
  var currentParagraph = document.elementFromPoint(window.innerWidth/3, window.innerHeight/3);

  //If the above "paragraph selector" selected the whitespace in-between two paragraphs, and stored the parent element instead:
  if(currentParagraph.tagName.toLowerCase()=="body") {

    //Divide by a different number to select the winning paragraph
    currentParagraph = document.elementFromPoint(window.innerWidth/3, window.innerHeight/2);
  }

  //Call your existing font size handler
  increaseFontSize();

  //Move the previous paragraph back onto the screen:
  currentParagraph.scrollIntoView();
}

Hope this fixes your issue!

edited Apr 13 '16 at 21:03

answered Apr 12 '16 at 07:42

Aaron Gillion

2,227
3
19
31

Edited question, you could see more details. I don't understand "___PARENT-ELEMENT-ID___" ? – ATES Apr 12 '16 at 08:30
@ATES alright, I tweaked my code for perfect execution with your HTML! – Aaron Gillion Apr 12 '16 at 08:34
@ATES have you tried on Android? JSbin works perfectly! – Aaron Gillion Apr 12 '16 at 17:43
@ATES My code selects the near-middle paragraph on the page. That's why with the really small font, it skips. If you use `window.innerHeight/5` (bigger divisor) it won't skip on the desktop computer. – Aaron Gillion Apr 12 '16 at 17:49
Android app can install different screen size so need smarter script than. – ATES Apr 13 '16 at 07:53

score 1 · Answer 3 · answered Apr 13 '16 at 14:23

1

I propose to use the relative scrollposition before and after the font size increase to calculate where the user should be. This can be done in a few steps:

Before changing font size, store the scroll height and scroll position of the text view. Determine the ratio between scroll height and scroll position (between 0 and 1)
Change the font size
After render, measure the new scroll height
Set the new scroll position as new scroll height times old ratio.

The relevant snippet:

function setSize() {
  var heightBefore = textContainer.scrollHeight;
  var scrollBefore = textContainer.scrollTop;
  var percBefore = scrollBefore / heightBefore;

  textContainer.style.fontSize = fontSize + "px";

  var heightAfter = textContainer.scrollHeight;
  var scrollAfter = textContainer.scrollTop;

  var correctedScrollAfter = Math.floor(heightAfter * percBefore);
  textContainer.scrollTop = correctedScrollAfter;
}

You can check out an example here: https://jsfiddle.net/Ln43xxv5/

I must admit I cannot test in android right now, but I do believe the general direction should work.

answered Apr 13 '16 at 14:23

user3297291

22,592
4
29
45

I tried your script on jsfiddle and android app but no stable. Because the paragraph doesn't stay put to screen top, It is moving up and down when it increasing font. – ATES Apr 13 '16 at 15:11
This code runs very precise for a math-based solution. I like it! But what will happen when the container contains different-sized fonts, and images? I don't think the height ratio will account for those discrepancies. – Aaron Gillion Apr 13 '16 at 21:01
Hadn't thought about that; vary valid point! I guess this solution would only stand a chance for e-book-like content... Thanks for your comment. – user3297291 Apr 14 '16 at 07:15
There are only text contetn but different font size is inevitably. So I said no stable. – ATES Apr 14 '16 at 08:29

score -1 · Answer 4 · answered Apr 11 '16 at 20:52

-1

Try this :

settings.setDefaultFontSize(50);  //Larger number == larger font size

answered Apr 11 '16 at 20:52

Istiyak

693
6
15

WebView Text Zoom Issue in Android

4 Answers4

Linked