Rails 3: How to display properly text from "textarea"?

Question

In my Rails 3 application I use textarea to let users to write a new message in a forum.

However, when the message is displayed, all newlines look like spaces (there is no <br />). Maybe there are other mismatch examples, I don't know yet.

I wonder what is the most appropriate way to deal with this.

I guess that the text that is stored in the database is OK (I see for example that < is converted to <), so the main problem is the presentation.

Are there build-in helper methods in Rails for this ?

(simple_format does something that looks similar to what I need, but it adds <p> tags which I don't want to appear.)

Answer 1

Rails got a helper method out of the box, so you dont have to write your own method.

From the documentation:

simple_format(text, html_options={}, options={})

my_text = "Here is some basic text...\n...with a line break."

simple_format(my_text)
# => "<p>Here is some basic text...\n<br />...with a line break.</p>"

more_text = "We want to put a paragraph...\n\n...right there."

simple_format(more_text)
# => "<p>We want to put a paragraph...</p>\n\n<p>...right there.</p>"

simple_format("Look ma! A class!", :class => 'description')
# => "<p class='description'>Look ma! A class!</p>"

Answer 2

You can use style="white-space: pre-wrap;" in the html tag surrounding the text. This respects any line breaks in the text.

Answer 3

Since simple_format does not do what you want, I'd make a simple helper method to convert newlines to <br>s:

def nl2br(s)
  s.gsub(/\n/, '<br>')
end

Then in your view you can use it like this:

<%= nl2br(h(@forum_post.message)) %>

Answer 4

If someone still gets redirected here and uses Rails 4: http://apidock.com/rails/v4.0.2/ActionView/Helpers/TextHelper/simple_format

You can now specify the tag it gets wrapped in (defaults to p) like so:

simple_format(my_text, {}, wrapper_tag: "div")
# => "<div>Here is some basic text...\n<br />...with a line break.</div>"

Answer 5

CSS-only option

I believe one of the easiest options is to use css white-space: pre-line;

Other answers also mentioned using white-space, but I think it needs a little more information:

In most cases you should probably choose pre-line over pre-wrap. View the difference here.

It's very important to keep in mind about white-space that you should not do something like this:

<p style="white-space: pre-line;">
  <%= your.text %>
</p>

It will produce extra spaces and line-breaks in the output. Instead, go with this:

<p style="white-space: pre-line;"><%= your.text %></p>

HTML alternative

Another way is to wrap your text in <pre> tags. And last note on my CSS option is true here as well:

<p>
  <pre><%= your.text %></pre>
</p>

Don't separate your text from <pre> tags with spaces or line-breaks.

Final thoughts

After googling this matter a little I have a feeling that html-approach is considered less clean than the css one and we should go css-way. However, html-way seems to be more browser-compatible (supports archaic browsers, but who cares):

pre tag

white-space