Support for WebKit’s text-stroke.

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

Currently you must force hasLayout for links with :hover. This isn’t too convenient as it often requires CSS changes, even if they are simple.

I'm getting this error in minefield, I have not tested it in other browsers.

I'm getting this error in firebug:
uncaught exception: A parameter or an operation is not supported by the underlying object (NS_ERROR_DOM_INVALID_ACCESS_ERR)
js/Cufon/cufon.js
Line 233

function isSheetReady(sheet, media) {
228 // in Opera sheet.disabled is true when it's still loading,
229 // even though link.disabled is false. they stay in sync if
230 // set manually.
231 if (!CSS.recognizesMedia(media || 'all')) return true;
232 if (!sheet || sheet.disabled) return false;
233 var rules = sheet.cssRules, rule;

I'm using the normal uncompressed download (downloaded 15/06/09)

With jQuery (sizzle) with this replace line:
Cufon.replace('h3, h4');

The error occurs when it tries to replace the h4 text. No problems with the h3.

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.

Looks like it text-transform: capitalize was forgotten.

Support for gradients would be nice.

Consider the following HTML:

```

Lorem ipsum

```

They way things are right now, cufón will attempt to render the text " Lorem ipsum ", not “Lorem ipsum” as you might expect. The issue may seem simple, but what about:

```

Lorem
ipsum
dolor

sit
amet

```

Which of the newlines should be removed? Depending on the styling of the elements the answer can be either some, all or none of them. For instance the strong element may have display: block, or the h1 may have display: inline. At the moment all elements are treated as display: inline, which often leads to incorrect results with block-level elements.

Solution: make text replacement context-aware.

I have a scrolling div which contains an unordered list which has some list items. Inside the list items are h2s which I am calling Cufon on. When I go to scroll the box, the Cufon replaced text remains exactly where it started while everything else scrolls. Applying zoom: 1 to both the h2 and the containing li did not seem to help.

text-transform: capitalize is not working , do i have to capitalize my Html in order to work or is there is any way to overcome this ?

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

I'm using Visual Studio 2008. I have added cufon-yui.js and Bookman_Antiqua_700.font.js to my project. When I run it, I get the following output in the Firefox Error Console:

Error: ah is null
Source File: http://servername:8910/cufon-yui.js
Line: 7

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.

Setting the opacity of a Cufon element doesn't seem to have any effect in IE. Shame because fading effects look beautiful in Firefox. Not sure if this is something that can be mended though?

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?

Hi,

I'm using the new version with the white space fix. I also tried it with a previous version. The text seems to be blurred. In Safari it isn't. Also in IE not. Any ides?

Thanks,
Karsten

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.

It'd be neat to be able to pass a selector or element or a collection to the .refresh() method - to only refresh that element/collection - and thus speeding things up, by skipping over the rest of the History items.

My usecase is that I have some cufon-enhanced elements that get periodically updated by javascript. I'd like to refresh only these elements without re-replacing all the other cufon elements on the page.

I don't know if this is easily doable...?

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.

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.

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.

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

Words render too close to each other if text-shadows are used.

Replacing font-size:small with font-size:80% fixed the issue.

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

I noticed today that an h2 element I was working with in IE 7 was causing problems only when it was a fixed width (the h2). Once Cufon replaced the text, the h2 would position in the vertical middle of the parent block element.

It was very strange and went away as soon as I removed the fixed width.

I really like Cufon and use it whenever I can. If I can help you further, please let me know.

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
2. 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

This may not be important to some, but for me it's a pretty usual part of my development process - unitpngfix.js that makes png's work in ie6. I can't get it to work with cufon. Any clue as to what's making that happen? Do you think there are similar functions elements?

The current CSS.ready() implementation does not handle media types correctly. This leads to text not getting replaced in WebKit-based browsers if an uncommon media type, such as "handheld" is used.

In Safari 3, cufon-text sometimes does not have CSS styles applied to it. This appears to be connected only to styles applied via @import. See thread at http://groups.google.com/group/cufon/browse_thread/thread/d8dc02efd6dd7013 for more details.

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

See [planned implementation](http://groups.google.com/group/cufon/browse_thread/thread/affeef69c0bd648/705dc106180e79db) (may change)

The ability to support font-stretch would be amazing, and is the only thing between me and being able to use Cufon!

Even though messing with Object.prototype is bad practice, we still want to be compatible with these (often home-grown) frameworks.

Raphaël and a few other projects use fonts generated by Cufón. There used to be a text box for specifying the callback, but it was taken out because no one used it at the time.

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

Re: http://groups.google.com/group/cufon/browse_thread/thread/c933119271a33dd3

Implementing it seems to be dead simple.
Simply insert the following line of code at line #581 in the source code (http://github.com/sorccu/cufon/blob/1c6fa76e7b50c1a70a9bbdd2d42810e0061632da/js/cufon.js#L581), and you're good to go!

if (options.autoDetect) { delete options.fontFamily; } 

Thereafter, it's possible to do

Cufon.replace('h1, h2, h3', { autoDetect: true }); 

...and have Cufón figure out which elements to replace and which not.
(Granted that no replacements will take place in the current versions of Opera. Graceful degradation, etc.)

P.S. Personally, I'd vote to have autoDetect:true the default setting. :-)

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?

Internet Explorer 6 and 7 have no real inline-block support. Elements with hasLayout === -1 and display: inline (this is what cufón uses) behave almost like inline-block, but do not respect line-height.

Internet Explorer 8 supports inline-block, which means that the issue only occurs in IE 6 and 7.

Hi - great tool - but found a gotcha. I've still got a graphic-substitute class in my CSS - where font-size is set to 0. "Invalid argument" errors get thrown up in IE and otherwise funky non-behaviour occurs -not just in IE but Firefox too. Changing this to font-size:0.1em; fixes the problem and Cufon works properly again.

.graphic-substitute {visibility: hidden; display: block; line-height: 0;
font-size: 0.1em; height: 0; margin: 0; padding: 0;}

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.

The VML group element has some properties that are not meant to be accessed. Accessing any of them will cause an error and invalidate all other properties of the element at the same time. This means that selectors such as jQuery’s $(‘:submit’) will fail because they access these properties.

The properties that cause errors are: type, opacity, chromakey, spt and forcedash.

The JavaScript typeof operator will return “unknown” (not “undefined”) for all these properties.

All other VML elements are OK with any existing or non-existing property.

http://msdn.microsoft.com/en-us/library/bb229485(VS.85).aspx

Hi,

I want to style an anchor tag.

Cufon.replace('a', { fontFamily: 'MyFont' });

Example <a href="test.html"><!-- Test Text -->Test</a>

Not only Test is shown but also the comment. Can you please fix this or show me the right correction?

Thanks,
Karsten

check out http://www.tekmor.gr/
when scrolling inside the content area in the middle the text transformed by cufon does not scroll together with the rest of the content. i might be doing something the wrong way?

Hi all, first off all I'm new to cufon.

When trying out cufon I stumbled on a problem with my font (calvert) when the text seemed to have the 'o' character. After debugging the source version I found out that the kerning had an extreme high number (24004 to be precise) which resulted in a negative width for the word "oktober" and it not showing up or making the rest of the title skip to the next line.

After some checking of all other characters I found out that no character has a kerning bigger then 100 so I wrote a minor hack for the problem to make the kerning 0 if it's greater then 100. (on line 767 and 1042)

// pre-calculate width
for (var i = 0, j = 0, l = chars.length; i < l; ++i) {
glyph = glyphs[chr = chars[i]] || font.missingGlyph;
if (!glyph) continue;
if (kerning) {
if(kerning[chr] < 0 || kerning[chr] > 100){
kerning[chr] = 0;
}
width -= k = kerning[chr] || 0;
jumps[j - 1] -= k;
}

  width += advance = jumps[j++] = ~~(glyph.w || font.w) + letterSpacing;
  kerning = glyph.k;
}

If required i can sent the original font/result from the cufon website to investigate the problem.

Hi,

I have a mouse over layer over a cufon replaced text. The text shines through. Any general ideas what could be the reason?

If I move the element to the bottom of the HTML and position the element again with CSS position it does not shine through.

Karsten

I'm using the following line to replace text in my navigation:
Cufon.replace('.navigation a');

The markup for the navigation is:

< ul class="navigation">
< li class="secondary location">< a href="explore/location/">By Interview Location< /a>< /li>
< /ul>

(spaces after < added to prevent html rendering in this post)
I include jQuery(1.3.1) before cufon-yui (latest version).

Only the first letter of each word is being replaced, i.e. "By Interview Location" is rendered as "B I L"

Any advice greatly appreciated.

Alex

Hi guys,

I cannot get Cufon working in IE or FF, except for Chrome. Could you point me in a direction to get it working?

Regards,
Paul

At the moment kerning is not supported. It should be!

Consider this code:

var elm = document.createElement('div');
document.body.appendChild(elm);

elm.appendChild(document.createTextNode('wo'));
elm.appendChild(document.createTextNode('rd'));
alert(elm.innerHTML); // Alerts: "word"

Cufon.replace(elm);
setTimeout(function(){
    alert(elm.getElementsByTagName('canvas').length);  // Alerts: 2
  }, 500);

Cufon considers elm to contain two seperate words - "wo" and "rd" - creating seperate <canvas> elements for each...

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.