SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot Bootfit's Avatar
    Join Date
    Jun 2005
    Location
    Liverpool, UK
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Larger first letters in uppercase...

    Hello all,

    is there a tag I can add that I can add that turns all the copy into Uppercase (I can do that bit) but makes the first letter of each word a few % larger than the rest of the text?

    eg:

    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG

    into

    THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG

    Cheers all

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    I don't think there's an easy CSS way to do it, but you could do it like this if there's not to much text to apply this to:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Experiment</title>
    	
    <style type="text/css" media="all">
    p {font-weight: bold;}
    p b {font-size: 130%;}
    </style>
    	
    </head>
    
    <body>
    <p><b>T</b>HE <b>Q</b>UICK <b>B</b>ROWN <b>D</b>OG <b>J</b>UMPS <b>O</b>VER <b>T</b>HE <b>L</b>AZY <b>F</b>OX</p>
    
    </body>
    </html>
    Of course, the text doesn't have to be typed in capitals, as text-transform: uppercase could be used instead.

  3. #3
    SitePoint Zealot Bootfit's Avatar
    Join Date
    Jun 2005
    Location
    Liverpool, UK
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm... don't think that will work as the text will be dynamic and dragged out of a database...

    Thanks anyway though.

  4. #4
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    You can use PHP to put those tags in.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    You can do it like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    p{
        text-transform:capitalize;
        font-variant:small-caps;
        font-weight:bold;
    }
    
    </style>
    </head>
    
    <body>
    <p>Testing out this Text</p>
    </body>
    </html>

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Blow me down if I didn't try that. O well, thanks Paul!

  7. #7
    SitePoint Zealot Bootfit's Avatar
    Join Date
    Jun 2005
    Location
    Liverpool, UK
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You can do it like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    p{
        text-transform:capitalize;
        font-variant:small-caps;
        font-weight:bold;
    }
    
    </style>
    </head>
    
    <body>
    <p>Testing out this Text</p>
    </body>
    </html>
    Blimey - that is spot on!

    Cheers Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •