Laravel Blade adds unwanted spaces in final HTML

user_1252920 0
Viewed 787

I'm developing views in Laravel Blade and I always get unwanted spaces in the final HTML (checking with Dev tool) like this (ugly case):

enter image description here

You'll see a lot of unwanted spaces, where the code is simply:

<!-- Ugly -->  
<div>
  Lorem ipsum
  <div>
    Lorem ipsum
  </div>
</div>

Obviously I've tabulation set as spaces in my IDE.

I tried to remove them in many ways where the only one that works is to put all inline:

<!-- Beautiful (but I can't do this for all!) -->
<div>Lorem ipsum<div>Lorem ipsum</div></div>

but very often I can't do that.

How can avoid all these spaces?

EDIT: this seems to happens in Chrome, not in Firefox

laravel-blade laravel
1 Answers

I am noticing this as well. There is interaction between the blade directives and the output formatting/whitespace.

I think what is going on is that the breakpoints in the rendered php occur at the line position of the blade directives. I think this is effectively the desired behaviour though as it is the same behaviour I notice if I use <?php ?> breaks in place of the blade directives.

The way I have worked around this pre-laravel was to zero-indent the <?php ?> breaks, which effectively re-zeros the indent for the contents generated within the <?php ?> braces. This works well and is the most logical way I have found to precisely control the output whitespace from a code readability perspective (though not perfect!).

The equivalent in blade-land appears to be to do the same with blade directives, ie. put them on a new line at position zero. This looks a bit irksome (as it does with regular <?php ?> breaks) but it is the only way I have found to control the output (and I still find regular php to be easier to read and faster to type out than the blade directives for the most part, where you don't need features like $loop).

user_43608760
Related