"unformatted" paradigm broken, "unformatted" and "inline" are not the same

The whole approach js-beautify takes in determining what to wrap is conceptually broken, if I understand it correctly.

Let’s say I have the following HTML:

    <li>Install at least one Git client. <span class="tip">Recommended: <a

         href="https://www.sourcetreeapp.com/">SourceTree</a> (Windows, Mac)</span>all Git commands.</li>

Note all that blank space and newlines inside the <a> tag attributes. If I put span as one of the unformatted elements, then js-beautify doesn’t change anything! It leaves all that ugly whitespace!

If on the other hand I remove span from the unformatted elements, then js-beautify gives me this:

    <li>Install at least one Git client.
        <span class="tip">Recommended: <a href="https://www.sourcetreeapp.com/">SourceTree</a> (Windows, Mac)</span>all Git commands.</li>

Note that js-beautify now adds a newline before <span>! This too is completely incorrect — <span> is an inline phrasing element, and there is no need to break here.

The problem seems to be that js-beautify is using the idea of “unformatted” to be equivalent to “inline” element. This is the wrong approach and does not match HTML/CSS semantics!! The idea if block vs inline is completely orthogonal to whether elements should be wrapped.

js-beautify should determine whether an element is block or inline. Block elements should have newlines before them; inline elements should not.

The idea of “unformatted” is a distinct concept; it should tell js-beautify to leave it alone, regardless of whether the element is block or inline.

As it is now, there is no way to tell js-beautify that an element should not have a newline, yet its contents should be formatted.

The entire design is broken. Please fix this fundamental issue. (Or explain to me that I am mistaken, and that js-beautify is not conflating the concepts of “block/inline” and “formatted/unformatted”.)

[bitwiseman]

Your proposal of how it should work sounds reasonable. Please list which elements should be inline vs which should be unformatted. Then please implement and submit a pull request.

[garretwilson]

You believe there is a bug in the html beautifier.

No, I’m saying that there is no way to tell js-beautify not to put a line break before an element without at the same time telling js-beautify not to format anything inside the element. Is this true or is this not true?

You would like to describe it as “the entire paradigm js-beautify uses for formatting [html] is broken”.

If js-beautify does not know the difference between “things that must not have line breaks added before them” and “things that I must ignore altogether”, then yes, its paradigm is inadequate for even simple HTML. After all, I don’t want a line break before <dfn> (because this is an inline element), but if the <dfn> contains an <img>, I don’t want js-beautify to forego formatting the <img> tag. (This is a contrived example; it applies to any inline image.)

So you tell me. Can js-beautify format an <img> inside a <dfn> without putting a line feed before the <dfn>?

The point of what I’m saying is that “don’t format the contents of this element” is different than “don’t put a newline before this element.” So let me ask you again. Does js-beautify understand the distinction between these two things, or does it conflate these concepts? If it does not understand the difference, its fundamental model is broken.

But sure, sometimes you can work around fundamental flaws. So I come back and ask you again: how would I work around this flaw? How would I tell js-beautify not to put a line feed before <code> but to still format an <img> element inside the <code>?