Page MenuHomePhabricator

HTML tag <small> on single line in markup causes stray <p></p> to be wrapped around it.
Closed, DuplicatePublic

Description

https://en.wiktionary.org/w/index.php?title=Template:punctuation&action=edit&lintid=9910747 was listed as containing a mis-nested tag.

It contains the sequence...

{{top5}}
<small>
*[[apostrophe]] (&nbsp;'''[[']]'''&nbsp;) (&nbsp;'''[[’]]'''&nbsp;)
*[[brace]]s (&nbsp;'''{{unsupported|left curly bracket}}&nbsp;{{unsupported|right curly bracket}}'''&nbsp;)
*[[bracket]]s (&nbsp;'''{{unsupported|[}}&nbsp;{{unsupported|]}}'''&nbsp;)
*[[colon]] ( {{unsupported|:}} )
*[[comma]] ( '''[[,]]''' )
</small>

This when expanded generated

<div class="derivedterms" style="column-count: 5; -moz-column-count: 5; -webkit-column-count: 5;;">
<p><small>
</p>
<ul><li><a href="/wiki/apostrophe" title="apostrophe">apostrophe</a> (&#160;<b><a href="/wiki/%27" title="&#39;">'</a></b>&#160;) (&#160;<b><a href="/wiki/%E2%80%99" title="’">’</a></b>&#160;)</li>
<li><a href="/wiki/brace" title="brace">braces</a> (&#160;<b><a href="/wiki/Unsupported_titles/Left_curly_bracket" title="Unsupported titles/Left curly bracket">{</a>&#160;<a href="/wiki/Unsupported_titles/Right_curly_bracket" title="Unsupported titles/Right curly bracket">}</a></b>&#160;)</li>
<li><a href="/wiki/bracket" title="bracket">brackets</a> (&#160;<b><a href="/wiki/Unsupported_titles/Left_square_bracket" title="Unsupported titles/Left square bracket">&#91;</a>&#160;<a href="/wiki/Unsupported_titles/Right_square_bracket" title="Unsupported titles/Right square bracket">&#93;</a></b>&#160;)</li>
<li><a href="/wiki/colon" title="colon">colon</a> ( <a href="/wiki/Unsupported_titles/Colon" title="Unsupported titles/Colon">:</a> )</li>
<li><a href="/wiki/comma" title="comma">comma</a> ( <b><a href="/wiki/," title=",">,</a></b> )</li></ul>
<p></small>
</p>

which is clearly mal-formed. as the small tags aren't matched within the generated <p>'s, and thus small isn't necessarily being applied to the lists concerned.

Whilst in this instance the<small></small> pair could be replaced by a styled div, it would be nice to have a documented explanation of precisely why a single line HTML tag is causing <p></p> wrapping in this manner, as it could effect other tags, in ways that are not necessarily as easily fixed.

Event Timeline

Aklapper renamed this task from HTML tag on single line in markup causes stray <p></p> to be wrapped around it. to HTML tag <small> on single line in markup causes stray <p></p> to be wrapped around it..Jan 19 2018, 12:03 PM
Aklapper triaged this task as Low priority.
Aklapper added a project: MediaWiki-Parser.

Thanks for the re-title, but I was consdering this issue may be applicable to other tags more generally.

It doesn't help that in the above example, the small tag is being used in a block like manner, which is something the HTML spec (https://www.w3.org/TR/html52/textlevel-semantics.html#elementdef-small) says small isn't intended for ('phrasing' vs 'flow', 'section' etc content models.)

Longer term, owing to the long standing erronous and 'off-spec' use of some "phrasing" tags in a block like manner on some wikis, it may be required for the parser to treat tags like <small></small> <big></big> in a wider context based on prceeding and suceeding content, as pusedo tags, and in effect bake the implied styles into the appropriate wrapped block or span element... (In this instance the implied font-size would need to be baked into or applied to the wrapped list.)

This is likely to get hideously complex rather quickly :(

Izno added subscribers: ssastry, Izno.

IMO you should remove the small tags, or move them inside the block items as desired. (The latter can be botted by an enterprising editor.)

I've been removing them almost globally, because they are almost globally inappropriate (as e.g. in navboxes where the text is already set near-to-minimum for default accessibility, or infoboxes, with the same restrictions).

As for big, those should categorically be removed or replaced using a (possibly template-based) div with styling as that element is not only phrasing content but also obsolete (and causes the appropriate error in the obsolete category).

Adding @ssastry and MediaWiki-extensions-Linter.

Thought. ....

Would it be possible to add new LintError that flags up "Interupted phrasing..." to look specifcally for the content situation mentioned above?

i.e

><phrasing tag>
*list item
*list item
*list item
</phrasing tag>

As opposed to (or in addition to the Misnested tags) error?

Other tags to look for as 'interuptions' would be things like DIV, P, TABLE, UL and OL pairs, the HTML spec probably has a full list...

BTW before I squashed it this template https://en.wikisource.org/w/index.php?title=Template:Float_right&action=edit&oldid=6252736 was giving a simmilar error. Namely a set of paired opening and closing tags on their own lines getring inappropriately wrapped!