How to keep style for HTML in Ruby/Rails?

Question

I'm a beginner to Ruby/Rails, and just generated my first HTML programmatically - kind of exciting-- but when I viewed "page source" from the browser, my HTML had all these additional gaps and messed up the logical indentation:

This code in a View:

<% @states_array.each do |state| %>
  <ul><%= state %></ul>
<% end %>

and this code in my application.html.erb layout: Practice Header

  <div class="text">
    <%= yield %>
  </div>

  <div class="footer">
  </div>

Produced this HTML when I viewed page source for that page:

      <div class="header">
        Practice Header
      </div>

      <div class="text">

  <ul>California</ul>

  <ul>Colorado</ul>

  <ul>Florida</ul>

  <ul>Georgia</ul>

  <ul>New York</ul>

  <ul>North Carolina</ul>

  <ul>North Dakota</ul>

  <ul>Oregon</ul>

      </div>

      <div class="footer">
      </div>

only an extra space occurred after each row, and the logical indentation of where I put the <%= yield %> was lost. Thanks so much for your help in advance.

<ul>? probably you missed <li> tags. w3.org/TR/html401/struct/lists.html — NARKOZ
– NARKOZ, Commented Oct 15, 2010 at 0:20
I agree that it's kinda frustrating as someone who's persnickety about code organization, but the important thing to remember is that you're the only one who's going to be spending any real time with your HTML. Don't worry about the output so long as it's correct; spend your time on making your view code readable :) — Matchu
– Matchu, Commented Oct 15, 2010 at 0:40

Steve Ross · Accepted Answer · 2010-10-15 01:08:13Z

3

You can suppress the trailing newline by closing with a minus sign:

<% some.ruby.statement -%>

If the beauty of your markup really matters to you, look into Haml (http://haml-lang.com/).

answered Oct 15, 2010 at 1:08

Steve Ross

4,1441 gold badge30 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:11:48Z

2

<% @states_array.each do |state| %>
  <ul><%= state %></ul>
<% end %>

Results in the string "\n<ul>state</ul>\n" for each state in the array. So the output is technically correct. You could use

<% @states_array.each do |state| %><ul><%= state %></ul>
<% end %>

But that's not as easy to read in your code. I've read there is a way to skip the trailing new lines but don't recall the exact method (Update: see @user156011's answer).

But the truth is - it doesn't really matter. HTML is for the browser - don't worry about how it looks. The only time you really need to pay attention is when two tags must exist one after the other without spacing to prevent browsers from injecting default whitespace - like in a series of tags sliced up from a larger image.

edited May 23, 2017 at 12:11

CommunityBot

11 silver badge

answered Oct 15, 2010 at 0:37

Paul Alexander

32.5k16 gold badges100 silver badges152 bronze badges

Comments

Robbie · Accepted Answer · 2010-10-15 05:39:48Z

1

If you're going for markup readability - Haml has been nothing but a dream for me. In development mode, it outputs gorgeous HTML that is properly indented. It'll switch to "ugly mode" by default when your app is run in production mode, to save on server resources.

However, if you're new to Ruby/Rails, learning a new templating language may not be in your best interest. (Still, I'd argue that if you can learn ERb, you can easily pickup Haml in a day.)

If you're going to stick to ERb, you can use the <%- and -%> will respectively supress leading/trailing whitespace. Which may help in your quest for clean markup.

Best of luck :)
~Robbie

answered Oct 15, 2010 at 5:39

Robbie

7259 silver badges20 bronze badges

1 Comment

nathanvda Over a year ago

Agreed. Use HAML. A lot easier and cleaner.

JackCA · Accepted Answer · 2010-10-15 00:30:38Z

0

You should probably change it to something like:

<ul>
<% @states_array.each do |state| %>
  <li><%= state %></li>
<% end %>
</ul>

answered Oct 15, 2010 at 0:30

JackCA

4,8854 gold badges29 silver badges26 bronze badges

Collectives™ on Stack Overflow

How to keep style for HTML in Ruby/Rails?

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related