How to make text fit to screen (text-wrap) in WebView with KitKat

Question

I'm having an issue in my WebView with Android 4.4. Before KitKat, text was fitting automatically with all devices resolutions in webviews. But today it's not fitting automatically anymore with 4.4. I think it's because of the WebView's update based on Chromium with KitKat.

Here are 2 screenshots of the same page :

One from Galaxy Nexus (Android 4.3)

One from Nexus 5 (Android 4.4 and WebView based on Chromium)

Do you know if there is a new option to fit text with screen in webview ?

NB: I don't think my layout as something to do with my issue but here it is anyway:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

</RelativeLayout>

Solution 1

It looks like this is using NARROW_COLUMNS. This was deprecated in KitKat.

However, a new layout algorithm was added which might be able to fix this, there is an example here: https://github.com/GoogleChrome/chromium-webview-samples

The main code is:

// Use WideViewport and Zoom out if there is no viewport defined
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);

settings.setLayoutAlgorithm(LayoutAlgorithm.TEXT_AUTOSIZING);

The other option is to enable pinch zoom:

// Enable pinch to zoom without the zoom buttons
settings.setBuiltInZoomControls(true);

if(Build.VERSION.SDK_INT > Build.VERSION_CODES.HONEYCOMB) {
    // Hide the zoom controls for HONEYCOMB+
    settings.setDisplayZoomControls(false);
}

The new layout algorithm may not solve all the problems and it's not clear how to reliably mimic the old wrapping behavior.

The majority of the objections seem like general browser issues of displaying desktop sites on mobile. They liked the old way, but I have not seen a single other browser do what the text-wrapping algorithm was doing.

Solution 2

If you can edit the html (using a simple string replace for instance), add the style word-wrap: break-word to the text container html element. e.g: If the top level element inside the body of the html is <p>, change to<p style="word-wrap: break-word;">. The webview will then wrap around the text and fit to screen.

Comments

[Elad Avron]

For me it doesn't work, setting displayzoomcontrols still doesn't reflow text, and I can't even use TEXT_AUTOSIZING (it won't even compile), despite having updated my sdk to the latest.

[Matt Gaunt]

@EladAvron The zoom controls will not reflow the text - it will allow the user to zoom in and out + pan the page using pinch to zoom. Which is the most reliable and preferred way to display third party content on the web. Regarding the no compiling, after you've downloaded the kitkat SDK, have you set the application's targetSDKversion to 19 in your Android manifest file?

[Elad Avron]

Yup, but I forgot to update the project's compiler. Anyway, I eventually found a working solution - using a JavaScript function that resizes the encompassing div to the screen width, and calling it 'onScaleChanged'.

[MRX]

@EladAvron can you share your solution please?

[Elad Avron]

@MRX I ended up undoing the method because it caused other problems such as slow gradual zoom and freezes. Seems like Google broke something that was working fine, and the only way around it are hackish workarounds that only break things further.

[meekash55]

Tried. but still it the HTM content are not wrapped and horizontal scroll appear to scroll.