Alternating Case & Small Caps - How Unicode Text Styling Works in JavaScript

Two of the most requested text styles for social media - alternating case and small caps - are easy to implement in JavaScript. Here is how they work under the hood.

Alternating Case - Pure String Logic

No Unicode needed. Just alternate the casing on each character:

javascriptfunction toAlternatingCase(text) {
  return [...text]
    .map((char, i) =>
      i % 2 === 0
        ? char.toLowerCase()
        : char.toUpperCase()
    )
    .join('');
}

toAlternatingCase("Hello World");
// → "hElLo wOrLd"

Note: spaces and punctuation count as characters in the index — so spacing affects the pattern slightly. Some implementations skip non-alpha characters:

javascriptfunction toAlternatingCaseSkipSpaces(text) {
  let alphaIndex = 0;
  return [...text].map(char => {
    if (!/[a-zA-Z]/.test(char)) return char;
    return alphaIndex++ % 2 === 0
      ? char.toLowerCase()
      : char.toUpperCase();
  }).join('');
}

Small Caps - Unicode Character Mapping

Small caps require Unicode small capital characters — actual different code points, not formatting:

typescriptconst SMALL_CAPS_MAP: Record<string, string> = {
  a:'ᴀ', b:'ʙ', c:'ᴄ', d:'ᴅ', e:'ᴇ',
  f:'ꜰ', g:'ɢ', h:'ʜ', i:'ɪ', j:'ᴊ',
  k:'ᴋ', l:'ʟ', m:'ᴍ', n:'ɴ', o:'ᴏ',
  p:'ᴘ', q:'Q', r:'ʀ', s:'s', t:'ᴛ',
  u:'ᴜ', v:'ᴠ', w:'ᴡ', x:'x', y:'ʏ', z:'ᴢ',
};

function toSmallCaps(text: string): string {
  return [...text.toLowerCase()]
    .map(c => SMALL_CAPS_MAP[c] ?? c)
    .join('');
}

toSmallCaps("Hello World");
// → "ʜᴇʟʟᴏ ᴡᴏʀʟᴅ"

Why This Works Cross-Platform

These Unicode characters display on Instagram, WhatsApp, Discord, LinkedIn - everywhere — because they are actual letters, not HTML or markdown. HTML bold/italic gets stripped; Unicode characters do not.

For a free manual tool: TechMind.click - paste, click Alternating Case or Small Caps, copy. Client-side, no sign-up.