|The help text on this page references Tidy which is no longer used on the Wikimedia cluster. It was replaced with RemexHtml in July 2018.|
Tidy removes whitespace from an inner tag to an outer tag.
after it goes through Tidy. See how the whitespace character move from inside the span to outside it and now separates the two spans. This is a problem when the spans have CSS that affects whitespace. For example, when there is the CSS white-space property set on the elements.
<span style='white-space:nowrap'>a </span><span style='white-space:nowrap'>b</span>
<span style='white-space:nowrap'>a</span> <span style='white-space:nowrap'>b</span>
So, even if there are 30 spans in a row, since Tidy moves the whitespace, the browser can break rendering between spans. However, HTML5 parsers like Parsoid or RemexHTML will not move whitespace like this. So, there is no place for the browser to break the line since there is no whitespace between spans. This causes the row of spans to extend horizontally indefinitely.
This is most likely to affect on pages that have a list of entries. This usually comes from templates. So, editors will have to do what Tidy does by moving space around. One simple solution would be add a whitespace character after the span in the affected template like in this itwiki example which is used in w:it:Template:Campioni_NBA and which was rendering badly before this fix.
The following tools can help fix tidy whitespace bug:
- WPCleaner: see instructions on how to use WPCleaner for fixing errors detected by Linter. Tidy whitespace bug may be reported by WPCleaner as part of CheckWiki error #536.