Text highlighting in html5
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">ప</div>
<div class="paa">పా</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.???
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>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.
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>上一篇: 会话标志在Javascript中不起作用
下一篇: 文本在html5中突出显示