𝕯𝖊𝖆𝖗 𝕯𝖊𝖛𝖊𝖑𝖔𝖕𝖊𝖗 𝕱𝖗𝖎𝖊𝖓𝖉𝖘,
𝕴'𝖒 𝖊𝖝𝖈𝖎𝖙𝖊𝖉 𝖙𝖔 𝖘𝖍𝖆𝖗𝖊 𝖆 𝖈𝖔𝖑𝖑𝖊𝖈𝖙𝖎𝖔𝖓 𝖔𝖋 𝖔𝖛𝖊𝖗 75 𝖀𝖓𝖎𝖈𝖔𝖉𝖊 𝖈𝖔𝖉𝖊 𝖊𝖝𝖆𝖒𝖕𝖑𝖊𝖘 𝖙𝖍𝖆𝖙 𝖆𝖗𝖊 𝖘𝖚𝖗𝖊 𝖙𝖔 𝖎𝖒𝖕𝖗𝖊𝖘𝖘 𝖞𝖔𝖚𝖗 𝖋𝖗𝖎𝖊𝖓𝖉𝖘. 𝕿𝖍𝖊𝖘𝖊 𝖊𝖝𝖆𝖒𝖕𝖑𝖊𝖘 𝖘𝖍𝖔𝖜𝖈𝖆𝖘𝖊 𝖙𝖍𝖊 𝖛𝖊𝖗𝖘𝖆𝖙𝖎𝖑𝖎𝖙𝖞 𝖆𝖓𝖉 𝖈𝖗𝖊𝖆𝖙𝖎𝖛𝖎𝖙𝖞 𝖔𝖋 𝖀𝖓𝖎𝖈𝖔𝖉𝖊, 𝖒𝖆𝖐𝖎𝖓𝖌 𝖙𝖍𝖊𝖒 𝖕𝖊𝖗𝖋𝖊𝖈𝖙 𝖋𝖔𝖗 𝖊𝖓𝖍𝖆𝖓𝖈𝖎𝖓𝖌 𝖞𝖔𝖚𝖗 𝖕𝖗𝖔𝖏𝖊𝖈𝖙𝖘. 𝕱𝖊𝖊𝖑 𝖋𝖗𝖊𝖊 𝖙𝖔 𝖊𝖝𝖕𝖑𝖔𝖗𝖊 𝖆𝖓𝖉 𝖘𝖍𝖆𝖗𝖊 𝖞𝖔𝖚𝖗 𝖙𝖍𝖔𝖚𝖌𝖍𝖙𝖘!
𝕭𝖊𝖘𝖙 𝖗𝖊𝖌𝖆𝖗𝖉𝖘,
𝕸𝖆𝖓𝖎𝖘𝖍 𝕾𝖗𝖎𝖛𝖆𝖘𝖙𝖆𝖛𝖆
Few Examples:
𝓗𝓲, 👋 𝓘 𝓪𝓶 𝓜𝓪𝓷𝓲𝓼𝓱 𝓢𝓻𝓲𝓿𝓪𝓼𝓽𝓪𝓿𝓪
H̖͈͑͒͐ĭ̙̗͕̄͊, 👋 I̤̞̓͒ a̘͌́͒m̤̓ M̝̤̅͐a͎͒̂̿n͍̜͓͐ï̘̙̤s̙͒͊͋h̥̿̆ Ṡ̖͈̆r̟̦͋̊̐i͉̍v͓͉͒͗a̞͂̆ș̋͊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('').map(char => {<br>
const code = char.charCodeAt(0);<br>
if (char >= 'A' && char <= 'Z') {<br>
return String.fromCodePoint(style.upper + (code - 65));<br>
} else if (char >= 'a' && char <= 'z') {<br>
return String.fromCodePoint(style.lower + (code - 97));<br>
}<br>
return char;<br>
}).join('');<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 => 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 => 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 => map[ch] || ch).join('');
}
function zalgo(text) {
const zalgo_up = ["̍","̎","̄","̅","̿","̑","̆","̐","͒","͗","͑","̇","̈","̊","͂","̓","̈́","͊","͋","͌","̃","̂","̌","͐","́","̋"];
const zalgo_down = ["̖","̗","̘","̙","̜","̝","̞","̟","̠","̤","̥","̦","ͅ","͇","͈","͉","͍","͎","͓","͔","͕","͖"];
return text.split('').map(ch => {
if (/[A-Za-z]/.test(ch)) {
let extra = '';
for (let i = 0; i < Math.floor(Math.random() * 3) + 1; i++) {
extra += zalgo_up[Math.floor(Math.random() * zalgo_up.length)];
}
for (let i = 0; i < 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) => {
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 => 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 => {
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 => 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 => {
const arr = word.split('');
for (let i = arr.length - 1; i > 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 => {
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 => {
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 => 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 => {
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 => ch.toUpperCase() + '!').join('');
}
// 16. Whisper: Lowercase every character and add a period after each.
function whisper(text) {
return text.split('').map(ch => ch.toLowerCase() + '.').join('');
}
// 17. Parenthesized Letters: Wrap every character in parentheses.
function parenthesized(text) {
return text.split('').map(ch => '(' + ch + ')').join('');
}
// 18. Bracketed Letters: Wrap every character in square brackets.
function bracketed(text) {
return text.split('').map(ch => '[' + ch + ']').join('');
}
// 19. Curly Braced Letters: Wrap every character in curly braces.
function curlyBraced(text) {
return text.split('').map(ch => '{' + ch + '}').join('');
}
// 20. Angle Bracketed Letters: Wrap every character in angle brackets.
function angleBracketed(text) {
return text.split('').map(ch => '<' + ch + '>').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) => 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 => Math.random() < 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 => {
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 => {
const converted = convertText(input, style);
const card = document.createElement('div');
card.className = 'style-card';
card.innerHTML = `
<h3>${style.name}</h3>
<div style="font-size: 1.5em; margin: 10px 0">${converted}</div>
<button class="copy-btn" onclick="navigator.clipboard.writeText(\`${converted}\`)">Copy</button>
`;
grid.appendChild(card);
});
}
</code></pre></div>
<p>
`
Top comments (0)