React-native-render-html: Support font element

Created on 8 Sep 2020 · 3Comments · Source: meliorence/react-native-render-html

Decision table

[ ] 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”

Bug Report

The HTML element given inside font is not rendering the color just rendering the content.

Setup

React Native

System:
    OS: macOS 10.15.6
    CPU: (4) x64 Intel(R) Core(TM) i5-3210M CPU @ 2.50GHz
    Memory: 567.61 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.0.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.14.8 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.7, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 28, 29
      Build Tools: 28.0.3, 29.0.2, 29.0.3
      System Images: android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6626763
    Xcode: 11.7/11E801a - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_242 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.2 => 0.62.2 
  npmGlobalPackages:
    *react-native*: Not Found

Libraries

react-native-render-html: 6.14.8
react-native-webview: 6.14.8

Devices

Device 1
- OS: All Android devices
- Diagnostic: reproduction
- Environment: development
Device 2
- OS: All Android devices
- Diagnostic: reproduction
- Environment: development

Reproduction

Description

(Write your steps here:)

Just used the npm
Add this code <font color='red'>₹ 270</font>

rejected new feature

Source

jamesawer3

Most helpful comment

@jamesawer3 Here is a very basic implementation covering the "color" attribute. It makes me realize the API improvement we can make to enhance extensibility! Certainly a feed to craft the v6 API. But I want to emphasize that this is an obsolete tag, as stated by MDN:

This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

RNRH v6.x

In RNRH 6, we will be using a "lite" renderer, e.g. a renderer which is just an object with a model field. The model describes how to extract styles from the element attribute thanks to getUADerivedStyleFromAttributes method. We define a mixed content model because font can behave like a span within an inline formatting context, and like a div within a block formatting context.

NB: "full" renderers also have a model field which you can use the same way.

import * as React from "react";
import HTML, {HTMLContentModel} from 'react-native-render-html';

const FontRenderer = {
  model: {
    contentModel: HTMLContentModel.mixed,
    getUADerivedStyleFromAttributes({face, color, size}) {
      let style = {};
      if (face) {
        style.fontFamily = face;
      }
      if (color) {
        style.color = color;
      }
      if (size) {
        // handle size such as specified in the HTML4 standard. This value
        // IS NOT in pixels. It can be absolute (1 to 7) or relative (-7, +7):
        // https://www.w3.org/TR/html4/present/graphics.html#edef-FONT
        // implement your solution here
      }

      return style;
    },
  },
};

const renderers = {font: FontRenderer};

export default function App() {
  return (
    <View style={styles.container}>
      <HTML source={{html} renderers={renderers} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingTop: Constants.statusBarHeight,
    backgroundColor: "#ecf0f1",
    padding: 8,
  },
});

RNRH v4.x, 5.x

import * as React from "react";
import { View, StyleSheet, Text } from "react-native";
import Constants from "expo-constants";
import { default as HTML } from "react-native-render-html";
import { cssStringToRNStyle } from "react-native-render-html/src/HTMLStyles";

function isFontAttribute(attrName) {
  return attrName === 'color';
}

function extractInlineStyleFromFontAttributes({ face, color, size }) {
      let style = "";
      if (face) {
        style += `font-family:${face};`
      }
      if (color) {
        style += `color:${color};`
      }
      if (size) {
        // handle size such as specified in the HTML4 standard. This value
        // IS NOT in pixels. It can be absolute (1 to 7) or relative (-7, +7):
        // https://www.w3.org/TR/html4/present/graphics.html#edef-FONT
        // implement your solution here
      }
      return style;
}

const renderers = {
  font: {
    wrapper: "Text",
    renderer: function (
      htmlAttribs,
      children,
      convertedCSSStyles,
      passedProps
    ) {
      const { key } = passedProps;
      const stylesFromFontAttributes = cssStringToRNStyle(
        extractInlineStyleFromFontAttributes(htmlAttribs),
        'text',
        passedProps
      );
      return (
        <Text style={[convertedCSSStyles, stylesFromFontAttributes]} key={key}>
          {children}
        </Text>
      );
    },
  },
};

const html = `
<p>Hello world</p>
<font color="red">&#x20b9;&nbsp;270</font>
`;

export default function App() {
  return (
    <View style={styles.container}>
      <HTML html={html} renderers={renderers} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingTop: Constants.statusBarHeight,
    backgroundColor: "#ecf0f1",
    padding: 8,
  },
});

jsamr on 9 Sep 2020

👍4 🎉3 🚀1

All 3 comments

@jamesawer3 This library does not provide a renderer for the font tag, but you could write a custom renderer. This is a feature request rather than a bug! But we won't access this request because this tag is deprecated.

jsamr on 8 Sep 2020

👍1

Thanks for your immediate response!!!
Can you please just give me an example for rendering this?
<font color='red'>₹ 270</font>

jamesawer3 on 9 Sep 2020