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).