View Single Post
Old 09-14-2022, 06:28 PM   #65
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,363
Karma: 20212733
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
Quote:
Originally Posted by JSWolf View Post
You do need a text-transform: lowercase; if the letters are uppercase because they will stay that way without,

Try the code in the last code block. remove the text-transform and watch it no longer work.
And that is where the problem lies.

You assume that the phrase will be listed in ALL UPPERCASE...thus you are forcing them to lowercase so you can apply a small-caps. You can get the same result if you just applied a smaller font-size to the all caps.

small-caps does work when it is applied to a phrase that has upper and lower case letters. Telling people that they MUST ALWAYS apply text-transform:lowercase is not correct. Doing so will lose the ability to distinguish between capital and lowercase letters...they will all be the same size...

It is soooo much nicer and cleaner code to have this:
Code:
.sc {font-variant:small-caps}

<p class="sc">Now Is The Time For All Good Men To Come To The Aid Of Their Countries.</p>
than this:
Code:
.sc {
  font-variant: small-caps;
  text-transform: lowercase;
}

<p>N<span class="sc">OW</span> I<span class="sc">S</span> T
<span class="sc">HE</span> T<span class="sc">IME</span> F
<span class="sc">OR</span> A<span class="sc">LL</span> G
<span class="sc">OOD</span> M<span class="sc">EN</span> T
<span class="sc">O</span> C<span class="sc">OME</span> T
<span class="sc">O</span> T<span class="sc">HE</span> A
<span class="sc">ID</span> O<span class="sc">F</span> T
<span class="sc">HEIR</span> C<span class="sc">OUNTRIES</span>.</p>
don't you think??

And, yes Jon, the normal caveats about the app/device supporting the functionality still apply...


When I come across text that is written in ALL CAPS and I want to display them using small-caps, I take the little bit of extra time to convert the ALL CAPS to either all lowercase or, most often, mixed case I don't leave them as ALL CAPS and then do a double transform in the CSS and add all those additional <span>s....it's just cleaner coding and makes the html easily readable.

As always, you can do it however you want to. I just have to interrupt when you say people MUST do it your way.

Cheers,

Last edited by Turtle91; 09-14-2022 at 06:31 PM.
Turtle91 is offline   Reply With Quote