View Single Post
Old 05-25-2009, 06:08 PM   #28
pdurrant
The Grand Mouse 高貴的老鼠
pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.
 
pdurrant's Avatar
 
Posts: 71,484
Karma: 305784726
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
Here's a way to get drop cap and smallcaps on the first paragraph after a chapter heading.

Note that the drop caps style has been tweaked to place the drop cap nicely - this should work the same for almost any font. Also note that the reduction in size for the smallcaps also applied to the drop cap - without the reduction in size the font-size specified would be smaller.

I hope this gives some useful ideas to people.

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>
<title>Smallcaps  Sample</title>
<style type="text/css">
h2.chapter { text-indent: 0; text-align: center; font-size:1em; font-weight:bold; margin-bottom: 2 em; margin-top: 4 em; page-break-before: always }
h2.chapter+p {text-indent: 0em; margin-bottom: 0em; margin-top: 0em }
h2.chapter+p:first-letter {font-size: 360%; float: left; margin-top: -0.15em; margin-bottom: -0.5em; padding-right: 0.1em;}
p {text-indent: 1em; margin-bottom: 0em; margin-top: 0em;  }
span.firstwords {text-transform:uppercase; font-size: 0.75em}
</style>
</head>
<body>
<h2 class="chapter">Chapter 1</h2>
<p><span class="firstwords">First paragraph</span> in the chapter, showing the the first two words are in smallcaps, with the first letter made into a drop cap, mostly done with CSS on a plain paragraph, automatically selected because it comes immediately after a h2 of class chapter. The text-transform needs a separate span - there's no way to specify first two words.</p>
<p>Second paragraph, automatically reverting to normal.</p>
</body>
</html>
pdurrant is offline   Reply With Quote