Empty <i> tags stripped

[markcohen]

Tidy removes empty <i> tags, which are used by Twitter Bootstrap for placed Glyphicons

<i class="icon-search"></i>

Is there an option to tell Tidy to never remove tags? If not, maybe there should be.

[daaain]

Hmm, an option to ignore stripping certain tags would be very welcome, I just ran into some hack today where <b> tags are used to create rounded corners with some custom CSS on a <div>, which apparently works even in older browsers. As things are, I'll have to hack these back with some custom scripting which is not ideal.

Something along the lines of a suppress-stripping-tags parameter could be great where you can enumerate any tags from the current set of tags which get stripped without any control if no content is present. What are these by the way? <b>, <i> and <p> for sure, but how about the rest?

[daaain]

Hey Michael,

first of all thanks a lot for this fix!

I'm testing it right now, and seems that only the first level of empty elements are preserved when they are nested (I know...).

So this:

<div class="nifty-2"><b class="rtop-2"><b class="r2-2"></b><b class="r3-2"></b><b class="r4-2"></b></b> 
&nbsp;<img src="img/icon/listicondark-back.gif" alt="Back" /> 
<span><a href="http://www.example.com" class="mobLink">Back</a></span>
<b class="rbottom-2"><b class="r4-2"></b><b class="r3-2"></b><b class="r2-2"></b><b class="r1-2"></b></b>
</div>

Becomes this (indentation edited for comparability):

<div class="nifty-2"><b class="rtop-2"></b>
&nbsp;<img src="img/icon/listicondark-back.gif" alt="Back">
<span><a href="http://www.example.com" class="mobLink">Back</a></span>
<b class="rbottom-2"></b>
</div>

Edit: adding  s doesn't seem to help either :( Am I right guessing that the parser just doesn't expect insanity like this and silently ignores these nested elements?

<div class="nifty-2"><b class="rtop-2"><b class="r2-2">&nbsp;</b><b class="r3-2">&nbsp;</b><b class="r4-2">&nbsp;</b></b> 
&nbsp;<img src="img/icon/listicondark-back.gif" alt="Back" /> 
<span><a href="http://www.example.com" class="mobLink">Back</a></span>
<b class="rbottom-2"><b class="r4-2">&nbsp;</b><b class="r3-2">&nbsp;</b><b class="r2-2">&nbsp;</b><b class="r1-2">&nbsp;</b></b>
</div>

<div class="nifty-2">
<b class="rtop-2">&nbsp;&nbsp;&nbsp;</b>
&nbsp;<img src="img/icon/listicondark-back.gif" alt="Back">
<span><a href="http://www.example.com" class="mobLink">Back</a></span>
<b class="rbottom-2">&nbsp;&nbsp;&nbsp;&nbsp;</b>
</div>

Edit2: just found out that this is actually an old method called "Nifty corners" for image-less rounded corners in older browsers: http://www.html.it/articoli/nifty/index.html

[sideshowbarker]

This actually isn't caused by the empty-element-dropping part of the code. It's caused by another part of the code that merges nested markup. So if you do this:

<b class="rtop-2">foo<b class="r2-2">bar</b>baz<b class="r3-2">foo</b>bar<b class="r4-2">baz</b>foo</b>

You get this:

<b class="rtop-2">foobarbazfoobarbazfoo</b>

There is no option for preventing tidy from doing that, but I'll see if I can add one.

[sideshowbarker]

1052c2b

Added two new options, "merge-emphasis" and "coerce-endtags":

http://w3c.github.com/tidy-html5/quickref.html#merge-emphasis
http://w3c.github.com/tidy-html5/quickref.html#coerce-endtags

Both are set to "yes" by default, to preserve the existing behavior.
To prevent Tidy from messing with most nested markup altogether, set both to "no".