automated HTML Page Capitalization

Question

Is there a method to automatically capitalize an HTML page instead of performing the task manually ? For example, transforming "HOW Does That SOund?" into "How does that sound?"

Do you believe that Prettier is incapable of handling that for me?

Answer 1

If you're working with JavaScript, you could write a script to manipulate the text content programmatically. Here's a simple example using JavaScript:

var element = document.getElementById('myElement');
      element.textContent = element.textContent.toLowerCase().replace(/\b\w/g, l => l.toUpperCase());

<div id="myElement">HOW Does That SOund?</div>

Answer 2

The problem was resolved by integrating specific JavaScript code. You can implement this code in any of your projects, and it will automatically format everything like magic.

document.addEventListener('DOMContentLoaded', function() {
      capitalizeSentences(document.body);
    });

    function capitalizeSentences(element) {
      if (element.nodeType === Node.TEXT_NODE) {
        var text = element.nodeValue.trim();

        if (text !== '') {
          // Capitalize the first letter of the first word
          element.nodeValue = capitalizeFirstLetter(text);
        }
      } else {
        element.childNodes.forEach(function(childNode) {
          capitalizeSentences(childNode);
        });
      }
    }

    function capitalizeFirstLetter(text) {
      var sentences = text.split('. ');

      sentences = sentences.map(function(sentence) {
        if (sentence.length > 0) {
          return sentence.charAt(0).toUpperCase() + sentence.slice(1).toLowerCase();
        }
        return sentence;
      });

      return sentences.join('. ');
    }

Answer 3

Live example with pure HTML & CSS using text-transform:

span {
  display: inline-block;
  text-transform: lowercase;
}

span::first-letter {
  text-transform: uppercase;
}

<span>HOW Does That SOund?</span>

Explanation:

<span> is inline element

::first-letter only works with block or inline-block elements

Reference:

• https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter
• CSS :first-letter not working