Internacionalização

A Rybená suporta múltiplos idiomas, permitindo que você ofereça acessibilidade para usuários de diferentes regiões. Este guia mostra como configurar e alternar idiomas na Rybená.

Idiomas Suportados

A Rybená está disponível nos seguintes idiomas:

Idioma	Código	LIBRAS	Voz	Acessibilidade Visual
Português	`ptBR`	✅	✅	✅
Espanhol	`esES`	❌	✅	✅
Inglês	`enUS`	❌	✅	✅

Importante: A funcionalidade de tradução em LIBRAS está disponível apenas quando a Rybená está configurada em Português (ptBR). Para outros idiomas, apenas as funcionalidades de voz e acessibilidade visual estão disponíveis.

Métodos de Configuração

Existem três formas de configurar o idioma da Rybená:

Configuração por Parâmetro

Use o parâmetro lang na URL do script para definir o idioma inicial da Rybená.

1. Adicione o parâmetro lang

Adicione lang=ptBR, lang=esES ou lang=enUS à URL do script:

<script
  type="text/javascript"
  src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?lang=ptBR"
></script>

<script
  type="text/javascript"
  src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?lang=esES"
></script>

<script
  type="text/javascript"
  src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?lang=enUS"
></script>

2. Teste a configuração

Recarregue a página e verifique se a Rybená está no idioma correto.

Nota: Este método é ideal quando você quer que a Rybená inicie sempre em um idioma específico.

Configuração por Classe CSS

Use classes CSS para integrar a troca de idioma da Rybená com o sistema de internacionalização do seu site.

1. Adicione as classes aos elementos de troca de idioma

Adicione a classe apropriada ao elemento que realiza a troca de idioma no seu site:

<button class="ryb-language-ptBR" onclick="changeLanguage('ptBR')">
  Português
</button>

<button class="ryb-language-esES" onclick="changeLanguage('esES')">
  Español
</button>

<button class="ryb-language-enUS" onclick="changeLanguage('enUS')">
  English
</button>

2. Classes disponíveis

Use estas classes para cada idioma:

ryb-language-ptBR - Português
ryb-language-esES - Espanhol
ryb-language-enUS - Inglês

3. Exemplo completo

<div class="language-selector">
  <button class="ryb-language-ptBR">🇧🇷 Português</button>
  <button class="ryb-language-esES">🇪🇸 Español</button>
  <button class="ryb-language-enUS">🇺🇸 English</button>
</div>

Dica: Este método é ideal quando você já tem um sistema de internacionalização no seu site e quer que a Rybená siga automaticamente as mudanças de idioma.

Configuração por API

Use a API JavaScript para alterar o idioma programaticamente, sem interação do usuário.

1. Obtenha a instância da API

const rybena = RybenaApi.getInstance();

2. Altere o idioma

Use o método setLanguage() para alterar o idioma:

// Alterar para Português
rybena.setLanguage("ptBR");

// Alterar para Espanhol
rybena.setLanguage("esES");

// Alterar para Inglês
rybena.setLanguage("enUS");

3. Exemplo de uso

// Detectar idioma do navegador
function detectBrowserLanguage() {
  const browserLang = navigator.language || navigator.userLanguage;

  if (browserLang.startsWith("pt")) {
    return "ptBR";
  } else if (browserLang.startsWith("es")) {
    return "esES";
  } else {
    return "enUS";
  }
}

// Inicializar Rybená com idioma do navegador
document.addEventListener("DOMContentLoaded", () => {
  const rybena = RybenaApi.getInstance();
  const detectedLang = detectBrowserLanguage();
  rybena.setLanguage(detectedLang);
});

Nota: Este método é ideal quando você precisa alterar o idioma dinamicamente baseado em lógica de negócio ou preferências do usuário.

Integração com Sistemas de Internacionalização

Integração com i18n (React)

import { useTranslation } from "react-i18n";
import { useEffect } from "react";

function LanguageSelector() {
  const { i18n } = useTranslation();

  const changeLanguage = (lang: string) => {
    // Alterar idioma do i18n
    i18n.changeLanguage(lang);

    // Alterar idioma da Rybená
    const rybena = (window as any).RybenaApi?.getInstance();
    if (rybena) {
      const rybenaLang =
        lang === "pt" ? "ptBR" : lang === "es" ? "esES" : "enUS";
      rybena.setLanguage(rybenaLang);
    }
  };

  return (
    <div>
      <button onClick={() => changeLanguage("pt")}>Português</button>
      <button onClick={() => changeLanguage("es")}>Español</button>
      <button onClick={() => changeLanguage("en")}>English</button>
    </div>
  );
}

Integração com Next.js i18n

"use client";

import { useRouter } from "next/navigation";
import { usePathname } from "next/navigation";

export default function LanguageSwitcher() {
  const router = useRouter();
  const pathname = usePathname();

  const changeLanguage = (newLocale: string) => {
    // Alterar idioma do Next.js
    router.push(pathname.replace(/^\/[^\/]+/, `/${newLocale}`));

    // Alterar idioma da Rybená
    const rybena = (window as any).RybenaApi?.getInstance();
    if (rybena) {
      const rybenaLang =
        newLocale === "pt" ? "ptBR" : newLocale === "es" ? "esES" : "enUS";
      rybena.setLanguage(rybenaLang);
    }
  };

  return (
    <div>
      <button onClick={() => changeLanguage("pt")}>Português</button>
      <button onClick={() => changeLanguage("es")}>Español</button>
      <button onClick={() => changeLanguage("en")}>English</button>
    </div>
  );
}

Integração com Vue I18n

<template>
  <div>
    <button @click="changeLanguage('pt')">Português</button>
    <button @click="changeLanguage('es')">Español</button>
    <button @click="changeLanguage('en')">English</button>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n';

const { locale } = useI18n();

const changeLanguage = (lang: string) => {
  // Alterar idioma do Vue I18n
  locale.value = lang;

  // Alterar idioma da Rybená
  const rybena = (window as any).RybenaApi?.getInstance();
  if (rybena) {
    const rybenaLang = lang === 'pt' ? 'ptBR' : lang === 'es' ? 'esES' : 'enUS';
    rybena.setLanguage(rybenaLang);
  }
};
</script>

Detecção Automática de Idioma

Você pode detectar automaticamente o idioma do navegador e configurar a Rybená:

// Detectar idioma do navegador
function detectBrowserLanguage() {
  const browserLang = navigator.language || navigator.userLanguage;

  if (browserLang.startsWith("pt")) {
    return "ptBR";
  } else if (browserLang.startsWith("es")) {
    return "esES";
  } else {
    return "enUS";
  }
}

// Inicializar Rybená com idioma detectado
document.addEventListener("DOMContentLoaded", () => {
  const detectedLang = detectBrowserLanguage();

  // Atualizar o script com o idioma detectado
  const script = document.createElement("script");
  script.type = "text/javascript";
  script.src = `https://cdn.rybena.com.br/dom/master/latest/rybena.js?lang=${detectedLang}`;
  document.head.appendChild(script);
});

Persistência de Idioma

Para manter a preferência de idioma do usuário entre sessões, você pode usar localStorage:

// Salvar preferência de idioma
function saveLanguagePreference(lang: string) {
  localStorage.setItem('rybena-language', lang);
}

// Carregar preferência de idioma
function loadLanguagePreference(): string {
  const saved = localStorage.getItem('rybena-language');
  if (saved) {
    return saved;
  }

  // Se não houver preferência salva, detectar idioma do navegador
  return detectBrowserLanguage();
}

// Inicializar Rybená com preferência salva
document.addEventListener('DOMContentLoaded', () => {
  const preferredLang = loadLanguagePreference();

  const rybena = (window as any).RybenaApi?.getInstance();
  if (rybena) {
    rybena.setLanguage(preferredLang);
  }

  // Salvar preferência quando o idioma mudar
  const originalSetLanguage = rybena.setLanguage.bind(rybena);
  rybena.setLanguage = (lang: string) => {
    saveLanguagePreference(lang);
    originalSetLanguage(lang);
  };
});

Exemplos Práticos

Site Multilíngue com Seletor de Idioma

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Meu Site Multilíngue</title>

    <style>
      .language-selector {
        display: flex;
        gap: 10px;
        padding: 10px;
        background: #f5f5f5;
        border-radius: 8px;
      }

      .language-selector button {
        padding: 8px 16px;
        background: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s;
      }

      .language-selector button:hover {
        background: #e0e0e0;
      }

      .language-selector button.active {
        background: #316181;
        color: white;
        border-color: #316181;
      }
    </style>

    <script
      type="text/javascript"
      src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?lang=ptBR"
    ></script>
  </head>
  <body>
    <!-- Seletor de idioma -->
    <div class="language-selector">
      <button class="ryb-language-ptBR active">🇧🇷 Português</button>
      <button class="ryb-language-esES">🇪🇸 Español</button>
      <button class="ryb-language-enUS">🇺🇸 English</button>
    </div>

    <!-- Conteúdo do site -->
    <h1>Bem-vindo ao Meu Site</h1>
    <p>Este é um exemplo de site multilíngue com Rybená.</p>
  </body>
</html>