Translating multiple parts of views all at once

[ilyvion]

I find myself wanting to translate multiple bits of a view as a unit; for instance I have this translation entry:

units-unit-conversion =
    <span title="{$precise_unit_value}">{$rounded_unit_value}</span>
    =
    <span title="{$precise_base_unit_value}">{$rounded_base_unit_value}</span>

This is not ideal as it puts direct control of markup into translators' hands.

In the JS world, there are features like DOM Overlays and React Overlays that let you give safe access to translators of the ability to translate markup without handing them the reins entirely.

I'm wondering what something like that would look like for Leptos and I'd be interested to know what others think.

[mondeja]

I'm not sure about if you need it in this case. You can translate the values separately and use that markup from a component or just a string from a function.

For example, I face this pattern frecuently:

tr!("supported-by", {
    "platform" => format!(
        "<a href=\"https://example.com\">{}</a>",
        tr!("my-platform"),
    ),
})

[ilyvion]

One of the principles of Fluent is that you don't translate bits and then join them together as you can't know what a translator might need to do to present your text sensibly in their language/locale.

Which is why the "overlays" solutions are so good because they give a lot of power to the translator while avoiding risky things like their being able to attach event handlers and such.

Sure, in my specific case it might be fine to extract <span title="{$precise_unit_value}">{$rounded_unit_value}</span> into a format!("<span title="{precise_unit_value}">{rounded_unit_value}</span>") and just pass along the result of that as {$unit_value} to the units-unit-conversion translation, but I still think it'd be nice to have something more powerful like the overlays from Fluent JS, which is why I brought this up for brainstorming. 😄