dropcaps [was: Re: Pseudo-elements]

by "Lady Wistfulee" <wistfulee(at)hawaii.rr.com>

Date:	Thu, 4 Nov 1999 12:05:28 -1000
To:	<hwg-style(at)hwg.org>
References:
	todo: View Thread, Original

Hi,
Searching through my archives I found this; paste it into any editor & =
have fun playing with it. Hope it helps:

<html>
<head>
<style>

     BODY {=20
  font-size:12pt;
 =20
 }
 =20
 .dropcap {
  color:blue;
  font-size:24pt;
  font-variant:small-caps;
  float:left;
  width:20pt;
  vertical-align:text-top;
  border-width:0;
 =20
 }

</style>
<title>Dropcap Example</title>
</head>

<body>

<p>Here is a small example of a dropcap in action...fully customizable =
including border
&amp; background should you choose.</p>

<p><span CLASS=3D"dropcap">H</span>ello everyone!<br>
here you put more stuff to say<br>
and then even more stuff to say<br>
and if you want to get wordy put even more stuff to say!</p>
</body>
</html>

Good luck!
----- Original Message -----=20
From: Eric A. Meyer <eam3(at)po.cwru.edu>
To: <hwg-style(at)hwg.org>
Sent: Thursday, November 04, 1999 6:43 AM
Subject: Re: Pseudo-elements


>I'm trying to use a pseudo-element to produce a drop cap.
>
>>From =
http://www.w3.org/TR/REC-CSS1-961217#the-first-letter-pseudo-element,
>I got the following code for the CSS file.
>
>P.initial  { font-size: 12pt; line-height: 12pt }
>P.initial:first-letter { font-size: 200%; float: left }
>
>and
>
>&lt;P class=3D"initial"&gt;
>
>for the HTML.
>
>This won't work in either NN 4.6 or IE 4.0. Can anyone see an error, or
>help me figure out why?

   Because Netscape doesn't support :first-letter any more the MSIE =
does.
Check out the information here:

   http://www.webreview.com/pub/guides/style/mastergrid.html

If you want to see first-letter effects in action, you could download =
the
latest Gecko build from http://developer.netscape.com/ [1], but be =
warned
that it's alpha software and could very well eat your hard drive, =
explode
your monitor, and infect your motherboard with the Good Times virus.


[1] Specifically, =
http://developer.netscape.com/software/communicator/ngl/

--
Eric A. Meyer  -  eam3(at)po.cwru.edu  -  =
http://www.cwru.edu/home/eam3.html
 Editor, Style Sheets Reference Guide  http://style.webreview.com/
 Coordinator, CSS1 Test Suite          http://www.w3.org/Style/CSS/Test/
 Member, WSP CSS Technical Committee   http://www.webstandards.org/

HWG hwg-style mailing list archives, maintained by Webmasters @ IWA