jQuery.emphasis.js Demo

When you're down, and the world seems dark and empty, Your forever friend lifts you up in spirits and makes that dark and empty world suddenly seem bright and full. Your forever friend gets you through the hard times, the sad times, and the confused times. If you turn and walk away, Your forever friend follows, If you lose you way, Your forever friend guides you and cheers you on. -

$('#example1 em').css('color', 'red');
-$('#example1 em:eq(0)').emphasis('filled');
-$('#example1 em:eq(1)').emphasis('dot #069');
-$('#example1 em:eq(2)').emphasis('open sesame', 'over');

- -

Different language

過去（かこ）から逃（に）げるのは許（ゆる）してやる。だけどな、せめて今と明日からは、逃げんじゃねぇよ。原谅你逃避过去，但是，至少不要逃避现在和明天啊。---《无头骑士异闻录》

やさしい言葉（ことば）は、たとえ簡単（かんたん）な言葉でも、ずっとずっと心（こころ）にこだまする。温柔的言语，就算是简单一句话，也会一直一直在心中回响。

$('#example2 em:eq(0), #example2 em:eq(2)')
-    .emphasis('open sesame', 'over');
-$('#example2 em:eq(1), #example2 em:eq(3)')
-    .emphasis('filled dot', 'under');

- -

Special case

- -

letter-spacing

- Freeeeeeeeeeeeeeeeeeeeedom! -

$('#example3 span').emphasis('filled');

- -

color

- Every cloud has a silver lining! -

$('#example4 em').css('color', '#069').emphasis('filled orange');

- -

block element

- It was the best of times,
- It was the worst of times,
- It was the age of wisdom,
- It was the age of foolishness,
- It was the epoch of belief,
- It was the epoch of incredulity,
- It was the season of Light,
- It was the season of Darkness,
- It was the spring of hope,
- It was the winter of despair. -

$('#example5 em').emphasis('filled dot orange');
-$('#example5 p').emphasis('filled dot');

- -

emphasis('none')

There is not an emphasis. -

$('#example6 p').emphasis('dot')
-                .emphasis('none');

Different font-size

Browser like chrome, firefox, opera, safari can setup the minimal font-size. It will effect this plugin if the browser not support CSS3 transform. -

$('#example7 em:eq(0)').css('font-size', '24px')
-                       .emphasis('dot');
-$('#example7 em:eq(1)').css('font-size', '12px')
-                       .emphasis('dot');

- -

Special character

Lift up your head princess, if not, the crown falls. -

$('#example8 em').css('font-family', 'monospace')
-                 .css('font-style', 'normal')
-                 .css('font-size', '24px')
-                 .emphasis('"♥"');

- -

Special line-height

line-height: normal;: Behind every successful man there's a lot u unsuccessful years.
line-height: 200%;: I think success has no rules, but you can learn a lot from failure.
with inline image: There are no secrets to success. It is the result of preparation, hard work, and learning from failure.

$('#example9 em').emphasis('circle');

- -

Priority test

- East Asian documents traditionally use small symbols next to each glyph to emphasize a run of text. -

$('#example10 em:eq(0)').emphasis('open sesame orange');
-$('#example10 p').emphasis('circle');
-$('#example10 em:eq(1)').emphasis('open sesame #069');