JQuery FontEffect plugin

Font effect is a jQuery plugin that add some effect to html text.
The available effects are (for now) Outline, Shadow, Gradient and Mirror, here is an example:

Example

No images are used for these effects and no additional CSS is necessary, All effects are contained in the plugin (only 7k minified) and do not interfere with page rendering in older browser or browser with javascript disabled.
It is ideal for styling menus or dynamically generated headlines (as in blogs).

Alessandro Uliana

Download and installing

It is very easy, download the plugin here and include it in your page after the jQuery plugin (the 1.3.2 vesion or better) <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery-FontEffect-1.0.0.min.js"></script> Now you are ready to apply effects on elements.

Basic use

This is the simplest example,

$("#example0").FontEffect()

Outline

In this case no options are set and default values (outline for the effect) are used, this is the same as to say

$("#example1").FontEffect({ outline:true })

the border color, if not set, will be automatically set to a contrasting color, note that font family and other options for these examples are set in the CSS.

Besides outline there are three more effects:

Shadow

Gradient

Mirror

Click on the effect to view the code

Advanced use

You can combine two or more effects together

Outline & Shadow

Gradient & Mirror

When the element have a background the effect will be applied between the text and the background

Background

When you assign the effect to an anchor <A> tag it will retain the :hover style if present

Hover Here !

Click on the effect to view the code

Options

Each effect has possible options for color, position, transparency etc...

$(Obj).FontEffect({ outline :false, // Apply the outline effect outlineColor1 :"", // [find contrasting] The upper left outline color outlineColor2 :"", // [outlineColor1] the lower right outline color outlineWeight :1, // 1=light,2=normal,3=bold mirror :false, // Apply the mirror effect mirrorColor :"" // [object color] The color of the reflex mirrorOffset :-10, // The distance from text mirrorHeight :50, // The height of the reflex (perc.)* mirrorDetail :1, // The reflex detail 1=high,2=medium,3=low mirrorTLength :50, // The length of the sfumature (perc.)* mirrorTStart :0.2, // The starting opacity of the reflex (0-1) shadow :false, // Apply the shadow effect shadowColor :"#000",// The color of the shadow shadowOffsetTop :5, // The top offset position (px) shadowOffsetLeft:5, // The left offset position (px) shadowBlur :1, // The shadow blur 1=none,2=low,3=high shadowOpacity :0.1, // The opacity of the shadow (0=none,1=all) gradient :false, // Apply the gradient effect gradientColor :"", // The color of the gradient gradientPosition:20, // The start position of the gradient (perc.)* gradientLength :50, // The length of the gradient (perc.)* gradientSteps :20, // the steps of the gradient hideText :false, // Hide the source text }) (*) the "perc." value is intended as the % of the whole line height (by default about 120/140% of effective visible font height)

you can tweak these value to obtain, in combination with CSS, a wide variety of effects.

Times fat

Blended

Block

PIZZA

Revolution

Glowstick

RIPPLES

FireFont

GHOST

Click on the effect to view the code

Accessing with Jquery

There are six classes you can use to access the effect elements: JQFE, JQFEText, JQFEOutline, JQFEShadow, JQFEGradient, JQFEMirror

$('#example16 .JQFEText').toggle() $('#example16 .JQFEOutline').toggle() $('#example16 .JQFEShadow').toggle() $('#example16 .JQFEGradient').toggle() $('#example16 .JQFEMirror').toggle() $('#example16 div[class*=JQFE]').css('fontFamily','Times new roman')

Click on the code to execute

EXAMPLE

Of course you can do more complex operation using other JQuery functionality:

$('#example16.JQFE') .animate({marginLeft:'50px'},'slow') .animate({marginLeft:'0px'},'slow')

there are also two methods you can use,with redrawFE([newOptions]) you can redraw the effect and, eventually, send a new array of options.

with removeFE([removeOptions]) you can remove the effect from the element.
It will save the options in the element's data field so you can apply the effect again using redrawFE().
To eliminate the options from the element just pass the true argument to the function.

$('#example16').removeFE(false)

Click on the code to execute

Known issues, do's and don'ts

General consideration
What will be shown on the page depend on the user's font setting (dimension, font installed, page width, browser behaviour etc..) so, the possibility of a mess in some user computer is not so remote.
Said that, if you observe some rule and use some common sense you have a good chance to have an uniform rendering in most borwsers/OS combinations.
Font dimension

ak

The bigger the better, using a font size
too small jam up some layers and generally produce an hard to read text,
This text is almost unreadable
try to keep the font size bigger than 40/50 pixels.
User Resizing
In most cases resizing is not a problem unless you use a gradient or a mirror effect.
You can prevent IE users from resize text using pixel for font dimension.
In any case when the user reload the page the effect is fixed for the new font size.
Fonts Sadly, there is little to do to control the font installed in the user's computer, all you can do is to give a list of possible font or font family.
Here is a list of some common fonts.

More info on common installed fonts here and here
Gradient and mirror
These effects are a bit critical, are obtained layering absolutely positioned divs and the dimension/position values are calculated on the line height of the element, this means you have to adjust the values in order to obtain the same type of effect on object with different caractheristic (size, font face, line height etc.).
For example, setting the gradientPosition to 50 (%) not always will place the start gradient position in the middle of the text so you have to do some tweaking.
For the same reason the default position of the reflex could not be the best choice, expecially in case of descending/ascending letters (if you use lowercase text).

Descending overlap

Also, consider the insertion of some margin (or <br>'s) if you do not want the next element overlap the reflex.
Box model
All inline elements will be converted to "block". If you encounter problems try to wrap the element in an absolute positioned div.
With the gradient and mirror effects there is the possibility that line breaks will mess up alignment and positioning, to prevent this use the white-space: nowrap; CSS property on the element or other method.
Divs
Extensive use of this effect brings up the total number of the div in the document, this, if taken to extreme, could cause delay while rendering or scrolling, especially in older/slower computer and can cause, at worst, browser crashes, so, try to keep low the number of the effect and tweak the options to lower the divs number.
General suggestion
Keep it simple, don't overdo, apply to block level elements, do test on different browser and test resizing, do not use fonts too small and do not apply to big chunk of text.
If you want to put a line-height value to any of the parent element do it before experimenting with the effect
That's all.

To do

There is still a lot of space for improvements, here are some ideas (in some cases already half developed) that I hope to integrate in the next version once I realize there is some interest.

More colors to gradient

Slanted reflex in mirror effect

Add preset effects

Add a debug or edit-on-page utility

Reduce or limit the div number

Add some predefined hover effect for anchors

Add a "lazy" option (useful for pages with a lot of effects like this one)

Add deformation effects, as wave, ripple, width, height and rotation. (maybe in a separate FontDeformation plugin)

Sandbox

This is a (far-to-be-perfect) tool I used for testing, I thought it should be useful to put it here to help you gain confidence with the available options, test different effects and find the ideal combination.
Do not expect (for now) smooth performance from this little tool.

Sandbox

outline:
outlineColor1:
outlineColor2:
outlineWeight:
shadow:
shadowColor:
shadowOffsetTop:
shadowOffsetLeft:
shadowOpacity:
shadowBlur:
mirror:
mirrorColor:
mirrorOffset:
mirrorHeight:
mirrorDetail:
mirrorTLength:
mirrorTSTart:
gradient:
gradientColor:
gradientPosition:
gradientLength:
gradientSteps:
gradientTLength:
gradientTSTart:
hideText:

Text:
Text Color:
Background Color:
Background image:
Font Family:
Font Size:
Margin Top:
Margin Left:

Messages

Adeptus (2009-03-31 15:30:10)

Great work, man!
Tnx *500!!! This is the best JS font effects script!

E1World (2009-04-01 08:00:20)

WOW!! This is truely a big and important plugin. Very useful. Thank you!

(2009-04-01 10:35:37)

Great!!

martin (2009-04-05 10:39:29)

very nice plugin, thank you!

Ryan Williams (2009-04-21 18:11:22)

It's a cool idea, but unfortunately Cleartype (which is enabled in Vista+ and IE7+ by default) makes this effect call apart as it applies its font smoothing algorithms to all the different layers, which makes multicoloured artefacts appear in the outlines, shadoes, etc. I suspect this also causes a performance hit. :(

Alessandro (2009-04-22 17:07:21)

Thank you Ryan.

I didn't even know until now of the cleartype existence 8O

You are right, I tested the effect with this options activated and, as you say, there are some inconsistencies, as multicoloured pixels on border and ugly aliasing of shadows and gradients, mainly in explorer but also other bowsers aren't free from this problem even if in a lesser extent.

I think I'll add a paragraph for this (after some tests) in the "known issues" section, after all, as I can see for now, these problems aren't always present and depend on the OS/browser/effect/font/size/color/configutation combinations. Somtimes it works fine, and sometimes defects can be viewed as features ;)

carlo (2009-04-24 00:41:01)

grande articolo e splendidi effetti! Complimenti

Hank (2009-05-10 23:36:58)

I'm having a problem with Internet Explorer. Using the "Gradient & Mirror" effect in Firefox works fine but shifts the text down way down the page in IE. Any idea what could cause this? Thanks.

kijioy (2009-05-20 15:34:49)

Great!! Thanks

Alessandro (2009-06-04 09:08:06)

@hank

it is the gradient or the mirror effect shifting? or both?

try to put everything in an absolute positioned div ensure the box have enoguh space and test also before apply the effect

if nothing works post a code snippet

(2009-06-10 09:42:25)

you are wellborn
very very nice and great
please extend features

lgch (2009-06-15 16:23:34)

good

dlv (2009-06-19 15:29:42)

really great! really usefull, i like it!
congrats, and thanks for share it !

(2009-06-23 21:28:03)

Whats wrong with just using a standard image?

(2009-06-24 20:14:08)

Fantastic!

(2009-06-24 20:24:23)

to me, it doesnt works.

have 1.3.2 jquery
have inserted the codes correctly

did everything in instructions, and bam - doesnt works >_

Teddy (2009-06-25 11:40:54)

Excellent plugin Alessandro! I like it very much so I wrote a post about it on my blog webdevelopmentstuff. Keep working on it and I'm sure it'll be one of the most popular jQuery plugins.

Alessandro (2009-06-25 11:41:24)

@Teddy
Thanks a lot, maybe this summer there will be a new release, I need only the time to work on it :)

@Whats wrong with just using a standard image?
Nothing! Of course is pointless to load jquery and the plugin only for a static headline or a logo when you can use a simple, and more compatible, jpeg but... if you want to apply the effect to more elements or a dinamically generated text (such as post titles in your blog) this could be a solution.

@to me, it doesnt works.
Please, post or send me the code you are using so i can figure out what is wrong...

nSD (2009-06-28 19:37:15)

I can't seem to get this to work. I have downloaded and called the scripts and checked the paths. They're being run perfectly fine. The effect just never happens.

Correct me if I'm wrong, but I just have to call the main jquery file, then your plugin file, then use inline js to specify what element, correct? I must be missing something.

Thanks for the help.

Alessandro (2009-06-29 10:30:46)

@nSD

This seems happen to many... :(

ok... first of all it is important to notice that the effect can sometimes be so subtle to result almost invisible and you have to tweak the options to make the effect evident (expecially with gradient and mirror effect).

if this is not the case, or you recive some js error, post or send me the code so I can figure out what is wrong.

nSD (2009-06-29 23:48:27)

I was trying to use the basic outline function, the second example on the page.

$("example0").FontEffect({ outline:true })I made a new document using only your html, css, jquery base, the plugin and inline script that you used in the example. It isn't doing anything.

Alessandro (2009-06-30 23:48:27)

Did you put the script in an after-loading function?

i.e.

$().ready(function(){ $("#example0").FontEffect({ outline:true }) })

(2009-07-02 17:41:37)

sunny

Islander (2009-07-02 18:32:55)

Great stuff, unfortunately it breaks the CSS "text-align"-attribute, I wanted to apply the standard effect to a right aligned text, and it would place the text on the left, there was no way to avoid that, not even by nesting the text into another element.

Alessandro (2009-07-02 19:35:54)

@islander

Try to float the element.

Spencer (2009-07-14 16:06:53)

I'm Lovin It!

(2009-07-24 04:19:16)

Beautifull, may i'll use it in the future ;)

just has to be even more cross-browser and then it 'll be superv plugin !

Many Thanks

arial (2009-07-25 22:49:14)

this is very impressive, especially because i am starting to retro web my sites (i think the www is becoming very vanilla, when did we all decide to lock onto a basic set of formats). your outline feature makes it possible for me to put readable text on complex backgrounds. i am having some formatting problems, i looked at the resultant html and you are right (div, div, everywhere a div div) but i am patient, i'll figure out a way to deal with that..

thanks again for making the effort to improve the world of programmers.. for free of course!

it's like the best stuff is usually generated by people like you..

also; letting people post w/o registration... nice..

Alessandro (2009-07-26 11:00:22)

Thanks for your nice words arial... I want to assure you that all this work give me enough retribution in positive karma token :), the most valuable and useful currency in this world (and it's feree!).

The DIV proliferation is an issue I'm working on now, it's hard because some effects indeed require a lot of it, and in some cases this could be a problem, but cosider all those div do not influence neither the SE crawler job nor the page downloading time, beign that they are rendered once the page is loaded.

If you have particular issues using this plugin feel free to ask me for suggestion, this could be a good way to improve future versions.

arial (2009-07-29 21:13:31)

your welcome Alessandro

okay: for those of you that have noticed the minor formating changes after fontEffect.. i experimented, and fontEffect does sometimes change formating for the 'current' object but it does inherit formating from the parent object without change.. so if you surround the font you want changed with 'yet another div' using an 'id' then execute your font changes against that 'id', fontEffect inherits all of the parents' class properties..' and bingo.. everything is back to normal..

and thanks again Alessandro

(2009-08-06 03:52:15)

Thanks

Brad (2009-08-17 09:48:28)

Hello to you,
Please find the following code that does not seem to function.

$().ready(function(){ $("#example1").FontEffect({ outline:true }) }) #example1{ font-family :"Impact"; color :#222; font-size :3em; } <div id="example1">Example</div>
is there an error that you might assist me with?
thank you in advance for your assistance.

Alessandro (2009-08-17 09:50:00)

Hi Brad...

there is nothing wrong with your code...

when you do not specify the outline color the plugin try to find a contrasting color... in this case for "#222" (almost black) he propose #ddd (almost white)

so, maybe you can't see the outline because the background is white, check with a different color for the font, or assign a outlineColor option,

Thanks to anybody who posted a comment.
A new release is to be published soon, comments for this version is blocked.
If you REALLY NEED support you can write me an e-mail.