Controles de Texto

Visão Geral

Os controles de texto são um conjunto de funcionalidades que permitem aos usuários personalizar a apresentação do texto para melhor legibilidade e compreensão.

Componentes Principais

1. TextControls

Componente principal que agrupa todos os controles de texto.

Seção 1: Controles de Formatação Básica

Maiúsculas/Minúsculas
- Alterna entre texto em maiúsculas e minúsculas
- Útil para leitores iniciantes
- Mantém estado global da preferência
Sílabas
- Ativa/desativa a separação silábica
- Ajuda na compreensão da estrutura das palavras
- Usa hífens para separação visual
Destaque de Palavras
- Realça palavras sequencialmente
- Auxilia no acompanhamento da leitura
- Velocidade ajustável

Seção 2: Controles de Formatação Avançada

Tamanho da Fonte
- Range: 12px - 32px
- Incrementos de 2px
- Ícone visual indicativo
Espaçamento entre Letras
- Ajuste fino do kerning
- Melhora legibilidade
- Suporte para necessidades especiais
Espaçamento entre Palavras
- Controle da distância entre palavras
- Facilita a leitura
- Ajuda na compreensão do texto
Altura da Linha
- Ajuste do espaçamento vertical
- Melhora conforto visual
- Previne confusão entre linhas

2. AdaptiveText

Componente que implementa as transformações de texto.

interface AdaptiveTextProps {
  text: string;
  isUpperCase: boolean;
  preserveWhitespace?: boolean;
  highlightSyllables?: boolean;
}

Funcionalidades Técnicas

1. Gestão de Estado

Uso de hooks personalizados para gerenciar preferências
Persistência de configurações por usuário
Sincronização em tempo real

2. Transformações de Texto

Conversão maiúsculo/minúsculo
Separação silábica
Destaque sequencial de palavras

3. Acessibilidade

Suporte a ARIA labels
Alto contraste
Feedback visual claro
Suporte a leitores de tela

Integração com Modo Foco

Controles permanecem acessíveis
Transições suaves
Estado preservado entre modos

Exemplos de Uso

Implementação Básica

<TextControls
  fontSize={18}
  onFontSizeChange={handleFontSizeChange}
  letterSpacing={0.5}
  onLetterSpacingChange={handleLetterSpacingChange}
  wordSpacing={2}
  onWordSpacingChange={handleWordSpacingChange}
  lineHeight={1.5}
  onLineHeightChange={handleLineHeightChange}
/>

Uso com AdaptiveText

<AdaptiveText
  text="Exemplo de texto adaptativo"
  isUpperCase={isUpperCase}
  highlightSyllables={isSyllablesEnabled}
/>

Considerações de Performance

Memoização de componentes
Otimização de re-renders
Lazy loading de recursos

Próximas Melhorias

Adicionar mais opções de formatação
Implementar temas personalizados
Melhorar algoritmo de separação silábica
Adicionar suporte a mais idiomas

2.9 KiB Raw Blame History