Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adjust font size of Android WebView

How do you adjust the font size of an Android WebView? The following appears to have no effect:

private void fontSizePlus() {
    fontSize = (fontSize < FONT_SIZE_MAX) ? fontSize + FONT_SIZE_INCREMENT : fontSize;
    this.changeFontSize(fontSize);
}

private void fontSizeMinus() {
    fontSize = (fontSize > FONT_SIZE_MIN) ? fontSize - FONT_SIZE_INCREMENT : fontSize;
    this.changeFontSize(fontSize);
}

private void changeFontSize(int value) {
    String js = "document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '" + value + "%';";
    mWebView.loadUrl("javascript:(function() { " + js +  " })()");  
}

Where the WebView and constants have been initialized as follows:

private final static int FONT_SIZE_DEFAULT = 100;
private final static int FONT_SIZE_MIN = 50;
private final static int FONT_SIZE_MAX = 150;
private final static int FONT_SIZE_INCREMENT = 5;
private int fontSize = FONT_SIZE_DEFAULT;

private WebView mWebView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.index);
    mWebView = (WebView) findViewById(R.id.webview);
    mWebView.getSettings().setJavaScriptEnabled(true);
    mWebView.loadUrl("file:///android_asset/index.htm");
}
like image 413
hpique Avatar asked Nov 15 '10 19:11

hpique


People also ask

How do I resize text on Android?

To make your font size smaller or larger: On your device, open the Settings app. Search and select Font size. To change your preferred font size, move the slider left or right.

How do I change font size in HTML Android?

For Android 12Go to Settings application. Go to Accessibility. Choose the option Text and Display. Click on Font Size to adjust the size of the text using the slider provided.

Is Android WebView deprecated?

Beginning October 5, 2021, Facebook Login will no longer support using Android embedded browsers (WebViews) for logging in users.


2 Answers

@rob's answer and comment pointed me in the right direction.

First make sure that all font sizes are relative to the default font size. If you use absolute values the following will not work on those elements.

Then:

@Override
protected void onCreate(Bundle savedInstanceState) {
    ...
    mWebView = (WebView) findViewById(R.id.webview);
    fontSize = mWebView.getSettings().getDefaultFontSize();
    ...
}

private void fontSizePlus() {
    fontSize++;
    this.changeFontSize(fontSize);
}

private void fontSizeMinus() {
    fontSize--;
    this.changeFontSize(fontSize);
}

private void changeFontSize(int value) {
    mWebView.getSettings().setDefaultFontSize(value);
}

By changing the value of the default font size all relative font sizes are adjusted accordingly. This gives you much greater control than WebSettings.setTextSize (WebSettings.TextSize t).

like image 161
hpique Avatar answered Oct 15 '22 23:10

hpique


I don't know that webkitTextSizeAdjust is supported in anything other than safari/mobile safari.

Try WebSettings.setTextSize (WebSettings.TextSize t)

rather than trying to do it with javascript.

like image 4
rob Avatar answered Oct 15 '22 22:10

rob