User:Acunning40/PP

From DPWiki
Jump to navigation Jump to search

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:

Dropcap FF.png

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

Dropcap FFtransp.png

With transparency, in Internet Explorer:

Dropcap IEtransp.png


Phonetic symbols: English Past and Present

Possible Transcriptions

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


Links