Figure out whether there's something that can be done about it, preferably without too much trouble.

People are using negative margins to cope with the issue. Would be better to just make it behave correctly.

There has been a request for :hover-enabled gradients and I think it's a good idea.

See planned implementation (may change)

Support for WebKit's text-stroke.

http://webkit.org/blog/85/introducing-text-stroke/

I'm not sure if it is on the list or not, but as a feature request, it would be nice to be able to flip the text via the replace either horizontally or vertically. This way you can create mirrors of the text and such.

Investigate whether script defer would eliminate the need for Cufon.now() (unless you've got external scripts)

Support for Arabic languages. In the works, no ETA.

There is currently no support for the :visited, :active and :focus pseudoclasses.

A widow in a header is a single word that wraps to the next line and is generally undesirable in typesetting. It would be great if cufon had an option you could switch that would prevent them from happening.

The easiest solution (as proposed here: http://groups.google.com/group/cufon/browse_thread/thread/58a39e5f5f143897?hl=en) seems to be putting the last two words in the same cufon-canvas span and applying the white-space:nowrap attribute on it. This way it will bring both words down.

Is there a way to wrap rendered text like "VeryLong-Word" after the hyphen? In HTML these words wrap like expected. But as soon as I render this text with cufon it won't wrap anymore.

Using Cufon replacing a h4:

Cufon.replace('h4', { fontFamily: 'Garamond' });

Works fine.

But elsewhere on the page is a "special" h4, unlike the other ones on the page, it uses an image instead of cufon rendered text (for typographical reasons e.g. mixing 2 fonts).

The designer decided to move it offscreen so it can still be read by screen readers using position: absolute;. For safety he also decides to give it a font size of 0 so it isn't displayed

Consider the following CSS:

#demoCta h4 {
    font-size: 0;
    position: absolute;
    left: -9000px;
}

This results in the following JS error:

An invalid or illegal string was specified" code: "12
[Break on this error] g.scale(scale, scale * roundingFactor); (cufon.js line 794)

I guess taking 0 as the input for

g.scale(scale, scale * roundingFactor);

is causing problems.

If your page contains a few images that delay the window.onload event slightly, the following code will trigger the error:

<script>
  var script = document.createElement('script')
  script.src = '/cufon.js';
  document.body.appendChild(script);
</script>

This seems to be a known bug, with a really ugly workaround (see:
http://groups.google.com/group/Google-Maps-API/browse_thread/thread/3c63eb14c45fad9c)

I wonder if one could avoid having the error occur at load time - by delaying the execution of the function checking the document.namespaces until the first time the user calls Cufon.replace...

...or doing try-catch with a window.onload fallback...

...just a thought.

I am using lightboxes with fancybox ( http://fancy.klade.lv/ ) and when popping up a box i need to refresh the cufon state because the texts within the thing were not visible before that.

So i did this:

$(document).ready(function() {

            $("a#boxee").fancybox( {
                    "overlayShow": true,
                    "frameWidth": 780,
                    "frameHeight": 575,
                    "hideOnContentClick": false,
                    "callbackOnShow": Cufon.refresh   <-- should do the trick
                } ); 
        });

But i get a javascript error (firefox 3.0): text undefined in cufon, here:

textTransform: function(text, style) {
        return text[{
              uppercase: 'toUpperCase',
              lowercase: 'toLowerCase'
 }[style.get('textTransform')] || 'toString']();       <--- text undefined

I've tested the callbackonshow using a simple alert and it IS firing after the popup is shown, so the moment is ok, but maybe there are some scoping issues here so i tried:

"callbackOnShow": function() { setTimeout(function() { Cufon.refresh(); },100); } 

instead. No success: same cufon error.
What's wrong here?

Support for common ligatures such as "fi" would be nice. Limited to those with their own unicode code points.

Looking at Cameron Moll's Cufón test page, I notice that in browsers such as Firefox and IE, if the user manually adjusts the font size in the browser, the line height increases but the font size of Cufón-rendered titles does not. In Safari and Chrome, the text doesn't change size but the line height and word spacing increases proportionally.

For accessibility and consistency, it would be nice if Cufón-rendered text could be resized along with the rest of the page.

I have noticed a difference in height of the rendering of fonts in different browsers. I experimented with both Arial and Serena MTC.

The CSS settings are as follows:
font-size:9px (specified in ems)
line-height:1;

The original computed height without Cufon is 20px;
After applying Cufon
1. Computed height 22px:
Firefox 3.5, Opera 9.6

1. Computed height 24px:
   Internet Explorer 6,7,8, Safari 4, Chrome 2.0

When placing a background colour on the Cufon rendered span elements, there is a 1px bottom margin on the first list of browsers, and 2px bottom margin on the second list. This is causing slight layout discrepancies which when with two line text and small font sizes is quite noticable. Not such a problem for large single line headings.

Cheers,
mummybot

I have a drop down menu with the main menu text cufon-ed, and then a :hover state of color change. the problem is that when hovering over a menu item, submenu drops down and if you move your mouse down the list and off the drop down, the :hover state on the cufon-ed text remains.

example can be seen here: http://koesbong.com/tcabc/

steps to reproduce:
1. mouse over "about"
2. move mouse to "our story"
3. move mouse further down out of the dropdown box
4. the menu item will still be yellow even though it's no longer on :hover
5. if you mouse over "about" again and then move the mouse up, it clears the :hover state

any thoughts?

thanks!

-koes

If a completely empty style sheet (file size must be 0 bytes) is included with a LINK element, CSS.ready() will not recognize that it has loaded. Same goes for style sheets that return 404.

In my table, without the h1 tag, everything looks fine. The cell and table height are correct. As soon as I add the h1 tag and it renders the text, it looks great, except that there is now a large white area above and below. I have tried setting CSS heights for the table, row, cell and h1 tag.

The text is an ASP:LABEL if this matters.

I'm experiencing the following issue: I do a Cufon.replace('h1'); and everything works fine. However, on one page I have a radio button which when clicked does a few things. Once I added Cufon, I started to get a series of javascript errors on this radio button click. I did a little debugging and tracked it down to the following code, which gets triggered on click:

function setDefaultSeasonSelected() {

var radioBtns = $(".seasonListing :radio");
alert("setDefaultSeasonSelected");
if ( radioBtns.filter(":checked").length == 0 ){
    radioBtns.filter(":enabled").eq(0).attr("checked", "checked");
}
alert("setDefaultSeasonSelected2");

}

I put those alerts in there for testing, and what I see is this -- I get a javascript error, "Failed," then the first alert, then "undefined is null or not an object," then my script terminates, never popping the second alert.

Note that the radio buttons the above code is looking for are added dynamically to the DOM prior to the above code being executed.

If I remove Cufon from my page, everything works fine. When Cufon is added, the above code breaks. It looks like jquery can no longer find the $(".seasonListing :radio") when Cufon is included. This code works fine in Firefox 3 but fails in IE6 and 7. Any ideas?

If cufon is used to style an element that has child elements a spacer is created between the elements. This only occurs when there is text between the elements in the source code.

For example:
This renders correctly.

<ul><li>First Item</li><li>Second Item</li></ul>

This renders incorrectly.

<ul>

<li>First Item</li>

<li>Second Item</li>

</ul>

Possible solution is to test the element type before replacing the child within the replaceElement() function.

612c612

< if (anchor) {

> if (anchor && type != 1) {

Encoded a font that has support for umlauts and enabled all glyphs. Yet, neither &#235;, &euml; or ë works with cufon.

Cufon doesn't work behind certain firewalls (our design agency uses Sonicwall, can't confirm other firewall software).

Opening the .js file directly in the browser, it loads some of the file but then the connection is interrupted / file loading is cancelled. I suspect it might be the firewall flagging a suspicious routine / function & black-listing the .js file. An issue with the calls?

When applied to a span inside a button element (sliding doors button) Firefox somehow ignores the hover attribute. It works in both Safari and IE but not with Firefox.

For some reason Cufon seems to render blurry in Internet Explorer.
The same site & code renders perfectly sharp in Firefox and Safari.

Here are some screenshots:
Firefox rendering: http://img41.imageshack.us/img41/1552/cufonff.png
Internet Explorer 8.0 rendering: http://img5.imageshack.us/img5/2007/cufonie.png

Not sure what's going on here.
For code and such have a look at the site at: http://supply.demand.co.nz/_areyouexcited_site/

Thanks.
Jannis

I've discovered a weird bug with the hover option on safari.

Combining characters like 0x035C (Combining double breve below) and
0x361 (combining double inverted breve) is not supported.

See here for more details: http://groups.google.com/group/cufon/browse_thread/thread/87d48b7e924590e7

Even with rounded up/down pixels in the inline attributes to the canvas tag, the font still renders a bit fuzzy in when you get to smaller fonts (ie... even at 14 px, the font appears to be a bit fuzzy)

If you try and replace text for example:

My text £ or £ or £

In Safari (4.0.3) and Chrome (3.0.195.33), on zooming in, hovering over cufon text enlarges (doubles?) the font size of the text. The text remains enlarged even after zooming out, and the text size is only restored if the page is reloaded. Any clues?

For some weird reason sometimes a comment element in a targeted replace element
get's replaced with an empty cufon canvas.

See the picture in the left element it has an comment element at the start of the div.
And the title in the left starts a bit lower, cause there is an empty cufon element there.

Attached is a zip of the example link

It seems that Cufón rendered text is not accessible for the Voiceover screenreader in the Safari webbrowser. Check the headings at http://www.jijmaaktgeschiedenis.nu/ for an inaccessible example. The headings are represented by Voiceover as "image text, image text" etc.
With the Jaws for windows screenreader, this is accessible, so it seems a browser/screenreader specific issue.

When using multiple lists and hover states the 'parent' Cufon style replaces the child. In the following example, when you hover the Second Level link it will be replaced by a different weight.

Is there an option I can set so that the nested style stays the same or is this a bug/limitation within Cufon?

<ul>
    <li><a href="#">Top Level</a></li>
    <li><a href="#">Top Level</a></li>
    <li><a href="#">Top Level</a><ul>
        <li><a href="#">Second Level</a></li>
        <li><a href="#">Second Level</a></li>
        <li><a href="#">Second Level</a></li>
    </ul>
    <li><a href="#">Top Level</a></li>
    <li><a href="#">Top Level</a></li>
</ul>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://github.com/sorccu/cufon/raw/master/js/cufon.js"></script>
<script type="text/javascript" src="http://github.com/sorccu/cufon/raw/master/fonts/Vegur.font.js"></script>


<script type="text/javascript">
    Cufon.replace('ul li a',{hover: true, fontWeight: 200});
    Cufon.replace('ul li ul a',{hover: true, fontWeight: 700}); 
</script>

Thanks,