Last week, we experienced something that we never thought will happen. Some missing translations messed up the content and layout of one of our landing pages.
This is how we expected it to look like:
However, it looked like this:
Furthermore, in mobile, it messed the page layout by content div being pushed inwards due to the long string.
We found out that it’s due to I18n’s missing translation message.
Notice that the message is enclosed in a
<span></span> element. However, since the translated segment was being used as the value for the images’ alt, the span element messed with the alt’s value. Unfortunately, the segments being used as image alt were not yet available for certain locales.
This code was tracked to this line in
After reading the method in
ActionView#TranslationHelpers, we found a way on how to workaround this problem. By passing a
:default paramater in or
t method call in the view, we were able to override the default
span return element on missing translation.
= image_tag 'my_image.gif', alt: t('my.missing.segment')
:default to a blank string.
= image_tag 'my_image.gif', alt: t('my.missing.segment', default: '')
After applying the simple fix, the images showed as expected!
Rails 5 Alternative
If you are using Rails 5, you can also set this config in your
config.action_view.debug_missing_translation = false