---
title: "Marking arrays of translations safe using html suffix"
description:
  "Rails 6 marks arrays of translations as trusted safe by using the _html
  suffix"
canonical_url: "https://www.bigbinary.com/blog/rails-6-marks-arrays-of-translations-as-trusted-safe-by-using-the-_html-suffix"
markdown_url: "https://www.bigbinary.com/blog/rails-6-marks-arrays-of-translations-as-trusted-safe-by-using-the-_html-suffix.md"
---

# Marking arrays of translations safe using html suffix

Rails 6 marks arrays of translations as trusted safe by using the \_html suffix

- Author: Vishal Telangre
- Published: September 11, 2019
- Categories: Rails 6, Rails

### Before Rails 6

Before Rails 6, keys with the `_html` suffix in the language locale files are
automatically marked as HTML safe. These HTML safe keys do not get escaped when
used in the views.

```yaml
# config/locales/en.yml

en:
  home:
    index:
      title_html: <h2>We build web & mobile applications</h2>
      description_html:
        We are a dynamic team of <em>developers</em> and <em>designers</em>.
      sections:
        blogs:
          title_html: <h3>Blogs & publications</h3>
          description_html:
            We regularly write our blog. Our blogs are covered by <strong>Ruby
            Inside</strong> and <strong>Ruby Weekly Newsletter</strong>.
```

```erb
<!-- app/views/home/index.html.erb -->

<%= t('.title_html') %>
<%= t('.description_html') %>

<%= t('.sections.blogs.title_html') %>
<%= t('.sections.blogs.description_html') %>
```

Once rendered, this page looks like this.

![before-rails-6](https://www.bigbinary.com/blog/images/images_used_in_blog/2019/rails-6-marks-arrays-of-translations-as-trusted-safe-by-using-the-_html-suffix/before-rails-6-i18n-_html-suffix-without-array-key.png)

This way of marking translations as HTML safe by adding `_html` suffix to the
keys does not work as expected when the value is an array.

```yaml

# config/locales/en.yml

en:
home:
index:
title_html: <h2>We build web & mobile applications</h2>
description_html: We are a dynamic team of <em>developers</em> and <em>designers</em>.
sections:
blogs:
title_html: <h3>Blogs & publications</h3>
description_html: We regularly write our blog. Our blogs are covered by <strong>Ruby Inside</strong> and <strong>Ruby Weekly Newsletter</strong>.
services:
title_html: <h3>Services we offer</h3>
list_html: - <strong>Ruby on Rails</strong> - React.js &#9883; - React Native &#9883; &#128241;
```

```erb

<!-- app/views/home/index.html.erb -->

<%= t('.title_html') %>
<%= t('.description_html') %>

<%= t('.sections.blogs.title_html') %>
<%= t('.sections.blogs.description_html') %>

<%= t('.sections.services.title_html') %>

<ul>
  <% t('.sections.services.list_html').each do |service| %>
    <li><%= service %></li>
  <% end %>
<ul>
```

The rendered page escapes the unsafe HTML while rendering the array of
translations for the key `.sections.services.list_html` even though that key has
the `_html` suffix.

![before-rails-6](https://www.bigbinary.com/blog/images/images_used_in_blog/2019/rails-6-marks-arrays-of-translations-as-trusted-safe-by-using-the-_html-suffix/before-rails-6-i18n-_html-suffix-with-array-key.png)

A workaround is to manually mark all the translations in that array as HTML safe
using the methods such as `#raw` or `#html_safe`.

```erb

<!-- app/views/home/index.html.erb -->

<%= t('.title_html') %>
<%= t('.description_html') %>

<%= t('.sections.blogs.title_html') %>
<%= t('.sections.blogs.description_html') %>

<%= t('.sections.services.title_html') %>

<ul>
  <% t('.sections.services.list_html').each do |service| %>
    <li><%= service.html_safe %></li>
  <% end %>
<ul>
```

![rails-6-i18n](https://www.bigbinary.com/blog/images/images_used_in_blog/2019/rails-6-marks-arrays-of-translations-as-trusted-safe-by-using-the-_html-suffix/rails-6-i18n-array-key-with-_html-suffix.png)

### Arrays of translations are trusted as HTML safe by using the '\_html' suffix in Rails 6

In Rails 6, the unexpected behavior of not marking an array of translations as
HTML safe even though the key of that array has the `_html` suffix is fixed.

```yaml
# config/locales/en.yml

en:
home:
index:
title_html: <h2>We build web & mobile applications</h2>
description_html: We are a dynamic team of <em>developers</em> and <em>designers</em>.
sections:
blogs:
title_html: <h3>Blogs & publications</h3>
description_html: We regularly write our blog. Our blogs are covered by <strong>Ruby Inside</strong> and <strong>Ruby Weekly Newsletter</strong>.
services:
title_html: <h3>Services we offer</h3>
list_html: - <strong>Ruby on Rails</strong> - React.js &#9883; - React Native &#9883; &#128241;
```

```erb

<!-- app/views/home/index.html.erb -->

<%= t('.title_html') %>
<%= t('.description_html') %>

<%= t('.sections.blogs.title_html') %>
<%= t('.sections.blogs.description_html') %>

<%= t('.sections.services.title_html') %>

<ul>
  <% t('.sections.services.list_html').each do |service| %>
    <li><%= service %></li>
  <% end %>
<ul>
```

![rails-6-i18n](https://www.bigbinary.com/blog/images/images_used_in_blog/2019/rails-6-marks-arrays-of-translations-as-trusted-safe-by-using-the-_html-suffix/rails-6-i18n-array-key-with-_html-suffix.png)

We can see above that we no longer need to manually mark the translations as
HTML safe for the key `.sections.services.title_html` using the methods such as
`#raw` or `#html_safe` since that key has the `_html` suffix.

---

To learn more about this feature, please checkout
[rails/rails#32361](https://github.com/rails/rails/pull/32361).

## Links

- [Human page](https://www.bigbinary.com/blog/rails-6-marks-arrays-of-translations-as-trusted-safe-by-using-the-_html-suffix)