Mise en surbrillance du texte en html5

Question

J'essaie d'écrire un texte telugu en utilisant des codes uni afin que je puisse mettre en évidence le texte en changeant en plusieurs couleurs en fonction du son. pour que j'utilise html5 et js

<div class="pa">&#3114;</div> 
<div class="paa">&#3114;&#3134;</div> 

en utilisant

$("#paa").animate({ color: "blue" }, 500); 

Je peux changer la couleur entière de la lettre, mais maintenant je veux souligner une partie de cette lettre. S'il vous plaît suggérer comment cela peut être fait.

Answer 1

Il y a quelques astuces css pour truquer l'arrière-plan: texte; ou quelque chose comme SVG.

span { 
 
    position:relative; 
 
    color:green; 
 
} 
 
span:before { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    overflow:hidden; 
 
    content:attr(data-text); 
 
    color:blue; 
 
    height:0.7em; 
 
    overflow:hidden; 
 
    animation: txtclr 4s infinite; 
 
} 
 
p { 
 
    background:yellow; 
 
    color:rgba(128, 0, 128 , 0.5); 
 
    font-size:2em; 
 
    font-weight:bold; 
 
    background:linear-gradient(to bottom,lightgray 50%,yellow 50%); 
 
    display:table;/* demo purpose to shrink to text size*/ 
 
    box-shadow:inset -3em 0 rgba(100,100,100,0.5); 
 
    
 
} 
 
@keyframes txtclr { 
 
    0% { 
 
    height:50%; 
 
    } 
 
    25%,75%{ 
 
    height:0; 
 
    width:0; 
 
    } 
 
    50%{ 
 
    height:100%; 
 
    } 
 
}

<p><span data-text="my text">my text</span> and some other text </p>

extrait du code d'exécution et voir le remplissage de texte en vert avec le bleu de haut en bas.

aucun préfixe ajouté, le navigateur ultérieur n'en a pas besoin :)

Answer 2

Si vous voulez mettre en évidence à la volée dans votre code, j'utiliserais un cadre de travail javascript Highlight.js. c'est très léger et facile à travailler. Voici un violon avec l'échantillon jquery et élimination directe: $('.searchme').highlight('high'); sample

Answer 3

Voulez-vous dire quelque chose comme ça? utilise seulement css pour faire circuler le texte dessus, pas besoin de javascript dans cet exemple ;-) mais vous pouvez toujours changer les classes avec l'effet désiré et autres. Ce qu'il fait, c'est utiliser la propriété de transition qui lui permet d'animer entre différents états de css après un événement tel que hover, cliquez sur active et ainsi de suite.

Pour mettre en évidence une partie d'une lettre, vous devez ajouter cet élément HTML deux fois. Ce que j'ai fait avec la couleur et la plaine. Cela compte également pour les lettres individuelles. Vous devez les placer à une position absolue et les envelopper dans un div relatif. En faisant cela, ils se positionneront absolument à l'emplacement en haut à gauche (dans mon exemple) du div relatif wrapper. De cette façon, vous pouvez garder le flux de texte si vous utilisez un <span> pour un emballage fo exemple

Ensuite, vous définissez une à la largeur 0 ou à quelque largeur que vous voulez pour couvrir la moitié de l'autre lettre

Dans mon exemple seulement la moitié du Y est rouge, l'autre moitié (moitié ish) n'est pas rouge.

Si vous souhaitez couvrir une moitié supérieure, vous pouvez jouer avec la hauteur.

http://jsfiddle.net/L9L8L966/1/

#container { 
 
     font-size:40px; 
 
     position:relative; 
 
     background-color:#CCC; 
 
     width:450px; 
 
     height:40px; 
 
    } 
 
    #coloured { 
 
     position:absolute; 
 
     z-index:2; 
 
     top:0px; 
 
     left:0px; 
 
     display:block; 
 
     width:0%; 
 
     -webkit-transition: width 1s ease-in-out; 
 
     -moz-transition: width 1s ease-in-out; 
 
     -o-transition: width 1s ease-in-out; 
 
     transition: width 1s ease-in-out; 
 
     color:red; 
 
     overflow:hidden; 
 
    } 
 
    #container:hover #coloured { 
 
     width:100%; 
 
    } 
 
    #plain { 
 
     position:absolute; 
 
     z-index:1; 
 
     width:100%; 
 
     display:block; 
 
     top:0px; 
 
     left:0px; 
 
     color:black; 
 
    } 
 

 

 

<div id="container"> 
 
     <div id="coloured"> 
 
      abcdefghijklmnopqrstuvwxyz 
 
     </div> 
 
     <div id="plain"> 
 
      abcdefghijklmnopqrstuvwxyz 
 
     </div> 
 
    </div>

Answer 4

Il est possible, mais pas facile avec toutes les langues. Dans l'exemple suivant, je colorie des accents sur certaines lettres. http://jsfiddle.net/07hh3z2n/5/

L'indice est d'utiliser un CSS pour obtenir un inline-block sans largeur. Si la partie de la lettre que vous voulez mettre en surbrillance est un caractère Unicode existant, cela fonctionnera correctement. Sinon, vous pouvez essayer d'utiliser (ou créer) une police spéciale avec les parties de lettres à mettre en surbrillance.