Using the <sup> superscript

[perrycbrown]

I'm having a really difficult time getting superscript html like:

¹More words here...

...to actually look like superscript, i.e. the text baseline is elevated compared to non-superscript text that follows it..

I've used every font style/alignment/margin/padding combo I can think of on superscripted elements, and the superscript baseline remains the same as the text following it outside the superscript tags.

Suggestions?

[jraack]

@perrycbrown You can try to use the renderNode function like; <HTMLView renderNode={this.renderNode} />

This is working on IOS, but not on Android because android does not support View in Text Component. Still waiting for a fix for this, anyone suggestions? see Issue 111

Inside your renderNode function; place;

 if(Platform.OS === 'ios'){
            if (node.name == 'sup') {
                return (
                    <View style={{flexDirection: 'row', alignItems: 'flex-start', width:10, height:14}}>
                        <Text key={index} style={{fontSize:8,lineHeight:14}} >{defaultRenderer(node.children, parent)}</Text>
                    </View>
                );
            }
        }

[perrycbrown]

Super! Thanks!

[todaywesleep]

Ok, but what we can do in android to take same result?

[gaozhaopei]

how does it in android

[fortinmike]

This is quite important for our project and we can't settle for a solution that works on iOS only, nor a fixed size for the superscript as proposed by @jraack. Any hints on a workaround?

[isilher]

You could set custom text styles for the superscript element, but you'd be bound to the limits of styling nested Text components. Sadly block level styling within the rendered output is not within our power until RN Android starts supporting the nesting of View components within Text components.

[fortinmike]

Too bad. Surprising that Android supports still lags behind like this in React Native. Thanks for the quick answer!

For anyone struggling with this, we ended up using react-native-autoheight-webview which does the job for what we need. Might work for you, too.

[Asscher]

@perrycbrown You can try to use the renderNode function like; <HTMLView renderNode={this.renderNode} />

This is working on IOS, but not on Android because android does not support View in Text Component. Still waiting for a fix for this, anyone suggestions? see Issue 111

Inside your renderNode function; place;

 if(Platform.OS === 'ios'){
            if (node.name == 'sup') {
                return (
                    <View style={{flexDirection: 'row', alignItems: 'flex-start', width:10, height:14}}>
                        <Text key={index} style={{fontSize:8,lineHeight:14}} >{defaultRenderer(node.children, parent)}</Text>
                    </View>
                );
            }
        }

Upgrading to react native 0.63 and this solution seems to fix the problem for iOS and Android, in 0.63 they support rendering View in Text ( see https://reactnative.dev/blog/2020/07/06/version-0.63#other-notable-improvements )