Rails i18n - translation_missing class style in development

The translation_missing class can be pretty useful in development to expose every missing i18n key in your app. Rails adds a <span class="translation_missing"></span> around every use of the t helper that does not have a matching key in the YAML for the current locale.

To help the team spot those, we recently started using a simple CSS rule:

.translation_missing {
  outline: 1px solid red;
}

So we could all see red outlines on every missing key:

The issue

This would also show those outlines in production! 😱

Most of the solutions I found on Stack Overflow were either outdated or too complex to trust.

I decided to read how Rails creates those span classes and look for a fix. After my third monkey patch to Rails’ ActionView, I realized a simpler approach might be in order.

The simple fix

Create an error_styles helper that returns a <style> tag:

# app/helpers/errors_helper.rb
module ErrorsHelper
  def error_styles
    tag.style do
      <<~CSS
        .translation_missing {
          outline: 1px solid red;
        }
      CSS
    end
  end
end

And add it to your application layout:

<!-- app/views/layouts/application.html.erb -->
<%# Somewhere in your <head> %>
<%= error_styles if Rails.env.development? %>