Capitalize first letter of sentences CSS

CssCapitalization

Css Problem Overview


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;
}

Css Solutions


Solution 1 - Css

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>

Solution 2 - Css

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

Solution 3 - Css

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.

Solution 4 - Css

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Question1907View Question on Stackoverflow
Solution 1 - CssLuuuudView Answer on Stackoverflow
Solution 2 - CssJukka K. KorpelaView Answer on Stackoverflow
Solution 3 - CssAlessandro Foolish Ciak DAntonView Answer on Stackoverflow
Solution 4 - Csskristina childsView Answer on Stackoverflow