Question

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

经过进一步调查并试图解决问题后，我发现似乎无法控制开发者端的safari阅读器输出而不影响整个网站。

有人有任何建议吗？

enter image description here

Answer 1

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

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

<h1>Hello World!</h1>.

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

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

当“读者”打开它时，它会读出如下内容：

_ Hello _ World！。

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

__所以__想象一下__读__文__喜欢__这个!!!

烦人!!

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

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

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

Hello World！ _ _

空白的画布在文字后面，所以你不会得到那种奇怪的效果。

所以这是修复：

在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文本时将文本附加到该元素，并在悬停选项上重新应用它，以免它被删除。

就是这样。希望这可以帮助那些人。我想知道，随时纠正我，改进它，或找到更好的解决方案替代更好的方式。快乐的编码全部。

P.S
很抱歉，回复很长。只是想确保有同样问题的人了解最新情况。

Safari阅读器中的Cufon问题

1 个答案: