É possível aplicar CSS à metade de um caractere? Truque esperto em JavaScript

É possível aplicar CSS à metade de um caractere? Analisando um truque esperto em JavaScript

Você já se perguntou se é possível pintar a metade esquerda da letra "A" de vermelho e a metade direita de azul? Ou fazer com que a parte superior do texto seja semitransparente e a inferior não? Se você já acessou o Stack Overflow e se perguntou "Is it possible to apply CSS to half of a character?", você não está sozinho. Esta pergunta acumulou milhares de visualizações, e a resposta é um verdadeiro desafio para desenvolvedores web.

À primeira vista, parece que o CSS só funciona com elementos inteiros. Mas com a ajuda do JavaScript e alguns truques, podemos enganar o navegador e criar a ilusão de um estilo "parcial". Hoje vamos analisar três maneiras funcionais: desde a simples duplicação de texto até o uso de SVG e clip-path. Vamos lá!

Por que o CSS não consegue "cortar" um caractere?

Antes de mergulhar no código, vamos entender a natureza do problema. O CSS opera com blocos (boxes). Cada caractere faz parte de um fluxo de texto, e o navegador o renderiza como uma unidade completa. Não existe uma propriedade half-color ou half-background. Até mesmo os pseudoelementos ::before e ::after funcionam no nível do elemento inteiro, e não no seu conteúdo.

Mas isso não significa que o problema seja insolúvel. Podemos usar JavaScript para dividir o texto em partes e aplicar estilos a cada metade visualmente. O principal é manter a legibilidade e a semântica.

Método 1: Duplicação de texto com clip-path (CSS + JS)

O truque mais popular discutido no Stack Overflow é sobrepor duas cópias do texto e cortar cada metade com clip-path. Vamos implementá-lo em JavaScript.

Passo 1. Estrutura HTML

<div class="half-text" data-text="Olá, mundo!"></div>

Passo 2. Lógica JavaScript

const container = document.querySelector('.half-text');\nconst text = container.dataset.text;\n\n// Cria duas cópias do texto\nconst leftPart = document.createElement('span');\nleftPart.textContent = text;\nleftPart.className = 'half left';\n\nconst rightPart = document.createElement('span');\nrightPart.textContent = text;\nrightPart.className = 'half right';\n\ncontainer.appendChild(leftPart);\ncontainer.appendChild(rightPart);

Passo 3. Estilos CSS

.half-text {\n  position: relative;\n  font-size: 48px;\n  font-weight: bold;\n  display: inline-block;\n}\n\n.half {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n\n.half.left {\n  color: #ff6b6b;\n  clip-path: inset(0 50% 0 0); /* metade esquerda */\n}\n\n.half.right {\n  color: #4ecdc4;\n  clip-path: inset(0 0 0 50%); /* metade direita */\n}

Resultado: cada letra é dividida exatamente ao meio. O clip-path corta os caracteres ao longo de uma linha vertical. O truque funciona perfeitamente com fontes monoespaçadas, mas para fontes comuns pode haver um pequeno deslocamento — que pode ser facilmente corrigido adicionando letter-spacing: 0.

Método 2: Divisão do texto em caracteres (JS avançado)

Se você precisar aplicar um estilo não ao bloco inteiro, mas a cada letra individualmente (por exemplo, metade superior do "A" — verde, metade inferior — amarela), terá que trabalhar com cada caractere separadamente. É aqui que o JavaScript para estilização de texto entra em ação.

Ideia

Dividimos a string em um array de caracteres, colocamos cada caractere em um <span> separado e duplicamos novamente, mas agora no nível das letras. Em seguida, aplicamos clip-path a cada span.

function splitTextToHalf(selector) {\n  const element = document.querySelector(selector);\n  const originalText = element.textContent;\n  element.innerHTML = '';\n\n  // Cria um contêiner para cada letra\n  for (let char of originalText) {\n    const wrapper = document.createE