Non-breaking spaces added inside HTML tags

[jonathanpatt]

I've been noticing a number of nbsps being added within the opening tags of HTML elements, for example:

<img src="..." &nbsp;alt="..." />

In most browsers, this doesn't break anything, but in IE it tends to break that element and cause (in the case of the img tag) a broken image to show instead. I've also noticed this occurring in form elements—for example, causing a hidden field to be visible.

[matthewlein]

Thanks for the note. Is the <img> the last thing in the fixed element? I ran into a similar issue if a link is the last thing in the element.

It would be mega-helpful if you could make a fiddle that reproduces the bug.

[jonathanpatt]

Yes, it occurs to the last element (or only element, if there's only one) within a fixed element. Seems to occur with any sort of element. http://jsfiddle.net/DzpBm/1/ illustrates it with form inputs—the first is a text input, the last a password. If you look at the last input with a DOM inspector, you'll see the   added immediately before the name attribute. WebKit and Gecko tolerate the presence of an   in this location, but IE (at least up through IE9) behaves oddly—in this example, the password field reverts to a standard text input instead, which is how I noticed the issue in the first place.

[matthewlein]

OK, thanks. I'm not too worried about that kind of case, IMO it shouldn't be used there. But I will see about smartening it up a little in the next version to protect against images and tags with classes, etc. Will have to try to think of something clever...

[jonathanpatt]

In situations with form fields, yes, it generally shouldn't be used anyway—I just used that as an example because it was where I had first encountered it in a situation where I had an overly-broad selector list. However, there is a situation where it does become more of a problem, such as where a CMS wraps every line within a dynamic content area in a <p>, including when that line is just a single <img>. Also, situations where there are inline graphics within paragraphs, such as Wikipedia's external link icons.

[matthewlein]

Good points. I hate it when CMSs do that. :)

[kevadamson]

I'm getting this happening: <a&nbsp;href="

[lazyatom]

Likewise, even with linkFix: false supplied in the options.

[joshuaiz]

This is kind of a big issue - getting this behavior in a lot of unwanted places. I think a good solution would be to have widowFix ignore elements within html tags.

If you have widowFix set to run on say, .entry-content p then anything within html tags within

tags will get extra   added. There are lots of times

elements will have html within: links, text formatting, etc. This is super no bueno.

If you have to start getting super specific with your selectors then it kind of defeats the purpose of this plugin.

[joakimc]

Breaks inline css.
<div class="indicator" style="background-color: #9d612f"></div>
is turned into
<div class="indicator" style="background-color:&nbsp;#9d612f"></div>
which won't render anywhere afaik.

[matthewlein]

I agree that this is a not perfect solution, and I'm open to PRs with tests that show its fixed 😄

[tomasdev]

I recommend not using this plugin. Here's an alternative simpler method that doesn't break your HTML:

function nbsp(html) {
    var text = $(html).text().replace(/\n/g, '').split(' ').filter(Boolean),
        secondLastWord = text[text.length - 2],
        lastWord = text[text.length - 1];

    return (
        html.substring(html.lastIndexOf(secondLastWord), 0, secondLastWord.length) +
        secondLastWord + ' ' +
        html.substring(html.lastIndexOf(secondLastWord) + secondLastWord.length)
    ).replace(secondLastWord + '  ', secondLastWord + ' ').replace(' ' + lastWord, lastWord);
}

Sample covered cases:

nbsp(`<h3 class="h1 divider">
        Get a closer <span class="nowrap">close-up.</span>
      </h3>`);
nbsp(`<h3 class="h1 divider">
        Get a closer close-up.<img src="" alt="some text" />
      </h3>`);
nbsp(`<h3>Get a closer closeup.<div style="background: #fff;"></div></h3>`);
nbsp(`<h3>Get a closer close-up.</h3>`);
nbsp(`<h3>Get a closer closeup.</h3>`);