nikosd/using_fake_first-letter_selector_complete.html

## using_fake_first-letter_selector_complete.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>sIFR pseudo class</title>

  <link rel="stylesheet" href="all.css" type="text/css" media="all">
  <link rel="stylesheet" href="css/sifr.css" type="text/css">

  <script src="js/sifr.js" type="text/javascript"></script>
  <script src="js/sifr-debug.js" type="text/javascript"></script>
  <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
        var original_content = $('div#container h1 a').html();
        var with_fake_first_letter = '<span class="first-letter">'
                                   + original_content.slice(0,1)
                                   + '</span>'
                                   + original_content.slice(1,original_content.length - 1);
        $('div#container h1 a').html(with_fake_first_letter);


        /*****************************************************************************
        The sIFR configuration should typically go in `sifr-config.js`, but in order to
        keep the config file clean, and to give a quick overview, it's done here instead.
        *****************************************************************************/

        var paris_aifel = {
          src: 'flash/avi-parisaifel.swf'
          ,ratios: [6, 1.41, 9, 1.35, 15, 1.29, 21, 1.25, 22, 1.22, 27, 1.24, 29, 1.21, 34, 1.22, 41, 1.21, 45, 1.2, 46, 1.21, 59, 1.2, 68, 1.19, 69, 1.2, 96, 1.19, 97, 1.18, 102, 1.19, 103, 1.18, 107, 1.19, 108, 1.18, 112, 1.19, 114, 1.18, 116, 1.19, 120, 1.18, 121, 1.19, 1.18]
        };

        sIFR.activate(paris_aifel);

        sIFR.replace(paris_aifel, {
          selector: 'h1'
          ,css: [
            '.sIFR-root { text-align: center; font-weight: bold; }'
            ,'a { text-decoration: none; }'
            ,'a:link { color: #660000; }'
            ,'a:hover { color: #993333; }'
            ,'.first-letter { font-style: normal; color: #000000; }'
          ]
        });
    });
  </script>
</head>

<body>
<div id="container">

  <h1><a href="http://novemberborn.net/sifr3">The Gothic Times</a></h1>

  <div id="main">
    <div id="left">
      <div class="gutter">
        <h3 class="sidebox">Vanden Keere, Mrs. Eaves wed in Baskerville</h3>
        <p>ed wisi. Cras ornare sagittis risus. Cras nisl neque, nonummy et, condimentum a, adipiscing ut, sem. Duis scelerisque ullamcorper elit.</p>
        <p>Fusce aliquet aliquet sapien. Donec tincidunt eleifend odio. Morbi lorem. Pellentesque et massa elementum nisl commodo consectetuer. Sed eget quam. Nullam vulputate. Morbi eu enim.   Integer velit. Etiam enim neque, facilisis vulputate, fermentum a, lobortis vel, erat. Maecenas risus.</p>
        <p>In viverra. Ut ornare commodo urna. In hac habitasse platea dictumst. Donec dapibus, tellus sit amet varius malesuada, pede nisl interdum lacus, sed pretium tortor neque non sapien. Etiam eu dolor sed dui tristique suscipit. Sed iaculis metus quis nulla. Mauris egestas elit et orci. Nulla tincidunt vestibulum dui. In nec velit sit amet ante iaculis rhoncus. Donec arcu eros, egestas sed, dignissim a, rhoncus eget, dolor.</p>
      </div>
    </div>

    <div id="right">
      <h3>Helvetica, Arial in Grotesque Accident</h3>
      <p>Maecenas rhoncus diam id metus. Aenean lacinia lectus sit amet diam. Vestibulum urna ante, mollis vitae, sagittis sit amet, aliquam nec, dolor.</p>
      <p>Aenean ultricies tortor in nunc. Vestibulum quis lacus. Etiam lobortis gravida diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ut urna. Maecenas hendrerit elit at massa. Phasellus ultricies. Integer sollicitudin. Donec pellentesque eros sed leo.</p>
    </div>

    <div id="center">
      <h2 class="foo">Geneva Plan Signed</h2>
      <h4 class="subhead">new agreement creates Myriad opportunities for Fruitiger, sans-serifs</h4>

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac urna.
        Sed rutrum lectus eu orci. Nulla mattis erat. Fusce scelerisque hendrerit
        wisi. Aenean imperdiet imperdiet nunc. Morbi tincidunt, mi vel posuere varius,
        mi est nonummy leo, eu volutpat leo massa sit amet turpis. Curabitur tempor
        auctor quam. Morbi dapibus. Vestibulum eleifend. Etiam eleifend sapien nec
        dolor. Proin porttitor felis a orci. Curabitur pellentesque urna a turpis.</p>

      <h5 id="pullquote">&ldquo;The quest to abolish the serif <em>shall continue</em>.&rdquo;</h5>
      <p> Donec massa erat, vehicula ac, tincidunt vel, viverra nec, elit. Sed sodales,
        enim nec cursus auctor, dui ligula tincidunt augue, eget dapibus odio leo
        at dolor. Etiam tempor accumsan nisl. Nunc turpis mi, consectetuer pharetra,
        vulputate vitae, posuere id, lectus. Etiam auctor pharetra metus. Nullam
        eu urna ac diam ultricies ultrices. Vestibulum a ligula. Ut vitae turpis.
        Nullam tincidunt faucibus arcu. Praesent rhoncus arcu at mi. Duis ipsum
        mauris, ornare in, fringilla non, imperdiet et, quam.</p>
      <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames
        ac turpis egestas. Phasellus mollis. Nulla velit orci, elementum at, sodales
        eget, mollis eget, massa. Maecenas pellentesque vulputate diam. Proin lacinia.
        Donec vulputate vestibulum wisi. Donec cursus. Praesent varius semper nunc.
        Cras tortor pede, posuere iaculis, lobortis cursus, aliquet non, velit.
        Vestibulum mauris lectus, tristique non, sollicitudin non, commodo eget,
        quam. Nulla quis velit. Fusce iaculis aliquet augue. Nulla commodo sodales
        pede. Integer adipiscing tellus vel turpis. Sed egestas, diam ac auctor
        pretium, sapien libero venenatis orci, sit amet porta dolor mauris at odio.
        Aenean id sapien. Praesent rhoncus bibendum turpis. Nunc quis felis pellentesque
        nunc mollis dignissim. Phasellus vel ante.</p>
    </div>
  </div>
</div>
</body>
</html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

	<html lang="en">
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>sIFR pseudo class</title>

	<link rel="stylesheet" href="all.css" type="text/css" media="all">
	<link rel="stylesheet" href="css/sifr.css" type="text/css">

	<script src="js/sifr.js" type="text/javascript"></script>
	<script src="js/sifr-debug.js" type="text/javascript"></script>
	<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
	var original_content = $('div#container h1 a').html();
	var with_fake_first_letter = '<span class="first-letter">'
	+ original_content.slice(0,1)
	+ '</span>'
	+ original_content.slice(1,original_content.length - 1);
	$('div#container h1 a').html(with_fake_first_letter);


	/*****************************************************************************
	The sIFR configuration should typically go in `sifr-config.js`, but in order to
	keep the config file clean, and to give a quick overview, it's done here instead.
	*****************************************************************************/

	var paris_aifel = {
	src: 'flash/avi-parisaifel.swf'
	,ratios: [6, 1.41, 9, 1.35, 15, 1.29, 21, 1.25, 22, 1.22, 27, 1.24, 29, 1.21, 34, 1.22, 41, 1.21, 45, 1.2, 46, 1.21, 59, 1.2, 68, 1.19, 69, 1.2, 96, 1.19, 97, 1.18, 102, 1.19, 103, 1.18, 107, 1.19, 108, 1.18, 112, 1.19, 114, 1.18, 116, 1.19, 120, 1.18, 121, 1.19, 1.18]
	};

	sIFR.activate(paris_aifel);

	sIFR.replace(paris_aifel, {
	selector: 'h1'
	,css: [
	'.sIFR-root { text-align: center; font-weight: bold; }'
	,'a { text-decoration: none; }'
	,'a:link { color: #660000; }'
	,'a:hover { color: #993333; }'
	,'.first-letter { font-style: normal; color: #000000; }'
	]
	});
	});
	</script>
	</head>

	<body>
	<div id="container">

	<h1><a href="http://novemberborn.net/sifr3">The Gothic Times</a></h1>

	<div id="main">
	<div id="left">
	<div class="gutter">
	<h3 class="sidebox">Vanden Keere, Mrs. Eaves wed in Baskerville</h3>
	<p>ed wisi. Cras ornare sagittis risus. Cras nisl neque, nonummy et, condimentum a, adipiscing ut, sem. Duis scelerisque ullamcorper elit.</p>
	<p>Fusce aliquet aliquet sapien. Donec tincidunt eleifend odio. Morbi lorem. Pellentesque et massa elementum nisl commodo consectetuer. Sed eget quam. Nullam vulputate. Morbi eu enim. Integer velit. Etiam enim neque, facilisis vulputate, fermentum a, lobortis vel, erat. Maecenas risus.</p>
	<p>In viverra. Ut ornare commodo urna. In hac habitasse platea dictumst. Donec dapibus, tellus sit amet varius malesuada, pede nisl interdum lacus, sed pretium tortor neque non sapien. Etiam eu dolor sed dui tristique suscipit. Sed iaculis metus quis nulla. Mauris egestas elit et orci. Nulla tincidunt vestibulum dui. In nec velit sit amet ante iaculis rhoncus. Donec arcu eros, egestas sed, dignissim a, rhoncus eget, dolor.</p>
	</div>
	</div>

	<div id="right">
	<h3>Helvetica, Arial in Grotesque Accident</h3>
	<p>Maecenas rhoncus diam id metus. Aenean lacinia lectus sit amet diam. Vestibulum urna ante, mollis vitae, sagittis sit amet, aliquam nec, dolor.</p>
	<p>Aenean ultricies tortor in nunc. Vestibulum quis lacus. Etiam lobortis gravida diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ut urna. Maecenas hendrerit elit at massa. Phasellus ultricies. Integer sollicitudin. Donec pellentesque eros sed leo.</p>
	</div>

	<div id="center">
	<h2 class="foo">Geneva Plan Signed</h2>
	<h4 class="subhead">new agreement creates Myriad opportunities for Fruitiger, sans-serifs</h4>

	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac urna.
	Sed rutrum lectus eu orci. Nulla mattis erat. Fusce scelerisque hendrerit
	wisi. Aenean imperdiet imperdiet nunc. Morbi tincidunt, mi vel posuere varius,
	mi est nonummy leo, eu volutpat leo massa sit amet turpis. Curabitur tempor
	auctor quam. Morbi dapibus. Vestibulum eleifend. Etiam eleifend sapien nec
	dolor. Proin porttitor felis a orci. Curabitur pellentesque urna a turpis.</p>

	<h5 id="pullquote">“The quest to abolish the serif <em>shall continue</em>.”</h5>
	<p> Donec massa erat, vehicula ac, tincidunt vel, viverra nec, elit. Sed sodales,
	enim nec cursus auctor, dui ligula tincidunt augue, eget dapibus odio leo
	at dolor. Etiam tempor accumsan nisl. Nunc turpis mi, consectetuer pharetra,
	vulputate vitae, posuere id, lectus. Etiam auctor pharetra metus. Nullam
	eu urna ac diam ultricies ultrices. Vestibulum a ligula. Ut vitae turpis.
	Nullam tincidunt faucibus arcu. Praesent rhoncus arcu at mi. Duis ipsum
	mauris, ornare in, fringilla non, imperdiet et, quam.</p>
	<p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames
	ac turpis egestas. Phasellus mollis. Nulla velit orci, elementum at, sodales
	eget, mollis eget, massa. Maecenas pellentesque vulputate diam. Proin lacinia.
	Donec vulputate vestibulum wisi. Donec cursus. Praesent varius semper nunc.
	Cras tortor pede, posuere iaculis, lobortis cursus, aliquet non, velit.
	Vestibulum mauris lectus, tristique non, sollicitudin non, commodo eget,
	quam. Nulla quis velit. Fusce iaculis aliquet augue. Nulla commodo sodales
	pede. Integer adipiscing tellus vel turpis. Sed egestas, diam ac auctor
	pretium, sapien libero venenatis orci, sit amet porta dolor mauris at odio.
	Aenean id sapien. Praesent rhoncus bibendum turpis. Nunc quis felis pellentesque
	nunc mollis dignissim. Phasellus vel ante.</p>
	</div>
	</div>
	</div>
	</body>
	</html>