A internacionalização (i18n) de websites front-end permite que o conteúdo seja exibido em diferentes idiomas de forma dinâmica. O plugin jQuery.i18n.properties facilita esse processo carregando traduções de arquivos .properties. Este plugin inicialmente carrega o arquivo de recursos padrão (strings.properties), seguido por um arquivo específico para o idioma alvo (strings_pt-BR.properties), garantindo que uma tradução padrão sempre esteja disponível.

O fluxo de trabalho envolve: detectar o idioma do usuário, carregar as strings correspondentes e substituir o conteúdo textual na página por meio de seletores CSS específicos.

Estrutura de um Exemplo Prático

Considere uma página HTML com elementos que precisam ser traduzidos. Utilizamos atributos de classe e atributos personalizados para identificar o conteúdo a ser substituído.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="js/jquery.i18n.properties.min.js"></script>
<script src="js/app.js"></script>

</div>O JavaScript (`app.js`) gerencia a lógica de seleção de idioma, utilização de cookies para persistência e a aplicação das traduções.

<div>```
// Gerencia cookies para armazenar a preferência de idioma
function gerenciarCookie(nome, valor, diasExpiracao) {
    if (valor !== undefined) {
        // Define o cookie
        let stringExpiracao = '';
        if (diasExpiracao) {
            const data = new Date();
            data.setTime(data.getTime() + (diasExpiracao * 24 * 60 * 60 * 1000));
            stringExpiracao = '; expires=' + data.toUTCString();
        }
        document.cookie = nome + '=' + encodeURIComponent(valor) + stringExpiracao + '; path=/';
    } else {
        // Lê o cookie
        const nomeIgual = nome + '=';
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            let cookie = cookies[i].trim();
            if (cookie.indexOf(nomeIgual) === 0) {
                return decodeURIComponent(cookie.substring(nomeIgual.length, cookie.length));
            }
        }
        return null;
    }
}

// Obtém o idioma do navegador (primeiros 2 caracteres)
function idiomaNavegador() {
    const nav = navigator.language || navigator.userLanguage;
    return nav ? nav.substring(0, 2) : null;
}

// Configuração e inicialização da internacionalização
(function configurarI18n() {
    const IDIOMAS_SUPORTADOS = ['pt', 'en'];
    let idiomaAtual = gerenciarCookie('idioma_preferido') || idiomaNavegador() || 'pt';

    // Verifica se o idioma detectado é suportado
    if (IDIOMAS_SUPORTADOS.indexOf(idiomaAtual) === -1) {
        idiomaAtual = 'pt'; // Fallback para o idioma padrão
    }

    // Carrega os recursos de idioma
    if (typeof jQuery.i18n !== 'undefined') {
        jQuery.i18n.properties({
            name: 'mensagens',
            path: 'i18n/',
            mode: 'map',
            language: idiomaAtual,
            cache: false,
            encoding: 'UTF-8',
            callback: function() {
                // Aplica traduções aos elementos com data-i18n para conteúdo HTML
                $('[data-i18n]').each(function() {
                    const chave = $(this).data('i18n');
                    $(this).html($.i18n.prop(chave));
                });

                // Aplica traduções aos atributos (ex: placeholder)
                $('[data-i18n-placeholder]').each(function() {
                    const chave = $(this).data('i18n-placeholder');
                    $(this).attr('placeholder', $.i18n.prop(chave));
                });
            }
        });
    } else {
        console.error('jQuery.i18n.properties não está carregado.');
    }

    // Define o valor atual no seletor de idioma
    $('#seletor-idioma').val(idiomaAtual);

    // Evento de mudança de idioma
    $('#seletor-idioma').on('change', function() {
        const novoIdioma = $(this).val();
        gerenciarCookie('idioma_preferido', novoIdioma, 30);
        location.reload(); // Recarrega a página para aplicar as mudanças
    });
})();

As traduções são armazenadas em arquivos .properties dentro de um diretório, por exemplo, i18n/.

mensagens_pt.properties (Padrão/Português):

</div>**mensagens\_en.properties** (Inglês):

<div>```
tituloPagina=Internationalization Example
rotuloIdioma=Select language:
mensagemPrincipal=This is a dynamically translated message.
campoPesquisa=Enter your search here...

• Seletores: Utiliza atributos data- (data-i18n, data-i18n-placeholder) para uma marcação semântica e flexível.
• Persistência: O idioma selecionado é salvo em um cookie para lembrar a perferência do usuário em visitas futuras.
• Detecção: O idioma do navegador é utilizado como fallback caso não haja uma preferência salva.
• Carga Dinâmica: O plugin carrega e aplica as traduções de forma assíncrona, atualizando a interface após o carregamento.