गलत वर्तनी वाले शब्दों के तहत एक घुमावदार रेखा कैसे डालें HTML

Question

मेरे पास एक वेबपृष्ठ HTML & जेएस है।

मुझे गलत वर्तनी वाले शब्दों के तहत एक लाल लहर वाली रेखा जोड़ने की आवश्यकता है। मुझे उन शब्दों का पता लगाने के लिए मेरा एल्गोरिदम मिला लेकिन मुझे बस यह जानने की जरूरत है कि उन शब्दों के तहत एक घुमावदार रेखा कैसे रखी जाए।

Answer 1

वास्तव में आप सिर्फ सीएसएस का उपयोग करके एक मानक घुंघराले रेखांकन की जरूरत नहीं है, लेकिन पर इस ट्यूटोरियल की जाँच कैसे एक बनाने के लिए अपने आप को:

यहाँ से लिया: http://www.phpied.com/curly-underline/

.curly-underline { 
    background: url(underline.gif) bottom repeat-x; 
} 

Answer 2

आप डॉन हैं ' टी चाहता हूँ घुंघराले रेखांकन के लिए एक gif उपयोग करते हैं, आप शुद्ध सीएसएस द्वारा यह कर सकते हैं:

<span style="border-bottom: 1px dotted #ff0000;padding:1px"> 
 
    <span style="border-bottom: 1px dotted #ff0000;"> 
 
     foobar 
 
    </span> 
 
</span>

(या JSFiddle में चलाने)

Answer 3

लाल, लहरदार रेखांकन सीएसएस 3 के Text Decoration Module में निर्दिष्ट है, बहुत सरल है।

* { text-decoration: underline wavy red; }

Run me in Chrome or Firefox to see me ride over a red wave!

ब्राउज़र समर्थन ऊपर बढ़ रहा है। आप माइक्रोसॉफ्ट एज के लिए vote for it कर सकते हैं, जो मैं आपको करने के लिए प्रोत्साहित करता हूं।

spec नया नहीं है; फ़ायरफ़ॉक्स since 2011 और 2016 से क्रोम का समर्थन कर रहा है। उम्मीद है कि हम जल्द ही इसका समर्थन करने के लिए सफारी और एज पर भरोसा कर सकते हैं।

अपडेट 2017: क्रोम ने 2016 में इस मुद्दे को बंद कर दिया है, और मैंने इसे क्रोम 58 के साथ परीक्षण किया है, जो काम करता है, और लहरों की एक बड़ी वृद्धि है।