Text highlighting in html5

Question

I am trying to write a telugu text using uni codes so that I can highlight the text by changing into multiple colours according to sound. for that I am using html5 and js

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

by using

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

I can change the entire colour of the letter but now I want to highlight some part of that letter . Please suggest how it can be done.???

Answer 1

there is a few css tricks to fake the background-clip:text; or something alike 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> 

run code snippet and see green text filling with blue from top to bottom.

no prefix added, later browser do not need it :)

Answer 2

Do you mean something like this? uses only css to flow the text over it, no need for javascript in this example ;-) but you could always switch out classes with desired effect and such.

What it does is uses the transition property that allows it to animate inbetween different css states after an event like hover, click active and such.

To highlight a part of a letter, you need to add that HTML element twice. What I have done with coloured and plain. This also counts for individual letters. You need to set them to an absolute position and wrap them in a relative div. By doing that they will position themselves absolutely to the top left location(in my example) of the the relative wrapper div. This way you can keep text flow if you use a <span> for a wrapper fo example

Then you set one to width 0 or to whatever width you want it to cover up half the other letter

In my example only half of the Y is red, the other half(half ish) is not red.

If you wish to cover a top half you can play with height.

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 3

It is feasible, but not easy with all languages. In the following example, I colored accents on certain letters. http://jsfiddle.net/07hh3z2n/5/

The hint is to use a CSS to get an inline-block with no width.

.phantom {
    display: inline-block;
    color: red;
    width: 0;
    overflow: visible;
}

If the part of the letter you want to highlight is an existing unicode char, this will work fine. Otherwise, you can try to use (or create) a special font with the parts of letters to highlight.

Answer 4

If you want to highlight on the fly in your code, I would use a javascript frame work Highlight.js . it is very light and easy to work with. Here is a fiddle with jquery and knockout sample: $('.searchme').highlight('high'); sample