Gettext html in translation

Phoenix Forum Questions / Help
,
1

Does anybody have any ideas or experience with using Gettext in a template, and having html embedded within the translated text? I’m currently translating fragments, like below, but this feels wrong and makes it more difficult to translate. Embedding raw html in the translation also seems wrong, since the translator may not even know html.

<p>
  <%= gettext "Already have an account?" %>
  <a href="/login"><%= gettext "Sign in" %></a>
  <%= gettext "to continue" %>
</p>
1 Like
2

This would work (using interpolation and the raw function):

<p>
  <%= gettext("Already have an account? %{a_start}Sign in%{a_end} to continue", a_start: "<a href='/login'>", a_end: "</a>") |> raw() %>
</p>

or without interpolation with the html tags directly in the text:

<p>
  <%= gettext("Already have an account? <a href='/login'>Sign in</a> to continue") |> raw() %>
</p>

You interpolate the html tags like you would interpolate anything else and then simply pass everything that gettext spits out to raw function. This assumes that the gettext text is safe. Keep that in mind.

2 Likes
3

Yeah, that’s how you do it.

You can also do the following (this is an example from a production app with translations):

<p>
  <%= gettext("Already have an account? %{sign_in} to continue", sign_in: safe_to_string(link(gettext("Sign in"), to: Routes.session_path(@conn, :new)))) |> raw() %>
</p>

A translator will usually have difficulty when there’s inline HTML, unless it’s very simple. There can also be issues with the open and close tags unless your translation platform verifies that these interpolations are intact and in the right order. I would keep all HTML out of the translations.

5 Likes
4

This is exactly what I was looking for, much appreciated!

5

Thanks for this. Interpolation definitely seems like the better way here since it would allow for easier editing of the html tags, in case a class would need to be added or removed for example.

6

It took me a long time (and help from a couple of “strangers” online) to figure out how to make this work now that we have the new <.link> component, but I finally got it working, so I’m leaving the working example below:

<%= Phoenix.HTML.raw(
  gettext(
    ~s(Please review our %{terms_of_service_link} and %{privacy_policy_link}...),
    terms_of_service_link: safe_link(%{url: @terms_of_service_url, label: gettext("Terms of Service")}),
    privacy_policy_link: safe_link(%{url: @privacy_policy_url, label: gettext("Privacy Policy")})
  )
) %>

Where safe_link is defined as:

defp safe_link(assigns) do
  Phoenix.HTML.Safe.to_iodata(~H"""
  <.link href={@url} class="font-bold hover:underline" target="_blank">
    <%= @label %>
  </.link>
  """)
end

\o/

1 Like