SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2005
    Location
    Osoyoos BC Canada
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Css case convert... Is it possible?

    I've been asked to rewrite, and place on a web site, a set of hundreds of menus, which were written many years ago in COBOL

    At some point they had been run through some conversion process and exported to word and then saved as htm.

    By judicious use of Dreamwever's global find and replace and several hours of hunting rogue tags I now have a set of clean .html, BUT about half the menus were written totally in upper case. (BTW don't try to run dreamweaver's find and replace on a file of 10s of thousands of lines, where word has added the same garbage to each and every line. It crashes dw totally, I found out the hard way with unsaved files all going when I had to use the 3 finger salute. I finally broke the file up into separate files, each of about 1000 lines and ran find and replace on each 'file' one at time, then cut and pasted the finished files back together. )

    I thought that CSS had a set of case conversion directives, so I could just use them to, for example, say that everything p should be displayed as first letter uppercase, rest lower, but I can't see how to do that.

    Before I start digging through my php regular expressions memories which are both limited and rusty, can this be done with CSS?

    Thanks!

  2. #2
    Non-Member lostseed's Avatar
    Join Date
    Sep 2005
    Location
    Zurconion Soon!
    Posts
    1,549
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    p {text-transform: capitalize};
    or just body {text-transform: capitalize};

    You can only do this: ( i thought there were others, but css isn't smart with sentences I don't think)

    Possible Values:

    capitalize
    Each word in a text starts with a capital letter

    uppercase
    Defines only capital letters

    lowercase
    Defines no capital letters, only lower case letters

  3. #3
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If they're all uppercase, and you only want the first letter capped up, you may want to do something like:

    Code:
    p { text-transform: lowercase; }
    p:first-letter { text-transform: uppercase; }

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2005
    Location
    Osoyoos BC Canada
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I understand now that I can force all the text in a <p>, even if in uppercase, to lowercase and then put the first letter of the <p> in uppercase. But in a <p>aragraph there are full stops, and after a full stop there should be another uppercase letter.

    CSS seems to fall down at that point of grammar so I still have to manually search for every . in a <p> in hundreds of menus and then add a class to the first character following the "." only that will cause that character as well to be in uppercase.

    I can search and replace for a "." and replace it with a "." and the opening tag for a class that will be uppercase, but I still can't automatically (in dreamweaver at least (I may be wrong, dw has some funky extensions) then skip a character and close the class. Thus ensuring that only the first character after a full stop is in uppercase.

    The CSS text-transform and "pseudo class" of p:first-letter seems to be aimed at placing a "fancy" character at the start of a paragraph, like the illuminated manuscripts of old. It actually seems to be "b***er all" use in the real world!

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS is for presentation only. Correct grammar is a matter of content, ie, it's not CSS's job.

  6. #6
    SitePoint Zealot
    Join Date
    Jul 2005
    Location
    Osoyoos BC Canada
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again Tyssen.

    I added this to my CSS:

    Code:
    p		 {text-transform:lowercase;}		
    		
    p:first-letter { text-transform: uppercase; }
    
    .caps          {text-transform:uppercase;}
    Which as expected changed the whole of a <p> aragraph into lowercase wth the first letter in uppercase.

    Then I ran find and replace to find "." and replace with ". <span class="caps">" which did half the job!

    Then rather than go through the thousands of menu lines in the origional flat file and close each span after the first letter, I did find and replace 26 times (once for each possible letter of the alphabet), for example find ". <span class="caps">"A" replace with ". <span class="caps">"A</span>"

    This fixed everything but the fact that <span class="caps"> had also been placed after the full stop that finished a paragraph.

    Since that was followed with a </p> I then finally found ". <span class="caps">"</p>" and replaced with" .</>"

    Done!

  7. #7
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,249
    Mentioned
    240 Post(s)
    Tagged
    1 Thread(s)
    To be honest, I think that although that might work, you'd be better off running a script that changes the grammar properly else you would be adding too much needless code just for the sake of an uppercase.

  8. #8
    SitePoint Zealot
    Join Date
    Jul 2005
    Location
    Osoyoos BC Canada
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Molona,

    I agree with you about that, I need to grab a manual on regular expressions and get some 'brain ache'!


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
  •