Change CAPS lock to Capitalize in CSS

Question

I have a sentence coming in that is all in CAPs lock (and can't be changed). That sentence is part of a paragraph, using CSS only (or a little Jquery if you have to). How can I always get the result reliably and across most devices!

Note: I have looked at questions such as this, but they do not cover the multiple sentences factor.

Without change:

THIS IS THE FIRST SENTENCE. And this is the second, as it is from the server.

Desired result:

This is the first sentence. And this is the second...

The CSS I tried was this, but it doesn't work with multiple sentences.

 p { text-transform: lowercase;}
   p:first-letter {text-transform:capitalize}

Even if you cannot change the source data, can you process it server-side before display? — Evan Davis, Mar 30 '14 at 15:26
@Mathletics It is coming from a MySQL table (PHP) so yes it could be changed - but this wouldn't be the ideal solution as it means changing multiple times as opposed to a single style class — tim.baker, Mar 30 '14 at 16:50

score 1 · Accepted Answer · answered Mar 30 '14 at 15:35

1

Seems like a problem for jQuery. Check this answer for the entire-element capitalization, then you can parse the first sentence by using something like:

var setval = $('#my_paragraph').html();
var firstSentence = setval.substring(0, setval.indexOf('.'));
firstSentence = toProperCase(firstSentence);
var theRest = setval.substring(setval.indexOf('.') + 1);
$('#my_paragraph').html(firstSentence + theRest);

answered Mar 30 '14 at 15:35

Anthony Atkinson

3,101
3
20
22

Sorry I was so focused on the code that I forgot to include the link to the answer with the toProperCase() function: http://stackoverflow.com/questions/15126466/transform-all-caps-to-proper-case-using-css-and-jquery – Anthony Atkinson Mar 30 '14 at 15:35
I believe that answer will give you a function that changes the sentence to "headline casing", so you may just want to set everything `toLowerCase()` then capitalize the first letter. Sorry about that. I'm sure you get the idea though. :) – Anthony Atkinson Mar 30 '14 at 15:38

gearsdigital · Answer 2 · 2014-03-30T15:57:03.017

This only a hotfix. If your output ever changes to something different, containing more then only a single dot or even other words starting with an uppercase character, this code will not provide the desired result.

Example: http://jsfiddle.net/Em2bD/

// grab your text
var firstSentenceText = $('p').text();

// extract the first sentence and make it all lowercase
var firstSentence = firstSentenceText.substr(0, firstSentenceText.indexOf('.')).toLowerCase();

// convert first char to uppercase
var result = firstSentenceText.charAt(0).toUpperCase() + firstSentence.substring(1);

// append the text to what ever you like and append the missing dot.
$('.result').text(result + '.');

score 0 · Answer 3 · answered Mar 30 '14 at 15:38

Something that comes in mind is by using a bit of jquery. You can find the first period(.) in the paragraph and then you can make the string before it lowercase(you can give it a span with a class/id and have the rules already on css file). You may have to do a bit of googling.

Change CAPS lock to Capitalize in CSS

3 Answers3