Rybená Logo

Integração com PDF

A Rybená pode tornar documentos PDF acessíveis através de um plugin customizado. Este guia mostra como instalar e configurar a integração com PDFs.

Por que é necessário um plugin?

A Rybená enfrenta barreiras técnicas ao tentar traduzir conteúdo de PDFs devido às políticas de segurança dos navegadores modernos.

Política de Same-Origin e Iframes

Os navegadores implementam a Política de Mesma Origem (Same-Origin Policy), que impede que scripts de uma origem acessem conteúdo de outra origem. Isso afeta a tradução de PDFs porque:

  • Leitores de PDF padrão utilizam iframes para renderizar o conteúdo
  • Scripts externos (como o rybena.js) não podem acessar eventos de seleção dentro de iframes de origens diferentes
  • Eventos de seleção de texto são essenciais para identificar o conteúdo a ser traduzido

Importante: Por motivos de segurança do navegador, não é possível detectar os eventos de seleção para realizar a tradução sem que o script rybena.js esteja incorporado diretamente no iframe que renderiza o PDF.

A Solução

Para superar essa barreira de segurança, é necessário incluir o rybena.js diretamente dentro do iframe que renderiza o PDF. O plugin customizado da Rybená:

  1. Incorpora o rybena.js diretamente no ambiente do iframe
  2. Captura eventos de seleção dentro do documento PDF
  3. Comunica-se com os servidores da Rybená para tradução
  4. Exibe a tradução em LIBRAS ou sintetização de voz

Instalação do Plugin

1. Baixe o Plugin

Baixe o plugin customizado da Rybená:

https://drive.google.com/file/d/1qJZ8iIe0MBzSYnQz9VV38YRsrjAf8sPq/view?usp=drive_link

2. Descompacte o Arquivo

Descompacte o arquivo baixado em um diretório de sua escolha. Você deverá ver uma estrutura como esta:

pdfjs-rybena / web/ index.html / viewer.js / build / pdf.js

3. Faça o Upload no Servidor

Faça o upload da pasta descompactada para seu servidor web HTTP.

4. Verifique o Acesso

Teste o acesso navegando para:

https://seuservidor.com/pdfjs-rybena/web/index.html

Dica: Caso tenha dúvidas ou dificuldades, consulte a documentação oficial do PDF.js.
Nosso plugin tem apenas uma simples modificação para inserção da Rybená.

Métodos de Integração

Método 1: Iframe (Recomendado)

Use um iframe para incorporar o PDF com acessibilidade:

<iframe
  src="https://seuservidor.com/pdfjs-rybena/web/index.html?file=https://seuservidor.com/documentos/manual.pdf"
  width="100%"
  height="600px"
  style="border: 1px solid #ccc;"
></iframe>

<iframe
  src="https://seuservidor.com/pdfjs-rybena/web/index.html?file=https://seuservidor.com/documentos/manual.pdf#page=2&zoom=auto"
  width="100%"
  height="600px"
  style="border: 1px solid #ccc;"
  title="Visualizador de PDF com acessibilidade Rybená"
></iframe>

Abra o PDF em uma nova aba:

<a
  href="https://seuservidor.com/pdfjs-rybena/web/index.html?file=https://seuservidor.com/documentos/manual.pdf"
  target="_blank"
  rel="noopener noreferrer"
>
  Abrir PDF com Acessibilidade
</a>

Parâmetros do Visualizador

O plugin PDF.js suporta vários parâmetros para controlar a visualização:

ParâmetroDescriçãoExemplo
fileURL do arquivo PDF?file=manual.pdf
pagePágina inicial#page=2
zoomNível de zoom#zoom=150
pagemodeModo de página#pagemode=thumbs
searchTermo de busca#search=termo
<iframe
  src="https://seuservidor.com/pdfjs-rybena/web/index.html?file=manual.pdf#page=5&zoom=125&pagemode=bookmarks"
  width="100%"
  height="800px"
></iframe>

Requisitos Técnicos

Para que a integração funcione corretamente, certifique-se de:

  • ✅ Mesmo domínio: O PDF.js e o arquivo PDF devem estar no mesmo domínio
  • ✅ Servidor HTTP: O plugin precisa ser hospedado em um servidor web acessível
  • ✅ HTTPS recomendado: Para melhor segurança e compatibilidade com navegadores modernos
  • ✅ Compatibilidade: Baseado no PDF.js Stable (v3.10.111)

Versão do PDF.js: Stable (v3.10.111)

Configuração de CORS

Se você tiver problemas com CORS (Cross-Origin Resource Sharing), configure os cabeçalhos no servidor:

# Apache (.htaccess)
<IfModule mod_headers.c>
  Header set Access-Control-Allow-Origin "*"
  Header set Access-Control-Allow-Methods "GET, OPTIONS"
  Header set Access-Control-Allow-Headers "Content-Type"
</IfModule>
// Node.js (Express)
app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "GET, OPTIONS");
  res.header("Access-Control-Allow-Headers", "Content-Type");
  next();
});
# Nginx
location /pdfjs-rybena/ {
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Methods 'GET, OPTIONS';
  add_header Access-Control-Allow-Headers 'Content-Type';
}

Solução de Problemas

Integrações com Plataformas

Para plataformas específicas, existem plugins dedicados que facilitam a integração:

WordPress

Use o plugin oficial da Rybená para WordPress:

Plugin WordPress: Consulte a documentação específica para Plugin para WordPress.

Moodle

Use o plugin oficial da Rybená para Moodle:

Plugin Moodle: Consulte a documentação específica para Plugin para Moodle.

Exemplo Completo

Aqui está um exemplo completo de uma página com PDF acessível:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PDF com Acessibilidade Rybená</title>

    <style>
      .pdf-container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
      }

      .pdf-iframe {
        width: 100%;
        height: 800px;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      .pdf-header {
        margin-bottom: 20px;
        padding: 20px;
        background: #f5f5f5;
        border-radius: 8px;
      }

      .pdf-header h1 {
        margin: 0 0 10px 0;
        color: #316181;
      }

      .pdf-header p {
        margin: 0;
        color: #666;
      }
    </style>

    <script
      type="text/javascript"
      src="https://cdn.rybena.com.br/dom/master/latest/rybena.js"
    ></script>
  </head>
  <body>
    <div class="pdf-container">
      <div class="pdf-header">
        <h1>Manual do Usuário</h1>
        <p>
          Este documento está acessível com Rybená. Selecione qualquer texto
          para tradução em LIBRAS ou voz.
        </p>
      </div>

      <iframe
        class="pdf-iframe"
        src="https://seuservidor.com/pdfjs-rybena/web/index.html?file=https://seuservidor.com/documentos/manual.pdf#page=1&zoom=auto"
        title="Visualizador de PDF com acessibilidade Rybená"
      ></iframe>
    </div>
  </body>
</html>

Atenção: Ao disponibilizar PDFs para os usuários, deve-se escolher o plugin instalado. Os PDFs inseridos de outras maneiras não terão a integração com a Rybená.

Próximos Passos

Agora que você sabe como integrar PDFs com a Rybená, você pode:

🔒

Privacidade e Dados

Configure a coleta de dados e privacidade

💬

Suporte

Entre em contato com nossa equipe de suporte

Para Desenvolvedores

🔧

API Reference

Controle a Rybená via JavaScript

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á.

Privacidade e Coleta de Dados

A Rybená coleta dados de soletramento para melhorar continuamente sua base de sinais em LIBRAS. Esta funcionalidade é essencial para o desenvolvimento e aprimoramento do nosso sistema de tradução.

Nesta página

Por que é necessário um plugin?
Política de Same-Origin e Iframes
A Solução
Instalação do Plugin
Métodos de Integração
Método 1: Iframe (Recomendado)
Método 2: Link Direto
Parâmetros do Visualizador
Requisitos Técnicos
Configuração de CORS
Solução de Problemas
Integrações com Plataformas
WordPress
Moodle
Exemplo Completo
Próximos Passos
Para Desenvolvedores