Comment styliser la moitié d'un personnage avec CSS et JavaScript : une quête d'accessibilité ?

Stylisme partiel des personnages : une quête de transparence

Le défi de styliser seulement la moitié d'un personnage, tout en gardant le texte accessible, intrigue les développeurs depuis un certain temps. Cet article présentera la solution en utilisant une combinaison de CSS pur et de JavaScript pour une implémentation dynamique.

Solution pour les caractères uniques

Pour styliser un seul caractère, ajoutez simplement la classe ".halfStyle" à l'élément span correspondant. L'astuce consiste à définir dynamiquement le contenu ":before" du pseudo-élément à l'aide de l'attribut "data-content". Cela vous permet de spécifier le caractère souhaité pour chaque étendue.

Solution automatisée pour le texte dynamique

Pour appliquer un style partiel au texte dynamique, jQuery automatise le processus. En parcourant les caractères, il crée des éléments cachés pour l'accessibilité et des éléments visibles avec la classe ".halfStyle".

Implémentation CSS

<code class="css">.halfStyle {
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size */
    color: black; /* or transparent, any color */
    overflow: hidden;
    white-space: pre;
}

.halfStyle:before {
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    content: attr(data-content);
    overflow: hidden;
    color: #f00;
}</code>

< h3>Implémentation JavaScript

<code class="javascript">$('.textToHalfStyle').each(function() {
    var $el = $(this);
    var text = $el.text();
    var chars = text.split('');

    for (var i = 0; i < chars.length; i++) {
        $el.append('<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>');
    }
});</code>

Préservation de l'accessibilité

Cette solution garantit l'accessibilité en fournissant du texte masqué pour les lecteurs d'écran. L'élément invisible préserve le texte original tout en permettant à l'élément visible d'afficher la partie stylisée.

Conclusion

Avec cette technique, vous pouvez obtenir l'effet souhaité de styliser partiellement les caractères dans le texte, qu'ils soient statiques ou dynamiques. Il utilise une combinaison de CSS et de JavaScript pour maintenir l'accessibilité tout en améliorant l'attrait visuel de vos conceptions.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!