Twig {% include %} generates undesirable whitespace

Question

I have this code in index.twig (snippet formatted exactly as shown):

<div style="width: 12.5%; float: left; text-align: left; padding-right: 7.5px; padding-top: 5px;">{% include "_nav.twig" %}</div>

And this is my _nav.twig (snippet also formatted exactly as shown):

<nav>
    <ol class="linkSection">        
        <li><a href="index.php">Index</a></li>
        <li id="nav-expand-collapse" class="isCollapsed"><a href="#">Expand All</a></li>
    </ol>

    <ol class="linkSection">
        <li class="h2">Research</li>
        <li><a href="index.php?p=research_intro">Introduction</a></li>
        <li><a href="index.php?p=research_intro">Foo</a></li>
        <li><a href="index.php?p=research_intro">Bar</a></li>
        <li><a href="index.php?p=research_intro">Spam</a></li>
        <li><a href="index.php?p=research_intro">Eggs</a></li>
    </ol>
</nav>

This is the expected output (notice the lack of spaces between the heading and the Index link:

Expected Output

What happens is that Twig would include unnecessary whitespace like so:

Actual Output

This is what I see in the Chrome Development Console (Notice the ""):

enter image description here

I have tried {%- include -%}, {% spaceless %} around the <div> and {% include|trim(" "), but none of them succeeds at getting rid of the whitespace. How can I get rid of these whitespaces?

All files are encoded in UTF-8. The problem seems to be gone when I encode as UTF-8 without BOM.

@Tib Used to, but all files have been converted to UTF-8. _nav.twig is a new file. — tyteen4a03, Dec 16 '13 at 12:52
@Tib I lied - it turns out that I left one file unconverted. However, this made me discover that files encoded in UTF-8 without BOM do not have this issue. — tyteen4a03, Dec 16 '13 at 12:57
It looks like [Twig used to not like BOM at all](http://symfony2forum.org/threads/6-Twig-error-A-template-that-extends-another-one-cannot-have-a-body-..). I wonder if this is related to my problem? — tyteen4a03, Dec 16 '13 at 13:00

score 3 · Accepted Answer · edited May 23 '17 at 12:11

You just need to change the encocoding to UTF8 without BOM. It happen when you use the function include, I guess it's the same with Twig.

Related problem here: https://stackoverflow.com/a/10200440/1235943

When you save a page as UTF-8, a special signature called a byte-order mark (or BOM) is included at the beginning of the file, indicating that it is a UTF-8 file. You can only see BOMs with low level text editors (such as DOS edit). You need to remove this signature from the included file in order to get rid of the white space at the top of the page.

score 1 · Answer 2 · answered Dec 16 '13 at 12:46

1

do you have an error in your _nav.twig ? See here: li><a

answered Dec 16 '13 at 12:46

FazoM

4,777
6
43
61

Oops - that was not in the original code. Fixed. The error is not related to that typo however. – tyteen4a03 Dec 16 '13 at 12:47
What about `{% include`. Do you need a space there? – FazoM Dec 16 '13 at 12:50
Pretty sure Twig parses them just fine. As I said, my very original code was `{% include "_nav.twig" %}`. – tyteen4a03 Dec 16 '13 at 12:52

Twig {% include %} generates undesirable whitespace

2 Answers2