Menu
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>
742
getSettings(). setBuiltInZoomControls(true); per this answer to default my view to zoomed out and to be able to pinch-to-zoom.
On Actionbar Item click, I call either textSmaller() or textBigger() to change the text size.
This interface was deprecated in API level 12. This interface is now obsolete.
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.
100
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:
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.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
