Plugin para PDF

Desafios de Segurança na Integração com PDFs

A Rybená enfrenta barreiras técnicas importantes ao tentar traduzir conteúdo de PDFs devido às políticas de segurança dos navegadores modernos. Essas restrições são fundamentais para proteger os usuários, mas criam desafios específicos para soluções de acessibilidade.

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 (domínio) acessem conteúdo de outra origem. Isso afeta diretamente 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

A Solução: Integração Direta no Iframe

Para superar essa barreira de segurança, é necessário incluir o rybena.js diretamente dentro do iframe que renderiza o PDF. Este arquivo atua como uma ponte de comunicação entre o conteúdo do PDF e os servidores de tradução da Rybená.

Importante

A integração com PDFs segue as mesmas regras e barreiras que a integração com iframes convencionais. 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.

Instalação do Plugin Customizado

Para garantir que a Rybená consiga traduzir os textos dos PDFs corretamente, é necessário instalar um plugin customizado de leitura de PDF criado pela Rybená.

Passos para integração

1. Baixar o Plugin

2. Descompactar o arquivo

3. Fazer o upload no servidor HTTP

Duvidas sobre a instalação

Caso tenha dúvidas ou dificuldades, as mesmas podem ser sanadas na documentação oficial do PDF.js
Nosso plugin tem apenas uma simples modificação para inserção da Rybená nesse plugin

Como Funciona a Integração

O plugin customizado da Rybená modifica o leitor de PDF padrão (baseado em PDF.js) para:

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

Guia de Instalação Detalhado

Passo 1: Download e Preparação

  1. Baixe o plugin customizado:

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

  2. Descompacte o arquivo em um diretório de sua escolha

  3. Verifique a estrutura - você deverá ver algo como:

    pdfjs-rybena/
├── web/
│   ├── index.html
│   ├── viewer.js
│   └── ...
└── build/
    └── pdf.js

Passo 2: Configuração do Servidor

  1. Faça o upload da pasta descompactada para seu servidor web
  2. Verifique as permissões - garanta que o servidor web possa ler os arquivos
  3. Teste o acesso navegando para:
    https://seuservidor.com/pdfjs-rybena/web/index.html

Passo 3: Integração com PDFs

Método 1: Iframe (Recomendado)

<!-- Exemplo básico -->
<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>

<!-- Exemplo com parâmetros adicionais -->
<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>

<!-- Abrir em 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>

Requisitos Técnicos

  • 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)

Solução de Problemas

Problema: PDF não carrega

  • Verifique: Se o URL do PDF está acessível diretamente no navegador
  • Confirme: Se o PDF está no mesmo domínio que o PDF.js

Problema: Acessibilidade não funciona

  • Verifique: Se o console do navegador mostra algum erro
  • Confirme: Se o script rybena.js está sendo carregado no iframe

Problema: Erros de CORS

  • Solução: Configure os cabeçalhos CORS no servidor para permitir acesso ao PDF
  • Exemplo: Access-Control-Allow-Origin: *

Alternativas de Integração

Para plataformas específicas, existem plugins dedicados:

ATENÇÃO

Ao disponibilizar PDF 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á

Modificado em: