safari - SafariリーダーでのCufonの問題

Question

SafariReaderがCufonを興味深い方法で処理していることがわかりました。Safari Readerが「Cufonized」テキストを処理すると、キャンバス要素が残り、出力にギャップが生じます。

さらに調査して問題を解決しようとすると、サイト全体に影響を与えることなく、開発者側からのSafariリーダーの出力を制御する方法がないように思われることがわかりました。

誰か提案はありますか？

Answer 1

ええ、それはサファリの「リーダー」を使用する場合にcufonが抱える問題です。ほとんどの人が知っているように、ipad / iphone/ipodブラウザに表示される「リーダー」ボタンです。

たとえば、次のようなcufonizedh1タグがあるとします。

<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」要素と、印刷および画面用のスタイルが設定されます。

「returnfunction（font、text、style、options、node、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」要素を1回だけ追加し、各cufonテキストを作成するときにその要素にテキストを追加し、ホバーオプションに再適用して、エラーが発生しないようにします。

以上です。これが誰かを助けてくれることを願っています。そして、私を訂正したり、それを改善したり、より良い解決策を見つけたりしてください。私は別のより良い方法を知りたいです。ハッピーコーディングすべて。

PS
長い回答でごめんなさい。同じ問題を抱えている人が何が起こっているのかを理解していることを確認しようとしているだけです。