DEV Community

manish srivastava
manish srivastava

Posted on

A ๐–ˆ๐–”๐–‘๐–‘๐–Š๐–ˆ๐–™๐–Ž๐–”๐–“ ๐–”๐–‹ ๐–”๐–›๐–Š๐–— 75 ๐–€๐–“๐–Ž๐–ˆ๐–”๐–‰๐–Š ๐–ˆ๐–”๐–‰๐–Š ๐–Š๐–๐–†๐–’๐–•๐–‘๐–Š๐–˜

๐•ฏ๐–Š๐–†๐–— ๐•ฏ๐–Š๐–›๐–Š๐–‘๐–”๐–•๐–Š๐–— ๐•ฑ๐–—๐–Ž๐–Š๐–“๐–‰๐–˜,

๐•ด'๐–’ ๐–Š๐–๐–ˆ๐–Ž๐–™๐–Š๐–‰ ๐–™๐–” ๐–˜๐–๐–†๐–—๐–Š ๐–† ๐–ˆ๐–”๐–‘๐–‘๐–Š๐–ˆ๐–™๐–Ž๐–”๐–“ ๐–”๐–‹ ๐–”๐–›๐–Š๐–— 75 ๐–€๐–“๐–Ž๐–ˆ๐–”๐–‰๐–Š ๐–ˆ๐–”๐–‰๐–Š ๐–Š๐–๐–†๐–’๐–•๐–‘๐–Š๐–˜ ๐–™๐–๐–†๐–™ ๐–†๐–—๐–Š ๐–˜๐–š๐–—๐–Š ๐–™๐–” ๐–Ž๐–’๐–•๐–—๐–Š๐–˜๐–˜ ๐–ž๐–”๐–š๐–— ๐–‹๐–—๐–Ž๐–Š๐–“๐–‰๐–˜. ๐•ฟ๐–๐–Š๐–˜๐–Š ๐–Š๐–๐–†๐–’๐–•๐–‘๐–Š๐–˜ ๐–˜๐–๐–”๐–œ๐–ˆ๐–†๐–˜๐–Š ๐–™๐–๐–Š ๐–›๐–Š๐–—๐–˜๐–†๐–™๐–Ž๐–‘๐–Ž๐–™๐–ž ๐–†๐–“๐–‰ ๐–ˆ๐–—๐–Š๐–†๐–™๐–Ž๐–›๐–Ž๐–™๐–ž ๐–”๐–‹ ๐–€๐–“๐–Ž๐–ˆ๐–”๐–‰๐–Š, ๐–’๐–†๐–๐–Ž๐–“๐–Œ ๐–™๐–๐–Š๐–’ ๐–•๐–Š๐–—๐–‹๐–Š๐–ˆ๐–™ ๐–‹๐–”๐–— ๐–Š๐–“๐–๐–†๐–“๐–ˆ๐–Ž๐–“๐–Œ ๐–ž๐–”๐–š๐–— ๐–•๐–—๐–”๐–๐–Š๐–ˆ๐–™๐–˜. ๐•ฑ๐–Š๐–Š๐–‘ ๐–‹๐–—๐–Š๐–Š ๐–™๐–” ๐–Š๐–๐–•๐–‘๐–”๐–—๐–Š ๐–†๐–“๐–‰ ๐–˜๐–๐–†๐–—๐–Š ๐–ž๐–”๐–š๐–— ๐–™๐–๐–”๐–š๐–Œ๐–๐–™๐–˜!

๐•ญ๐–Š๐–˜๐–™ ๐–—๐–Š๐–Œ๐–†๐–—๐–‰๐–˜,

๐•ธ๐–†๐–“๐–Ž๐–˜๐– ๐•พ๐–—๐–Ž๐–›๐–†๐–˜๐–™๐–†๐–›๐–†

Few Examples:

๐“—๐“ฒ, ๐Ÿ‘‹ ๐“˜ ๐“ช๐“ถ ๐“œ๐“ช๐“ท๐“ฒ๐“ผ๐“ฑ ๐“ข๐“ป๐“ฒ๐“ฟ๐“ช๐“ผ๐“ฝ๐“ช๐“ฟ๐“ช

Hอ‘อ’อฬ–อˆiฬ†ฬ„อŠฬ™ฬ—อ•, ๐Ÿ‘‹ Iอƒอ’ฬคฬž aอŒฬอ’ฬ˜mอƒฬค Mฬ…อฬฬคaอ’ฬ‚ฬฟอŽnออฬœอ“iฬˆฬ˜ฬ™ฬคsอ’อŠอ‹ฬ™hฬฟฬ†ฬฅ Sฬ‡ฬ†ฬ–อˆrอ‹ฬŠฬฬŸฬฆiฬอ‰vอ’อ—อ“อ‰aอ‚ฬ†ฬžsฬ‹อŠฬฆtฬ†อƒอˆฬ—aฬ…ออˆvฬ‹อ‚ฬ˜ฬ˜aฬ‹อ‰

๐•€ ๐•’๐•ž ๐•„๐•’๐•Ÿ๐•š๐•ค๐•™ ๐•Š๐•ฃ๐•š๐•ง๐•’๐•ค๐•ฅ๐•’๐•ง๐•’

Copy paste below code:

`<!DOCTYPE html>




Awesome Text Styles
<br> body {<br> font-family: Arial, sans-serif;<br> max-width: 1200px;<br> margin: 0 auto;<br> padding: 20px;<br> background-color: #f0f0f0;<br> }</p> <div class="highlight"><pre class="highlight plaintext"><code>.container { text-align: center; } input { padding: 10px; font-size: 16px; margin: 10px; width: 300px; } button { padding: 10px 20px; font-size: 16px; background-color: #4CAF50; color: white; border: none; cursor: pointer; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; margin-top: 30px; } .style-card { background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .copy-btn { margin-top: 10px; padding: 5px 10px; background-color: #008CBA; font-size: 14px; border: none; cursor: pointer; } </code></pre></div> <p>




Generate Styles

<br> // Default converter for contiguous Unicode blocks<br> function convertTextDefault(text, style) {<br> return text.split(&#39;&#39;).map(char =&gt; {<br> const code = char.charCodeAt(0);<br> if (char &gt;= &#39;A&#39; &amp;&amp; char &lt;= &#39;Z&#39;) {<br> return String.fromCodePoint(style.upper + (code - 65));<br> } else if (char &gt;= &#39;a&#39; &amp;&amp; char &lt;= &#39;z&#39;) {<br> return String.fromCodePoint(style.lower + (code - 97));<br> }<br> return char;<br> }).join(&#39;&#39;);<br> }</p> <div class="highlight"><pre class="highlight plaintext"><code>// Custom converters already in place: function upsideDown(text) { const map = { 'a': 'ษ', 'b': 'q', 'c': 'ษ”', 'd': 'p', 'e': 'ว', 'f': 'ษŸ', 'g': 'ฦƒ', 'h': 'ษฅ', 'i': 'แด‰', 'j': 'ษพ', 'k': 'สž', 'l': 'ืŸ', 'm': 'ษฏ', 'n': 'u', 'o': 'o', 'p': 'd', 'q': 'b', 'r': 'ษน', 's': 's', 't': 'ส‡', 'u': 'n', 'v': 'สŒ', 'w': 'ส', 'x': 'x', 'y': 'สŽ', 'z': 'z', 'A': 'โˆ€', 'B': '๐’', 'C': 'ฦ†', 'D': 'โ—–', 'E': 'ฦŽ', 'F': 'โ„ฒ', 'G': 'ืค', 'H': 'H', 'I': 'I', 'J': 'ลฟ', 'K': 'สž', 'L': 'หฅ', 'M': 'W', 'N': 'N', 'O': 'O', 'P': 'ิ€', 'Q': 'ฮŒ', 'R': 'แดš', 'S': 'S', 'T': 'โ”ด', 'U': 'โˆฉ', 'V': 'ฮ›', 'W': 'M', 'X': 'X', 'Y': 'โ…„', 'Z': 'Z' }; return text.split('').map(ch =&gt; map[ch] || ch).reverse().join(''); } function smallCaps(text) { const map = { 'a': 'แด€', 'b': 'ส™', 'c': 'แด„', 'd': 'แด…', 'e': 'แด‡', 'f': '๊œฐ', 'g': 'ษข', 'h': 'สœ', 'i': 'ษช', 'j': 'แดŠ', 'k': 'แด‹', 'l': 'สŸ', 'm': 'แด', 'n': 'ษด', 'o': 'แด', 'p': 'แด˜', 'q': 'วซ', 'r': 'ส€', 's': '๊œฑ', 't': 'แด›', 'u': 'แดœ', 'v': 'แด ', 'w': 'แดก', 'x': 'x', 'y': 'ส', 'z': 'แดข', 'A': 'แด€', 'B': 'ส™', 'C': 'แด„', 'D': 'แด…', 'E': 'แด‡', 'F': '๊œฐ', 'G': 'ษข', 'H': 'สœ', 'I': 'ษช', 'J': 'แดŠ', 'K': 'แด‹', 'L': 'สŸ', 'M': 'แด', 'N': 'ษด', 'O': 'แด', 'P': 'แด˜', 'Q': 'วซ', 'R': 'ส€', 'S': '๊œฑ', 'T': 'แด›', 'U': 'แดœ', 'V': 'แด ', 'W': 'แดก', 'X': 'x', 'Y': 'ส', 'Z': 'แดข' }; return text.split('').map(ch =&gt; map[ch] || ch).join(''); } function leetSpeak(text) { const map = { 'A': '4', 'a': '4', 'E': '3', 'e': '3', 'I': '1', 'i': '1', 'O': '0', 'o': '0', 'S': '5', 's': '5', 'T': '7', 't': '7' }; return text.split('').map(ch =&gt; map[ch] || ch).join(''); } function zalgo(text) { const zalgo_up = ["ฬ","ฬŽ","ฬ„","ฬ…","ฬฟ","ฬ‘","ฬ†","ฬ","อ’","อ—","อ‘","ฬ‡","ฬˆ","ฬŠ","อ‚","อƒ","อ„","อŠ","อ‹","อŒ","ฬƒ","ฬ‚","ฬŒ","อ","ฬ","ฬ‹"]; const zalgo_down = ["ฬ–","ฬ—","ฬ˜","ฬ™","ฬœ","ฬ","ฬž","ฬŸ","ฬ ","ฬค","ฬฅ","ฬฆ","อ…","อ‡","อˆ","อ‰","อ","อŽ","อ“","อ”","อ•","อ–"]; return text.split('').map(ch =&gt; { if (/[A-Za-z]/.test(ch)) { let extra = ''; for (let i = 0; i &lt; Math.floor(Math.random() * 3) + 1; i++) { extra += zalgo_up[Math.floor(Math.random() * zalgo_up.length)]; } for (let i = 0; i &lt; Math.floor(Math.random() * 3) + 1; i++) { extra += zalgo_down[Math.floor(Math.random() * zalgo_down.length)]; } return ch + extra; } return ch; }).join(''); } function spongebob(text) { return text.split('').map((ch, i) =&gt; { if (/[A-Za-z]/.test(ch)) { return i % 2 === 0 ? ch.toUpperCase() : ch.toLowerCase(); } return ch; }).join(''); } // A generic decorator converter factory: function createDecoConverter(deco) { return function(text) { return deco + text.split('').join(deco) + deco; } } // ============================================ // New 25 Distinct Writing Styles Converters // ============================================ // 1. Reverse Text: Reverse the entire string. function reverseText(text) { return text.split('').reverse().join(''); } // 2. Binary: Convert each character to its binary representation. function binaryText(text) { return text.split('').map(ch =&gt; ch.charCodeAt(0).toString(2)).join(' '); } // 3. Morse Code: Convert letters/digits to Morse code. function morseText(text) { const morseMap = { 'a': '.-', 'b': '-...', 'c': '-.-.', 'd': '-..', 'e': '.', 'f': '..-.', 'g': '--.', 'h': '....', 'i': '..', 'j': '.---', 'k': '-.-', 'l': '.-..', 'm': '--', 'n': '-.', 'o': '---', 'p': '.--.', 'q': '--.-', 'r': '.-.', 's': '...', 't': '-', 'u': '..-', 'v': '...-', 'w': '.--', 'x': '-..-', 'y': '-.--', 'z': '--..', '0': '-----', '1': '.----', '2': '..---','3': '...--', '4': '....-', '5': '.....', '6': '-....','7': '--...', '8': '---..', '9': '----.' }; return text.split('').map(ch =&gt; { const lower = ch.toLowerCase(); return morseMap[lower] ? morseMap[lower] : ch; }).join(' '); } // 4. Double Vision: Duplicate every character. function doubleVision(text) { return text.split('').map(ch =&gt; ch + ch).join(''); } // 5. Spaced Out: Insert a space between every character. function spacedOut(text) { return text.split('').join(' '); } // 6. Scrambled: Randomly shuffle characters in each word. function scrambled(text) { return text.split(' ').map(word =&gt; { const arr = word.split(''); for (let i = arr.length - 1; i &gt; 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr.join(''); }).join(' '); } // 7. Pig Latin: Convert each word to Pig Latin. function pigLatin(text) { return text.split(' ').map(word =&gt; { if (/^[aeiou]/i.test(word)) { return word + "way"; } else { const match = word.match(/^[^aeiou]+/i); if (match) { const cluster = match[0]; return word.substring(cluster.length) + cluster + "ay"; } return word; } }).join(' '); } // 8. Inverted Case: Toggle the case for every character. function invertedCase(text) { return text.split('').map(ch =&gt; { if (ch === ch.toUpperCase()) { return ch.toLowerCase(); } else { return ch.toUpperCase(); } }).join(''); } // 9. Dashed: Insert a dash between every character. function dashed(text) { return text.split('').join('-'); } // 10. Underlined: Insert an underscore between every character. function underlined(text) { return text.split('').join('_'); } // 11. Stutter: Repeat each character with a hyphen between the repeats. function stutter(text) { return text.split('').map(ch =&gt; ch + '-' + ch).join(' '); } // 12. Reverse Words: Reverse the order of words. function reverseWords(text) { return text.split(' ').reverse().join(' '); } // 13. CamelCase: Capitalize first letter of each word and join without spaces. function camelCase(text) { return text.split(' ').map(word =&gt; { return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase(); }).join(''); } // 14. Snake Case: Convert text to lowercase and replace spaces with underscores. function snakeCase(text) { return text.toLowerCase().split(' ').join('_'); } // 15. Screaming: Uppercase every character and add an exclamation mark after each. function screaming(text) { return text.split('').map(ch =&gt; ch.toUpperCase() + '!').join(''); } // 16. Whisper: Lowercase every character and add a period after each. function whisper(text) { return text.split('').map(ch =&gt; ch.toLowerCase() + '.').join(''); } // 17. Parenthesized Letters: Wrap every character in parentheses. function parenthesized(text) { return text.split('').map(ch =&gt; '(' + ch + ')').join(''); } // 18. Bracketed Letters: Wrap every character in square brackets. function bracketed(text) { return text.split('').map(ch =&gt; '[' + ch + ']').join(''); } // 19. Curly Braced Letters: Wrap every character in curly braces. function curlyBraced(text) { return text.split('').map(ch =&gt; '{' + ch + '}').join(''); } // 20. Angle Bracketed Letters: Wrap every character in angle brackets. function angleBracketed(text) { return text.split('').map(ch =&gt; '&lt;' + ch + '&gt;').join(''); } // 21. Dot Separated: Insert a dot between every character. function dotSeparated(text) { return text.split('').join('.'); } // 22. Comma Separated: Insert a comma between every character. function commaSeparated(text) { return text.split('').join(','); } // 23. Asterisk Separated: Insert an asterisk between every character. function asteriskSeparated(text) { return text.split('').join('*'); } // 24. Incremental Repetition: Repeat each character incrementally (first 1 time, second 2 times, etc.). function incremental(text) { return text.split('').map((ch, i) =&gt; ch.repeat(i + 1)).join(' '); } // 25. Random Case: Randomly convert each character to upper or lower case. function randomCase(text) { return text.split('').map(ch =&gt; Math.random() &lt; 0.5 ? ch.toUpperCase() : ch.toLowerCase()).join(''); } // ============================================ // Array of Base Styles (using contiguous Unicode mappings) const styles = [ { name: "Bold", upper: 0x1D400, lower: 0x1D41A }, { name: "Italic", upper: 0x1D434, lower: 0x1D44E }, { name: "Bold Italic", upper: 0x1D468, lower: 0x1D482 }, { name: "Script", upper: 0x1D49C, lower: 0x1D4B6 }, { name: "Bold Script", upper: 0x1D4D0, lower: 0x1D4EA }, { name: "Fraktur", upper: 0x1D504, lower: 0x1D51E }, { name: "Double-Struck", upper: 0x1D538, lower: 0x1D552 }, { name: "Sans-Serif", upper: 0x1D5A0, lower: 0x1D5BA }, { name: "Sans-Serif Bold", upper: 0x1D5D4, lower: 0x1D5EE }, { name: "Sans-Serif Italic", upper: 0x1D608, lower: 0x1D622 }, { name: "Monospace", upper: 0x1D670, lower: 0x1D68A }, { name: "Bold Fraktur", upper: 0x1D56C, lower: 0x1D586 }, { name: "Sans-Serif Bold Italic", upper: 0x1D63C, lower: 0x1D656 }, { name: "Circled", upper: 0x24B6, lower: 0x24D0 }, { name: "Parenthesized", upper: 0x2474, lower: 0x249C }, { name: "Fullwidth", upper: 0xFF21, lower: 0xFF41 }, { name: "Old English", upper: 0xA4D0, lower: 0xA4F0 }, { name: "Alchemical", upper: 0x1F700, lower: 0x1F71A }, // Custom converters: { name: "Upside Down", convert: upsideDown }, { name: "Small Caps", convert: smallCaps }, { name: "Leet Speak", convert: leetSpeak }, { name: "Zalgo", convert: zalgo }, { name: "SpongeBob", convert: spongebob } ]; // Array of 50 decorative styles (using a custom converter factory) const decoSymbols = [ "โ˜…", "โ˜†", "โœฆ", "โœง", "โ€", "โœช", "โœซ", "โœฌ", "โœญ", "โœฎ", "โœฏ", "โ˜€", "โ˜", "โ˜‚", "โ˜ƒ", "โ„", "โ™›", "โ™•", "โ™–", "โ™œ", "โ™", "โ™ž", "โ™Ÿ", "โ˜ฏ", "โœก", "โ˜ฎ", "โ˜ญ", "โ˜ข", "โ˜ฃ", "โšก", "โ˜„", "โšฝ", "โšพ", "โ™ ", "โ™ฃ", "โ™ฅ", "โ™ฆ", "โ™ช", "โ™ซ", "โ˜•", "โš“", "โœˆ", "โŒ›", "โณ", "โš™", "โœ‚", "โœ’", "โˆ", "โ‰", "โŠ" ]; decoSymbols.forEach(symbol =&gt; { styles.push({ name: "Deco: " + symbol, convert: createDecoConverter(symbol) }); }); // Add the 25 new distinct writing style converters: styles.push({ name: "Reverse Text", convert: reverseText }); styles.push({ name: "Binary", convert: binaryText }); styles.push({ name: "Morse Code", convert: morseText }); styles.push({ name: "Double Vision", convert: doubleVision }); styles.push({ name: "Spaced Out", convert: spacedOut }); styles.push({ name: "Scrambled", convert: scrambled }); styles.push({ name: "Pig Latin", convert: pigLatin }); styles.push({ name: "Inverted Case", convert: invertedCase }); styles.push({ name: "Dashed", convert: dashed }); styles.push({ name: "Underlined", convert: underlined }); styles.push({ name: "Stutter", convert: stutter }); styles.push({ name: "Reverse Words", convert: reverseWords }); styles.push({ name: "CamelCase", convert: camelCase }); styles.push({ name: "Snake Case", convert: snakeCase }); styles.push({ name: "Screaming", convert: screaming }); styles.push({ name: "Whisper", convert: whisper }); styles.push({ name: "Parenthesized Letters", convert: parenthesized }); styles.push({ name: "Bracketed Letters", convert: bracketed }); styles.push({ name: "Curly Braced Letters", convert: curlyBraced }); styles.push({ name: "Angle Bracketed Letters", convert: angleBracketed }); styles.push({ name: "Dot Separated", convert: dotSeparated }); styles.push({ name: "Comma Separated", convert: commaSeparated }); styles.push({ name: "Asterisk Separated", convert: asteriskSeparated }); styles.push({ name: "Incremental", convert: incremental }); styles.push({ name: "Random Case", convert: randomCase }); // Main conversion function that checks if a style has a custom convert function function convertText(text, style) { if (typeof style.convert === 'function') { return style.convert(text); } else { return convertTextDefault(text, style); } } function generateStyles() { const input = document.getElementById('inputText').value; const grid = document.getElementById('styleGrid'); grid.innerHTML = ''; styles.forEach(style =&gt; { const converted = convertText(input, style); const card = document.createElement('div'); card.className = 'style-card'; card.innerHTML = ` &lt;h3&gt;${style.name}&lt;/h3&gt; &lt;div style="font-size: 1.5em; margin: 10px 0"&gt;${converted}&lt;/div&gt; &lt;button class="copy-btn" onclick="navigator.clipboard.writeText(\`${converted}\`)"&gt;Copy&lt;/button&gt; `; grid.appendChild(card); }); } </code></pre></div> <p>


`

AWS Q Developer image

Your AI Code Assistant

Ask anything about your entire project, code and get answers and even architecture diagrams. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Start free in your IDE

Top comments (0)