htacg / tidy-html5

The granddaddy of HTML tools, with support for modern standards
http://www.html-tidy.org
2.71k stars 418 forks source link

Space Insertion Issue #1023

Open mugenShouren opened 2 years ago

mugenShouren commented 2 years ago

There are space added in between DIV tags, when the DIV tags have display:inline CSS. TIDY adds proper formatting by moving all div opening and closing tags to the newline as they are block level tags, but when the DIVs have the above CSS that newline character is treated as a space and display changes.

<div style='display:inline;'><b>J</b></div><div style='display:inline;'>hon</div>

Jhon

<div style='display:inline;'><b>J</b>
</div>
<div style='display:inline;'>hon
</div>

J hon

mugenShouren commented 2 years ago

I know that such use of DIV tags is not correct but I use TIDY for correction of large files in high volumes. And this introduction of space causes serious issues as it sometimes changes the meaning.

1Hyena commented 1 year ago

I just came here to make an issue very similar to this. In my case I use an empty span before an inline-block element in order to vertically align the element to the middle. However, since Tidy adds spaces as part of its indentation, the browser will render a slight gap between the empty span and the vertically aligned element. This has been discussed a lot and the most bullet-proof solution seems to be the encapsulation of all indentation whitespace into comments.

That said, I would suggest adding a new Tidy option that replaces regular whitespace indentation with comment based indentation (see the example code below).

<ul><!--
  --><li>Item 1</li><!--
  --><li>Item 2</li><!--
  --><li>Item 3</li><!--
--></ul>