Title Case Converter - JavaScript

function toProperTitleCase(str) {

  const smallWords = ['and', 'or', 'the', 'of', 'in', 'a', 'an']; // Common small words

  return str

    .toLowerCase()

    .split(' ')

    .map((word, index) =>

      smallWords.includes(word) && index !== 0

        ? word // Leave small words lowercase if not the first word

        : word.charAt(0).toUpperCase() + word.slice(1)

    )

    .join(' ');

}

// Example Usage

const properTitle = "a tale of two cities";

console.log(toProperTitleCase(properTitle)); 

// Output: "A Tale of Two Cities"

Breakdown

1. String Normalization with toLowerCase()
   The input string is converted to lowercase to handle cases where some words might already be in uppercase or mixed case. This ensures a clean slate for processing.

2. Splitting into Words with split(' ')
   The string is divided into individual words based on spaces, creating an array of words.

   Example: "css makes this harder" becomes ["css", "makes", "this", "harder"].

3. Mapping Each Word to Title Case

   • For each word, the first character (charAt(0)) is converted to uppercase using toUpperCase().
   • The rest of the word (slice(1)) is left in lowercase to complete the transformation.
   • The transformed word is then added back to a new array.

4. Rejoining the Words with join(' ')
   After processing, the array of title-cased words is combined back into a single string with spaces in between.

---

Why Title Case in CSS Is Frustrating

CSS includes basic text-transform options like uppercase, lowercase, and capitalize. However, capitalize only affects the first letter of each word, and it doesn’t distinguish between proper title case and random capitalization of prepositions, articles, or small words.

Limitations of text-transform: capitalize:

• "CSS DOES THIS" becomes "Css Does This", which might look fine but lacks contextual correctness.
• Words like “and”, “of”, or “the” shouldn’t always be capitalized in title case. Handling such rules requires logic that CSS cannot provide natively.

Why Doesn’t CSS Support Full Title Case?

1. Complex Language Rules:
   Title case varies by language and context. For example:

   • English: “The Quick Brown Fox.”
   • German: “Das Schnell Braune Füchschen.”
     Implementing such logic requires sophisticated grammar parsing beyond CSS’s declarative nature.

2. CSS’s Declarative Scope:
   CSS is designed to style content, not manipulate its semantic structure or enforce language rules. A JavaScript solution is often necessary for advanced text transformations.

3. Performance Considerations:
   A native title case implementation would add complexity and potential performance overhead to the rendering engine for something that can be handled on the client side with preprocessing or JavaScript.

---

Why Developers Search for This Solution

1. Common UI Requirement:
   Title case is widely used in headings, buttons, and navigation labels. Developers often search for quick ways to implement it without manually processing text.

2. Frustration with CSS:
   Developers expect CSS to handle such a basic need, only to discover its limitations. This mismatch drives searches for JavaScript-based solutions.

3. Reusable Utility:
   A title case converter is a versatile utility that can be used across projects to standardize text formatting.