How to avoid HTML font scaling based on system fonts?

IamDhana commented 2 years ago

Decision Table

[X] My issue does not look like “The HTML attribute 'xxx' is ignored” (unless we claim support for it)
[X] My issue does not look like “The HTML element <yyy> is not rendered”

Good Faith Declaration

[X] I have read the HELP document here: https://git.io/JBi6R
[X] I have read the CONTRIBUTING document here: https://git.io/JJ0Pg
[X] I have confirmed that this bug has not been reported yet

Description

We were avoiding font scaling (increasing/decreasing the font size) based mobile system font size for Text and TextInput by having these lines.

`

// Override Text scaling in input fields
if (TextInput.defaultProps) {
  TextInput.defaultProps.allowFontScaling = false;
} else {
  TextInput.defaultProps = {};
  TextInput.defaultProps.allowFontScaling = false;
} // Override Text scaling
if (Text.defaultProps) {
  Text.defaultProps.allowFontScaling = false;
} else {
  Text.defaultProps = {};
  Text.defaultProps.allowFontScaling = false;
}

` But HTML tags inside renderHtml is getting scaled based on system setting? How to avoid increasing or decrease of font size?

React Native Information

System:
    OS: macOS 11.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Memory: 230.12 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.11.1 - ~/.nvm/versions/node/v16.11.1/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.11.1/bin/yarn
    npm: 8.0.0 - ~/.nvm/versions/node/v16.11.1/bin/npm
    Watchman: 2021.10.11.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 15.0, DriverKit 20.4, macOS 11.3, tvOS 15.0, watchOS 8.0
    Android SDK:
      API Levels: 29, 30, 31
      Build Tools: 29.0.2, 30.0.2, 31.0.0
      System Images: android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-30 | Intel x86 Atom_64, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom, android-31 | Google Play ARM 64 v8a
      Android NDK: Not Found
  IDEs:
    Android Studio: 2020.3 AI-203.7717.56.2031.7784292
    Xcode: 13.0/13A233 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.15 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: ^17.0.2 => 17.0.2 
    react-native: ^0.66.4 => 0.66.4 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

RNRH Version

6.0.4

Tested Platforms

[X] Android
[X] iOS
[ ] Web
[ ] MacOS
[ ] Windows

Reproduction Platforms

[X] Android
[X] iOS
[ ] Web
[ ] MacOS
[ ] Windows

Minimal, Reproducible Example

const tagsStyles = { body: { fontSize: selectedFont === 'Regular' ? wp(3.8) : selectedFont === 'Small' ? wp(2.8) : selectedFont === 'Large' ? wp(4.3) : wp(3.3), lineHeight: wp(6), color: theme === 'DARK' ? '#4C4D50' : '#e1e1e1', // fontFamily: 'QuatroSlab-Regular', fontFamily: 'ProximaNova-Regular', marginTop: wp(2.3), // whiteSpace: 'nowrap', // height: '200px', // overflow: 'hidden', // textOverflow: 'ellipsis', }, p: { fontFamily: 'ProximaNova-Regular', lineHeight: wp(6), margin: '0px', }, a: { color: colors.red, textDecorationColor: colors.red, }, li: { margin: 0, padding: 0, paddingLeft: wp(2), position: 'relative', top: wp(-5), lineHeight: wp(6), }, }; <RenderHtml source={{ html: description, }} tagsStyles={tagsStyles} systemFonts={systemFonts} contentWidth={availableWidth} textZoom={80} defaultTextProps={{ allowFontScaling: false, }} />

Additional Notes

No response

CDBridger commented 2 years ago

did you find a solutino to this? @IamDhana

jan-happy commented 1 year ago

In Version 6.3.4 defaultTextProps={{ allowFontScaling: false,}} successfully disables the system font scaling for me.

meliorence / react-native-render-html