के समान प्रस्तुत करना मैं कैनवास टैग और जावास्क्रिप्ट के साथ प्रयोग कर रहा हूं। मैंने एक ऐसा पृष्ठ बनाया है जो ट्विटर सार्वजनिक टाइमलाइन से ट्वीट लेता है और उन्हें दृश्य में एनिमेट करता है। यह एनीमेशन के लिए पृष्ठभूमि में कैनवास तत्व का उपयोग करके काम करता है। जब एनीमेशन पूर्ण हो जाता है, तो यह शीर्ष पर एक ही पाठ के साथ एक div तत्व बनाता है। मैं ऐसा करता हूं ताकि ट्वीट टेक्स्ट चयन योग्य हो और लिंक क्लिक करने योग्य हो।फ़ायरफ़ॉक्स को कैनवास टेक्स्ट को सीएसएस टेक्स्ट
अब सफारी, क्रोम और यहां तक कि ओपेरा में, कैनवास टेक्स्ट और डिव टेक्स्ट लगभग बिल्कुल वही दिखते हैं। फिर भी फ़ायरफ़ॉक्स में, टेक्स्ट का आकार इसे अलग-अलग करने के लिए पर्याप्त है, जिससे वह div में बदल जाता है।
क्या कोई जानता है कि कैसे फ़ायरफ़ॉक्स को कैनवास तत्व और सीएसएस का उपयोग करके div को समान रूप से प्रस्तुत करना है? या यह इंजन के साथ एक प्रतिपादन असंगतता है।
यदि आप देखना चाहते हैं कि मेरा पृष्ठ क्या है, तो मैंने पृष्ठ on my website रखा है।
अब कोड के लिए:
सीएसएस मैं div प्रतिपादन के लिए उपयोग कर रहा हूँ शामिल हैं:
line-height: 21px; font-weight: 100; font-family: Georgia, "New Century Schoolbook", "Nimbus Roman No9 L", serif; font-size: 20px;
कैनवास पर प्रतिपादन के लिए मैं उपयोग कर रहा हूँ:
this.context.font = this.scale + 'px Georgia';
this.context.fillStyle = "white";
this.context.strokeStyle = 'white';
this.context.fillText(this.text, 0, 0);
this.context.strokeText(this.text, 0, 0);
जहां this.scale एक एनिमेटेड स्केल फैक्टर है जो बिल्कुल 20px पर समाप्त होता है। तो, संक्षेप में, मैं एक ही फ़ॉन्ट का उपयोग कर रहा हूं और उसी पीएक्स आकार पर समाप्त हो रहा हूं, फिर भी फ़ायरफ़ॉक्स कैनवास और सीएसएस के बीच पाठ को अलग-अलग प्रस्तुत करता है।
(संपादित) यहाँ एक स्क्रीनशॉट उदाहरण है: alt text http://danforys.com/temp/firefox-behaviour.png
पहली पंक्ति कैनवास का उपयोग करने में पाठ animating है, दूसरी पंक्ति जिसके परिणामस्वरूप div है।
हम्म, स्क्रीनशॉट पर बारीकी से देखकर, शायद यह रिक्त स्थान है। पत्र एक समान आकार को देखता है, लेकिन सीएसएस div पर रिक्त स्थान थोड़ा अधिक दिखता है। –