I18nを使いながらPCでもスマホでも狙ったところでレスポンシブに改行する

やりたいこと

Railsでガチでフランス語のアプリを個人開発しています。

タイトルや文章をブラウザで表示したいとき、PCブラウザは横に長いから改行は要らないが、スマホブラウザでは改行を入れないと見栄えが悪いってことあると思います。しかもお任せしちゃうと「いや、そこで改行しないで...、ダサい！」ってところで改行してくれてしまいます。

こんな感じで↓

これをPCブラウザの時は、

ようこそ「みんなでフランス語」へ
みんなでフランス語、日本語の知識を共有しましょう

スマホの時は、

ようこそ
「みんなでフランス語」へ
みんなでフランス語、日本語の知識を
共有しましょう

という具合で改行したいです。

HTMLで<br>タグを仕込んで、CSS側のdisplayとメディアクエリを活用して制御すれば良いかと思ったのですが、RailsのビューでI18nを使ってしまっている。。ゆくゆくは多言語対応したいから、I18nはそのまま使いたい。

あると思います。

例えばコードがこんな感じになっているとします。

posts/index.html.erb

<h2 class="title"><%= t('.title') %></h2>

posts/views.ja.yaml

---
ja:
  posts:
    title: "ようこそ<br>「みんなでフランス語」へ"

実装！

２ステップです。

1. keyをhoge_htmlにするとhtml_safeとして読んでくれる

I18nはsuffixに_htmlとあるとhtml_safeと判断してくれるそうです。
なので、titleをtitle_htmlにします。

posts/index.html.erb

<h2 class="title"><%= t('.title_html') %></h2>

posts/views.ja.yaml

---
ja:
  posts:
    title_html: "ようこそ<br>「みんなでフランス語」へ"

これはRailsの公式ドキュメントに書いてあります↓

the translation will be marked as html_safe if the key has the suffix “_html” or the last element of the key is “html”. Calling translate("footer_html") or translate("footer.html") will return an HTML safe string that won't be escaped by other HTML helper methods.

でも調子に乗ってclass属性を入れると...

views.ja.yaml

---
ja:
  posts:
    title_html: "ようこそ<br class="for-mobile">「みんなでフランス語」へ"

I18n::InvalidLocaleData - can not load translations from /Users/USER_NAME/dev/APP_NAME/config/locales/views.ja.yml: #): did not find expected key while parsing a block mapping at line 128 column 7>:

こんな感じで怒られました。

2. ならばCSS（SCSS）で工夫してあげる

localeのyamlでは<br>と属性なしのままにしておいて、CSSのセレクタで工夫してあげよう！ということで<br>をCSSで親要素から指定してスタイルを設定すればやりたいことが実現できました。

.title {

  br {
    display: none;

    @media (max-width: 414px) {
      display: inline;
    }
  }
}

最後に

ご指摘などあればよろしくお願いします！

会社の同僚からこんなのもあるよと教えてもらいました。
https://twitter.com/clockmaker/status/1461503892693213193?s=20

ちなみに、このアプリ、リリースしてガチで使いたいし、ガチで使ってもらいたいので、Instagramから始めました（リンク）。