mirror of
https://github.com/lucasrcsantana/story-generator.git
synced 2025-12-17 13:57:51 +00:00
117 lines
2.9 KiB
Markdown
117 lines
2.9 KiB
Markdown
# 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.
|
|
|
|
```typescript
|
|
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
|
|
```typescript
|
|
<TextControls
|
|
fontSize={18}
|
|
onFontSizeChange={handleFontSizeChange}
|
|
letterSpacing={0.5}
|
|
onLetterSpacingChange={handleLetterSpacingChange}
|
|
wordSpacing={2}
|
|
onWordSpacingChange={handleWordSpacingChange}
|
|
lineHeight={1.5}
|
|
onLineHeightChange={handleLineHeightChange}
|
|
/>
|
|
```
|
|
|
|
### Uso com AdaptiveText
|
|
```typescript
|
|
<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
|
|
1. Adicionar mais opções de formatação
|
|
2. Implementar temas personalizados
|
|
3. Melhorar algoritmo de separação silábica
|
|
4. Adicionar suporte a mais idiomas |