Quote:
Originally Posted by Quoth
Small Caps is a decorative feature for paragraph lead in. If you are putting the text of a telegram the source should be all caps. Small caps isn't needed and shouldn't be used for complete paragraphs. It's an alternate ancient style for lower case. Lower case (or Minuscule) was an innovation about 1400 years ago. The Romans only had upper case. Some writing systems just have a printed version and a handwritten version.
The SMALL CAPS is a decorative feature and shouldn't be used just to make a paragraph all capitalised. Change the source to do that. It doesn't affect capitals because they should be bigger normally.
|
Quote:
Originally Posted by Quoth
Another use of small caps is specified by some style guides, mainly USA, for initialisms such as FM, NATO, BC, BCE, AD, CE, AM, PM. But apart from am and pm those are all usually typed in upper-case in the source, so not sure that CSS small-caps is useful?
The am and pm have many styles.
|
It’s pretty cool learning about the origins of small-caps, and I agree that I use it primarily for the opening line in the first paragraph of a new chapter:
Code:
p.first::first-line {font-variant:small-caps; font-size:1.15em}
But you can use the look anywhere you wish (banners, signs, grave stones, AM/PM, etc.)
Spoiler:
Some examples of Small Caps
Code:
<body>
<hr/>
<p class="sc">Rest In Peace<span>Cousin Huet</span>we all know<br/>you didn't do it</p>
<hr/>
<p class="sc">Here Lies<span>Good Old Fred</span>a great big rock<br/>fell on his head<br/><br/>R.I.P.</p>
<hr/>
<p class="sc">Hear Ye! Hear Ye!<span class="u">Cascading Style Class</span>Start: 12:30 p.m.<br/>
Where: Mobile Read Forums<br/><br/>stand ready to be amazed!</p>
<hr/>
</body>
Code:
hr {
border: none;
margin: 1em auto;
height: 1.5em;
background: transparent url("../Images/FleurDeLis.svg") no-repeat center;
background-size: auto 100%;
overflow: hidden;
page-break-inside: avoid;
break-inside: avoid;
}
.sc {
font-variant: small-caps;
text-align: center;
text-indent: 0;
}
.sc span {
display: block;
font-size: 1.1em;
margin: .3em 0;
}
.u {
text-decoration: underline;
}
Headstones courtesy of Disney's Haunted Mansion
Quote:
Originally Posted by JSWolf
...
Smallcaps only work if the letters are lowercase...
|
That's not quite true...and to be a little nit-picky... Smallcaps work on uppercase letters as well... it just doesn't appear to change anything because they are already uppercase letters. lol
Smallcaps doesn't
fail on uppercase letters. It tells the reading system/browser to use an SC font (if available) to the
entire phrase. It also ensures the uppercase (capital) letters are larger than the smallcaps (lowercase) letters. You can also apply other styling, like font-size, that applies the appropriate relative size change to ALL the letters.
Quote:
Originally Posted by JSWolf
@Turtle91 your samples are correct. The all uppercase is all uppercase. The all lowercase is in smallcaps. The text with the mixed case is both uppercase and smallcaps. That why I put text-transform: lowercase; in the CSS because if the text is originally using a simulated smallcaps, it's going to be all uppercase.
|
Some publishers might use the technique of all uppercase with a small font size, it doesn't follow that they ALL do. When fixing a book I correct those phrases to use the proper mixed cases, then apply the small-caps. Even IF all the letters are uppercase...isn't that what you are trying to do with your small-caps?? All you would really need to do is change the font-size....
Isn’t the point of small-caps to
differentiate between uppercase and lowercase letters while displaying all the letters using the uppercase glyph??
You mistakenly think that all letters MUST be the same size. (Definition -
here and
here )
If you were correct then you wouldn't need
font-variant:small-caps at all - you could easily create that style with:
Code:
.small {text-transform:uppercase; font-size: .7em}
If you wanted to differentiate between capitals (eg. proper name) and lower case using your technique, you would need to use multiple ugly spans.
Code:
<p>H<span class="small">i</span>!
M<span class="small">y name is</span>
D<span class="small">ion the</span>
B<span class="small">enificent</span>.
N<span class="small">ice to meet you</span>. </p>
OR … you could just use small-caps the way it was designed:
Code:
.sc {font-variant:small-caps}
<p class="sc">Hi! My name is Dion the Beneficent. Nice to meet you.</p>
It automatically changes the lowercase characters to the uppercase equivalent with a smaller font size.
You, of course, can do it however you want to. I was simply pointing out that applying
text-transform:lowercase before
font-variant:small-caps is defeating the purpose of small-caps.
edit: Sorry for the edits...I was trying to figure out how to insert an image inside the spoiler tags...got it working!