<p>I pasted your HTML into TextMate with “Show Invisible Characters” enabled, and it shows that there are two <a href="http://www.fileformat.info/info/unicode/char/FEFF/index.htm" rel="nofollow noreferrer">“zero width no-break space” (U+FEFF)</a> characters in there, at the end of these lines:</p>

<pre><code>{% if currentUser.isInGroup('admin') %}

-- and --

{% endif %}
</code></pre>

<p>Here’s a screenshot:</p>

<p><img src="https://i.sstatic.net/NpavX.png" width="531"></p>

<p>Those characters tend to come from code that was copied from <a href="https://plus.google.com/communities/106505340287442511226" rel="nofollow noreferrer">Google+</a>, which likes to add them at the very end of each post.</p>

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

CC BY-SA 3.0
2014-07-02T17:08:50.700Z
Rrr! Why can't Google use visible Unicode characters like the rest of society!
Bryan Redeagle
CC BY-SA 3.0
2014-07-03T08:18:11.430Z
Thanks Brandon, that was it. This Stack Exchange site is a great resource to have.
Alex H
CC BY-SA 3.0
2014-07-02T16:26:17.590Z
2014-07-02T16:26:17.590Z
Brandon Kelly
<p>I'd venture to guess that you have a <a href="http://en.wikipedia.org/wiki/Byte_order_mark" rel="nofollow">BOM character</a> in there somewhere. It's basically an invisible character that does nothing but cause trouble. One of these can show up from copying a chunk of code from somewhere else... quite often from the Google+ group.</p>

<p>The solution is generally to re-type your code by hand, and delete the original offending chunk of code. You can probably narrow down the specific line or two which may contain that BOM by deleting and checking your Chrome Inspector (like you already did to determine where the issue was coming from). Then you can just re-type the one or two lines which actually contain the BOM</p>

CC BY-SA 3.0
2014-07-02T16:26:50.100Z
2014-07-02T16:26:50.100Z
Lindsey D
<p>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.</p>

<pre><code>&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 %}﻿
</code></pre>

<p>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.</p>

<p>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.</p>

<p>What might be causing this?</p>

<templating><conditional><whitespace>
Unwanted output when using Twig conditional
# Unwanted output when using Twig conditional

(Asked by: username_0 on 2014-07-02)

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.

  
    
    Entry 1
  

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

  
    
    Entry 2
  

{% 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?

**Tags:** templating, conditional, whitespace

---

## 2 answers

### Answer by username_1 on 2014-07-02. Score: 5 | Accepted answer

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.

> **Comments:**
> **username_2**: Rrr! Why can't Google use visible Unicode characters like the rest of society!  
> **username_0**: Thanks Brandon, that was it. This Stack Exchange site is a great resource to have.  

---

### Answer by username_3 on 2014-07-02. Score: 2

I'd venture to guess that you have a [BOM character](http://en.wikipedia.org/wiki/Byte_order_mark) in there somewhere. It's basically an invisible character that does nothing but cause trouble. One of these can show up from copying a chunk of code from somewhere else... quite often from the Google+ group.

The solution is generally to re-type your code by hand, and delete the original offending chunk of code. You can probably narrow down the specific line or two which may contain that BOM by deleting and checking your Chrome Inspector (like you already did to determine where the issue was coming from). Then you can just re-type the one or two lines which actually contain the BOM


---

