Skip to content

Comments

Add missing inline tags#3346

Open
edemaine wants to merge 1 commit intopugjs:masterfrom
edemaine:inline-tags
Open

Add missing inline tags#3346
edemaine wants to merge 1 commit intopugjs:masterfrom
edemaine:inline-tags

Conversation

@edemaine
Copy link

@edemaine edemaine commented Oct 19, 2021

I noticed that <u> (underline) and <cite> (citation style) tags were not rendering correctly in Pug's pretty mode: I was getting extra spaces around them. Example:

pug.render('h1 one\n  span.sep two\n  u three', {pretty:true})

Expected:

<h1>one<span class="sep">two</span><u>three</u></h1>

Actual:

<h1>one<span class="sep">two</span>
  <u>three</u>
</h1>

This results in a space between "two" and "three" text, which is inconsistent compared to the lack of space before <span>.

This PR adds the inline elements from MDN's list, in particular fixing the issue with <u>.

I was surprised by some items on this list, such as <iframe>, <canvas> and <script>. I left <script> out as this should rarely cause rendering issues (<script> ought to be in <head> anyway...), but included the others as their layout could be affected by adjacent spaces. I'm open to tweaking this list.

Because the list got substantially longer, I also replaced the Array.indexOf check with an Object.hasOwnProperty check, which should be faster (though I did not test this).

As another example, consider these two versions of a form (taken from one of the tests):

      <html>
        <body>
          <form method="POST" action="/search">
            <input type="hidden" name="_csrf" value="hey"/>
            <input type="text" name="query" placeholder="Search"/>
            <input type="submit" value="Search"/>
          </form>
          <hr>
          <form method="POST" action="/search"><input type="hidden" name="_csrf"
 value="hey"/><input type="text" name="query" placeholder="Search"/><input type=
"submit" value="Search"/>
          </form>
        </body>
      </html>

They render very differently:

image

There are ways for Pug to add spaces, but no ways to remove them in these settings, so I believe the latter behavior is far superior (it's also how things would render without pretty mode).

@rollingversions
Copy link

rollingversions bot commented Oct 19, 2021

There is no change log for this pull request yet.

Create a changelog

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@edemaine