User:Acunning40/PP

Drop caps: How Salvator Won

Markup

CSS:

   span.cap {display:none;}

   .dropcapimage {position: absolute; float: left;}

   .space1   {float: left;
              margin: 0em 3.25em 0em 0em;
              padding: 0;}

   .space2   {float: left;
              clear: left;
              margin: 0em 3.25em 0em 0em;
              padding: 0;}

   .T  {background: url("images/T2.png") no-repeat top left;
        width: 65px; height: 134px; margin-top: -15px;}

   .T1 {width: 65px; height: 74px; margin-top: -15px;}

   .T2 {width: 39px; height: 60px;}

   .poem             {margin-left:10%; margin-right:10%; text-align: left;}
   .poem br          {display: none;}
   .poem .stanza     {margin: 1em 0em 1em 0em;}
   .poem span.i0     {display: block; margin-left: 0em; padding-left: 3em; text-indent: -3em;}

HTML:

<div class="poem">

<span class="space1 T1">&nbsp;</span>
<span class="space2 T2">&nbsp;</span>
<span class="dropcapimage T">&nbsp;</span>

<div class="stanza">
<span class="i0"><span class="cap">T</span>he gate was thrown open, I rode out alone,<br /></span>
etc. </div></div>

Display

In Firefox and Opera this puts the image ("dropcapimage T") over the other two spans, but in IE it doesn't. Also, in Firefox and Opera it only works if the image is transparent. Even though it's a background, the white part of the image still obscures the text that's to the right of "space2". When the image is transparent then the text is visible.

Without transparency, in Firefox:

With transparency, in Firefox (this is the intended appearance):

With transparency, in Internet Explorer:

Phonetic symbols: English Past and Present

• 230.png

Possible Transcriptions

Image	Meaning (IPA)	Unicode	Latin-1	ASCII
	[i]	ɹ̇ (0272 & 0307) [i] [ee]	[i] [ee]	[i] [ee]
	[eɪ]	ɛ (025B) ε (03B5)	[e]	[e]
	[oʊ]	[o]	[o]	[o]
	[θ]	θ	þ	[th]
	[ð]	ð	ð	[dh]
	[ŋ]	ŋ (014B)	[ng]	[ng]
	question	¿	¿	[?]

Links

• forumtopic:21640
• a similar phonetic alphabet