The translation_missing class can be pretty useful in development to expose all the instances of missing i18n keys in your app. Rails adds a <span class="missing_translation" ></span> around every use of his helper method t that doesn't have a matching key in the YAML of the current locale.
To help expose to the team every instance of missing translations, we recently started using a simple CSS class:
.translation_missing {
outline: 1px solid red;
}
So we could all see red outlines on every instance of missing key:
The issue
This would also show those outline in production! 😱
Most of the solutions I found in StackOverflow were either outdated or too complex to be trustworthy.
I decided to read how those span classes are created by Rails to try and find a fix, but after my third monkey patch to Rail's ActionView I realized that a simpler approach might be in order.
The simple fix
Create an error_styles helper that returns a <style>
# 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? %>
Top comments (0)