Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support font element

See original GitHub issue

Decision table

My issue does not look like “The HTML attribute ‘xxx’ is ignored” (unless we claim support for it),
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 ₹ 270

Issue Analytics

State:
Created 3 years ago
Comments:5

Top GitHub Comments

13reactions

jsamrcommented, Oct 9, 2021

@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 defining a custom HTML element model. 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. See the official doc on model-based custom rendering.

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

const fontElementModel = HTMLElementModel.fromCustomModel({
  tagName: 'font',
  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 customHTMLElementModels = {font: fontElementModel};

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    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,
  },
});

1reaction

jsamrcommented, Sep 8, 2020

@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.

Top Results From Across the Web

- HTML: HyperText Markup Language - MDN Web Docs

Chrome Edge font. Deprecated Full support. ChromeYes. Toggle history Full support. Edge12. Toggle hi... color. Deprecated Full support. ChromeYes. Toggle history Full support. Edge12. Toggle...

HTML: tag - TechOnTheNet

This HTML tutorial explains how to use the HTML element called the font tag with syntax ... The tag has basic support...

HTML font tag - W3Schools

Not Supported in HTML5. The tag was used in HTML 4 to specify the font face, font size, and color of text....

How To Style Text Elements with Font, Size, and Color in CSS

3/20 How To Style Text Elements with Font, Size, and Color in CSS ... These concepts help make text more readable and scannable...

HTML - Fonts - Tutorialspoint

HTML - Fonts, Fonts play a very important role in making a website more user friendly and increasing content readability. Font face and...