Rails inline ERb effects on HTML structure

When using Ruby on Rails, ERb (embedded Ruby) is used a LOT in the X/HTML. There are two types of ERb,

An evaluation block:

<% some_code %>

And an output block:

<%= @print_this_variable %>

These blocks are necessary when using Rails, and I've noticed that when I do a 'View Source' (via the Web Developer addon for Firefox, of course), I see a lot of funky spacing and line breaking where the ERb's have been evaluated. Probably fine for most people, but it makes reading the outputted HTML code a hassle.

It turns out that there are really three ways to use the evaluation ERb that can affect your spacing and line-breaking.

Firstly, the output block is used just like you'd expect to use it. If your code says this:

<p>
  Text before ERb.
  <%= "code_goes_here" %>
  Text after ERb
</p>

The resulting HTML will look just like this:

<p>
  Text before ERb.
  code_goes_here
  Text after ERb
</p>

Evaluation block use #1: If you just put a block, it will cause a line break after the block in the HTML, so if you had this in your code:

<p>
  Text before ERb.
  <% some_code %>
  Text after ERb
</p>

The resulting HTML code would look like this:

<p>
  Text before ERb.

  Text after ERb
</p>

Evaluation block use #2: If you add a dash(-) at the end of the block, it will prevent it from adding a line break. So, if your code looks like this:

<p>
  Text before ERb.
  <% some_code -%>
  Text after ERb
</p>

The resulting HTML code would look like this:

<p>
  Text before ERb.
    Text after ERb
</p>

The line break is gone, but the space taken by the block is still there. That leads us to. . .

Evaluation block use #3: If you add a dash(-) at the beginning AND end of the block, it will prevent it from adding a line break AND remove the leading space it would have taken up. So, if your code looks like this:

<p>
  Text before ERb.
  <%- some_code -%>
  Text after ERb
</p>

The resulting HTML code would look like this:

<p>
  Text before ERb.
  Text after ERb
</p>

You'd never know there was a code block there! Is this useful? I don't know... maybe.

Tagged: rails, xhtml, erb

Leave a comment: