Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi there,
There is an issue with role permissions that is being worked on at the moment.
If you are having trouble with access or permissions on regional forums please post here to get access: https://www.boards.ie/discussion/2058365403/you-do-not-have-permission-for-that#latest

CSS for Sentence Case

  • 23-10-2013 9:22pm
    #1
    Registered Users, Registered Users 2 Posts: 3,132 ✭✭✭


    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?


Comments

  • Moderators, Society & Culture Moderators Posts: 17,643 Mod ✭✭✭✭Graham


    I think your options are

    text-transform

    uppercase
    lowercase
    capitalize

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


  • Registered Users, Registered Users 2 Posts: 6,289 ✭✭✭Talisman


    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.


  • Registered Users, Registered Users 2 Posts: 3,132 ✭✭✭silvine


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


  • Closed Accounts Posts: 9,700 ✭✭✭tricky D


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


  • Moderators, Society & Culture Moderators Posts: 17,643 Mod ✭✭✭✭Graham


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

    Might be easier to change the source data.


  • Advertisement
  • Registered Users, Registered Users 2 Posts: 3,132 ✭✭✭silvine


    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?


  • Moderators, Society & Culture Moderators Posts: 17,643 Mod ✭✭✭✭Graham


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


  • Closed Accounts Posts: 9,700 ✭✭✭tricky D


    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.


  • Registered Users, Registered Users 2 Posts: 3,132 ✭✭✭silvine


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


  • Registered Users, Registered Users 2 Posts: 6,289 ✭✭✭Talisman


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


  • Advertisement
  • Registered Users, Registered Users 2 Posts: 2,483 ✭✭✭SweetCaliber


    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.


  • Closed Accounts Posts: 7,145 ✭✭✭DonkeyStyle \o/


    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.


  • Registered Users, Registered Users 2 Posts: 3,132 ✭✭✭silvine


    Nice!


Advertisement