safari - Safari 阅读器中的 Cufon 问题

Question

事实证明，Safari Reader 以一种有趣的方式处理 Cufon。当 Safari 阅读器处理“Cufonized”文本时，它会离开画布元素，从而在输出中产生间隙。

经过进一步调查并尝试解决该问题，我发现似乎无法在不影响整个站点的情况下从开发人员端控制 safari 阅读器的输出。

有没有人有什么建议？

Answer 1

是的，所以这是 cufon 在使用 safari“阅读器”时遇到的问题，或者大多数人都知道，显示在 ipad/iphone/ipod 浏览器上的“阅读器”按钮。

例如，假设我们有一个像这样的 cufonized h1 标签：

<h1>Hello World!</h1>.  

好吧，这就是 cufon 对它所做的，减去所有这些属性和内联样式：

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

当“阅读器”打开它时，它会显示如下内容：

_ 你好世界！。

其中“ _ ”是由元素引起的空格。

__ 所以 __ 想象 __ 阅读 __ 文本 __ 喜欢 __ 这个！！！

恼人的！！

所以我修改了 cufon-yui.js 文件版本 1.09i 所以输出会是这样的，

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

所以当“阅读器”打开它时，它看起来像这样：

你好世界！_ _

空白画布出现在文本之后，所以你不会得到那种奇怪的效果。

所以这里是修复：

在第 1240 - 1259 行（对某些人来说可能不同，但很容易发现），我更改了以下内容

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;')));

这将为新的“beforetext”元素和打印和屏幕设置样式，

在“返回函数（字体、文本、样式、选项、节点、el）”之后的第 1296 行，我添加了：

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

这是为了避免在悬停选项上将 beforetext 重写为自身。

现在从第 1336 - 1353 行（同样可能不同，但很容易发现）我将其更改为

                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));
        }
    }

上面只添加了一次“beforetext”元素，然后在创建每个 cufon 文本时将文本附加到该元素，并在悬停选项上重新应用它，这样它就不会被擦除。

就是这样。希望这可以帮助外面的人。并随时纠正我，改进它，或找到更好的解决方案，我想知道其他更好的方法。祝大家编码愉快。

PS
对不起，很长的回复。只是试图确保有相同问题的人了解发生了什么。