WebView stop using device font setting and use style specified in the HTML

Question

I have a WebView displaying content which is not controlled by me. The WebView content is previews of files, such as PowerPoint documents, or a PDF file, word document etc.

When the user changes the font size on their devices (Settings -> Accessibility -> Font size) the WebView uses this adjusted font size. This results in the layout of the contents of the WebView being wrong and not aligned as designed anymore. One example is in my preview of a PowerPoint presentation, the text is now enlarged so it covers a diagram to the right of the text and other text runs off the edge of the slide.

How can I get the WebView to completely ignore any system font settings and only use the font sizes specified in the HTML/CSS for the content in the WebView?

I have seen lots of comments on stack overflow about how you can set the font in the WebView to a fixed size, for example :

webView.getSettings().setTextSize(WebSettings.TextSize.NORMAL); // Deprecated
webView.getSettings().setTextZoom(100);

But I do NOT want to do this. I want the font size to be determined by the HTML/CSS in the WebView which I will never know the values of as the contents of the WebView can be anything.

Yarmouth

Answer 1

The font size setting in the Settings affects the textZoom property of the WebView. Notice that when setting this property to smallest text, it will be around 85. And on the largest text setting the value will be on around 130. These values can be found when attaching the debugger and checking the webView.getSettings().getTextZoom() value

Using only the webView.getSettings().setTextZoom(100); setting forces it back to 100, which is the standard value again. Which is what you probably expect. Try using only this statement without setting the textSize at all.

(If this doesn't work, then please provide reproducable example. Where loading the preview of a (powerpoint) file displays incorrectly with the large text setting.)

Suppurate

Nice!!!!!!!!!!! – Fanaticism

Answer 2

You can set this in the textZoom prop.

On Android, textZoom follows system font scaling if not defined, so, textZoom={100} disables system font scale from scaling web view text. From the WebView docs:

If the user has set a custom font size in the Android system, an undesirable scale of the site interface in WebView occurs.

When setting the standard textZoom (100) parameter size, this undesirable effect disappears.

<WebView textZoom={100} />

But it's usually better to set a maximum scale than disable it completely

This scaling is usually not undesirable to the user: it's often what they need to be able to read. We shouldn't override user accessibility settings more than strictly necessary.

It's better to figure out what the maximum font scaling is which you can allow before your web view layout breaks, then set that as a maximum. There's no direct equivalent of <Text>'s maxFontSizeMultiplier prop in WebView, but you can get the same behaviour as maxFontSizeMultiplier like this:

import { PixelRatio } from 'react-native';

const maxTextZoom = 150; // Experiment and find the max you can allow here
const minTextZoom = 90; // You might not need this

export const SomeComponent = ({ ...webViewProps }) => {
  const textZoom = Math.max(minTextZoom,
    Math.min(maxTextZoom, PixelRatio.getFontScale() * 100)
  );

  return (
    <WebView textZoom={textZoom} {...webViewProps} />
  )
}

Hereunder

Answer 3

I've got the same problem today and completely solved it using @Alex answer from this topic. You just need to set only webView.getSettings().setTextZoom(100);. It still works in 2023!

And DON'T use other text size configurations kinda webView.getSettings().setTextSize(WebSettings.TextSize.NORMAL); with proper code above together - otherwise it doesn't works. Even more so, setTextSize() is deprecated now.

Matthews