Forcing Title Case with stylesheet for UPPERCASE text

Discussion in 'CSS' started by setanta_, Jul 12, 2007.

0
  1. #1
    Does anyone have an idea how one might force UPPERCASE text into "Title Case" or in other words force the characters aftter the initial cap into lower case?

    For example: JOHN SMITH --> John Smith

    Any help would be appreciated.

    Thank you.
     
    setanta_, Jul 12, 2007 IP
  2. jmhyer123

    jmhyer123 Peon

    Messages:
    542
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I don't think you can, you can do all uppercase or all lowercase but I don't think you can unless you gave the first letter a <span> or id and the rest of the word a different span or id.
     
    jmhyer123, Jul 12, 2007 IP
  3. PHPGator

    PHPGator Banned

    Messages:
    4,437
    Likes Received:
    133
    Best Answers:
    0
    Trophy Points:
    260
    #3
    You could probably use a cross of php and css to do it.

    You could use the explode function to break apart a string.

    Count how many words are in the array (so you do it to all words)

    Then as jmhyer mentioned, you would have to turn around and add in <span class="something"> tags for the first character of each word. Span the rest to force lowercase.

    Seems like a lot of work for Title case though. ;)
     
    PHPGator, Jul 12, 2007 IP
  4. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Why is the text in all upper-case anyway? As it is, without using extra markup, the best you can do is to either resort to JavaScript, or to use a server-side script to re-write the string.
     
    Dan Schulz, Jul 12, 2007 IP
  5. setanta_

    setanta_ Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thank you all for your suggestions. Unfortunately the gist of the advice is what I feared- it is not possible to control this behavior with CSS.

    Just a little background if you're interested: I am taking the results from a database query and formatting the rendered display in a web application. The information in the database is stored as upper-case. However some of the users want the display to be in title-case. I was looking for a simple solution to customize the style without adding a lot of processing time building the result set (which consists of thousands of lines).

    It seems to me this is just the sort of thing that CSS was meant for, but apparently this is just a blind-spot for now.

    Thanks again.

    -S.
     
    setanta_, Jul 12, 2007 IP
  6. kimberlybarryd

    kimberlybarryd Peon

    Messages:
    45
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Maybe this is what you want
    p {
    font-variant: small-caps
    }
     
    kimberlybarryd, Jul 12, 2007 IP
  7. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #7
    That won't work, as all the letters have already been capitalized. They'll just be smaller, but still all capitalized. small-caps works best when you have regular text with a mixture of upper and lower case characters.
     
    Dan Schulz, Jul 12, 2007 IP
  8. balaks

    balaks Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Hi,
    I had the similer need. I used 'text-transform: capitalize;' and it worked. Hope this is usefull.

    thanks
    Balks
     
    balaks, Jul 25, 2007 IP
  9. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #9
    That would do it.
     
    Dan Schulz, Jul 25, 2007 IP
  10. veckd

    veckd Peon

    Messages:
    1,065
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    0
    #10
    ahh you beat me to it
     
    veckd, Jul 26, 2007 IP