react-native-render-html
react-native-render-html copied to clipboard
meliorence
Renderer does not support strike and underline (<s> and <u>) at the same time
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
The renderer supports strike and underline, except when they are both together.
<html><head></head><body><p><s><u>The fox jumped</u></s></p></body></html>
Renders just the underline.
React Native Information
Expo CLI 4.12.0 environment info:
System:
OS: Linux 4.14 Amazon Linux 2
Shell: 4.2.46 - /bin/bash
Binaries:
Node: 14.17.1 - ~/.nvm/versions/node/v14.17.1/bin/node
npm: 6.14.13 - ~/.nvm/versions/node/v14.17.1/bin/npm
npmPackages:
expo: ~42.0.1 => 42.0.4
react: 16.13.1 => 16.13.1
react-dom: 16.13.1 => 16.13.1
react-native: https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz => 0.63.2
react-native-web: ~0.13.12 => 0.13.18
npmGlobalPackages:
expo-cli: 4.12.0
Expo Workflow: managed
RNRH Version
6.1.0
Tested Platforms
- [ ] Android
- [X] iOS
- [ ] Web
- [ ] MacOS
- [ ] Windows
Reproduction Platforms
- [ ] Android
- [X] iOS
- [ ] Web
- [ ] MacOS
- [ ] Windows
Minimal, Reproducible Example
"use strict";
import React from "react";
import { SafeAreaView } from 'react-native-safe-area-context';
import RenderHtml from 'react-native-render-html';
import { Dimensions } from 'react-native';
class simple_test_case extends React.Component {
constructor(props, context) {
super(props, context);
}
render() {
const window_dimensions = Dimensions.get('window');
return (
<SafeAreaView style={{flex:1}}>
<RenderHtml
source={{html: "<html><head></head><body><p><s><u>The fox jumped</u></s></p></body></html>"}}
contentWidth={window_dimensions.width}
/>
</SafeAreaView>
);
}
}
export default simple_test_case;
Additional Notes
No response
@swengle Thanks for your submission! Indeed there is an "underline line-through" value available in React Native textDecorationLine style property so a solution is technically possible. That will have to be handled in the @native-html/css-processor library. I am busy right now with the 6.2 release, but I will address this at some point.
After reading more about the CSS3 specification (https://www.w3.org/TR/css-text-decor-3/#line-decoration), I realize that this specific CSS property does not follow the traditional inheritance scheme, where a close rule would override a distant rule, but instead relies on some sort of merging mechanism that propagates to the CSS box tree, while sometimes aborting, such as when hitting an out-of-flow box (think float: left or position: absolute). In the end, the propagation model is fairly complex:
Note that text decorations are not propagated to any out-of-flow descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables. They are also not propagated to inline children of inline boxes, although the decoration is applied to such boxes.
Note: Line decorations are propagated through the box tree, not through inheritance, and thus have no effect on descendants when specified on an element with display: contents.
This exception to the rule makes an implementation costly, because it would require a re-architecture of the CSS processor. For that very reason, I don't plan on providing this feature anytime soon! But I will let the issue open in the meantime.