||On most wikis, it looks like the biggest generator of these linter warnings are the nowrap or nowrap begin templates. The simplest fix that will handle the vast majority of these linter cases is to add a newline before the opening <span> tag in the template source of these templates.|
This linter category has been added to assist editors in fixing wikitext and templates to ensure that their pages render correctly with a HTML5-based tool like RemexHTML (which is slated to replace Tidy) and Parsoid. Specifically, this has got to do with a paragraph-wrapping bug in the PHP parser. It affects span, sub, sup tags that occur on the same line as a (html4) block tag and also have a
white-space:nowrap; CSS property.
For all scenarios that are identified by this linter category, we recommend adding a line break before the span/sub/sup tag to ensure that the page rendering is preserved when Tidy is replaced with RemexHTML.
The following wikitext:
<div><span style='white-space:nowrap'> foo </span> </div>
generates the following HTML in (PHP-parser + RemexHTML) and Parsoid:
<div><span style='white-space:nowrap'> <p>foo</p> </span> </div>
but generates the following HTML in (PHP-parser + Tidy)
<div> <p><span style='white-space:nowrap'>foo</span></p> </div>
Note how the p-tag wraps the span-tag with Tidy and how the span-tag wraps the p-tag with RemexHTML. Normally, this is not a problem (except for HTML5 output compliance which is a separate matter). However, when the span tag has the
white-space:nowrap CSS property, the span wrapper around the p-tag can change rendering in bad ways when the paragraph has a lot of content. It leads to a long horizontal line without wrapping. This seems to be the case with navboxes, for example.
Fixing the underlying bug (T134469) is non-trivial (and we are still going to consider this). However, there is a simple wikitext workaround for this bug which is to introduce a line break before the span tag so that it is not on the same line as a block tag like the div.
So, the fixed wikitext would look like this:
<div> <span style='white-space:nowrap'> foo </span> </div>