Handling Safe HTML Tags In Hyvä Translations: Allowing Tags Like -

When working with Hyvä themes in Magento 2, translations are a key part of providing a localized experience. However, sometimes you may want to include safe HTML tags — like  for underlining — within translations. In this blog post, we’ll dive into how to handle safe HTML tags in Hyvä translations effectively.

Why Use Safe HTML Tags in Hyvä Translations?

Imagine you want to display a translated string like:

We have found 10 product(s)

This helps emphasize parts of the message without relying on CSS classes or JavaScript. However, handling such content safely is crucial to avoid breaking the layout or creating security vulnerabilities.

Using `hyva.str()` for Translations

Hyvä provides the hyva.str() function to handle translations. Let’s look at an example:

<?= hyva.str('We have found <u>%1 product(s)</u>', total) ?>

In this setup, total will be replaced by the actual value, and the  tag remains intact. Unlike __() or escapeHtml(), hyva.str() doesn’t interfere with HTML tags — it only replaces placeholders (%1, %2, etc.).

Combining with `escapeHtml()`

If you need to sanitize content but still allow certain HTML tags, you can combine __() with Magento’s escapeHtml() and provide an array of allowed tags:

<?= $escaper->escapeHtml(
    __('We have found <u>%1 product(s)</u>', $total),
    ['<u>']
) ?>

In this example:

__('...') handles the translation.
escapeHtml() escapes other tags, but allows .
[''] specifies allowed tags.

Final Thoughts

Hyvä translations are powerful, and with a little extra handling, you can safely include useful formatting tags like . Whether you’re emphasizing product counts or enhancing readability, this method keeps things secure and flexible.