Capitalize first letter of sentences CSS

Question

I want to capitalize the first letter of sentences, and also the first letter after commas if possible. I want to add the code in here:

.qcont {
    width: 550px;
    height: auto;
    float: right;
    overflow: hidden;
    position: relative;
}

Answer 1

You can capitalize the first letter of the .qcont element by using the pseudo-element :first-letter.

.qcont:first-letter{
  text-transform: capitalize
}

This is the closest you're gonna get using only css. You could use javascript (in combination with jQuery) to wrap each letter which comes after a period (or comma, like you wish) in a span. You could add the same css as above to that span. Or do it in javascript all together.

Here's a snippet for the css approach:

.qcont:first-letter {
  text-transform: capitalize
}

<p class="qcont">word, another word</p>

Answer 2

This cannot be done in CSS. The text-transform property makes no distinction according to the placement of a word inside the content, and there is no pseudo-element for selecting the first word of a sentence. You would need to have real elements, in markup, for each sentence. But if you can do that, then you could probably just as well change the initial letters to uppercase in the content proper.

Capitalization at the start of a sentence is a matter of orthography and should be done when generating the content, not with optional stylistic suggestions (CSS) or with client-side scripting. The process of recognizing sentence boundaries is far from trivial and cannot in general be performed automatically without complex syntactic and semantic analysis (e.g., an abbreviation ending with a period may appear inside a sentence or at the end of a sentence).

Answer 3

If you need to capitalize the first letter in contenteditable container you can't use the css property

#myContentEditableDiv:first-letter {
    text-transform: capitalize;
}

because when you try to delete a letter automatically you will delete all the text contained in the contenteditable.

Try instead the example provided by sakhunzai in https://stackoverflow.com/a/7242079/6411398 for a working solution.

Answer 4

text-transform:capitalize; will capitalize the first letter of a sentence, but if you want to also do it for commas you will have to write some javascript. I agree with @BoltClock, though. Why on earth would you want to capitalize after a comma?

Edit: For the sake of readers: text-transform:capitalize; will capitalize each word of a sentence, not the first one only. You must use the :first-letter CSS selector with the above.