Skip to content

Add missing inline tags #3346

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add missing inline tags #3346

wants to merge 1 commit into from

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