in css what is the difference between font-variant:small-caps; and text-transform:capitalize;
views:
174answers:
2
+2
A:
Uppercase is text consisting of normal uppercase characters:
UPPERCASE
Small-caps is like so (taken from here):
Wikipedia article on Small caps
text-transform is buggy in some browsers: See here.
For example:
In Internet Explorer for Windows versions up to and including 7, the values lowercase and uppercase behave like none if the font-variant property is set to small-caps.
Pekka
2010-03-13 11:24:08
then what is text-transform:capitalize;
metal-gear-solid
2010-03-13 11:25:58
http://www.w3schools.com/Css/pr_text_text-transform.asp Transforms the first character of each word to uppercase
Pekka
2010-03-13 11:26:44
i'm also looking at same . see on W3cschools 1. capitalize is Transforms the first character of each word to uppercase and 2. small-caps is The browser displays a small-caps font . aren't both same thing
metal-gear-solid
2010-03-13 11:29:33
@jitendra no, small-caps is *all* characters uppercase. Capitalize just does this: `Hello World This Is Capitalized Text`
Pekka
2010-03-13 11:30:32
sorry i was confused in question i wrote uppercase in place of capitalize
metal-gear-solid
2010-03-13 11:31:45
"small-caps is all characters uppercase" but not in ur example image
metal-gear-solid
2010-03-13 11:33:21
@jitendra the characters are all uppercase. Look closely. It's just that the capitals (the uppercase characters) are larger than the normal characters.
Pekka
2010-03-13 11:34:35
A:
if you use text-transform: capitalize the word "stack overflow" will become "Stack Overflow", only the 1st letter of each word gets CAPS.
but if you use font-variant: small-caps the word "stack overflow" becomes "STACK OVERFLOW" but the height of the type-face will match the height of the lowercase letters before the CSS style was applied. so all CAPS but smaller.
and text-transform: uppercase makes it all CAPS too but but the typeface stays the same size, so uppercase typeface will be bigger that small-caps
pixeltocode
2010-03-13 12:20:48
I think font-variant:small-caps is like a mix of text-transform: capitalize and text-transform: uppercase
metal-gear-solid
2010-03-13 13:11:54
not quite. uppercase makes all letters CAPS. capitalize makes only the first letters of each word CAPS. small-caps makes all CAPS but the height of the CAPS letters will be equal to the height of the non-CAPS letters
pixeltocode
2010-03-13 15:46:37