CSS for Sentence Case

silvine · 23-10-2013 09:22PM #1

Hi,
I'd like to change the case of my H1-H6 to sentence case from title case.

Is there a way of quickly going this using CSS?

Graham · 23-10-2013 09:49PM

I think your options are

text-transform

uppercase
lowercase
capitalize

[HTML]h2 {text-transform:capitalize;}[/HTML]

Talisman · 24-10-2013 03:20PM

Your best option is to use the text-transform CSS property and change the text to lowercase. Add a Javascript function to capitalise the first letter of the string.

silvine · 24-10-2013 08:25PM

Do you know where I can find this kind of Javascript function?

tricky D · 24-10-2013 08:37PM

Have you tried Graham's solution. I can't see why that wouldn't work.

Graham · 24-10-2013 08:39PM

I don't think any of my suggestions will case for sentences.

Might be easier to change the source data.

silvine · 24-10-2013 08:44PM

That's a big job, I'm looking into hiring someone to code a JS function on oDesk. I tried the various CSS techniques but they don't work.

Will this work?

Graham · 24-10-2013 08:46PM

Is the data all in one database/ field? Quick php script might be able to do the lot in a single pass.

tricky D · 24-10-2013 09:00PM

What about text transform the whole Hx, then apply uppercase with :first-letter pseudo-element.

eg.

h2 {text-transform: lowercase;}
h2:first-letter {text-transform: uppercase;}

Test in browsers in case an !important is needed for the 2nd line.

silvine · 24-10-2013 09:23PM

Close enough, I'll play around with this. Thanks

Talisman · 25-10-2013 05:48PM

silvine wrote: »

Do you know where I can find this kind of Javascript function?

Something like this:

function sentenceCase(s){
    return s.charAt(0).toUpperCase() + s.substr(1).toLowerCase();
}

There are a few corner cases that I can immediately think of:
1 - The code assumes the first character is a letter!
2 - What if the text contains the word 'I'?

$('h1').each(function(){
    var sc = sentenceCase($(this).html());
    $(this).html(sc);  
});

SweetCaliber · 25-10-2013 08:09PM

You can also use:

h1, h2, h3, h4, h5, h6 {
      text-transform: capitalize;
}

Or as others said, if you only want the first letter to be capitalized:

h1:first-letter {
      text-transform: capitalize;
}

Edit: I just noticed what I said was already mentioned above, my bad.

DonkeyStyle \o/ · 02-11-2013 04:23PM

Talisman wrote: »

There are a few corner cases that I can immediately think of:
1 - The code assumes the first character is a letter!
2 - What if the text contains the word 'I'?

Yeah loads more too... a person's name, the title of a book, acronyms.
I'd say either find a font that looks nice in all-caps and run with it, or edit the source by hand. Maybe running it through a basic script first, then proof-reading for the edge cases.
Or you could crowd-source it, dump a list of your titles onto a forum known for grammar nazis and wait for someone to correct the entire list out of spite.

silvine · 02-11-2013 08:11PM

Nice!

CSS for Sentence Case

Comments