Unwanted output when using Twig conditional I am displaying a series of icons and associated labels in an unordered list. Some of the icons should only be displayed when a user is in a specific set of user groups, so I am using a conditional. Without the conditional, the icon and label displays perfectly, but when I wrap it in a conditional, it seems to output an extra blank character which breaks my layout.

&lt;li class="icon"&gt;
  &lt;a href="/entry1"&gt;
    &lt;img src="/assets/images/icon1.svg" alt="" /&gt;
    &lt;div class="title"&gt;Entry 1&lt;/div&gt;
  &lt;/a&gt;
&lt;/li&gt;
{% if currentUser.isInGroup('admin') %}﻿
&lt;li class="icon"&gt;
  &lt;a href="/entry2"&gt;
    &lt;img src="/assets/images/icon2.svg" alt="" /&gt;
    &lt;div class="title"&gt;Entry 2&lt;/div&gt;
  &lt;/a&gt;
&lt;/li&gt;
{% endif %}﻿


Chrome Inspector shows two quotation marks separated by a blank line between the li.icon elements, which I think indicates one blank character. When I remove the conditional, these quotation marks and the blank line don't appear, and the layout looks correct.

If I collapse all the logic and HTML elements into one long line of characters with no spaces between them, this weird blank output still occurs. Wrapping the block in the {% spaceless %} tag doesn't seem to work either.

What might be causing this?
I pasted your HTML into TextMate with “Show Invisible Characters” enabled, and it shows that there are two “zero width no-break space” (U+FEFF) characters in there, at the end of these lines:

{% if currentUser.isInGroup('admin') %}

-- and --

{% endif %}


Here’s a screenshot:



Those characters tend to come from code that was copied from Google+, which likes to add them at the very end of each post.

Unfortunately, Sublime Text doesn’t show these types of characters; you need to use TextMate to see them.