Cufon issue in Safari Reader

Question

It turns out that Safari Reader handles Cufon in an interesting way. When Safari Reader handles "Cufonized" text it leaves the canvas elements thereby creating gaps in the output.

Upon further investigation and attempting to solve the issue I found that there is seemingly no way to control the output of safari reader from the developer side without effecting the whole site.

Does anyone have any suggestions?

Answer 1

Yeah, So that is an issue cufon has when it comes to using safari "reader", or as most people would know it, the "reader" button that shows up on the ipad/iphone/ipod broswer.

for example, let's say we have a cufonized h1 tag like so:

<h1>Hello World!</h1>.  

well this is what cufon does to it, minus all those attributes and inline styling:

<h1>
<cufon>
<canvas></canvas>
<cufontext>Hello</cufontext>
</cufon>
<cufon>
<canvas></canvas>
<cufontext>World!</cufontext>
</cufon>
</h1>

And when the "reader" opens it it reads something like this:

_ Hello _ World!.

where the "_" is a blank space caused by the element.

__ So __ Imagine __ Reading __ Text __ Like __ This!!!

annoying!!

So I modified the cufon-yui.js file Version 1.09i so the output would be something like this,

<h1>
<beforetext>Hello World!</text>
<cufon>
<canvas></canvas>
</cufon>
<cufon>
<canvas></canvas>
</cufon>
</h1>  

So when "reader" opens it, it looks like so:

Hello World! _ _

Where the blank canvases come after the text, so you dont get that weird effect.

So here is the fix:

On line 1240 - 1259 (might be different for some, but easy to spot), I changed the following

styleSheet.appendChild(document.createTextNode((
    'cufon{text-indent:0;}' +
    '@media screen,projection{' +
        'cufon{display:inline;display:inline-block;position:relative;vertical-align:middle;' +
        (HAS_BROKEN_LINEHEIGHT
            ? ''
            : 'font-size:1px;line-height:1px;') +
        '}cufon cufontext{display:-moz-inline-box;display:inline-block;width:0;height:0;text-align:left;text-indent:-10000in;}' +
                    'beforetext{display:-moz-inline-box;display:inline-block;width:0;height:0;text-align:left;text-indent:-10000in;position:absolute;left:-99999px}' +              
        (HAS_INLINE_BLOCK
            ? 'cufon canvas{position:relative;}'
            : 'cufon canvas{position:absolute;}') +
        'cufonshy.cufon-shy-disabled,.cufon-viewport-resizing cufonshy{display:none;}' +
        'cufonglue{white-space:nowrap;display:inline-block;}' +
        '.cufon-viewport-resizing cufonglue{white-space:normal;}' +
    '}' +
    '@media print{' +
        'cufon{padding:0; display:none;}' + // Firefox 2
        'cufon canvas{display:none;}' +
    'beforetext {text-indent:0;text-align:left;display:block; width:100%; height:auto}'+
    '}'
).replace(/;/g, '!important;')));

This will style the new "beforetext" element and the for print and screen,

On line 1296 right after "return function(font, text, style, options, node, el)" I added :

        var tagtype = $(el).get(0).tagName;
    if (tagtype == "BEFORETEXT"){return null;}

This is to avoid rewdoing the beforetext to itself on hover options.

Now from line 1336 - 1353 (again might be different, but easy to spot) I changed it to

                if (redraw) {
        wrapper = node;
        canvas = node.firstChild;

        if (options.printable) {
            $(el).find('beforetext').append(document.createTextNode(text));
        }

    }
    else {

        wrapper = document.createElement('cufon');
        canvas = document.createElement('canvas');          
        wrapper.className = 'cufon cufon-canvas';
        wrapper.setAttribute('alt', text);
        wrapper.appendChild(canvas);

        if (options.printable) {
            var beforeText = document.createElement('beforetext');
            $(el).not(':has(beforetext)').prepend('<beforetext></beforetext>');
            $(el).find('beforetext').append(document.createTextNode(text));
        }
    }

The above adds the "beforetext" element only once, and then appends the text to that element as it creates each cufon text, and also reapplies it on hover options so it doesn't get errased.

And that's it. Hope this helps someone out-there. And feel free to correct me, imporve it, or find a better solution, I'd like to know of alternative better ways. Happy coding all.

P.S
Sorry for the long response. Just trying to make sure someone with the same issue understands whats going on.