Safari阅读器中的Cufon问题

Question

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

经过进一步调查，并试图解决这个问题，我发现似乎没有办法控制Safari浏览器的输出从开发者一方没有影响整个网站。

有没有人有任何建议？

Answer 1

呀，所以这是一个问题的Cufón有当谈到使用Safari的“读者”，或者大多数人都会知道，在“读者”按钮，显示了在iPad/iPhone/ipod broswer。

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

<h1>Hello World!</h1>. 

嗯，这是什么样的Cufón确实给它，减去所有这些属性和内嵌样式：

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

而且当“读者”打开它时，它会显示如下内容：

_ Hello _ World !.

其中“_”是由该元素引起的空白空间。

__所以__想像__阅读__文字__喜欢__这!!!

烦人!!

所以我修改的Cufón-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 “元和打印和屏幕，

线1296后权‘回传功能（字体，文本，样式选项，节点，EL）’我补充道：

 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文本，并且还会在悬停选项上重新应用它，因此不会出现错误。

就是这样。希望这可以帮助别人。并随时纠正我，imporve它，或找到一个更好的解决方案，我想知道 替代更好的方法。快乐编码全部。

P.S
对不起，很长的回应。只是试图确保有同样问题的人理解正在发生的事情。