react-native-render-html: Whitespace handling differs from HTML significantly (no collapsing, newlines ignored)

Based on @djpetenice genius idea, I created this function:

export const fixHtmlBlockSpaces = (str = '') => {
    const fixedStr = str.replace(/(<\/[^>]+>)\s+(<)/gm, (substring, group1, group2) => {
        return `${group1}<span style="color: transparent">_</span>${group2}`;
    });
    return fixedStr;
};

Now this:

<p><a href="abc">abc</a> <a href="def">def</a></p>

Is replaced by this:

<p><a href="abc">abc</a><span style="color: transparent">_</span><a href="def">def</a></p>

I’ve made great progress with the new release! Given this snippet:

<span>This is text!</span>





This is <strong>bold</strong> <em>italics</em>.

We now have:

You will be able to control the whitespace behavior with the special whiteSpace style property in any of the places you could previously customize styles (baseFontStyles, tagsStyles …etc).

I am currently developing this behavior as part of a service for Expensify. The new engine following the whitespace RFC is being implemented here: https://github.com/native-html/core. An early release should be available in the upcoming week.

This pre-release will be part of the 6.x release cycle. If you are wondering why we’re jumping from 4 to 6, the reason is that 6.x will require more recent versions of React Native, and we want all users to benefit from the 5.x enhancements already available in alpha. Also, the new engine changes the structure of nodes available with onParsed, and the renderers prop will probably look different.

I’ve done some research to see where those collapsing rules are specified. It appears to be the CSS rule white-space. The complete reference algorithm is defined in the CSS Text Module Level 3, sections 3 and 4.

But this reference considers multiple contexts that we can ignore in a minimal compatibility approach. The reference describes the required behavior for multiple values of the white-space CSS property, normal, pre-line, nowrap… We can keep focus on the normal value, since this is the default behavior reported by @fvsch. Also, bidirectional layouts for RTL can be considered later, because they add complexity and are limited by React Native own support of these features. Moreover, there seems to be other kind of subtleties depending on localization. Here are the highlights of the spec I have identified. :

• The rules are context-dependent: in inline formatting context for example, inter-element whitespaces must be collapsed, while they should be removed in block formatting contexts. This property makes a simple regex-based approach inefficient.
• A simplified run of the spec where assumed that the white-space rule is white-space: normal;:
  1. Any sequence of collapsible spaces and tabs immediately preceding or following a segment break (that is, any character causing a line break) is removed.
  2. Segment break transformation rules are applied: any collapsible segment break immediately following another collapsible segment break is removed. Then any remaining segment break is either transformed into a space or removed depending on the context before and after the break:
  • If the character immediately before or immediately after the segment break is the zero-width space character, then the break is removed, leaving behind the zero-width space.
  • Otherwise, if both the character before and after the segment break belong to the space discarding character set, then the segment break is removed.
  • Otherwise, the segment break is converted to a space.
  1. Every collapsible tab is converted to a space.
  2. Any collapsible space immediately following another collapsible space—even one outside the boundary of the inline containing that space, provided both spaces are within the same inline formatting context—is collapsed.

The W3C consortium also provides a gigantic test suite, and one folder is specifically dedicated to CSS whitespaces which can be a source for inspiration. In the meantime, I have started to implement some basic tests regarding whitespaces, see 53b8679ddc74badb486348a7404fc835527cb7f4 and d76f99d9d44b3bb38fe92a7403b1165e6b10e765. A majority of them fail, of course, which is the point of this issue!

I did a hack by adding a span with a single character and styling it the same colour as my background.

One possible workaround I’ve found, although I can’t vouch for it as I haven’t tested it fully, is tricking the library into thinking that the text node is not fully whitespace. This seems to prevent the node from being collapsed. Here I add a zero-width character to whitespace data:

  alterData: node => {
    if (node.data.match(/\s+/)) {
      return `${data}\u200C`
    }
  }

In the cases I’ve seen, this seems to stop the whitespace from being lost. However I’m not sure if there’s other impact.

@djpetenice same problem here.

If the content is (with space between a):

<p><a href="abc">abc</a> <a href="def">def</a></p>

It renders (without space):

abcdef

Ok!

I’ve used the space after the tag closure because of this scenario: if I have <strong>hello</strong><em>world</em> I want to show helloworld But if I have <strong>hello</strong> <em>world</em> I want to show hello world

So I don’t want to have a space between strings if the 2 tags are attached. The one you’ve written (html = html.replace(/<[/]strong>/g, " ")😉 will remove the strong tag closure and replace it with a space.

@Draccan yup, these tags use the same logic as the ones fvsch pointed out.

@fvsch your solution in your gist looks pretty clean. It feels like a solid improvement, even if it’s obviously not matching an actual browser rendering. I’ll try it out more, and figure out whether if this can be added in the codebase by default. I don’t feel like documenting your gist and asking people to copy and paste a hundred lines into their own project just to add this feature, and I don’t want to keep bloating the module with additional props either.

I’ll measure the performances impact and the potential regressions (all help is welcome here !) and if everything is going smoothly, let’s add it to the project. What do you think ?

@Exilz The current whitespace handling has bugs too:

return <HTML html="<p>This <span>is</span> <strong>buggy</strong></p>" />

Shows:

This•isbuggy

You probably have a rule that a whitespace-only text node between two tag siblings can be dropped, but if the tags are both inline it should be kept (and collapsed to a single space if needed).

If you can point me to the right source files, I can have a look and maybe do a PR. 😃

Applying the following replace function to data before passing it to the component works for all our content so far:

.replace(/[\t\r\n ]+/g, ' ')

Are there any plans to resolve this issue any time soon? Or are workarounds the recommended solution at the moment?

Thanks

Not sure. that is working for white space issue

I made a function to fix the white space between tags.

function fixSpaceInHTML(html){
    let tagWithSpaceMatch = /<([^>]+)>\s+<([^>]+)>/.exec(html);
    if(tagWithSpaceMatch){
        let tagWithSpace = tagWithSpaceMatch[0];
        let newTagWithSpace = tagWithSpace.replace(/\s/g, '') + " ";
        let newHtml = html.replace(tagWithSpace, newTagWithSpace);
        console.log({newHtml});
        return fixSpaceInHTML(newHtml);
    }else{
        console.log({html});
        return html;
    }
}

That is working fine. I hope it is helpful for anyone.

Anyone having issues with spaces between adjacent links? I’ve tried all spacing methods and all are being ignored:

For the problem where react-native-render-html suppresses newline characters (instead of rendering them as a space), did you try replacing your newline characters first?

<HTML html={myHtmlContent.replace(/\r?\n/g, ' ')} />

life is strange … 😃

now works!

the problem was thew regex:

is: html = html.replace(/<[/]strong>/g, " ");

and NOT html = html.replace(/<[/]strong> /g, " ");

without **space/g work fine…

I think that now the best solution is to understand what kind of HTML you receive.

We are lucky because in the app we are developing the admin panel gives the possibility to enter text with bold, italic, paragraphs, etc.

So the HTML editor is an our component and we know how it puts HTML tags. If you’re lucky like us you can use something like:

` code:

addSpaceToHtml(htmlInput){

	if(htmlInput !== null && htmlInput !== undefined){

		let html = htmlInput;

		html = html.replace(/<[/]strong> /g, " </strong>");
		html = html.replace(/<[/]em> /g, " </em>");
		html = html.replace(/<[/]i> /g, " </i>");
		html = html.replace(/<[/]s> /g, " </s>");
		html = html.replace(/<[/]u> /g, " </u>");
		html = html.replace(/<[/]span> /g, " </span>");

		return html;
	}
}

`

Our editor puts spaces after tag closure and we put them before the tag closure in our app.

If you’re taking html pages from web I don’t recommend to use this approach and especially avoid regex!

I have seen that the space is removed not only for strong tag but even for em, s and u. For example: <p><strong>A</strong> <em>B</em> <u>C</u> <s>D</s></p> It prints ABCD without spaces 😦

These parts in HTML.js are probably wrong:

if (type === 'text') {
    if (!strippedData || !strippedData.length) {
        // This is blank, don't render an useless additional component
        return false;
    }
    // Text without tags, these can be mapped to the Text wrapper
    return {
        wrapper: 'Text',
        data: data.replace(/(\r\n|\n|\r)/gm, ''), // remove linebreaks
        attribs: attribs || {},
        parent,
        parentTag: parent && parent.name,
        tagName: name || 'rawtext'
    };
}

1. Whitespace-only text nodes should be dropped if between block elements, or at the start or end of a block element, but not in the middle. HTML has even more advanced handling, and some of it can be mimicked, e.g. you can check parents to see if the whitespace-only text node is the first or last child of an inline element that is itself the first or last child of a block element (which I’m doing in my solution for dropping initial or trailing whitespace).

Use case:

<!-- We should render a single space between the links -->
<p>
  <a href="…">foo</foo>
  <a href="…">bar</foo>
</p>

1. Line breaks should not be removed, but replaced with spaces (collapsing line breaks, tabs and ordinary spaces to a single space).

Use case:

<!-- We should render a single space between the words -->
<p>foo
bar</p>

This is the result I’m getting for a HTML string with lots of whitespace, first with no special processing and then with a custom alterData function that tries to mimic the HTML algorithm for whitespace collapsing:

The result is not as complete as what HTML does, for instance in the case of <p><a>foo </a> , bar</p>, web browsers will remove the space before the comma, but I’m not sure what the algorithm is and I’m not going that far.

The render part for this test:

const testContent = `
a

e

<div>  foo\n\nbar  baz  </div>  <div>zzz</div>

<div>
  <div>
    <div>
      <blockquote>
        Salut<a href="#"> les copains </a> ,
        <span>comment ça va ?</span>
      </blockquote>
    </div>
  </div>
</div>

`

return (
  <View>
    <View style={borderStyle}>
      <HTML html={testContent} />
    </View>
    <View style={borderStyle}>
      <HTML html={testContent} alterData={collapseHtmlText} />
    </View>
  </View>
)

Where collapseHtmlText is a separate module (around 90 lines). I’m still working on it so I’ll test with more content before sharing.