Long String autoindents with HAML/i18n

Question

In my application, I have a section of localized text. It is two paragraphs separated by a line break. I am seeing it inserting an extra line and indenting at the start of each paragraph. These paragraphs should not be indented.

Translation:

translated_text:
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Suspendisse facilisis scelerisque orci ut mattis. Nunc 
    vehicula fermentum. Praesent euismod congue condimentum.
    turpis ac risus vulputate pellentesque. Proin non metus 
    lorem est, dictum in venenatis ac, tristique vitae leo. 
    nec ultrices. Integer viverra, velit ac rutrum lobortis, 
    iaculis quis justo et posuere.

    Fusce eu sem dictum, tristique nisi ullamcorper, porttitor n
    accumsan id pretium nec, mollis eu erat. Suspendisse adipisc
    consequat diam, eu facilisis est. Vivamus vitae congue risus.
    a sagittis. Aliquam fermentum mattis justo. Nam pretium libero 
    adipiscing augue molestie erat lobortis, eu semper velit consequat."

When I remove the separating line break, the text left justifies as expected. I have checked for CSS rules (text-indent, white-space), HAML/i18n configuration and attempted using the |, |+ and |- block syntax for YAML. No luck.

Answer 1

I work with Saedar. We dug through the HAML code and realized that the indentation is only happening when the 'Ugly' option is false. The issue is that it's trying to indent the multiline text so that it's pretty with the formatted HTML.

For example, if you have a single line text inside of a span you get:

<div>
  <div>
    <span>This is a single line... doesn't matter how long it is.</span>
  </div>
</div>

But as soon as you start splitting lines, the text goes on its own and is indented to be pretty in the source:

<div>
  <div>
    <span>
      This has multiple lines.

      It's formatted to be pretty in the source code.
    </span>
  </div>
</div>

This causes the text to be indented on each paragraph in our case because on that element we have the text-wrap CSS style set to pre-wrap.

The solution we're going with is to set Haml::Template.options[:ugly] = true in config/initializers/haml.rb

This changes turns all of the html indenting off like so:

<div>
<div>
<span>
This has multiple lines.

It's formatted to be pretty in the source code.
</span>
</div>
</div>