Skip to content
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

Add missing inline tags #3346

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

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

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