Peut-on appliquer du CSS à la moitié d'un caractère ? Astuce JavaScript

Peut-on appliquer du CSS à la moitié d'un caractère ? Analyse d'une astuce JavaScript

Avez-vous déjà imaginé pouvoir colorer la moitié gauche de la lettre « A » en rouge, et la moitié droite en bleu ? Ou rendre la partie supérieure du texte semi-transparente, mais pas la partie inférieure ? Si vous avez consulté Stack Overflow et vous êtes demandé « Is it possible to apply CSS to half of a character? », vous n'êtes pas seul. Cette question a recueilli des milliers de vues, et la réponse est un véritable défi pour tout développeur web.

À première vue, il semble que le CSS ne fonctionne qu'avec des éléments entiers. Mais avec l'aide de JavaScript et de quelques astuces, nous pouvons tromper le navigateur et créer l'illusion d'un style « en deux moitiés ». Aujourd'hui, nous allons analyser trois méthodes fonctionnelles : de la simple duplication de texte à l'utilisation de SVG et de clip-path. C'est parti !

Pourquoi le CSS ne peut-il pas « découper » un caractère ?

Avant de plonger dans le code, comprenons la nature du problème. Le CSS manipule des blocs (boîtes). Chaque caractère fait partie d'un flux de texte, et le navigateur le rend comme une entité unique. Il n'existe pas de propriété half-color ou half-background. Même les pseudo-éléments ::before et ::after agissent au niveau de l'élément entier, et non de son contenu.

Mais cela ne signifie pas que le problème est insoluble. Nous pouvons utiliser JavaScript pour diviser le texte en parties et appliquer des styles à chaque moitié visuellement. L'essentiel est de préserver la lisibilité et la sémantique.

Méthode 1 : Duplication de texte avec clip-path (CSS + JS)

L'astuce la plus populaire discutée sur Stack Overflow consiste à superposer deux copies du texte et à découper chaque moitié à l'aide de clip-path. Implémentons-la en JavaScript.

Étape 1. Structure HTML

<div class="half-text" data-text="Bonjour le monde !"></div>

Étape 2. Logique JavaScript

const container = document.querySelector('.half-text');\nconst text = container.dataset.text;\n\n// Création de deux copies du texte\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);

Étape 3. Styles 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); /* moitié gauche */\n}\n\n.half.right {\n  color: #4ecdc4;\n  clip-path: inset(0 0 0 50%); /* moitié droite */\n}

Résultat : chaque lettre est divisée exactement au milieu. clip-path découpe les caractères le long d'une ligne verticale. L'astuce fonctionne parfaitement avec les polices à chasse fixe, mais pour les polices standard, un léger décalage peut apparaître — il est facile à corriger en ajoutant letter-spacing: 0.

Méthode 2 : Division du texte en caractères (JS avancé)

Si vous devez appliquer un style non pas à l'ensemble du bloc, mais à chaque lettre individuellement (par exemple, la moitié supérieure du « A » en vert, la moitié inférieure en jaune), vous devrez travailler avec chaque caractère séparément. C'est là que JavaScript pour la stylisation de texte entre en jeu.

Idée

Nous divisons la chaîne en un tableau de caractères, plaçons chaque caractère dans un <span> distinct, puis dupliquons à nouveau, mais cette fois au niveau des lettres. Ensuite, nous appliquons clip-path à chaque span.

function splitTextToHalf(selector) {\n  const element = document.querySelector(selector);\n  const originalText = element.textContent;\n  element.innerHTML = '';\n\n  // Création d'un conteneur pour chaque lettre\n  for (let char of originalText) {\n    const wrapper = document.createE