javascript - WebView Text Zoom Issue in Android -


i have document reader project in android. main activity includes webview. texts reading html. in top options menu includes button increasing text size dynamically (text wrapping). far clear when button pressed, text size increases text shifting down in screen , twice wehen pressing button, text size increases , text shifting down little more again. situation happening frustrating readers. reader must go left off after pressing button reader should not lose reading location. how solve problem?

the issue:

the issue:

when solved issue:

when solved issue:

html content of 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>

i propose use relative scrollposition before , after font size increase calculate user should be. can done in few steps:

  1. before changing font size, store scroll height , scroll position of text view. determine ratio between scroll height , scroll position (between 0 , 1)
  2. change font size
  3. after render, measure new scroll height
  4. set new scroll position 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 example here: https://jsfiddle.net/ln43xxv5/

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


Comments

Post a Comment